01 iš 10
Sukurkite CSS stiliaus lapą
Taip pat, kaip mes sukūrėme atskirą teksto failą HTML, sukursite CSS tekstinį failą. Jei jums reikalingi vaizdiniai šio proceso metu, žr. Pirmą pamoką. Čia yra žingsniai, skirti CSS stiliaus lapui sukurti "Notepad":
- Norėdami gauti tuščią langą, pasirinkite "Failas"> "Naujas" Notepad
- Išsaugokite failą kaip CSS spustelėję File
- Eikite į my_website aplanką kietajame diske
- Pakeiskite "Išsaugoti kaip tipą:" į "Visi failai"
- Pavadinkite savo failą "styles.css" (palikite kabutes) ir spustelėkite Išsaugoti
02 iš 10
Susieti CSS stiliaus lapą su savo HTML
Kai turėsite savo svetainės stiliaus lapą, turėsite susieti jį su pačiu tinklalapiu. Norėdami tai padaryti, naudojate nuorodų žymą. Įdėkite šią nuorodų žymą bet kurioje jūsų "pets.htm" dokumento
žymių taške:03 iš 10
Nustatykite puslapio maržą
Kai rašote XHTML skirtingoms naršyklėms, vienas dalykas, kurį sužinosite, yra tas, kad jie, atrodo, turi skirtingas paraštes ir taisykles, kaip jas rodyti. Daugelyje naršyklių geriausias būdas įsitikinti, kad jūsų svetainė yra vienoda daugelyje naršyklių, yra tai, kad naršyklės pasirinkimas neleidžia dalykų, kaip numatytoji parinktis.
Aš norėčiau pradėti puslapius viršutiniame kairiajame kampe, be papildomo užpildo ar marginą aplink tekstą. Net jei aš ketinu pakelti turinį, aš nustatysiu maržas iki nulio, kad aš pradedu nuo tos pačios tuščios skalūno. Norėdami tai padaryti, pridėkite toliau nurodytą dokumentą styles.css:
html, body {
marža: 0 px;
padding: 0px;
sienos: 0px;
kairėje: 0 px;
viršuje: 0 px;
}
04 iš 10
Pakeiskite šriftą puslapyje
Šriftai dažnai yra pirmas dalykas, kurį norite pakeisti tinklalapyje. Numatytasis šriftas tinklalapyje gali būti negraži ir iš tikrųjų yra pats interneto naršyklė, taigi, jei nenurodysite šrifto, tikrai nežinote, koks bus jūsų puslapis.
Paprastai jūs pakeisite šriftą pastraipose arba kartais visam dokumentui. Šioje svetainėje mes nustatysime šriftą antraštėje ir pastraipos lygyje. Į dokumentą styles.css pridėkite toliau nurodytą informaciją:
p, li {
šriftas: 1em Arial, Helvetica, sans-serif;
}
h1 {
šriftas: 2em Arial, Helvetica, sans-serif;
}
h2 {
šriftas: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
šriftas: 1.25em Arial, Helvetica, sans-serif;
}
Aš pradėjau nuo 1em kaip bazinis dydis pastraipoms ir sąrašo elementams, tada naudojau jį, norėdamas nustatyti savo antraščių dydį. Aš neketinu naudoti antraštės, gilesnės nei h4, bet jei planuojate, kad norėsite ją taip pat stilizuoti.
05 iš 10
Padarykite savo nuorodas įdomiau
Nuorodos pagal nutylėjimą yra atitinkamai mėlynos ir violetinės, o ne lankomos ir lankomos nuorodos. Nors tai yra standartas, jis gali neatitikti jūsų puslapių spalvų schemos, todėl pakeiskime. Į savo stilių.css failą pridėkite:
nuoroda {
font-family: Arial, Helvetica, sans-serif;
spalva: # FF9900;
teksto apdaila: pabrėžti;
}
a: aplankė {
spalva: # FFCC66;
}
a: užveskite {
fonas: #FFFFCC;
šrifto svoris: paryškintas;
}
Aš nustatiau tris nuorodų stilius, a: nuorodą kaip numatytąjį, a: aplankė, kai lankėtės, keičia spalvą ir a: užveskite pelę. Naudodamiesi "Hover", turiu nuorodą gauti fono spalvą ir paryškinti, kad yra nuoroda, kurią reikia spustelėti.
06 iš 10
Stiliavimo navigacijos skyrius
Kadangi mes pirmiausia įdėkite navigacijos (id = "nav") skirsnį į HTML, pamokykime jį pirmiausia. Turime nurodyti, kiek tai turėtų būti platesni ir suteikti didesnę maržą dešinėje, kad pagrindinis tekstas nepasikartotų. Aš taip pat įdėjau sieną aplink ją.
Į savo styles.css dokumentą pridėkite šį CSS:
#nav {
plotis: 225px;
paraštė dešinėn: 15px;
sienelė: vidutinė kieta # 000000;
}
#nav li {
sąrašo stilius: nėra;
}
.footer {
šrifto dydis: .75em;
aišku: abu;
plotis: 100%;
text-align: centras;
}
Sąrašo stiliaus savybė sukuria navigacijos skyriaus viduje esantį sąrašą, kuriame nėra jokių kulkų ar skaičių, o ".footer" stilių autorių teisių skyrius turi būti mažesnis ir sutelktas į skyrių.
07 iš 10
Pagrindinio skyriaus padėtis
Nustatydami savo pagrindinį skyrių su absoliučia pozicija, galite būti tikri, kad jis išliks toje vietoje, kur norite, kad jis liktų jūsų tinklalapyje. Aš padariau savo 800 piks. Pločio, kad pritvirtintume didesnius monitorius, tačiau jei turite mažesnį monitorių, galbūt norėsite tai padaryti siaurai.
Įdėkite šį dokumentą į savo styles.css:
#main {
plotis: 800px;
viršuje: 0 px;
pozicija: absoliutus;
kairėje: 250 pikselių;
}
08 iš 10
Stiliaus jūsų pastraipos
Kadangi jau parašiau pastraipos šriftą, norėjau, kad kiekviena pastraipa būtų šiek tiek papildoma "spraga", kad ji atrodytų geriau. Aš tai padariau, uždėdamas viršutinę pusę, kuri paryškino šią pastraipą daugiau nei vien tik vaizdas.
Įdėkite šį dokumentą į savo styles.css:
.topline {
border-top: storas kietas # FFCC00;
}
Aš nusprendžiau tai padaryti kaip klasę, vadinamą "topline", o ne tik apibrėžti visus punktus tokiu būdu. Tokiu būdu, jei aš nuspręsiu, kad aš noriu turėti pastraipą be viršutinės geltonos linijos, aš galiu tiesiog palikti klasę = "topline", esančioje žymos pastraipoje, ir ji neturės viršutinės ribos.
09 iš 10
Vaizdų stilizavimas
Paveikslėliai paprastai turi sieną aplink juos, tai ne visada matoma, jei vaizdas nėra nuoroda, bet man patinka turėti klasę CSS stiliaus lentelėje, kuri automatiškai išjungia sieną. Dėl šios lentelės stilių sukūriau "noborder" klasę, o dauguma dokumento vaizdų yra šios klasės dalis.
Kita speciali šių vaizdų dalis yra jų vieta puslapyje. Aš norėjau, kad jie būtų dalis pastraipoje, kurioje jie buvo, be lentelių, kad jas suderintų. Paprasčiausias būdas tai padaryti - naudoti "float" CSS nuosavybę.
Įdėkite šį dokumentą į savo styles.css:
#main img {
plūdė: kairė;
marža-dešinė: 5 px;
maržos apačia: 15 px;
}
.noborder {
sienos: 0px nė vienas;
}
Kaip matote, ant paveikslėlių taip pat yra nustatytos paraščių savybės, kad būtų užtikrinta, kad jie nebus sugadinti prieš išplėstą tekstą, kuris šalia jų yra paragrafuose.
10 iš 10
Dabar pažvelkite į baigtą puslapį
Kai išsaugojote savo CSS, galite perkrauti puslapį "pets.htm" savo žiniatinklio naršyklėje. Jūsų puslapis turėtų atrodyti panašus į tą, kuris parodytas šiame paveikslėlyje, su išlyginamomis nuotraukomis ir tinkama navigacija kairėje puslapio pusėje.
Vykdykite visus tuos pačius žingsnius, susijusius su visais šios svetainės vidiniais puslapiais. Jūs norite turėti vieną puslapį kiekvienam savo navigacijos puslapyje.