Nakon što su upoznati sa HTML-om, programeri web stranica dijele se u dvije glavne kategorije. Jedan dio vjeruje da korištenjem HTML-a na web stranici možete kreirati sve ili gotovo sve, dok drugi razumije da općenito alati za označavanje nisu dovoljni za dizajn web dokumenata. Zaista, HTML je samo prva faza u procesu učenja kako kreirati web stranice. Sljedeći korak je učenje stilova ili CSS-a (Cascading Style Sheets).

Stilovi su skup parametara koji kontroliraju izgled i položaj elemenata na web stranici. Da bi bilo jasno o čemu govorimo, pogledajmo Sl. 1.1.

Rice. 1.1. Web stranica kreirana samo u HTML-u

Ovo je obična web stranica, dizajnirana bez ikakvih ukrasa. Isti dokument, ali sa dodatkom stilova, poprima potpuno drugačiji izgled (slika 1.2).

Rice. 1.2. Web stranica kreirana pomoću HTML-a i CSS-a

Promjena je dramatična, pa pogledajmo kod da shvatimo u čemu je razlika (primjer 1.1).

Primjer 1.1. Izvorni kod dokument

HTML5 CSS 2.1 IE Cr Op Sa Fx

Flexagon Flexagon

Fleksagon je papirna figura koja ima tri ili više strana. U početku se čini da je to nemoguće, ali zapamtite Mobius traku, ona ima samo jednu stranu, za razliku od list papira, a opet pravi. Flexagon je također pravi, koji je lako napraviti i zalijepiti kod kuće. Izgleda kao dvostrani šestougao, ali ga savijte na poseban način i vidimo treću stranu. Lako se uvjeriti da imamo posla sa tačno tri strane ako ih farbamo u različite boje.

Savijanjem fleksagona promatrat ćemo redom sve njegove površine.

Sam HTML kod nije pretrpio nikakve promjene i jedini dodatak je linija . Povezuje se na eksterni stilski fajl koji se zove style.css. Sadržaj ove datoteke prikazan je u primjeru 1.2.

Body (familija fontova: Arial, Verdana, sans-serif; /* Porodica fontova */ veličina fonta: 11pt; /* Veličina fonta tijela u tačkama */ boja pozadine: #f0f0f0; /* Boja pozadine web stranice * / boja: #333; /* Boja teksta */ ) h1 ( boja: #a52a2a; /* Boja zaglavlja */ veličina fonta: 24pt; /* Veličina fonta u tačkama */ porodica fontova: Georgia, Times, serif ; /* Porodica fontova */ font-weight: normal /* Normalna težina teksta */ ) p ( text-align: justify; /* poravnanje po širini */ margin-left: 60px; /* lijeva margina u pikselima */ margin-; desno: 10px /* Desna margina u pikselima */ border-left: 1px solid #999 /* border-bottom: 1px solid #999 /* padding-left; /* Uvlačenje od linije s lijeve strane do teksta */ padding-bottom: 10px /* Uvlačenje od linije odozdo prema tekstu */ )

Datoteka style.css opisuje sve parametre dizajna za oznake kao što su , i

Imajte na umu da su same oznake napisane kao i obično u HTML kodu.

Budući da se datoteka sa stilovima može referencirati iz bilo kojeg web dokumenta, to u konačnici smanjuje količinu dupliciranih podataka. A zahvaljujući razdvajanju koda i dizajna, povećava se fleksibilnost upravljanja vrstom dokumenta i brzina rada na sajtu.

CSS je sopstveni jezik koji je isti kao HTML samo u nekim aspektima, kao što je način na koji definiše boju.

Style Types

Postoji nekoliko tipova stilova koji se mogu primijeniti zajedno na jedan dokument. To su stil pretraživača, stil autora i korisnički stil.

Stil pretraživača

Zadani skin koji pretraživač primjenjuje na elemente na web stranici. Ovaj dizajn se može vidjeti u slučaju "golog" HTML-a, kada se u dokument ne dodaju stilovi. Na primjer, naslov stranice generiran oznakom prikazuje se u serif fontu od 24 tačke u većini pretraživača.

Autorski stil

Stil koji je dokumentu dodao njegov programer. Primjer 1.2 pokazuje jedan od mogući načini stilske veze autora.

Korisnički stil

Ovo je stil koji korisnik web-mjesta može omogućiti putem postavki pretraživača. Ovaj stil ima veći prioritet i nadjačava originalni dizajn dokumenta. IN Internet pretraživač Explorer, povezivanje stila korisnika vrši se preko menija Tools > Internet Options > Appearance, kao što je prikazano na sl. 1.3.

Rice. 1.3. Povezivanje korisničkog stila u pretraživaču Internet Explorer

IN Opera pretraživač slična radnja se dešava preko komande Alati > Opšte postavke > Kartica „Napredno“ > Sadržaj > Dugme „Opcije stila“ (slika 1.4).

Rice. 1.4. Povezivanje korisničkog stila u pretraživaču Opera

Ove vrste stilova mogu udobno koegzistirati jedni s drugima sve dok ne pokušavaju promijeniti izgled jednog elementa. Ako postoji konflikt, prvo ima prednost stil korisnika, zatim stil autora, a na kraju dolazi stil pretraživača.

Pitanja za provjeru

1. Morate postaviti boju naslova na zelenu. Koja je nekretnina pogodna za ovu svrhu?

font-color

boja

font-family

font-size

2. Šta je stil?

Način skraćivanja HTML koda prijenosom dijela podataka u drugu datoteku.

Jezik za označavanje hipertekstualnih dokumenata.

Skup pravila za formatiranje elemenata web stranice.

Metoda za pretvaranje tekstualnih dokumenata u HTML.

Tehnologija koja predstavlja različite tehnike za postavljanje HTML koda.

3. Šta znači skraćenica CSS?

Šareni stilski listovi

Kaskadni listovi stilova

Računalni stilski listovi

Creative Style Sheets

Uobičajeni listovi stilova

Odgovori

2. Skup pravila za formatiranje elemenata web stranice.

Prezentirati dokument korisniku znači pretvoriti ga u upotrebljiv oblik za vašu publiku. Pregledači, poput Internet Explorera, dizajnirani su za vizualno predstavljanje dokumenata, na primjer, na ekranu računara, projektoru ili štampaču.

Kako CSS utiče na HTML?

Web pretraživači primjenjuju CSS pravila na dokument kako bi utjecali na to kako se oni prikazuju. CSS pravilo se formira od:

• Skup svojstava, koji imaju vrijednosti postavljene za ažuriranje načina na koji se HTML sadržaj prikazuje, na primjer, Želim da širina mog elementa bude 50% njegovog nadređenog elementa, a da njegova pozadina bude crvena.
• Selektor, koji bira element(e) na koje želite primijeniti ažurirane vrijednosti svojstva. na primjer, Želim primijeniti svoje CSS pravilo na sve pasusa u mom HTML dokumentu.

Skup CSS pravila sadržanih u listi stilova određuje kako bi web stranica trebala izgledati. Naučit ćete mnogo više o tome kako izgleda CSS sintaksa u sljedećem članku modula - CSS sintaksa.

Brzi CSS primjer

Gornji opisi su možda imali ili ne moraju imati smisla, pa se uvjerimo da su stvari jasne predstavljanjem kratkog primjera. Prije svega, uzmimo jednostavan HTML dokument, koji sadrži i

(primijetite da se stilska tablica primjenjuje na HTML pomoću elementa):

Moj CSS eksperiment Hello World!

Ovo je moj prvi CSS primjer

Pogledajmo sada vrlo jednostavan CSS primjer koji sadrži dva pravila:

H1 ( boja: plava; boja pozadine: žuta; ivica: 1px puna crna; ) p ( boja: crvena; )

Prvo pravilo počinje selektorom h1, što znači da će primijeniti svoje vrijednosti svojstava na element. Sadrži tri svojstva i njihove vrijednosti (svaki par svojstvo/vrijednost se naziva deklaracija):

Prvi postavlja boju teksta na plavu.

Drugi postavlja boju pozadine na žutu.

Treći postavlja ivicu oko zaglavlja koja je široka 1 piksel, puna (bez tačaka, ili isprekidana, itd.) i obojena crnom bojom.

Drugo pravilo počinje sa p selektorom, što znači da će primijeniti svoje vrijednosti svojstava na

element. Sadrži jednu deklaraciju, koja postavlja boju teksta na crvenu.

U web pretraživaču, gornji kod bi proizveo sledeće izlaz:

Ovo nije previše lijepo, ali barem počinje da vam daje ideju o tome kako CSS funkcionira.

Aktivno učenje: Pisanje vašeg prvog CSS-a

Sada ćemo vam dati priliku da napišete svoj vlastiti dio CSS-a. To možete učiniti koristeći the Input područja ispod, u primjeru koji se može uređivati ​​uživo. Na sličan način kao što ste vidjeli gore, imate neke jednostavne HTML elemente i neka CSS svojstva. Pokušajte dodati neke jednostavne deklaracije svom CSS-u, kako biste stilizirali HTML.

Ako pogriješite, uvijek ga možete resetirati pomoću Reset dugme. Ako se stvarno zaglavite, pritisnite Pokaži rješenje dugme da vidite potencijalni odgovor.

Kod koji se može igrati HTML Unos Hello World!

Ovo je paragraf.

• Ovo je
• Lista

CSS unos h1 ( ) p ( ) li ( ) Izlaz var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var output = document.querySelector(".output"); var rješenje = document.getElementById("rješenje"); var styleElem = document.createElement("style"); var headElem = document.querySelector("head"); headElem.appendChild(styleElem); funkcija drawOutput() ( output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; ) reset.addEventListener("click", function() ( htmlInput.value = htmlCode; cssInput.value = cssput(); drawOutCode; drawOut )); solution.addEventListener("click", function() ( htmlInput.value = htmlCode; cssInput.value = "h1 (\n boja: plava;\n boja pozadine: žuta;\n granica: 1px puna crna ;\n)\n\np (\n boja: crvena;\n)\n\nli (\n sjena teksta: 2px 2px 3px ljubičasta;\n)"; drawOutput(); }); htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); How does CSS actually work? !}

Kada pretraživač prikaže dokument, mora kombinovati sadržaj dokumenta sa informacijama o stilu. Dokument obrađuje u dvije faze:

Pretraživač pretvara HTML i CSS u (Model objekta dokumenta). DOM predstavlja dokument u memoriji računara. Kombinuje sadržaj dokumenta sa njegovim stilom.

Pretraživač prikazuje sadržaj DOM-a.

O DOM-u

DOM ima strukturu nalik stablu. Svaki element, atribut i dio teksta u markup jeziku postaje DOM čvor u strukturi stabla. Čvorovi su definirani njihovim odnosom prema drugim DOM čvorovima. Neki elementi su roditelji podređenih čvorova, a podređeni čvorovi imaju braću i sestre.

Razumijevanje DOM-a pomaže vam da dizajnirate, otklanjate greške i održavate svoj CSS jer je DOM mjesto gdje se susreću vaš CSS i sadržaj dokumenta.

DOM reprezentacija

Umjesto dugog, dosadnog objašnjenja, uzmimo primjer da vidimo kako DOM i CSS rade zajedno.

Pretpostavimo sljedeći HTML kod:

U DOM-u, čvor koji odgovara našem

Element je roditelj. Njegovi potomci su tekstualni čvor i čvorovi koji odgovaraju našim elementima. SPAN čvorovi su također roditelji, sa tekstualnim čvorovima kao njihova djeca:

P ├─ "Hajde da koristimo:" ├─ SPAN | └─ "Kaskadno" ├─ SPAN | └─ "Stil" └─ SPAN └─ "Stabovi"

Ovako pretraživač tumači prethodni HTML isječak - on prikazuje gornje DOM stablo i zatim ga ispisuje u pretraživač na sljedeći način:

Primjena CSS-a na DOM

Recimo da smo dodali malo CSS-a našem dokumentu, da bismo ga stilizirali. Opet, HTML je sljedeći:

Koristimo: Kaskadne tablice stilova

Ako na njega primijenimo sljedeći CSS:

Raspon (obrub: 1px puna crna; boja pozadine: limeta; )

Pregledač će raščlaniti HTML i kreirati DOM od njega, a zatim raščlaniti CSS. Pošto jedino pravilo dostupno u CSS-u ima selektor raspona, ono će primijeniti to pravilo na svaki od tri raspona. Ažurirani izlaz je sljedeći:

Kako primijeniti svoj CSS na svoj HTML

Postoje tri različita načina za primjenu CSS-a na HTML dokument na koja ćete često naići, neki su korisniji od drugih. Ovdje ćemo ukratko pregledati svaki od njih.

Eksterni stilski list

Već ste vidjeli vanjske tablice stilova u ovom članku, ali ne pod tim imenom. Eksterni stilski list je kada imate svoj CSS napisan u zasebnoj datoteci sa ekstenzijom .css, a referencirate ga iz HTML elementa. HTML datoteka izgleda nesto ovako:

Moj CSS eksperiment Hello World!

Ovo je moj prvi CSS primjer

Prezentirati dokument korisniku znači pretvoriti ga u oblik koji korisnik može razumjeti. Preglednici, kao što su Firefox, Chrome ili Internet Explorer, dizajnirani su za vizualno predstavljanje dokumenata, kao što su ekran računara, projektor ili štampač.

Kako CSS utiče na HTML?

Pregledač primjenjuje CSS pravila na dokument kako bi opisao kako će biti prikazan. CSS pravila se formiraju od:

• Skup svojstava koja imaju vrijednosti koje određuju kako će se sadržaj (HTML) prikazati, na primjer Želim da širina elementa bude 50% širine roditeljski element, a pozadina mu je bila crvena.
• Selektor koji bira bira) element/elemente na koje želite primijeniti promijenjene vrijednosti. na primjer, Želim primijeniti ovo CSS pravilo na sve pasuse u svom HTML dokumentu.

Skup CSS pravila sadržanih u listi stilova definira kako bi web stranica trebala izgledati. Više detalja o CSS sintaksa saznat ćete u sljedećem članku modula -.

Kratak CSS primjer

Gore navedeni opisi možda nisu jasni, pa hajde da potkrijepimo teoriju malim praktičnim primjerom. Prije svega, pogledajmo jednostavan HTML dokument koji sadrži i

(imajte na umu da se stilska tablica primjenjuje na HTML pomoću elementa):

Moj eksperiment sa CSS Hello World!

Ovo je moj prvi CSS primjer

Pogledajmo sada vrlo jednostavan CSS primjer koji sadrži dva pravila:

Prvo pravilo počinje selektorom h1, što znači da će se primijeniti na element. Sadrži tri svojstva i tri vrijednosti (svaki par svojstvo/vrijednost se naziva deklaracija):

Prvi oglas mijenja boju teksta u plavu.

Drugi postavlja žutu pozadinu za tekst.

Treći stvara obrub oko teksta koji je širok 1 piksel, čvrst (bez tačaka ili tačaka) i obojen crnom bojom.

Drugo pravilo počinje sa p selektorom, što znači da će se primijeniti na element

. Sadrži jedan oglas koji mijenja boju teksta u crvenu.

Gornji kod će se pojaviti u pretraživaču ovako:

Nije baš lepo, ali pokazuje kako CSS funkcioniše.

Aktivno učenje: Pisanje našeg prvog CSS-a

Sada ćemo vam dati priliku da napišete svoj prvi CSS. To možete učiniti koristeći polje za unos ispod i vidjeti ga u primjeru koji se može uređivati ​​uživo. Imamo neke jednostavne HTML elemente kao i neka CSS svojstva. Baš kao i gore, pokušajte dodati jednostavne deklaracije u CSS da definirate HTML stil.

Ako pogriješite, uvijek možete resetirati pomoću dugmeta Reset. Ako se osjećate zaglavljeni, možete kliknuti na "Prikaži rješenje" da vidite rješenje.

Kod koji se može igrati HTML Unos Hello World!

Ovo je paragraf.

• Ovo je
• Lista

CSS ulaz h1 ( ) p ( ) li ( ) Izlaz var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var output = document.querySelector(".output"); var rješenje = document.getElementById("rješenje"); var styleElem = document.createElement("style"); var headElem = document.querySelector("head"); headElem.appendChild(styleElem); funkcija drawOutput() ( output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; ) reset.addEventListener("click", function() ( htmlInput.value = htmlCode; cssInput.value = cssput(); drawOutCode; drawOut )); solution.addEventListener("click", function() ( htmlInput.value = htmlCode; cssInput.value = "h1 (\n boja: plava;\n boja pozadine: žuta;\n granica: 1px puna crna ;\n)\n\np (\n boja: crvena;\n)\n\nli (\n sjena teksta: 2px 2px 3px ljubičasta;\n)"; drawOutput(); }); htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); Как на самом деле работает CSS? !}

Kada pretraživač renderuje dokument, kombinuje sadržaj dokumenta sa informacijama o stilu. Dokument obrađuje u dvije faze:

Pretraživač pretvara HTML i CSS u DOM. Model objekta dokumenta). DOM predstavlja dokument u memoriji računara i primjenjuje stilove na sadržaj.

Pretraživač prikazuje sadržaj DOM-a.

O DOM-u

DOM ima strukturu stabla. Svaki element, atribut i dio teksta u markup jeziku je predstavljen kao DOM čvor u ovoj strukturi. Čvorovi su definisani njihovim odnosom prema drugim DOM čvorovima. Elementi mogu imati djecu, a djeca mogu imati bratske elemente.

Razumijevanje DOM-a pomoći će vam da dizajnirate, otklonite greške i održavate svoj CSS jer je DOM mjesto gdje se CSS susreće sa sadržajem dokumenta.

DOM reprezentacija

Umjesto dugog i dosadnog objašnjenja, pogledajmo primjer koji će pokazati kako DOM i CSS rade zajedno.

Pogledajmo dati HTML kod:

U DOM-u, čvor koji odgovara elementu

Je roditelj. Njegovi potomci su tekstualni čvorovi i odgovaraju elementu. SPAN čvorovi su također roditelji, a njihova djeca su tekstualni elementi:

P ├─ "Hajde da koristimo:" ├─ SPAN | └─ "Kaskadno" ├─ SPAN | └─ "Stil" └─ SPAN └─ "Stabovi"

Nakon tumačenja DOM stabla od strane pretraživača, rezultat koji dobijamo je sledeći:

Primjena CSS-a na DOM

Koristimo: Kaskadne tablice stilova

Na njega ćemo primijeniti ovaj CSS:

Raspon (obrub: 1px puna crna; boja pozadine: limeta; )

Pregledač će raščlaniti HTML i kreirati DOM od njega, a zatim će se baviti CSS-om. Pošto imamo samo jedno pravilo koje opisuje selektor raspona, ono će se primijeniti na sve čvorove dokumenta s tim selektorom. Ovo je ono što dobijamo kao rezultat.

Kako primijeniti svoj CSS na svoj HTML

Postoje tri različite opcije za primjenu CSS-a na HTML dokument koje su najčešće. Ovdje ćemo pogledati svaku od njih.

Eksterni stilski list

Već ste vidjeli eksterni stilski list u ovom članku, ali ga niste tako nazvali. Eksterni stilski list je zaseban fajl sa ekstenzijom .css, gdje je pohranjen CSS. Na njega se pozivate iz HTML-a koristeći . HTML izgleda ovako:

Moj CSS eksperiment Hello World!

Ovo je moj prvi CSS primjer

Dodajmo CSS fajl:

H1 ( boja: plava; boja pozadine: žuta; ivica: 1px puna crna; ) p ( boja: crvena; )

Ova metoda je vjerovatno najbolja od svih jer možete koristiti jedan stilski list za više dokumenata. Da biste ažurirali stilove, trebate samo promijeniti jednu CSS datoteku.

Interni stilski list

Interni stilski list nalazi se unutar elementa i ne zahtijeva uključivanje vanjskih datoteka. Sadržano u HTML oznaci head. HTML sa sličnim stilskim načinom povezivanja izgleda ovako:

Moj CSS eksperiment h1 ( boja: plava; boja pozadine: žuta; ivica: 1px puna crna; ) p ( boja: crvena; ) Hello World!

Ovo je moj prvi CSS primjer

Ovo može biti korisno u nekim situacijama (možda radite sa sistemom za upravljanje sadržajem gdje ne možete direktno mijenjati CSS datoteke), ali nije tako efikasno kao eksterni stilovi. Na sajtu sa više od jedne stranice, CSS će se morati ponoviti na svakoj stranici, a ako se promeni stil, moraće da se uredi na više mesta.

Ugrađeni stilovi

Umetnuti stilovi su CSS deklaracija koja se primjenjuje samo na jedan element, a sadržani su u atributu stila:

Moj CSS eksperiment Hello World!

Ovo je moj prvi CSS primjer

Nemojte to raditi osim ako je apsolutno neophodno! Ovo je veoma loše za održavanje(možda ćete morati ažurirati iste informacije nekoliko puta u jednom dokumentu). Miješanje CSS-a i HTML-a čini kod nečitljivim. Razdvajanjem HTML-a i stilova olakšat ćete stvari sebi i svojim kolegama u budućnosti.

Jedini put kada ćete možda morati pribjeći korištenju inline stilova je kada vaše radno okruženje nameće ograničenja (na primjer, vaš CMS dozvoljava samo uređivanje HTML-a)

Šta je sledeće

U ovom trenutku, trebali ste razumjeti kako CSS radi i kako pretraživači rade s njim. Zatim ćete naučiti o tome

Uprkos sve većem širenju širokopojasnog pristupa Internetu, problemi sa brzinom učitavanja HTML stranica još uvijek nisu ravnodušni za mnoge korisnike interneta, posebno na prostranstvima bivšeg Sovjetskog Saveza. CSS (Cascading Style Sheets) može pomoći u ovom pitanju, štedeći nam vrijeme i promet.

1. Izbjegavajte korištenje tablica za izgled stranice

Evo šest razloga zašto je bolje koristiti CSS umjesto tablica za izgled stranice:

Pretraživači raščlanjuju tabele dva puta: jednom da procene strukturu tabele i jednom da odrede njen sadržaj.
Tabele se prikazuju u cijelosti odmah, a ne dok se učitavaju.
Tabele prisiljavaju upotrebu prozirnih slika za određivanje širine kolona itd.
CSS zahteva mnogo manje koda od preopterećenih tabela
Sav CSS kod se može izvesti u eksternu datoteku, koja će se učitati samo jednom i pohraniti u keš pretraživača.
At CSS pomoć Možete kontrolirati redoslijed učitavanja elemenata stranice.
2. Nemojte koristiti slike za prikaz teksta

Većina dugmadi i oznaka može se prikazati pomoću CSS-a. Pogledajte primjer:

A:link.example, a:visited.example, a:active.example (
boja:#fff;
background:#f90;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
padding:0.2em;
border:4px #00f početak
}
a:hover.example (
boja:#fff;
background:#fa1;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
padding:0.2em;
granica:4px #00f umetnuti
Ovaj CSS definiše jednostavno dugme koje menja izgled kada pređete preko njega. Na ovaj način možete kreirati složenije objekte.

Neki pozadinske slike Bolje je učitati preko CSS-a. Na primjer, da biste prikazali sliku veličine 200x100, možete koristiti sljedeći kod:

I odgovarajući CSS:

Lijepa slika (pozadina: url(ime datoteke.gif); širina: 200px; visina: 100px)

Ovo u početku može izgledati besmisleno, ali u stvari, ova metoda može učiniti da se stranica učitava mnogo brže. U tom slučaju, pretraživač će početi učitavati sliku tek nakon što se sav tekst prikaže, a ne istovremeno. Na ovaj način korisnici mogu raditi sa stranicom dok se slika još uvijek učitava.

Ova tehnika je najprikladnija za učitavanje čisto dekorativnih, pozadinskih elemenata stranice. Ako je slika dio sadržaja, i dalje ćete morati koristiti IMG oznaku.

4. Korištenje kontekstualnih stilova

Ovaj kod je neefikasan:

Ovo je rečenica

Ovo je druga rečenica

Ovo je još jedna rečenica

Ovo je još jedna rečenica

Tekst (boja: #03c; veličina fonta:2em)

Umjesto dodjeljivanja klase svakom paragrafu, oni se mogu grupirati u jedan DIV element sa istom klasom:

Ovo je rečenica

Ovo je druga rečenica

Ovo je još jedna rečenica

Ovo je još jedna rečenica

Tekst p (boja: #03c; veličina fonta:2em)

Ovaj kod govori pretraživaču da će svaki pasus unutar elementa sa tekstom klase imati boju #03c i veličinu fonta 2em.

Možda ste primijetili da je boja ovdje označena samo sa tri znaka, umjesto sa šest. U ovom slučaju, #03c je skraćenica za vrijednost boje #0033cc.

5. Upotreba skraćenica

Bolje je napisati:

Font: 1em/1.5em bold italic serif

Umjesto

Veličina fonta: 1em;
line-height: 1.5em;
font-weight: bold;
stil fonta: kurziv;
font-family: serif

Ivica: 1px crna puna

Umjesto

Širina ivice: 1px;
boja obruba: crna;
obrubni stil: čvrst

Pozadina: #fff url(image.gif) bez ponavljanja gore lijevo

Umjesto

Boja pozadine: #fff;
background-image: url(image.gif);
background-repeat: bez ponavljanja;
background-position: gore lijevo;

Padding and Borders

Koristite:

Margina: 2px 1px 3px 4px
(gore, desno, dolje, lijevo)

Umjesto

Margin-top: 2px
margin-desno: 1px;
margin-bottom: 3px;
margin-desno: 4px

Isto tako:

Margina: 5em 1em 3em
(gore, lijevo i desno, dolje)

Umjesto

Margin-top: 5em;
margin-bottom: 1em;
margin-right: 1em;
margin-desno: 4em

Marža: 5% 1% (gore i dolje, lijevo i desno)

Umjesto

Najviša marža: 5%;
margin-bottom: 5%;
margin-desno: 1%;
margin-desno: 1%

Ova pravila se primjenjuju na atribute margine, granice i paddinga.

6. Minimizirajte razmake, prijelome redova i komentare

Svaki znak - slovo ili razmak - zauzima jedan bajt. Svaki dodatni znak samo povećava veličinu stranica. Stoga pokušajte manje pritisnuti Enter i Tab tokom procesa izgleda. Takođe, ne zaboravite da kombinujete CSS stilove.

Apsolutne veze zauzimaju mnogo više prostora od relativnih. Osim toga, stvara dodatno opterećenje na pretraživaču, što je još važnije. Primjer apsolutne veze: . Bilo bi mnogo ispravnije napisati . Ali šta ako je li potrebna datoteka u drugom direktoriju? Evo nekoliko primjera koji će vam pomoći da shvatite ovaj problem:

- Pozivanje korijenske stranice stranice http://www.URL.com
- Pozivanje stranice u korijenskom direktoriju http://www.URL.com/filename.html
- Datoteka u poddirektoriju "root" http://www.URL.com/directory/filename.html
- Pristup trenutnom direktoriju i index.html
- Roditeljski direktorij tekućeg i index.html
- Ista stvar, specificiranje fajla
- index.html u dva direktorija iznad trenutnog
8. Nemojte se zanositi korištenjem META oznaka

Većina META oznaka je potpuno nepotrebno. Ako ste zainteresovani, možete pogledati sve postojeće opcije. Najvažnije oznake (ključne riječi i opis) koriste se za optimizaciju pretraživača. Kada koristite atribut sadržaja u META oznaci, pokušajte da ga zadržite ispod 200 znakova. Veliki opisi i mnogi ključne riječi pretraživači mogu shvatiti kao neželjenu poštu.

9. Čuvajte CSS i JavaScript u zasebnim datotekama

Svi to znaju, ali ne koriste uvijek. Ovako izgleda CSS poziv iz eksterne datoteke:

I shodno tome JavaScript:

Bilo koja eksterna datoteka se preuzima samo jednom, a zatim pohranjuje u lokalnu keš memoriju. Nema ograničenja u pogledu broja „povezanih“ eksternih fajlova.

10. Stavite / (kosa crta) na kraj veza direktorija

Morate to napisati ovako:

Ovo se objašnjava vrlo jednostavno. U prvom slučaju, pretraživač ne zna do čega link vodi: fajl ili direktorijum. “Slash” odmah jasno daje do znanja da ova veza vodi do direktorija i da nema potrebe za dodatnom provjerom.