Pozdrav dragi čitatelji remontcompa! Moje ime je Roman Nahvat i predlažem vam pozornost članaka o jeziku stila CSS3. CSS kratica dolazi od engleskog Cascading Style Sheets, što znači kaskadni listovi stilova. Stil ili CSS je skup opcija oblikovanja primijenjenih na elemente u HTML dokumentu da bi promijenili svoj izgled. HTML sam po sebi samo je standardni jezik dokumenata HTML i koristi se za strukturiranje sadržaja HTML stranice, pa je HTML samo prvi korak u procesu učenja web stranica. Sljedeći korak je naučiti stilove ili CSS, što ćemo učiniti. Postoji nekoliko načina dodavanja stilova na web stranicu. Svaka metoda razlikuje se u svojim mogućnostima i namjeni. U ovom ćemo članku razmotriti tri načina dodavanja stilova u HTML dokument..

Baš o kompliciranom ili naučite CSS3. Dio 1. Pojam CSS-a. Načini povezivanja CSS stilova s ​​HTML dokumentom

Napravite standardnu ​​strukturu HTML dokumenta kao što je prikazano u nastavku.

Između oznaka napišite naslov HTML dokumenta, na primjer, "Metode povezivanja CSS stilova"

Korištenje oznaka

i

dodajte naslov web stranici s tekstom "Što je CSS"

Ispod naslova pomoću oznaka

i

stvorite mali odlomak s tekstom kao što je prikazano u nastavku

Spremite ovaj dokument na flash pogon u CSS mapu pod indeksom imena s nastavkom .html

Navedite indeks imena, odaberite vrstu datoteke html

Dobivamo sljedeće.

Ući ćemo u CSS mapu u kojoj se nalazi naš spremljeni html dokument nazvan indeks. Otvorite ga u web-pregledniku

Kao što vidite, sadržaj web stranice koju smo stvorili prikazan je u prozoru web preglednika, naime naslov s tekstom "Što je CSS" i odlomak koji počinje riječima "CSS je jezik stila koji definira ...."

Pomoću atributa poravnanja (dodijelivši mu središnju vrijednost) poravnat ćemo naslov s tekstom "Što je CSS" u središtu web stranice

Dobivamo sljedeće.

Promijenite boju teksta stavka iz standardne crne u drugu. Koristimo oznaku

Postoji mnogo html boja, na primjer, za tekst odlomaka na stranici koju smo stvorili odaberite boju DeepSkyBlue u boji

Postavite atribut boje oznake na DeepSkyBlue

Ponovno učitavamo našu web stranicu i vidimo da je tekst stavka promijenio boju iz crne u onu koju smo odredili

Na isti način promijenite boju naslovnog teksta, na primjer, u crvenu.

Dobivamo sljedeće

Vratit ćemo tekst naslova i odlomaka na našoj web stranici u izvorno stanje, naime, uklonit ćemo atribut poravnanja i oznake ...

Nakon uklanjanja oznaka ... i atributa poravnanja, dobivamo originalni izgled web stranice

Ako smo gore promijenili boju i raspored teksta naslova i odlomaka na web stranici pomoću html oznaka, sada ćemo učiniti istu stvar, ali koristeći CSS. Kao što je već spomenuto, u ovom ćemo članku razmotriti tri načina dodavanja stilova web stranici, i to: Dodavanje internih stilova web stranici; Dodavanje globalnih stilova na web stranicu; Dodavanje povezanih stilova na web stranicu; Razmislite o dodavanju internog stila web stranici. Interni stil je proširenje za jednu oznaku koja se koristi na web stranici. Atribut stila koristi se za definiranje stila, a njegova vrijednost je određeni skup pravila stila. Promijenite boju teksta naslova na web stranici u crvenu i također je centrirajte koristeći interni stil. Za označavanje

dodati atribut stila, tada ćemo zapisati svojstva stila, naime: tekst-poravnanje: sredina, boja: crvena

Dobivamo sljedeće.

Kao rezultat toga, otvarajući datoteku index.html u web pregledniku, vidimo da je tekst naslova na web stranici crven i centriran.

Na isti način pomoću atributa stila promijenite boju teksta stavka iz standardne crne u deepskyblue

Ponovno učitavamo stranicu index.html i vidimo promjenu boje stavka.

Promijenite boju teksta naslova na web stranici u crvenu i centrirajte je, ovaj put koristeći globalni stil. Ako se primijeni globalni stil, CSS svojstva nalaze se između i oznaka, a oni (i oznake) se, s druge strane, nalaze između oznaka i .

Između oznaka i u kovrčave zagrade pišemo svojstva stila zaglavlja web stranice (oznake)

), a za odlomak (oznaka

): h1 text-align: sredina; boja: crvena - tekst naslova stavite u sredinu web stranice i promijenite njegovu boju u crvenu p color: deepskyblue - promijenite boju stavka u deepskyblue

Kao rezultat toga, dobivamo isti rezultat kao i kod upotrebe unutarnjih stilova.

Razmotrite zadnji način dodavanja stilova na web stranicu, naime upotrebu povezanih stilova. Suština srodnih stilova je da su definirani u datoteci odvojeno od html dokumenta i imaju .css ekstenziju. Kreirajte još uvijek prazan dokument i spremite ga na flash pogon u CSS mapi pod imenom imena i ekstenzijom .css

zadržati.

Stvorena datoteka stila s .css ekstenzijom

Ostavite datoteku style.css za sada prazno.

Za povezivanje html dokumenta (u našem slučaju to je index.html) s datotekom stilova style.css, koristimo oznaku. Oznaka bi trebala biti smještena unutar oznaka ... Napišemo sljedeći redak između oznaka: gdje: rel = "stylesheet" - atribut oznake koji govori web pregledniku da će stilovi biti povezani; atribut href = "style.css" označava put do datoteke stilova style.css

Prilikom stvaranja stilskih datoteka morate se pridržavati određenih pravila u nastavku (ista se pravila moraju poštivati ​​prilikom dodavanja globalnih stilova) Jedan od glavnih elemenata datoteke stila je selektor. Selektor određuje na koji će element u html dokumentu primijeniti određene parametre stila. Selektor su oznake, klase i identifikatori. Nakon što je selektor naveden, postavljaju se kovrčavi zagrade u koje je registrirano svojstvo stila, a zatim je navedena njegova vrijednost. Na primjer, html oznaka h1 je označena kao selektor u donjem dijagramu, boja: kao svojstvo stila piše se vrijednost svojstva stila

Budući da želimo smjestiti tekst naslova (tag

) u sredini web stranice, a tekst postavite crveno, kao i tekst stavka (oznaka)

) prikaz u boji deepskyblue, u datoteci stilova style.css pišemo retke: h1 text-align: center; boja: crvena i p boja: deepskyblue gdje: h1 text-align: center; boja: crvena - poravnajte tekst zaglavlja ("Što je CSS") u sredini i tekst postavite na crveno p color: deepskyblue - postavite tekst stavka ("CSS je jezik stila koji definira ...") boja deepskyblue

Kao rezultat povezivanja style.css datoteke s html dokumentom index.html, vidimo da je tekst naslova na web stranici centriran i ima crvenu boju. Tekst stavka je također promijenio boju u deepskyblue

Nastavak u članku: Samo o kompliciranom ili naučite CSS3. Dio 2. Vrste CSS birača