01 od 10
Izradite CSS stilski list
Na isti način na koji smo stvorili zasebnu tekstualnu datoteku za HTML, izradit ćete tekstnu datoteku za CSS. Ako vam je potrebna vizualizacija za taj postupak, pogledajte prvi tutorial. Evo koraka za stvaranje CSS tablice stila u programu Notepad:
- Odaberite File> New in Notepad da biste dobili prazan prozor
- Spremite datoteku kao CSS klikom na File
- Idite na mapu my_website na tvrdom disku
- Promijenite stavku "Spremi kao vrstu:" na "Sve datoteke"
- Imenujte datoteku "styles.css" (ostavite citate) i kliknite Spremi
02 od 10
Povežite CSS stilski list s HTML-om
Nakon što na web stranici imate tablicu za stil, morat ćete ga povezati s web-stranicom. Da biste to učinili koristite oznaku veze. Stavite sljedeću oznaku veze bilo gdje unutar
oznaka vašeg pets.htm dokumenta:03 od 10
Popravite margine stranice
Kada pišete XHTML za različite preglednike, jedna stvar koju ćete naučiti jest da izgledaju kao da imaju različite margine i pravila za prikazivanje stvari. Najbolji način da budete sigurni da vaša web lokacija izgleda isto u većini preglednika jest ne dopustiti da se stvari poput margina zadaju na odabir preglednika.
Radije bih pokrenuo svoje stranice u gornjem lijevom kutu, bez dodatnog ispuna ili margine oko teksta. Čak i ako idem na pad sadržaj, ja postaviti margine na nulu, tako da sam počevši s istim praznim škriljevca. Da biste to učinili, dodajte sljedeće u svoj styles.css dokument:
html, tijelo {
margina: 0px;
padding: 0px;
granica: 0px;
lijevo: 0px;
vrh: 0px;
}
04 od 10
Promjena slova na stranici
Font je često prva stvar koju ćete htjeti promijeniti na web stranici. Zadani font na web stranici može biti ružan i zapravo je veći od samog web preglednika, pa ako ne definirate font, stvarno nećete znati kako će izgledati vaša stranica.
Obično biste promijenili font u paragrafima, ili ponekad na cijelom dokumentu. Za ovu stranicu ćemo definirati font na razini zaglavlja i stavke. 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čela sam s 1em kao svoju osnovnu veličinu za odlomke i stavke popisa, a zatim sam ga upotrijebila za postavljanje veličine za moje naslove. Ne očekujem da koristim naslov dublje od h4, ali ako namjeravate, također ćete htjeti stilizirati.
05 od 10
Izrada vaših veza zanimljivijim
Zadane boje za veze su plave i ljubičaste za neprimjetne i posjećene veze. Iako je to standardno, možda ne odgovara shemi boja vaših stranica, stoga promijenimo. U datoteci styles.css dodajte sljedeće:
poveznica {
font-obitelj: Arial, Helvetica, sans-serif;
boja: # FF9900;
tekst ukrašavanje: podcrtavanje;
}
a: posjetio {
boja: # FFCC66;
}
a: zadržite pokazivač miša {
pozadina: #FFFFCC;
font-weight: bold;
}
Postavljam tri stilova veze, a: vezu kao zadanu, a: posjećenu za kada je posjećen, mijenjam boju i zadržite pokazivač miša. S: hoverom imam vezu dobiti boju pozadine i odvažno se naglasiti da je veza koju treba kliknuti.
06 od 10
Dizajniranje odjeljka za navigaciju
Budući da prvi put stavljamo navigacijsku jedinicu (id = "nav") u HTML, neka je to prvo stilski. Moramo naznačiti koliko bi trebao biti širok i postaviti širu granicu na desnoj strani, tako da se glavni tekst ne bumne protiv nje. Također sam stavio granicu oko nje.
Dodajte sljedeći CSS dokumentu styles.css:
#nav {
širina: 225px;
margina-desno: 15px;
granica: srednja čvrstoća # 000000;
}
#nav li {
popis stila: none;
}
.footer {
veličina slova: .75em;
jasno: oboje;
širina: 100%;
tekst uskladiti: centar;
}
Objekt u popisu postavlja popis unutar navigacijskog odjeljka kako ne bi imao metke ili brojeve, a .footer određuje da je odjeljak za autorska prava manji i usredotočen u odjeljak.
07 od 10
Postavljanje glavnog odjeljka
Postavljanjem glavne sekcije s apsolutnim pozicioniranjem možete biti sigurni da će ostati tamo gdje želite da ostane na vašoj web stranici. Napravio sam širinu od 800 piksela za veće monitore, ali ako imate manji monitor, možda biste htjeli napraviti taj uži.
Stavite sljedeće u svoj styles.css dokument:
#main {
širina: 800px;
vrh: 0px;
pozicija: apsolutna;
lijevo: 250px;
}
08 od 10
Stiliranje vaših stavaka
Budući da sam već postavio font stavke gore, želio sam dati svaki odlomak malo dodatnog "udarca" kako bi se bolje istaknuo. Učinio sam to stavljanjem granice na vrh koji je istaknuo stavak više nego sam slika.
Stavite sljedeće u svoj styles.css dokument:
.Gornji red {
granični vrh: debela krutina # FFCC00;
}
Odlučio sam to učiniti kao klasu nazvanu "topline", a ne samo definirati sve stavke na taj način. Na taj način, ako odlučim da želim imati odlomak bez gornje žute linije, jednostavno mogu napustiti klasu = "topline" u stavci odlomka i neće imati gornju granicu.
09 od 10
Stiliranje slika
Fotografije obično imaju granicu oko sebe, to nije uvijek vidljivo, osim ako slika nije veza, ali volim imati klasu u svom CSS stilskom listu koji automatski isključuje granicu. Za ovaj stilski obrazac stvorio sam "plemenitu" klasu, a većina slika u dokumentu dio je ovog razreda.
Drugi posebni dio tih slika je njihov položaj na stranici. Htjela sam da budu dio odlomka u kojem su bili bez upotrebe tablica kako bi ih poravnali. Najjednostavniji način za to je korištenje plovnog CSS svojstva.
Stavite sljedeće u svoj styles.css dokument:
#main img {
plutaju: lijevo;
margina-desno: 5px;
margina-dno: 15px;
}
.noborder {
granica: 0px none;
}
Kao što vidite, na slikama se postavljaju i svojstva margina, kako bi bili sigurni da se ne razbijaju uz plutajući tekst koji je pored njih u odlomcima.
10 od 10
Sada pogledajte svoju završenu stranicu
Nakon što spremite svoj CSS možete učitati stranicu pets.htm u web pregledniku. Vaša bi stranica trebala izgledati slično onoj prikazanoj na ovoj slici, s poravnatim slikama i ispravno postavljenom navigacijom na lijevoj strani stranice.
Slijedite ove iste korake za sve vaše unutarnje stranice za ovu web stranicu. Želite imati jednu stranicu za svaku stranicu u vašoj navigaciji.