Sukurkite CSS stiliaus lapą
Tuo pačiu būdu mes sukūrėme atskirą tekstinį failą HTML, sukursite CSS teksto failą. Jei jums reikia šio proceso vaizdų, žiūrėkite pirmąją pamoką. Štai, kaip sukurti CSS stiliaus lapą „Notepad“:
- Pasirinkite Failas> Naujas „Notepad“, kad gautumėte tuščią langą
- Išsaugokite failą kaip CSS spustelėdami Failas
- Eikite į kietojo disko aplanką „my_website“
- Pakeisti "Išsaugoti kaip tipą: „iki“Visi failai"
- Pavadinkite failąstiliai.css"(palikite kabutes) ir spustelėkite Sutaupyti
Susiekite CSS stiliaus lapą su savo HTML
Kai turėsite stiliaus lapas savo svetainei, turėsite susieti ją su pačiu tinklalapiu. Norėdami tai padaryti, naudokite nuorodos žymą. Įdėkite šią nuorodos žymą bet kur.
Ištaisykite puslapio paraštes
Kai rašai XHTML skirtingoms naršyklėms vienas dalykas, kurį sužinosite, yra tas, kad atrodo, kad jie visi turi skirtingas paraštes ir taisykles, kaip jie rodo daiktus. Geriausias būdas įsitikinti, kad jūsų svetainė daugelyje naršyklių atrodo vienoda, yra neleisti, pavyzdžiui, paraštėms, numatyti naršyklės pasirinkimo.
Mes norėtume pradėti puslapius viršutiniame kairiajame kampe, be jokio papildomo užpildo ar paraštės, supančios tekstą. Net jei ketiname užpildyti turinį, paraštes nustatome į nulį, kad pradėtume nuo to paties tuščio šiferio. Norėdami tai padaryti, pridėkite šiuos dalykus prie savo stiliaus.css dokumento:
HTML, body {
paraštė: 0px;
užpildymas: 0px;
kraštinė: 0 taškų;
kairėje: 0 taškų;
viršuje: 0 taškų;
}
Puslapio šrifto keitimas
Šriftas dažnai yra pirmas dalykas, kurį norėsite pakeisti tinklalapyje. Numatytasis šriftas tinklalapyje gali būti negražus ir iš tikrųjų priklauso nuo pačios žiniatinklio naršyklės, taigi, jei neapibrėžiate šrifto, tikrai nežinote, kaip atrodys jūsų puslapis.
Paprastai keisite pastraipų arba kartais viso dokumento šriftą. Šioje svetainėje mes apibrėžsime šriftą antraštės ir pastraipos lygiu. Pridėkite šiuos dokumentus prie savo styles.css dokumento:
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;
}
Pradėjome nuo 1em kaip pastraipų ir sąrašo elementų pagrindinio dydžio, tada naudojome tai norėdami nustatyti mano antraščių dydį. Mes nesitikime, kad antraštę naudosite giliau nei h4, tačiau jei planuojate, taip pat norėsite ją suformuoti.
Padarykite savo nuorodas įdomesnes
Numatytosios nuorodų spalvos yra mėlyna ir violetinė, atitinkamai nelankytoms ir aplankytoms nuorodoms. Nors tai yra standartas, ji gali netikti jūsų puslapių spalvų schemai, todėl pakeiskime ją. Į failą styles.css pridėkite:
nuoroda {
šriftų šeima: Arialas, Helvetica, sans-serifas;
spalva: # FF9900;
teksto dekoravimas: pabraukimas;
}
a: aplankė {
spalva: # FFCC66;
}
a: užveskite pelės žymeklį {
fonas: #FFFFCC;
šrifto svoris: paryškintas;
}
Mes nustatėme tris nuorodų stilius: a: nuorodą kaip numatytąją, a: aplankytą, kai ji buvo aplankyta, keičiame spalvą ir a: pelės žymeklį. Naudodami: užveskite pelės žymeklį, turime nuorodą, gaukite fono spalvą ir paryškinkite, norėdami pabrėžti, kad nuoroda turi būti spustelėta.
Navigacijos skyriaus stilius
Kadangi mes pirmiausia įdėjome navigacijos (id = "nav") skiltį į HTML, pirmiausia sukurkime stilių. Turime nurodyti, kokio pločio jis turėtų būti, ir dešinėje pusėje įdėti didesnę paraštę, kad pagrindinis tekstas neatsitrenktų į ją. mes taip pat uždėjome aplink jį sieną.
Pridėkite šį CSS prie savo styles.css dokumento:
#nav {
plotis: 225px;
paraštė-dešinė: 15 taškų;
kraštas: vidutinio kietumo # 000000;
}
#nav li {
list-style: nėra;
}
.footer {
šrifto dydis: .75em;
aišku: tiek;
plotis: 100%;
text-align: centre;
}
Sąrašo stiliaus ypatybė nustato sąrašą naršymo skyriuje, kad jame nebūtų jokių ženklelių ar skaičių, o „.footer“ stilius autorių teisių skyriuje bus mažesnis ir sutelktas skyriuje.
Pagrindinio skyriaus išdėstymas
Pozicionuodami pagrindinę sekciją absoliučiu padėties nustatymu, galite būti tikri, kad ji jūsų tinklalapyje liks tiksliai ten, kur norite. Padarėme 800 pikselių pločio didesni monitoriai, bet jei turite mažesnį monitorių, galbūt norėsite jį susiaurinti.
Į savo stiliaus.css dokumentą įdėkite:
#main {
plotis: 800 taškų;
viršuje: 0 taškų;
pozicija: absoliuti;
kairėje: 250 taškų;
}
Savo pastraipų stilius
Kadangi jau esu nustatęs pastraipos šriftą aukščiau, norėjau kiekvienai pastraipai suteikti šiek tiek papildomo „smūgio“, kad ji geriau išsiskirtų. Aš tai padariau uždėdamas viršutinę sieną, kuri išryškino pastraipą, o ne vien vaizdą.
Į savo stiliaus.css dokumentą įdėkite:
.topline {
border-top: storas kietas # FFCC00;
}
Mes nusprendėme tai padaryti kaip klasę, vadinamą „viršutine linija“, o ne tik taip apibrėžti visas pastraipas. Tokiu būdu, jei nuspręsime, kad norime turėti pastraipą be viršutinės geltonos linijos, pastraipos žymoje galime tiesiog palikti klasę = "topline" ir jai nebus viršutinės kraštinės.
Vaizdų stilius
Vaizdai paprastai turi kraštinę, tai ne visada matoma, nebent vaizdas yra nuoroda, tačiau mes norėtume turėti klasę CSS stiliaus lapas, kuris automatiškai išjungia kraštinę. Šiam stiliaus lapui sukūrėme klasę „noborder“, ir dauguma dokumente esančių vaizdų yra šios klasės dalis.
Kita speciali šių vaizdų dalis yra jų vieta puslapyje. Norėjome, kad jie būtų pastraipos, kurioje jie buvo, dalis, nenaudojant lentelių joms sulyginti. Paprasčiausias būdas tai padaryti yra naudoti „float CSS“ ypatybę.
Į savo stiliaus.css dokumentą įdėkite:
#main img {
plūdė: kairė;
paraštė-dešinė: 5px;
paraštė apačioje: 15 taškų;
}
.noborder {
kraštas: 0 taškų nėra;
}
Kaip matote, vaizduose taip pat nustatytos paraštės savybės, kad įsitikintumėte, jog jos nėra sugriautos su plūduriuojančiu tekstu, esančiu šalia jų pastraipose.
Dabar pažvelkite į savo užpildytą puslapį
Išsaugoję savo CSS, galite iš naujo įkelti puslapį pets.htm į savo interneto naršyklę. Jūsų puslapis turėtų atrodyti panašiai kaip parodyta šiame paveikslėlyje, kad vaizdai būtų sulygiuoti ir naršymas būtų teisingai išdėstytas kairėje puslapio pusėje.
Atlikite tuos pačius veiksmus visuose savo šios svetainės vidiniuose puslapiuose. Norite, kad kiekviename naršymo puslapyje būtų po vieną puslapį.