01 od 10
Napravite CSS Style Sheet
Na isti način kako smo kreirali posebnu tekstualnu datoteku za HTML, kreirali ćete tekstualnu datoteku za CSS. Ako vam je potreban vizuelni prikaz ovog procesa, pogledajte prvi tutorijal. Evo koraka za kreiranje CSS stilskog lista u notepadu:
- Izaberite File> New in Beležnica da biste dobili prazan prozor
- Sačuvaj datoteku kao CSS klikom na File
- Pređite na fasciklu my_website na tvrdom disku
- Promijenite "Save As Type:" na "All Files"
- Nazovite svoju datoteku "styles.css" (ostavite citate) i kliknite na Sačuvaj
02 od 10
Povezite CSS Style Sheet sa HTML-om
Kada dobijete stilski list za svoju Web lokaciju, moraćete da ga povezujete sa samom Web stranicom. Da biste to uradili, koristite oznaku veze. Postavite sljedeću oznaku veze bilo gdje u oznake
vaših kućnih ljubimaca.htm dokument:03 od 10
Popravite margine stranice
Kada pišete XHTML za različite pregledače, jedna stvar koju ćete naučiti jeste da svi izgleda da imaju različite margine i pravila za prikazivanje stvari. Najbolji način da budete sigurni da je vaša stranica u većini pretraživača istog izgleda jeste da ne dozvolite da stvari kao margine budu podrazumevane prema izboru pregledača.
Više volim da započinjam svoje stranice u gornjem levom uglu, bez dodatne obloge ili margine koja okružuje tekst. Čak iako ću sadrći sadržaj, postavio sam marginu na nulu, tako da počinjem sa istim praznim tanjirom. Da biste to uradili, dodajte u svoj styles.css dokument:
html, body {
margin: 0px;
padding: 0px;
granica: 0px;
left: 0px;
vrh: 0px;
}
04 od 10
Promena fonta na stranici
Font je često prva stvar koju ćete želeti da promenite na Web stranici. Podrazumevani font na Web stranici može biti ružan i zapravo je u samom pretraživaču, pa ako ne definišete font, zaista nećete znati kako će vaša stranica izgledati.
Tipično, promenili biste font na paragrafima, ili ponekad na sam dokument. Za ovu lokaciju definišemo font na zaglavlju i nivou paragrafa. Dodajte sljedeće u svoj styles.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čeo sam sa 1em kao osnovnu veličinu za paragrafe i stavke liste, a zatim ih koristio da postavim veličinu za moje naslove. Ne očekujem da koristim naslov dublje od h4, ali ako planiraš, želiš ga i stajati.
05 od 10
Pravite svoje veze više interesantnije
Podrazumevane boje za veze su plave i ljubičaste za nezavisne i posjećene veze. Iako je to standardno, možda se ne uklapa u šemu boja na vašim stranicama, pa hajde da je promenimo. U svojoj styles.css datoteki dodajte sledeće:
a: link {
font-family: Arial, Helvetica, sans-serif;
boja: # FF9900;
tekstualna dekoracija: podvlači;
}
a: posjetili {
boja: # FFCC66;
}
a: hover {
pozadina: #FFFFCC;
font-weight: bold;
}
Postavio sam tri stila veze, a: link kao podrazumevano, a: posećeno kada je posećeno, mijenjam boju i: hover. Sa: hoverom, link ima dobijenu boju pozadine i odlikujem bold da bih istakao da je to veza koja treba kliknuti.
06 od 10
Stajalište za navigaciju
Pošto smo prvi put stavili navigaciju (id = "nav") u HTML, prvo ga stajimo. Moramo navesti koliko bi trebalo biti široko i staviti širu marginu sa desne strane, tako da glavni tekst neće biti protiv njega. Stavio sam granicu oko njega.
Dodajte sljedeći CSS u svoj styles.css dokument:
#nav {
Širina: 225px;
margin-right: 15px;
granica: srednja čvrsta # 000000;
}
#nav li {
lista-stil: nema;
}
.footer {
font-size: .75em;
jasno: oboje;
širina: 100%;
tekstualno poravnanje: centar;
}
Svojstvo u listi postavlja listu unutar sekcije za navigaciju da nema metaka ili brojeva, a .footer stilizira sekciju autorskih prava da bude manja i centrirana unutar sekcije.
07 od 10
Pozicioniranje glavne sekcije
Postavljanjem glavnog dela apsolutnim pozicioniranjem možete biti sigurni da će ostati upravo tamo gde želite da ostane na vašoj Web stranici. Napravio sam svoj 800px širok za smeštaj većih monitora, ali ako imate manji monitor, možda biste želeli da ga užim.
Postavite sledeće u svoj styles.css dokument:
#main {
širina: 800px;
vrh: 0px;
pozicija: apsolutno;
lijevo: 250px;
}
08 od 10
Stajanje vaših stavova
Pošto sam već postavio gornji tekst pasusa, želeo sam da svaku paragrafu dodam malo dodatnog "udara" da bi se bolje isticalo. Uradio sam to tako što sam stavio granicu na vrhu koja je paragraf označila više nego samo sliku.
Postavite sledeće u svoj styles.css dokument:
.topline {
granični vrh: debela čvrsta # FFCC00;
}
Odlučio sam da to uradim kao razred pod nazivom "topline", a ne samo da definišem sve paragrafe na taj način. Na taj način, ako odlučim da želim da imam paragraf bez gornje žute linije, jednostavno mogu da ostavim klasu "topline" u oznaci pasusa i neće imati gornju granicu.
09 od 10
Stajanjem slika
Slike obično imaju granicu oko njih, ovo nije uvek vidljivo osim ako je slika veza, ali ja volim da imam klasu unutar moje CSS stil liste koja automatski isključuje granicu. Za ovaj stil stila sam kreirao klasu "noborder", a većina slika u dokumentu je deo ove klase.
Drugi poseban deo ovih slika je njihova lokacija na stranici. Želeo sam da oni budu deo paragrafa u kome su bili bez korišćenja tabela kako bi ih uskladili. Najjednostavniji način za to je korištenje float CSS svojine.
Postavite sledeće u svoj styles.css dokument:
#main img {
float: left;
margin-right: 5px;
margin-bottom: 15px;
}
.noborder {
granica: 0px nema;
}
Kao što vidite, na slikama su postavljene i marginske osobine, kako bi se uverili da se ne razbijaju protiv plivajućeg teksta koji je pored njih u paragrafima.
10 od 10
Sada pogledajte svoju završenu stranicu
Kada sačuvate svoj CSS, u svoj Web pretraživač možete ponovo učitati stranicu pets.htm. Vaša stranica bi trebala izgledati slično onoj prikazanoj na ovoj slici, s poravnavanjem slika i postavljanjem navigacije na lijevoj strani stranice.
Pratite ove iste korake za sve svoje interne stranice za ovu lokaciju. Želite imati jednu stranicu za svaku stranicu u svojoj navigaciji.