Oglas

CSS je najvažnija promjena web stranica u posljednjem desetljeću, a utro je put za razdvajanje stila i sadržaja. Na moderni način XHTML definira semantički Što je semantička markacija i kako će se promijeniti zauvijek Internet [objašnjena tehnologija] Čitaj više struktura - značenje i sadržaj web stranice, dok se CSS tiče samog prezentacije. Dok se većini nas ugodno piše malo HTML-a, čini se da mislimo da je CSS neka vrsta crne magije. Nadam se da ću to promijeniti sa ovih 5 dječjih koraka da biste postali CSS čarobnjak.

Ovaj je članak namijenjen korisnicima koji zasad imaju vrlo malo iskustva s CSS-om, mada se nadamo da ovdje ima nešto.

(1) Gramatika

Kao i svaki jezik, i CSS ima određenu gramatiku i može se u početku činiti malo "računalnim programom", ali to je zapravo samo popis stvari. Svi CSS su napisani ovako:

SELECTOR {IMOVINA: VALUE; IMOVINA: VRIJEDNOST; IMOVINA: VALUE;}

Kao što možda već znate, CSS djeluje primjenjujući stil na odabrani element na web stranici. Na primjer, za stil prikazivanja svih vaših veza, pomoću alata biste koristili "a". Različita svojstva i vrijednosti naučit ćete s iskustvom, ali neka su jednostavna - stvari poput COLOR, BORDER, FONT-SIZE, HEIGHT su sva moguća svojstva, čije bi vrijednosti mogle biti crvene, 14pt, 150%, 1000px - stvarno je to lako. Pogledajmo kako bismo postupili u stiliziranju svih veza crveno:

a {boja: crvena;}

Istog bloka CSS možete koristiti za istodobno s zarezima: više vrsta elemenata u isto vrijeme:

a, h2, h3 {boja: crvena;}

Zbog toga nisu samo sve veze, već i svi naslovi h2 i h3, u istoj crvenoj boji. Imajte na umu da bi sve mogle biti različitih veličina, jer ovaj pojedinačni blok koda SAMO mijenja boju.

(2) Odabir klase i ID-a

Ponekad ne želite SVE elemente stilski obraditi na isti način - a u tim slučajevima to možete koristiti RAZRED ili iskaznica. Općenito se pravilo koristi za jednokratne elemente i najčešće se koristi za definiranje velikih blokova sadržaja ili pojedinačnih posebnih gumba i slično.

Na primjer, možda imate veliki DIV za blokove HEADER, CONTENT i FOOTER na vašoj stranici - pa bi definiranje onih kao ID-a bilo pametno. Klase s druge strane koriste se kad se elementi stila vjerojatno ponavljaju na cijeloj stranici. Možda želite da hrpa predmeta ima zaobljene kutove s crvenim obrubom od 2 piksela, a ne za ispis milijun puta istim inline stilom, za to biste definirali klasu i te elemente pričvrstili umjesto toga. Pa kako definirati ove ID-ove i klase?

SIDEBAR

Za ciljanje ovih stavki u CSS-u upotrijebili biste:

.red-rounded {// ovo je klasa. obrub granice: 5px; obrub: 2px čvrste crvene boje; } #sidebar {.. } // ovo je ID.

(3) Potomci

Ipak ne trebate dodavati klase i ID-ove svemu dokumentu - možete odabrati i stavke koje nazivamo DESCENDANTS za odabir stavki. Pogledajte ovu CSS izjavu i provjerite možete li shvatiti što radi:

#sidebar h1 {font-size: 20px;}

Ovo će PRVO pronaći predmet s ID-om "bočne trake", a zatim će izbor suziti na sve

koji se nalaze u njima, a stil primjenjujte samo na one.

Dakle, ako možete nekako grupirati sve svoje predmete zajedno, najbolje je upotrijebiti selektore potomaka jer je to još manje koda nego dodavanje gomile class =”” definicije svemu.

(4) Gdje staviti ovaj CSS?

Najbolji način za rješavanje CSS-a je potpuno odvajanje od HTML-a. Napravite datoteku koja se naziva .css i jednostavno dodajte ovaj redak u HTML zaglavlje:

Također možete dodati blokove CSS-a u odjeljak između oznaka, ali ne predlažem ovu metodu jer rezultira neurednim i teškim za čitanje HTML datoteka.

Treće mjesto za dodavanje CSS-a je umetnuto, ali i vi biste trebali biti oprezni. Sve je dodano inline ovako:

automatski će nadjačati sve što je definirano u vašem zasebnom stilu. Možda ćete tamo sjediti pokušavajući otkriti pogrešku zašto vaše minijature ne mijenjaju veličinu, a vaš CSS može biti savršen - ali ako element IMG već sadrži stilove inline, oni će imati prednost. Kako možete znati utječe li na to još nešto?

(5) Nabavite FireBug ili Koristite Chrome

Palikuća Vodič za amatere za prilagodbu dizajna web stranica pomoću FireBug-a Čitaj više nevjerojatan je razvojni alat koji je posebno koristan za otkrivanje načina rada CSS-a. Na trenutak da biste je preuzeli i brzo je pogledajte. FireBug je dostupan za Firefox kao dodatak ili ako upotrebljavate Chrome, identičan skup značajki je već ugrađen. Nakon što aktivirate dodatak u Firefoxu ili upotrebljavate Chrome, jednostavno desnom tipkom miša kliknite bilo gdje na stranici i odaberite "Pogledajte element“.

Ovo će otvoriti novo okno u dnu preglednika. Na lijevoj strani je XHTML prikaz, lijepo oblikovan i sklopiv. Ako pokažete pokazivač miša iznad bilo kojeg elementa, on će istaknuti taj element na stranici i pokazati vam CSS model okvira oko njega (o budućem modelu govorit ćemo više u budućoj lekciji). Ključna poanta ovdje je što također možete odabrati bilo koji element i točno vidjeti koji CSS djeluje na njega s desne strane, a razbiti će one do kojih su selektori to uzrokovali. Sve što je dodano u liniji bit će prikazano pod naslovom "element.style". Isprobajte sada na ovoj stranici. Primjetite da je vrlo često puno CSS-a navedenog s desne strane prekriženo središnjom crtom - ovo Znači da drugi selektor koji radi na tom elementu ima prednost i nadjačava jedan prekriženi van.

To je to za danas, ali slobodno ostavljajte komentare ako mislite da sam propustio nekog temeljnog početnika bodova ili ako imate nekih konkretnih pitanja ili problema sa CSS-om, onda ih pitajte u odjeljku za tehničku podršku našeg stranica. Sljedeći put bih želio proširiti svoje znanje o CSS-u izvan osnovnih promjena boje i veličine.