Stvorite CSS tablicu stilova
Na isti način na koji smo kreirali zasebnu tekstualnu datoteku za HTML, stvorit ćete tekstualnu datoteku za CSS. Ako su vam potrebni vizualni sadržaji za ovaj postupak, pogledajte prvi vodič. Evo koraka za izradu CSS stilskog lista u Notepadu:
- Odaberite Datoteka> Novo u Notepadu da biste dobili prazan prozor
- Spremite datoteku kao CSS klikom Datoteka
- Dođite do mape my_website na tvrdom disku
- Promijeni "Spremi kao vrstu: "do"Sve datoteke"
- Dajte naziv datoteci "stilovi.css"(izostavite citate) i kliknite Uštedjeti
Povežite CSS tablicu stilova sa svojim HTML-om
Jednom kad dobijete stilski list za svoju web stranicu morat ćete je povezati sa samom web stranicom. Da biste to učinili, koristite oznaku veze. Postavite sljedeću oznaku veze bilo gdje unutar.
Ispravite margine stranice
Kad pišete XHTML za različite preglednike jedno ćete naučiti da izgleda da svi imaju različite margine i pravila kako prikazuju stvari. Najbolji način da budete sigurni da vaša web lokacija izgleda jednako u većini preglednika je da ne dopustite da se stvari poput margina zadaju prema izboru preglednika.
Stranice radije započinjemo u gornjem lijevom kutu, bez dodatnih umota ili margina oko teksta. Čak i ako ćemo dodavati sadržaj, margine postavljamo na nulu tako da započinjemo s istim praznim listom. Da biste to učinili, dodajte sljedeće u svoj dokument style.css:
html, tijelo {
marža: 0px;
popunjavanje: 0px;
obrub: 0px;
lijevo: 0px;
vrh: 0 piksela;
}
Promjena fonta na stranici
Font je često prva stvar koju ćete htjeti promijeniti na web stranici. Zadana vrijednost font na web stranici može biti ružno i zapravo ovisi o samom web pregledniku, pa ako ne definirate font, stvarno ne znate kako će izgledati vaša stranica.
Tipično biste mijenjali font na odlomcima ili ponekad na cijelom dokumentu. Za ovu web stranicu definirat ćemo font na razini zaglavlja i odlomka. Dodajte sljedeće u svoj style.css dokument:
p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1,5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1,25em Arial, Helvetica, sans-serif;
}
Počeli smo s 1em kao osnovnom veličinom za odlomke i stavke popisa, a zatim smo to iskoristili za postavljanje veličine mojih naslova. Ne očekujemo da ćemo upotrijebiti naslov dublji od h4, ali ako planirate, poželjet ćete ga i oblikovati.
Učiniti vaše veze zanimljivijima
Zadane boje za veze su plava i ljubičasta za ne posjećene i posjećene veze. Iako je ovo standard, možda neće odgovarati shemi boja vaših stranica, pa ga promijenimo. U datoteku styles.css dodajte sljedeće:
poveznica {
obitelj fontova: Arial, Helvetica, sans-serif;
boja: # FF9900;
ukras teksta: podcrtano;
}
a: posjetio {
boja: # FFCC66;
}
a: hover {
pozadina: #FFFFCC;
font-weight: podebljano;
}
Postavili smo tri stila veza, a: veza kao zadana, a: posjećena za posjetu, mijenjamo boju i a: hover. Uz: hover imamo vezu koja dobiva boju pozadine i podebljano naglašava da je veza na koju se treba kliknuti.
Stiliziranje odjeljka za navigaciju
Budući da smo odjeljak za navigaciju (id = "nav") stavili na prvo mjesto u HTML-u, ajmo ga prvo oblikovati. Moramo naznačiti koliko bi trebao biti širok i staviti širu marginu s desne strane, tako da glavni tekst neće naići na njega. mi također stavljamo obrub oko njega.
Dodajte sljedeći CSS u svoj dokument styles.css:
#nav {
širina: 225px;
margina-desno: 15 piksela;
obrub: srednje čvrst # 000000;
}
#nav li {
stil popisa: nema;
}
.footer {
veličina slova: .75em;
jasno: oboje;
širina: 100%;
poravnanje teksta: središte;
}
Svojstvo stila popisa postavlja popis unutar odjeljka za navigaciju tako da nema meta ili brojeva, a .footer stilizira odjeljak autorskih prava da bude manji i centriran unutar odjeljka.
Pozicioniranje glavnog odjeljka
Pozicioniranjem vašeg glavnog dijela s apsolutnim pozicioniranjem možete biti sigurni da će ostati točno tamo gdje želite da ostane na vašoj web stranici. Napravili smo ga širinom od 800 piksela za smještaj veći monitori, ali ako imate manji monitor, možda biste ga htjeli suziti.
U svoj style.css dokument stavite sljedeće:
#main {
širina: 800px;
vrh: 0 piksela;
položaj: apsolutni;
lijevo: 250px;
}
Stiliziranje odlomaka
Budući da sam već postavio gornji font odlomka, htio sam svakom odlomku dati malo dodatnog "udarca" kako bih se bolje istaknuo. To sam učinio stavljajući obrub na vrh koji je naglasio odlomak više od same slike.
U svoj style.css dokument stavite sljedeće:
.Gornji red {
rub-vrh: gusta čvrsta # FFCC00;
}
Odlučili smo to učiniti kao klasu koja se naziva "topline", umjesto da samo definiramo sve odlomke na taj način. Na taj način, ako odlučimo da želimo imati odlomak bez gornje žute crte, jednostavno možemo izostaviti class = "topline" u oznaci odlomka i on neće imati gornju ivicu.
Stiliziranje slika
Slike obično imaju obrub oko sebe, to nije uvijek vidljivo, osim ako je slika veza, ali volimo imati klasu unutar CSS tablica stilova koja automatski isključuje obrube. Za ovaj stil lista stvorili smo klasu "noborder", a većina slika u dokumentu dio je ove klase.
Drugi poseban dio ovih slika je njihovo mjesto na stranici. Željeli smo da oni budu dio odlomka u kojem su bili bez korištenja tablica za njihovo poravnanje. Najjednostavniji način za to je korištenje svojstva float CSS.
U svoj style.css dokument stavite sljedeće:
#main img {
plutaju: lijevo;
margina-desno: 5 piksela;
margina-dno: 15 piksela;
}
.noborder {
obrub: 0px nema;
}
Kao što vidite, na slikama su postavljena i svojstva margine kako bi se osiguralo da ne budu razbijene u odnosu na plutajući tekst koji se nalazi pored njih u odlomcima.
Sada pogledajte svoju dovršenu stranicu
Nakon što spremite CSS, možete ponovo učitati stranicu pets.htm u web pregledniku. Vaša bi stranica trebala izgledati slično onoj prikazanoj na ovoj slici, sa poravnanim slikama i pravilno smještenom navigacijom na lijevoj strani stranice.
Slijedite ove iste korake za sve vaše interne stranice za ovu stranicu. Želite imati po jednu stranicu za svaku stranicu u navigaciji.