PROIZLAZITI:

Siva boja teksta u svim odlomcima web stranice

Siva boja teksta u svim odlomcima web stranice

Vanjski (povezani) stilovi

Vanjski (povezani) stilovi definirani su u zasebnoj datoteci s ekstenzijom css. Vanjski stilovi omogućuju da sve stranice web-mjesta izgledaju dosljedno.

Da biste se povezali s datotekom koja opisuje stilove, upotrijebite oznaku koji se nalazi u kontejneru ... .

Ova oznaka mora imati postavljena dva atributa: rel="stylesheet" I href, definirajući adresu datoteke stilova.

Primjer

Povezivanje stilova

Pravilo povezivanja globalnih i vanjskih stilova sastoji se od selektor I stil oglasa.

Selektor, koji se nalazi na lijevoj strani pravila, određuje element(e) za koje se pravilo postavlja. Dalje, u vitičaste zagrade navodi deklaracije stilova odvojene točkom i zarezom. Na primjer:

P (uvlaka teksta: 30px; veličina fonta: 14px; boja: #666; )

Deklaracija stila je par CSS svojstvo: CSS vrijednost.

Na primjer: boja: crvena

Prilikom internog povezivanja stila, CSS pravilo, što je vrijednost atributa stil, sastoji se od deklaracija stilova odvojenih točkom i zarezom. Na primjer:

CSS selektori

Univerzalni selektor

Univerzalni selektor odgovara bilo kojem elementu u HTML dokumentu.

Simbol zvjezdice (*) koristi se za označavanje univerzalnog selektora.

Koristi se ako trebate postaviti isti stil za sve elemente web stranice. Na primjer:

* ( margina: 0; ispuna: 0; )

U nekim slučajevima, znak zvjezdice (*) može biti izostavljen:
*.moj razred I .moj razred ekvivalenti,
*#Moj ID I #Moj ID ekvivalent

Selektori oznaka

Selektor može biti bilo koja HTML oznaka za koju su definirana stilska pravila. Na primjer:

H1 (boja: crvena; poravnanje teksta: središte;)

Ako nekoliko elemenata ima zajednički stil, onda selektori koji im odgovaraju mogu biti navedeni u listu stilova, odvojeni zarezima. Na primjer:

H1, h2, h3, h4 (boja: crvena; poravnanje teksta: sredina;)

ID selektori

HTML pruža mogućnost dodjele jedinstvenog identifikatora bilo kojoj oznaci. Identifikator je određen atributom iskaznica. Na primjer:

Vrijednost identifikatora mora započeti latiničnim slovom i može sadržavati slova (,), brojeve (), crtice (-) i podvlake (_).

Sve vrijednosti atributa iskaznica u html dokumentu mora biti jedinstven. Ako se sretnu iskaznica s istim vrijednostima, tada se ovi identifikatori zanemaruju, a kod web stranice postaje nevažeći.

U CSS kodu, birač identifikatora predstavljen je znakom hash (#). Budući da identifikator iskaznica odnosi se samo na jedinstvene elemente, ime oznake prije znaka hash (#) obično se izostavlja:

Div#a1 (boja: zelena;)

na sličan način

#a1 (boja: zelena;)

Preporučljivo je koristiti iskaznica ne za oblikovanje elementa, već za pristup kroz skripte ili praćenje veze.

Izbornici klasa

Selektori klasa najčešće se koriste za stiliziranje. Klasa za oznaku određena je atributom razreda. Na primjer:

Naziv klase mora započeti latiničnim slovom i može sadržavati slova (,), brojke (), crtice (-) i podvlake (_).

Ako atribut iskaznica koristi se za jedinstvenu identifikaciju, zatim pomoću atributa razreda oznaka se dodjeljuje jednoj ili drugoj skupini.

U CSS kodu, birač identifikatora predstavljen je točkom (.). Različite oznake mogu se klasificirati u istu klasu. U ovom slučaju, naziv oznake ispred točke (.) je izostavljen:

I.zelena (boja: #008000;) b.crvena (boja: #f00;).plava (boja: #00f;)

Za oznaku možete navesti nekoliko klasa u isto vrijeme navodeći ih u atributu razreda kroz prostor. U ovom slučaju, stilovi svake od navedenih klasa primjenjuju se na element.

Ako neke od ovih klasa sadrže ista svojstva stila, ali sa različita značenja, tada će se primijeniti vrijednosti stila klase koja se nalazi ispod u CSS kodu.

Selektori atributa

Postoje mnogi birači atributa koje možete koristiti za stiliziranje oznake na temelju njezinih atributa.

Između naziva oznake i uglate zagrade ([) ne smije biti razmaka!

Univerzalni selektor, oznaka, identifikator, selektor klase i atributa i pseudoklase su jednostavni selektori.

Jednostavni selektori mogu se ulančati u specifične sekvence na temelju odnosa elemenata u stablu web-dokumenta. Takve konstrukcije nazivaju se kombinatori.

Selektori konteksta

Jedan od najčešće korištenih kombinatora je selektor konteksta.

Selektori konteksta ili selektori potomci definiraju više elemenata od kojih je jedan sadržan u drugom. U selektoru konteksta, jednostavni selektori odvojeni su razmakom.

Primjer

1. Puškin A.S.
   • "pucanj"
   • "Mećava"
   • "Dubrovsky"
2. Gogol N.V.
   • "Inspektor"
   • "Taras Buljba"
   • "Mrtve duše"
3. Tolstoj L.N.
   • "Rat i mir"
   • "Ana Karenjina"
   • "Uskrsnuće"

PROIZLAZITI:

1. Puškin A.S.
   • "pucanj"
   • "Mećava"
   • "Dubrovsky"
2. Gogol N.V.
   • "Inspektor"
   • "Taras Buljba"
   • "Mrtve duše"
3. Tolstoj L.N.
   • "Rat i mir"
   • "Ana Karenjina"
   • "Uskrsnuće"

Izbornici djece

Selektor dijete identificira element koji se nalazi unutar samog drugog elementa. U podređenom selektoru, jednostavni selektori odvojeni su znakom veće od (>).

Primjer

1. Puškin A.S.
   • "pucanj"
   • "Mećava"
   • "Dubrovsky"
2. Gogol N.V.
   • "Inspektor"
   • "Taras Buljba"
   • "Mrtve duše"
3. Tolstoj L.N.
   • "Rat i mir"
   • "Ana Karenjina"
   • "Uskrsnuće"

PROIZLAZITI:

1. Puškin A.S.
   • "pucanj"
   • "Mećava"
   • "Dubrovsky"
2. Gogol N.V.
   • "Inspektor"
   • "Taras Buljba"
   • "Mrtve duše"
3. Tolstoj L.N.
   • "Rat i mir"
   • "Ana Karenjina"
   • "Uskrsnuće"

Susjedni selektori

Susjedni selektor navodi znak plus (+) koji razdvaja dva niza jednostavnih selektora. Elementi predstavljeni ovim nizovima sadržani su unutar jednog spremnika, a drugi odmah slijedi prvi, a nisu odvojeni nikakvim drugim oznakama.

Primjer

REFLEKSOLOGIJA

PROIZLAZITI:

REFLEKSOLOGIJA

Susjedni selektori

Susjedni selektor navodi znak tilde (~) koji razdvaja dva niza jednostavnih selektora. Elementi predstavljeni ovim nizovima sadržani su unutar istog spremnika, a drugi slijedi prvi (ne nužno izravno).

Primjer

REFLEKSOLOGIJA

“Svi činovi svjesnog i nesvjesnog života, prema načinu nastanka, refleksi su.” IH. Sechenov

Refleksologija je liječenje bolesti kontrolom refleksa. Uspješno se koristi u složenim programima liječenja ili kao samostalna tehnika.

PROIZLAZITI:

REFLEKSOLOGIJA

“Svi činovi svjesnog i nesvjesnog života, prema načinu nastanka, refleksi su.” IH. Sechenov

Refleksologija je liječenje bolesti kontrolom refleksa. Uspješno se koristi u složenim programima liječenja ili kao samostalna tehnika.

CSS style sheet, ako uzmemo samu definiciju, jezik je za opisivanje izgleda dokumenta. Odnosno, HTML je odgovoran za strukturu stranice, a CSS style sheets za cjelokupni dizajn. Ovdje sam sakupio informacije koje će vam omogućiti slobodno korištenje lista stilova. Neću pisati o tome koliko je to potrebno znati, jer je već jasno - bez toga nećete moći dovesti stranicu u koliko-toliko normalan oblik. Ako netko tek počinje učiti CSS stilove, onda će ovi materijali biti dovoljni da počne učiti CSS.

Kako biste stekli strukturirano znanje i što učinkovitije primijenili HTML+CSS+JS za svoje projekte i za projekte kupaca, morate redovito učiti i održavati svoju razinu.

Ali dobro je imati temelj. Mnogi, učeći sami, propuste mnoge osnovne stvari i onda klijenti pate, a čovjek ne razumije zašto su nezadovoljni.

Kako bi se spriječile takve situacije, potrebno je steći osnovne vještine pravilnim redoslijedom. Ako razvijate web-stranice i želite dalje napredovati u tome, preporučujem da se okrenete studiranju u online školama.

Ne oduzima vam vrijeme od svakodnevnog posla, ali uz pomoć učitelja kojima možete postavljati pitanja, rasti ćete vrlo brzo.

Jedna od tih online škola je Netology i svidio mi se tečaj “ “, također, kao alternativa iz druge Skillbox škole, obrazovni tečaj “ “. Svakako ih pažljivo proučite, a posebno nastavnike koji predaju ovaj predmet.

1. Osnovne stvari

Počet ću sa samim osnovama. Kad sam pokrenuo ovu stranicu, napisao sam male vodiče o učenju CSS stilova. Lekcije su prikladne kako za one koji tek počinju tako i za one koji već znaju nešto za obnavljanje znanja. Tamo je sve prikazano slikama i stvarnim primjerima.

Mala digresija: kada sam počeo proučavati temu izgradnje web stranice, naučio sam gotovo sve HTML oznake i nisu me puno inspirirali. Ali nakon što sam počeo proučavati CSS style sheet i pokušavati primijeniti svako od svojstava - jako mi se svidio (ne bih ga stvorio da mi se nije sviđao). Vidio sam da možete učiniti nevjerojatne stvari samo s koristeći CSS. Ovo nije programski jezik za čije učenje su potrebni mjeseci. List stilova može se savladati za jedan (maksimalno dva) tjedna.

Naravno, nećete proučavati apsolutno sva svojstva i njihova značenja, a to nije ni potrebno! Trebate znati samo osnove kako biste ga mogli početi primjenjivati ​​i koristiti u svojim projektima. Jedna važna nijansa je da morate ODMAH primijeniti svojstvo koje ste upravo naučili na stvarnom primjeru. Neka to bude vaša vlastita web stranica ili jednostavna HTML web stranica - nema razlike. Bitno je da to sami pokušate napisati i vidite rezultat.

Imam mnogo primjera na svojoj stranici koji koriste CSS. Zajedno sadrže više od 100 lekcija! Kada znate barem osnove, onda možete sigurno mijenjati i primijeniti sve primjere iz lekcija.

Moji vodiči o osnovama kaskadnih CSS stilova

2. CSS i CSS3 varalice

Eto, naučio si osnove i nakon par dana sve zaboravio s “uspjehom” i, vjerojatno, misliš da to nije tvoj fazon i da je sve komplicirano. Želim vas malo razveseliti - ni ja ne poznajem sve CSS svojstva. Ali što me sprječava da ih gledam na internetu?

Istina, za sada ćete otići na Yandex ili Google, a zatim ćete upisati zahtjev koji vam je potreban. A ako vam pretraga i dalje ne daje ono što trebate. Možete provesti mnogo vremena na ovaj način, a opet ne pronaći ono što ste stvarno tražili.

Srećom, dobri ljudi su sastavili vrlo korisne varalice koje su mi više puta pomogle. Dovoljno je shvatiti gdje se što nalazi i tada nije teško pronaći potrebne nekretnine.

CSS i CSS3 varalice

Ovo su jednostavno nezamjenjivi materijali pri postavljanju i razvoju dizajna web stranice. Vrijeme potrebno za odvraćanje pažnje i traženje opisa nekretnina na internetu višestruko se smanjuje.

Istina, kao što razumijete, što više gradite web stranice ili dizajnirate, to manje morate gledati ovaj alatni opis, jer sva potrebna svojstva uvijek ostaju u memoriji. Ali ipak, neće biti suvišno imati ovaj set varalica pri ruci.

To je kao u školi: ak i ne koristis cheat sheet ipak ti je dusa nekako mirnija s njim 😆 .

Dodatak lekciji - HTML varalice

Osim CSS varalica, postoje i HTML varalice. Ako ste zaboravili neke oznake, uvijek ih možete potražiti u ovoj HTML tablici za varanje. Veza za preuzimanje pojavit će se nakon što kliknete na jedan od gumba društvene mreže ispod ovog videa.

Zaključak

Ako ste početnik i tek učite osnove CSS-a, onda su moji CSS vodiči savršeni za vas. Gradivo je u njima predstavljeno ukratko i samo je potrebno vlastitim rukama ponoviti o čemu se radi u lekciji. I iskusniji webmasteri moći će osvježiti svoje znanje brzim pregledom svih lekcija. Također možete preuzeti CSS i CSS3 varalice koje će vam pomoći da ne zaboravite osnovna svojstva i uvijek će vam biti pri ruci, u kojem slučaju možete brzo pogledati i zapamtiti potrebne informacije.

I naravno, glavne točke članka.

CSS- Cascading Style Sheets (kaskadni stilski listovi) su alat koji vam omogućuje postavljanje različitih vizualnih svojstava HTML oznaka.

Službena web stranica programera: http://www.w3.org/TR/CSS21/cover.html.

CSS se sastoji od pravila. Pravila imaju ime i značenje. Oni su odvojeni dvotočkom (naziv pravila: vrijednost pravila). U značenjima pravila ne stavljamo nikakve navodnike! Primjer:

Boja: crvena; pozadina: #cccccc ;

Ali kako povezati CSS s HTML-om? Kako napisati stilove dokumenta u html kodu? Za to postoje 3 rješenja:

• Prilog (umetnuti).
• Ugrađivanje.
• Povezivanje.

Osnova dokumenta je html, a css je već primijenjen na njega. Konkretno za dokument sam css ne znači ništa.

Metoda ugniježđivanja (inline) CSS

Koristi se atribut stila. Može se postaviti u bilo koji vizualno prikazan element. CSS pravila su napisana u stilu (naziv pravila: vrijednost pravila), nekoliko pravila je odvojeno točkom i zarezom (; je kraj pravila u css-u):

Običan tekst

"boja:crvena; pozadina:#cccccc"> Ovaj odlomak je stiliziran koristeći inline metodu.

Metoda ugrađivanja CSS-a

korišteno poseban element“style”, unutar kojeg su zapisana css pravila. Unutar stila pišemo samo CSS jezik. Primjer:

U ovom smo primjeru napisali pravilo za element odlomka "p". U 2. redu smo napisali selektor (na koje oznake će se primijeniti css pravilo). Samo pravilo je napisano u vitičastim zagradama "( )".

Element "style" postavlja se samo u element "head".

CSS način povezivanja

Kako ne biste svaki put pisali stilove u dokument (ne uploadali dokument), morate CSS pravila napisati na jednom mjestu i primijeniti ih na različite dokumente (na neograničen broj).

Da bismo to učinili, sva css pravila smo stavili u zasebno tekstualna datoteka. Ova datoteka obično ima nastavak .css. I onda odmah možete vidjeti da sadrži stilska pravila. Ne možete ga pobrkati ni s čim.

Kako onda možemo povezati ovu odvojenu css datoteku s našim html dokumentom? Da biste to učinili, upotrijebite sljedeći kod u odjeljku head:

Oni. odredite datoteku sa stilovima putem hiperveze na nju. Preglednik učitava stilsku datoteku i primjenjuje pravila iz nje na cijeli dokument. U biti ovo radi na isti način kao element "style", ali je u zasebnoj datoteci. I možemo staviti poveznicu na css datoteku u bilo koji dokument. Ovo je vrlo zgodno, jer... Uređujem stilove u jednoj datoteci; Nakon što jednom preuzmete list stilova, kada prijeđete na sljedeće stranice, preglednik više neće tražiti ovu css datoteku, dobit će je iz predmemorije (vrsta privremene pohrane preuzetih datoteka). Na taj način štedim promet i ubrzavam prikaz stranice.

Pažnja! Element "link" neće raditi s jednim href atributom. Jer ova se hiperveza koristi u različite svrhe. Ovo je hiperveza usluge koja može upućivati ​​na Različite vrste datoteke koje se mogu koristiti u različite svrhe za vaše stranice. Kako bi preglednik znao da je ovo stilska tablica, koristi se rel atribut (rel=”stylesheet”). Određuje vrstu odnosa između dokumenta koji se učitava i našeg glavnog dokumenta. Preglednik sada razumije da je dokument koji se učitava lista stilova.

CSS (Cascading Style Sheets), ili kaskadni stilski listovi, koriste se za opisivanje izgleda web dokumenta napisanog u označnom jeziku. CSS postavlja stilska pravila koja mijenjaju izgled elemenata postavljenih na web stranice, fino podešavajući njihove detalje poput boje, fonta, veličine, obruba, pozadine i položaja u dokumentu.

Možete ugraditi CSS kod izravno u element oznake kao vrijednost atributa stil. Ovaj je atribut dostupan za sve HTML elemente. Pomoću CSS-a možete navesti niz stilskih svojstava za određeni HTML element. Svako svojstvo ima naziv i vrijednost, odvojene dvotočkom (:). Svako deklarirano svojstvo odvojeno je točkom i zarezom (;).

Ovako izgleda element

Načini dodavanja CSS stilova

CSS standard nudi tri opcije za primjenu lista stilova na web stranicu:

• Vanjski stilski list - definiranje pravila stilskog lista u zasebnoj .css datoteci, a zatim uključivanje ove datoteke u HTML dokument pomoću oznake
• Interna tablica stilovi - definiranje pravila lista stilova pomoću oznake

  Primjer: interni stilski list

  • Probajte sami"

  Naslov

  Prvo tekst

  Tekst dva

  Tekst tri

  Naslov

  Prvo tekst

  Tekst dva

  Tekst tri

  
  
  

  U ovom primjeru smo postavili boju pozadine za element koristeći CSS : boja pozadine: blijedozelena, boju i vrstu fonta za naslove

  : boja:plava; obitelj-fontova:verdana, kao i veličinu fonta, boju i središnje poravnanje teksta za odlomke

  : veličina fonta:20px; boja: crvena; poravnanje teksta: središte.

  Ugrađeni stil

  Kada trebate formatirati jedan element HTML stranice, opis stila može se postaviti izravno unutar početne oznake pomoću već specijaliziranog atributa stila. Na primjer:

  stavak

  Takvi se stilovi nazivaju ugrađeni (inline) ili ugrađeni. Pravila definirana izravno unutar početne oznake elementa nadjačavaju pravila definirana u vanjskoj CSS datoteci, kao i pravila definirana unutar elementa

  Naslov

  Prvo tekst

  Tekst dva

  Tekst tri

  
  
  

  Zadaci

  • Središnje poravnanje teksta

    Koristeći umetnuti stil odlomka, centrirajte tekst.

  Već znamo da, kako bi web stranica izgledala lijepo i moderno, moramo raditi s CSS datotekom. A da bi se naši stilovi mogli primijeniti, moramo se kombinirati HTML datoteka i CSS datoteku.

  Postoji nekoliko opcija za izvođenje ove operacije: korištenje ugniježđenih stilskih listova, vanjskih stilskih listova i ugrađenih stilova.

  Danas ćemo govoriti o potonjoj metodi.

  Ubacivanje stila u HTML oznaku

  Suština ovu metodu je da implementiramo potreban dizajn unutar oznake. Odvojena atribut – stil. Ovaj atribut može se primijeniti na bilo koju oznaku, ali samo unutar tijela stranice, tj unutar tijela. Vrijednost ovog atributa su operatori onih stilova koji se trebaju primijeniti na dati element.

  Na primjer, postavimo različite veličine fonta za dva različita odlomka teksta:

  < p style= "font-size:25px;" >Postavite ovaj dio teksta na visinu slova od 25 piksela. < p style= "veličina fonta:15px; boja:#2400ff;"> I ovaj će tekst imati slova, visoka 15 piksela, a također ćemo ga obojiti u plavo kako bismo demonstrirali korištenje nekoliko stilova u isto vrijeme.

  Mane

  Primjer savršeno pokazuje kako takav stil začepljuje kod stranice.

  Također možete primijetiti još nekoliko nedostataka korištenja ove tehnike stilizacije. Prvi od njih je širenje stila po dokumentu, što će u budućnosti uređivanja znatno zakomplicirati proces.

  Također će biti teško formatirati velike količine teksta. Mislim da nitko nije zadovoljan mogućnošću određivanja veličine fonta za svaki odlomak, pogotovo ako postoji 40 takvih odlomaka.

  Čak i kada koristite ugrađene stilove, postaje nemoguće koristiti pseudo-klase, što uvelike veže ruke web dizajneru.

  Također je vrijedno zapaziti zabunu koja će sigurno nastati u korištenju atributa stila. Ova će zabuna nastati zbog korištenja različitih navodnika prilikom unosa stilova.

  Radi jasnoće, pogledajmo primjer u nastavku:

  < div style= "obitelj-fontova: "Roboto Condensed", sans-serif"> Unos je točan. < div style= "obitelj-fontova: "Roboto Condensed", sans-serif"> To je također točno. < div style= "font-family: " Roboto Condensed ", sans-serif" >Ovo nije točan unos. < div style= "font-family: " Roboto Condensed ", sans-serif" >I to također nije istina

  Gledajući gore navedene izračune, nameće se logičan zaključak da je korištenje ugrađenih stilova povezano s brojnim značajnim komplikacijama i neugodnostima.

  Kada koristiti Inline Style

  Unatoč svim nedostacima, ugrađeni stil nije izmišljen uzalud. Webmasteri im se često obraćaju u slučaju dodjele programskog stila. Na primjer, pogledajmo ovaj kod

  < div id= "productRate" > < div style= "width: 40%" >

  Snimanje potrebne širine za ovaj blok bit će jednostavna operacija.

  Slična situacija može nastati ako je potrebno zamijeniti pozadinsku sliku (na primjer) korisnika s ulogom administratora. U ovom slučaju img oznaka možda nije prikladna. 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 stvaraju skočne prozore. Često taj proces ide ovako: bloku na čijem dizajnu se radi dodjeljuje se display:block, a preostali prozori se sakrivaju pomoću display:none tako da vizualno ne ometaju programerov rad. Evo primjera:

  < div class = "element" style= "display:block" >Skočni prozor koji je trenutno u izradi

  Poanta

  Korištenje ugrađenih stilova povezano je s nizom poteškoća i neugodnosti, međutim, u procesu dizajniranja određenih elemenata, webmasteri se često okreću ovoj metodi kako bi optimizirali svoj rad.