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 <Save As …
- 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
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 vietoje
jūsų pets.htm dokumento žymos:
03 iš 10 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: Š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ą: 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. 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: 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. 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: 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ų. 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: 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: 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. 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: 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. 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. Nustatykite puslapio maržą
Pakeiskite šriftą puslapyje
Padarykite savo nuorodas įdomiau
Stiliavimo navigacijos skyrius
Pagrindinio skyriaus padėtis
Stiliaus jūsų pastraipos
Vaizdų stilizavimas
Dabar pažvelkite į baigtą puslapį
