Naučit ćemo što su kaskadni listovi stilova, što je CSS stil i naučiti kako ga postaviti za HTML elemente.
Za ovaj članak već imate jasno razumijevanje da se jezik za označavanje hiperteksta koristi za opisivanje sadržaja web stranice. Kada surfamo internetom, primjećujemo da stranice izgledaju drugačije: boje, fontovi, različiti razmak između redova, pozadinske slike pa čak i animacija. Ne stavljajući ga u udaljenu kutiju, želim vam odmah objasniti da na način na koji će ove stranice izgledati utječu kaskadne tablice stilova (Kaskadni listovi stilova - CSS). Kao dio HTML tutoriala, ukratko ćemo pogledati korištenje kaskadnih stilskih tablica, možete ih detaljno proučiti nakon ovog tečaja u odjeljku CSS tutorial.
Što je stil? Stilski setovi izgled bilo koji element stranice, tj. grubo govoreći, to je pravilo koje pregledniku govori kako formatirati određeni element (na primjer, promijeniti pozadinu ili boju fonta).
Svaki HTML element ima zadani stil... Promjena zadanog stila u HTML elementu može se izvršiti pomoću atributa globalnog stila. Atribut specificira ugrađeni (u redu) CSS stil za element. Inline CSS se koristi za primjenu jedinstvenog stila na jedan HTML element... U okviru učenje HTML-a pokriti ćemo samo korištenje inline CSS-a.
Savjet: Ovaj primjer koristi sljedeće boje: bijelim(bijeli), kaki(kaki), siva(Siva). Za tekst pjesme korišten je font Verdana.
Ako imate poteškoća s dovršavanjem zadatka, provjerite kôd stranice tako što ćete otvoriti primjer odvojeni prozor klikom na sliku.
Već znamo da kako bi web stranica izgledala lijepo i elegantno, moramo raditi s CSS datotekom. A da bi se naši stilovi mogli primijeniti, potrebno je povezati se HTML datoteka i CSS datoteku.
Postoji nekoliko opcija za izvođenje ove operacije: korištenje ugniježđenih stilskih tablica, vanjskih stilskih listova i umetnutih stilova.
Danas ćemo govoriti o potonjoj metodi.
Stiliziranje HTML oznake
Bit ove metode je da u oznaku ugrađujemo potreban dizajn. Za to, odvojeno atribut – stil. Ovaj atribut može se primijeniti na bilo koju oznaku, ali samo unutar tijela stranice, tj unutar tijela... Vrijednost ovog atributa su izjave o stilu koje je potrebno primijeniti na navedeni element.
Na primjer, postavimo različite veličine font za dva različita odlomka teksta:
< p style= "font-size:25px;" >Postavite ovaj segment teksta na visinu slova od 25 piksela. < p style= "font-size: 15px; boja: # 2400ff;"> I ovaj tekst će biti sa slovima, visine 15 piksela, a također će biti obojen u plavo kako bi se demonstrirala primjena nekoliko stilova u isto vrijeme.
nedostatke
Primjer savršeno pokazuje kako ovakav stil začepljuje kod stranice.
Također možete primijetiti još nekoliko nedostataka korištenja ove tehnike stiliziranja. Prvi od njih se može nazvati širenjem stila kroz dokument, što će u perspektivi uređivanja s vremena na vrijeme komplicirati proces.
Također će biti teško formatirati velike količine teksta. Mislim da nitko nije zadovoljan mogućnošću propisivanja veličine fonta za svaki odlomak, pogotovo ako ima 40 takvih odlomaka.
Č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 zbrku koja će sigurno isplivati na površinu u korištenju atributa stila. Ova zabuna će proizaći iz upotrebe različitih navodnika pri pisanju stilova.
Radi jasnoće, pogledajmo primjer u nastavku:
< div style= "familija fontova:" Roboto Condensed ", sans-serif"> Unos je točan. < div style= "familija fontova:" Roboto Condensed ", sans-serif"> Ovo je također točno. < div style= "font-family: " Roboto Condensed ", sans-serif" >Ovo nije valjan unos. < div style= "font-family: " Roboto Condensed ", sans-serif" >A ni to nije istina
Gledajući gore prikazane izračune, logičan zaključak se nameće da je korištenje inline stilova povezano s nizom značajnih komplikacija i neugodnosti.
Kada koristiti inline stil
Unatoč svim nedostacima, inline stil nije izmišljen uzalud. Webmasteri ih često pozivaju na programski stil. Na primjer, pogledajmo ovaj kod.
< div id= "productRate" > < div style= "width: 40%" >
Upisivanje potrebne širine za ovaj blok bit će 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 oznaka možda neće raditi. Stoga je vrijedno pozvati se na atribut stila:
< div style= "background:url(fon.jpg)" >
Također, programeri se često okreću ugrađenim stilovima kada dizajniraju skočne prozore. Često se ovaj proces odvija na sljedeći način: blok, preko čijeg dizajna radovi u tijeku, display: block je napisan, a ostali prozori su skriveni display: none, tako da vizualno ne ometaju rad programera. Evo primjera:
< div class = "element" style= "display:block" >Skočni prozor koji se trenutno prikazuje
Ishod
Korištenje inline stilova povezano je s brojnim poteškoćama i neugodnostima, međutim, u procesu oblikovanja nekih elemenata, webmasteri se često okreću ovoj metodi kako bi optimizirali svoj rad.
Postoje četiri načina postavljanja CSS stil za oznake HTML.
1) Inline stil.
2) Uvedeno stil
3) Uvozni stil.
4) Stil iz datoteke.
I u ovom članku ćemo proći kroz sve četiri metode.
Za početak, prvi način je inline stil... Ovaj stil je naveden izravno u samoj oznaci. Na primjer:
tekst
V u ovom slučaju postavljamo element na " tekst"bit će u veličini 150% i usklađen sa centar... To je primjer inline-stilu.
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
učinit će se sljedeće: njihova će boja biti crvena, a gornja margina će biti 100 piksela.
Treći način dodjele CSS stil- ovo je uvezeni stilovi... Oni su također poput ugrađen postavljeni su u zaglavlju dokumenta, ali već iz datoteke. Evo primjera:
Ovdje će se stilovi iz datoteke primijeniti na cijelu stranicu " my.css".
I posljednji pogled CSS stilovi su stilovi iz datoteke. Ova metoda je najčešći, a sastoji se od uključivanja datoteke stila kroz oznaku u glavi dokumenta. Na primjer, na ovaj način:
Ova metoda je vrlo slična prethodni način ali se oznaka ovdje ne koristi
Ako napišete ovakav kod između oznaka ... , tada će svi naslovi prve razine biti plavi. Ovom metodom stilovi se postavljaju pomoću oznaka ... Također tegu , ali ne i web mjesto u cjelini.
Naslov prve razine
Naslov treće razine centriran u html dokumentu
Naslov šeste razine, desno poravnat na web stranici
Nakon toga stvaramo nova datoteka takav sadržaj:
H1 (boja: plava;)
H3 (boja: crvena;)
H6 (boja: zelena;)
I spremite ga kao stil s produžetkom * css... Vidite rezultat. Ovo je naša html datoteka sa zaglavljima. Analizirajmo sada kako ova konstrukcija funkcionira. U html dokumentu s naslovima nalazimo se između oznaka ... napisao sljedeći redak:
Ovdje pomoću oznake povezujemo stilove s html dokumentom. Atribut href odnosi se na mjesto gdje se nalazi tablica stilova, ovo je obavezan atribut. Atribut tip već znamo da određuje vrstu stilova. Atribut rel označava odnos uključene datoteke prema danom html-dokumentu. U našem slučaju vrijednost atributa rel = "tablica stilova" označava da smo dodali glavni stilski list. Prednost ove metode određivanja stilova je da ako želite promijeniti dizajn stranice kao cjeline, trebate promijeniti samo jednu datoteku sa stilovima.
