Naučit ćemo šta su kaskadni listovi stilova, šta je CSS stil i kako ga postaviti za HTML elemente.
Za ovaj članak već imate jasno razumevanje taj jezik za označavanje hiperteksta se koristi za opisivanje sadržaja web stranice. Surfajući internetom primjećujemo da stranice izgledaju drugačije: boje, fontovi, drugačije prored, pozadinske slike pa čak i animacija. Odmah bih vam odmah objasnio da kako će ove stranice izgledati ovisi o korištenju kaskadni listovi stilova (Kaskadni listovi stilova - css). Kao dio HTML tutorijala, vi i ja ćemo ukratko pogledati upotrebu kaskadnih stilskih tablica, možete ih detaljno proučiti nakon ovog kursa u odjeljku CSS tutorial.
Šta je stil? Stilski setovi izgled bilo koji element stranice, tj. Grubo govoreći, ovo je pravilo koje pretraživaču govori kako da formatira određeni element (na primjer, promijeni pozadinu ili boju fonta).
Svaki HTML element ima zadani stil. Promjena zadanog stila HTML elementa može se izvršiti korištenjem atributa globalnog stila. Skupovi atributa ugrađen (U redu) CSS stil za element. Inline CSS se koristi za primjenu jedinstvenog stila na jedan HTML element. Kao dio učenje HTML-a pogledaćemo samo korišćenje inline CSS-a.
Savjet: Ovaj primjer koristi sljedeće boje: bijela(bijeli), kaki(kaki), siva(siva). Za tekst pjesme korišten je font Verdana.
Ako imate poteškoća u izvršavanju zadatka, provjerite kod stranice tako što ćete otvoriti primjer u poseban prozor klikom na sliku.
Već znamo da kako bi web stranica izgledala lijepo i sa stilom, moramo raditi sa CSS datotekom. A da bi se naši stilovi primjenjivali, moramo se povezati HTML fajl i CSS fajl.
Postoji nekoliko opcija za implementaciju ove operacije: korištenje ugniježđenih listova stilova, eksternih listova stilova i inline stila.
Danas ćemo govoriti o potonjoj metodi.
Ubacivanje stila u HTML tag
Suština ove metode leži u činjenici da unosimo potreban dizajn unutar oznake. Za ovo, poseban atribut - stil. Ovaj atribut može se primijeniti na bilo koju oznaku, ali samo unutar tijela stranice, tj unutar tijela. Vrijednost ovog atributa je izraz stila koji se primjenjuje na dati element.
Na primjer, postavimo različite veličine font za dva različita pasusa teksta:
< p style= "font-size:25px;" >Postavite ovaj dio teksta na visinu od 25 piksela. < p style= "font-size:15px; boja:#2400ff;"> I ovaj tekst će biti sa slovima, visine 15 piksela, a takođe ćemo ga obojiti u plavo da demonstriramo upotrebu nekoliko stilova istovremeno.
Nedostaci
Primjer savršeno pokazuje kako takvo vješanje stilova začepljuje kod stranice.
Također možete primijetiti nekoliko nedostataka korištenja ove tehnike stiliziranja. Prvi od njih se može nazvati širenjem stila u dokumentu, što će u budućnosti ponekad komplicirati proces uređivanja.
Također će biti poteškoća u dizajnu velikih količina teksta. Mislim da niko nije zadovoljan mogućnošću propisivanja veličine fonta za svaki pasus, pogotovo ako ima 40 takvih pasusa.
Čak i kada se koriste inline stilovi, postaje nemoguće koristiti pseudo-klase, što uvelike veže ruke web dizajneru.
Također je vrijedno primijetiti zabunu koja će sigurno doći u korištenju atributa style. Ova zabuna će nastati zbog upotrebe različitih navodnika prilikom upisivanja stilova.
Radi jasnoće, pogledajmo primjer u nastavku:
< div style= "familija fontova: "Roboto Condensed", sans-serif"> Unos je tačan. < div style= "familija fontova: "Robot Condensed", sans-serif"> I tako je tačno. < div style= "font-family: " Roboto Condensed ", sans-serif" >Ovo nije tačan unos. < div style= "font-family: " Roboto Condensed ", sans-serif" >A ni to nije istina.
Gledajući gore navedene proračune, logičan zaključak je da je upotreba inline stilova povezana sa nizom značajnih komplikacija i neugodnosti.
Kada koristiti inline stil
Unatoč svim nedostacima, inline stil nije izmišljen uzalud. Webmasteri se često pozivaju na njih u slučaju programskog stila. Na primjer, pogledajmo ovaj kod
< div id= "productRate" > < div style= "width: 40%" >
Upisivanje željene širine za ovaj blok bila bi najjednostavnija operacija.
Slična situacija može nastati kada je potrebno zamijeniti pozadinsku sliku (na primjer) korisnika pod ulogom administratora. U ovom slučaju img tag možda ne odgovara. Stoga je vrijedno pozvati se na atribut stila:
< div style= "background:url(fon.jpg)" >
Takođe, programeri se često pozivaju na inline stilove u procesu postavljanja iskačućih prozora. Često se ovaj proces odvija na sljedeći način: blok, preko čijeg dizajna posao u izradi, display:block je postavljen, a preostali prozori su skriveni korištenjem display:none tako da vizualno ne ometaju rad programera. Evo primjera:
< div class = "element" style= "display:block" >Iskačući prozor koji se trenutno prikazuje
Ishod
Korištenje inline stilova povezano je s brojnim poteškoćama i neugodnostima, međutim, u procesu stiliziranja nekih elemenata, webmasteri se često okreću ovoj metodi kako bi optimizirali svoj rad.
Postoje četiri načina za postavljanje css stil za oznake HTML.
1) Inline stil.
2) Embedded stil
3) Uvezeno stil.
4) Stil iz datoteke.
I u ovom članku ćemo analizirati sve četiri metode.
Za početak, prvi način je inline stil. Ovaj stil je specificiran direktno u samoj oznaci. Na primjer:
tekst
AT ovaj slučaj postavili smo element " tekst" će biti veličine 150% i usklađeno sa centar. To je primjer inline stil.
Drugi način je ugrađen css stil, odnosno stil koji je postavljen u zaglavlju dokumenta, u oznaci . Na primjer, ovako:
Ovdje će se dogoditi sljedeće: za sve elemente unutar oznake
bit će urađeno sljedeće: njihova boja će biti crvena i gornji padding će biti 100 piksela.
Treći način postavljanja stil css- ovo je uvezeni stilovi. Oni su isti kao ugrađen postavljeni su u zaglavlju dokumenta, ali već iz fajla. Evo primjera:
Evo stilova iz fajla " my.css".
I posljednji pogled CSS stilovi su stilovi iz datoteke. Ova metoda je najčešći, a sastoji se u povezivanju stilske datoteke preko oznake u glavi dokumenta. Na primjer, na ovaj način:
Ova metoda je vrlo slična prethodni metod, ali se oznaka ovdje ne koristi
Ako napišete ovakav kod između oznaka ... , tada će svi naslovi prvog nivoa biti plavi. Ovom metodom stilovi se postavljaju pomoću oznaka. . Također tegu ali ne i sajt u celini.
Naslov prvog nivoa
Naslov trećeg nivoa, koji se nalazi u centru html dokumenta
Naslov šestog nivoa, desno poravnata web stranica
Nakon toga kreiramo novi fajl sadržaj ovako:
H1 (boja:plava;)
h3 (boja:crvena;)
H6 (boja:zelena;)
I sačuvajte ga kao stil sa produžetkom *css. Pogledajte rezultat. Ovo je naš html fajl zaglavlja. Sada da vidimo kako ovaj dizajn funkcionira. U html dokumentu sa naslovima nalazimo se između oznaka ... napisao ovaj red:
Ovdje sa oznakom uključujemo stilove u html dokument. Atribut href odnosi se na lokaciju na kojoj se nalazi datoteka stila, ovo je obavezan atribut. Atribut tip već znamo da specificira tip lista stilova. Atribut rel označava odnos uključene datoteke sa datim html dokumentom. U našem slučaju, vrijednost atributa rel="stylesheet" znači da smo dodali osnovni stylesheet. Prednost ovog načina postavljanja stilskih tablica je u tome što ako želite promijeniti dizajn stranice u cjelini, dovoljno je promijeniti samo jedan fajl sa stilskim listovima.
