Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • Windows 10
  • Kreiranje css stila. Osnovni, spremni za upotrebu CSS stilovi

Kreiranje css stila. Osnovni, spremni za upotrebu CSS stilovi

29.06.2020 Windows 10

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 kombinirati HTML datoteku i CSS datoteku.

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 fonta 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.

nedostatke

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 kroz dokument, što će u budućnosti povremeno 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, oznaka img možda neće raditi. 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 ovaj proces ide na sljedeći način: blok koji se dizajnira je postavljen na display:block, a ostali 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.

Za svaku oznaku možete postaviti pojedinačna svojstva, boju, pozadinu, ivice i druga svojstva. Format vizuelnog dizajna naziva se css (Cascading Style Sheets), što znači „kaskadni listovi stilova“.

U ovom članku ćemo razmotriti 3 načina kako uključiti css stilove u html kod web stranice da promijenite izgled.

1 Way. Uključite zasebnu css datoteku u html kod stranice

Ovaj fajl sadrži svojstva za oznake. Ovo je najprikladniji i najpraktičniji način postavljanja css stilova za html, posebno ako stranica ima više od 1 stranice. Promjenom samo 1 datoteke, možete promijeniti dizajn svih stranica na kojima je povezan. Pokušajte napisati svojstva u poseban fajl.

Kako postaviti datoteku css stila na html

Možete postaviti css stilove u html kodu stranice web mjesta iz datoteke pomoću oznake , koji se mora postaviti između oznaka I. Uobičajena ekstenzija fajla: .css .

Primjer povezivanja datoteke (kod stranice.html)








Tekstualni sadržaj




Primjer koda same datoteke stila (code page.css)

P (boja:zelena;)

U gornjem primjeru, datoteka se zove my_style.css i nalazi se u folderu /my_css.

Ovaj fajl sadrži svojstvo za oznaku

Kod p (boja:zelena;) znači: napraviti boju teksta unutar oznake

Zeleno. U ovom primjeru uključena je samo jedna datoteka, ali ako je potrebno, možete uključiti neograničen broj njih.

2 way. Napišite na vrhu stranice

Ova metoda je gotovo identična povezivanju datoteke, ali ima značajan nedostatak - ako imate nekoliko stranica, onda da biste promijenili njihov vizualni dizajn, morate promijeniti svaku. Ova metoda ima smisla samo ako:

Imate li web stranicu na jednoj stranici?

Ovaj vizuelni dizajn je samo za trenutnu stranicu. Na primjer, za vizualni dizajn elemenata kojih nema na drugim stranicama.

U drugim slučajevima, bolje je dodati css stilove na stranicu koristeći zasebnu datoteku koristeći metodu opisanu iznad. Ali čak je i pojedinačni izgled u mnogim slučajevima pogodnije postaviti u zasebnu datoteku, tako da se ova metoda uopće ne može koristiti.

Kako dodati css stilove u html kod web stranice

Možete dodati cs stilove na html stranicu stranice, baš kao i fajl, odnosno između I. Umjesto veze do datoteke pišu se samo oznake, unutar koje su napisani sami stilovi.

Primjer dodavanja svojstava oznake na početku (code page.html)








Tekstualni sadržaj





3 Way. Upišite stil u atribut style za svaku oznaku posebno

Ova metoda se široko koristi kada se unutar jedne stranice nalaze elementi koji se međusobno ne razlikuju mnogo, na primjer, samo po boji (uvlačenje, veličina itd.). U ovom slučaju, brže je i praktičnije povezati jedan uobičajeni css stil sa html-om koristeći zasebnu datoteku i dodati male promjene određenim elementima. Atribut style ima najveći prioritet, tako da će oznaka primiti sva svojstva navedena u stilu, čak i ako su prethodno specificirana na drugačiji način.

U stvari, logika je sljedeća: opće i najčešće korištene stilove upisujemo u datoteku (1 način), a detaljna podešavanja u samim elementima. Na primjer, ako imate 5 naslova na stranici koji se razlikuju po boji, onda je bolje da u datoteku napišete opća svojstva koja određuju veličine i uvlake ovih naslova, te boju u samim elementima, prema ovoj metodi. kod oznake

Metoda 3 ima najveći prioritet, tako da će oznaka primiti svojstva navedena u atributu style="" čak i ako su prethodno specificirana pomoću druge metode.

Cascading Style Sheets CSS (Cascading Style Sheets) je standard stila koji je proglasio W3C konzorcij. Termin kaskadno ukazuje na mogućnost spajanja različitih vrsta stilova i nasljeđivanja stilova unutarnjim oznakama od vanjskih.

CSS je jezik koji sadrži skup svojstava za definisanje izgleda dokumenta. CSS specifikacija definiše svojstva i deskriptivni jezik koji se odnosi na HTML elemente.

CSS je apstrakcija u kojoj je izgled Web dokumenta definisan odvojeno od njegovog sadržaja.


Neki stilovi nisu podržani od strane svih pretraživača. Međutim, možete dodijeliti bilo koje stilove, jer će nepodržani stilovi jednostavno biti zanemareni.


Možda će vam trebati i:


Postoje tri vrste stilova za dodavanje stilova dokumentu.

Unutrašnji stilovi

Interni stilovi su definirani atributom stil specifične oznake. Interni stil utiče samo na elemente definisane takvim oznakama. Ova metoda se malo razlikuje od tradicionalnog HTML-a.

Primjer

Paragraf sa plavim tekstom

REZULTAT:

Paragraf sa plavim tekstom

Stav sa crvenim tekstom

Interne stilove ne biste trebali koristiti prečesto, jer tada web dokument postaje preopterećen kodom i njegov izgled je teško promijeniti.

Global Styles

Globalni CSS stilovi su smešteni u kontejner , koji se nalazi u kontejneru ... .


Atribut type="text/css", prethodno potrebno za oznaku .........

Siva boja teksta u svim pasusima web stranice

REZULTAT:

Siva boja teksta u svim pasusima web stranice

Siva boja teksta u svim pasusima web stranice

Vanjski (povezani) stilovi

Eksterni (povezani) stilovi su definisani u posebnoj datoteci sa ekstenzijom css. Vanjski stilovi omogućavaju da sve stranice stranice izgledaju isto.

Za povezivanje na datoteku koja opisuje stilove, koristite oznaku nalazi u kontejneru ... .

Ova oznaka mora imati dva atributa: rel="stylesheet" I href A koji specificira adresu datoteke sa stilovima.

Primjer
......... ......... .........

Povezivanje stilova

Pravilo za povezivanje globalnih i eksternih stilova sastoji se od selektor I deklaracije stila.

Selektor, koji se nalazi na lijevoj strani pravila, specificira elemente za koje je pravilo postavljeno. Zatim, deklaracije stila su navedene u vitičastim zagradama, odvojene tačkom i zarezom. Na primjer:

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

Deklaracija stila je par CSS svojstvo: CSS vrijednost.

Na primjer: boja: crvena

Kada interno uključuje stil, CSS pravilo koje je vrijednost atributa stil, sastoji se od deklaracija stila odvojenih tačkom i zarezom. Na primjer:

CSS selektori

SelektorOpisViše
* Bilo koji element
EElement definiran oznakom E
E#myidE element s id "myid"
E.myclassElement E klase "myclass"
EBirač postojanja atributa
ESelektor jednakosti atributa
ESelektor atributa sa listom vrijednostiSelektori atributa
ESelektor prefiksa atributa
ESelektor sufiksa atributa
ESelektor podniza atributa
e:linkElement E - link koji korisnik još nije posjetioDinamičke pseudo-klase
E:posjetioElement E - link koji je korisnik već posjetioDinamičke pseudo-klase
E: lebdiElement E kada pređete mišem preko njegaDinamičke pseudo-klase
E:aktivanElement E aktiviran od strane korisnikaDinamičke pseudo-klase
E: fokusE element u fokusuDinamičke pseudo-klase
E:targetE element koji je cilj vezeCiljna pseudo-klasa
E:langElement E napisan na navedenom jezikuJezička pseudo-klasa
E:omogućenoElement E - dostupan element formeDržavne pseudo-klase
E: onemogućenoElement E je nedostupan element obrascaDržavne pseudo-klase
E: provjerenoElement E - omogućen okvir za potvrdu ili radio dugmeDržavne pseudo-klase
E:neodređenoElement E - nedefinirano polje za potvrdu ili radio dugmeDržavne pseudo-klase
E: rootElement E, korijen dokumentaStrukturne pseudo-klase
E:nth-dijete(n)Element E, n-to dijete roditeljskog elementaStrukturne pseudo-klase
E:nth-last-child(n)Element E, n-to dijete roditeljskog elementa, računajući od krajaStrukturne pseudo-klase
E:n-ti-tipa(n)n-ti element tipa EStrukturne pseudo-klase
E:nth-last-of-type(n)n-ti element tipa E, računajući od krajaStrukturne pseudo-klase
E: Prvo dijeteElement E, prvo dijete roditeljaStrukturne pseudo-klase
E: posljednje dijeteElement E, posljednje dijete roditeljaStrukturne pseudo-klase
E: prvi u vrstiPrvi element tipa EStrukturne pseudo-klase
E: posljednji od tipaZadnji element tipa EStrukturne pseudo-klase
E: jedino dijeteJedino dete roditeljaStrukturne pseudo-klase
E: samo tipaJedini roditeljski element tipa EStrukturne pseudo-klase
E:praznoE element bez djeceStrukturne pseudo-klase
E: nije (X)E element koji ne odgovara jednostavnom selektoru XNegacija pseudo-klase
E::prvi redPrvi red E elementaPseudo elementi
E::prvo slovoPrvo slovo elementa EPseudo elementi
E::prijeSadržaj do E elementaPseudo elementi
E::posleSadržaj nakon elementa EPseudo elementi
E::izborIzbor u elementu EPseudo elementi
E FF element koji je unutar E elementa
E > FF element koji je direktno unutar E elementa
E+FF element koji odmah slijedi nakon E elementa
E~FF element koji dolazi iza E elementa

Univerzalni selektor

Univerzalni selektor odgovara bilo kojem elementu u html dokumentu.

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

Koristi se kada je potrebno postaviti isti stil za sve elemente web stranice. Na primjer:

* ( margina: 0; dopuna: 0; )

U nekim slučajevima, znak zvjezdice (*) može biti izostavljen:
*.moj razred I .moj razred ekvivalenti,
*#myid I #myid su ekvivalentni

Selektori oznaka

Bilo koja html oznaka može djelovati kao selektor, za koji su definirana stilska pravila. Na primjer:

H1 (boja: crvena; poravnanje teksta: centar;)

Ako će nekoliko elemenata imati zajednički stil, tada selektori koji im odgovaraju mogu biti navedeni u listi stilova odvojeni zarezima. Na primjer:

h1, h2, h3, h4 (boja: crvena; poravnanje teksta: centar;)

ID selektori

HTML pruža mogućnost dodjele jedinstvenog ID-a bilo kojoj oznaci. Identifikator je dat atributom id. Na primjer:

...

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

Vrijednosti svih atributa id u html dokumentu mora biti jedinstven. Ako upoznam id sa istim vrijednostima, ovi identifikatori se zanemaruju i kod web stranice postaje nevažeći.

U CSS kodu, selektor identifikatora je označen znakom funte (#). Pošto identifikator id odnosi se samo na jedinstvene elemente, naziv oznake prije znaka funte (#) se obično izostavlja:

Div#a1 (boja: zelena;)

isto tako

#a1 (boja: zelena;)

Preporučljivo je koristiti id ne za stiliziranje elementa, već za pristupanje kroz skripte ili praćenje veze.

Selektori klasa

Selektori klasa najčešće se koriste za stiliziranje. Klasa za oznaku je postavljena atributom klasa. Na primjer:

...

Ime klase mora početi latiničnim slovom i može sadržavati slova (,), brojeve (), crtice (-) i donje crte (_).

If attribute id se koristi za jedinstvenu identifikaciju, a zatim pomoću atributa klasa oznaka pripada jednoj ili drugoj grupi.

U CSS kodu, selektor identifikatora je označen tačkom (.). Različite oznake se mogu pripisati istoj klasi. U ovom slučaju, ime oznake prije znaka tačke (.) se izostavlja:

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

Možete navesti nekoliko klasa za oznaku u isto vrijeme tako što ćete ih navesti u atributu klasa kroz jaz. U ovom slučaju, stilovi svake od navedenih klasa se primjenjuju na element.

...

Ako neke od ovih klasa sadrže ista svojstva stila, ali s različitim vrijednostima, tada će se primijeniti vrijednosti stila klase ispod nje u CSS kodu.

Selektori atributa

Postoji mnogo selektora atributa koji se mogu koristiti za stiliziranje oznake na osnovu njenih atributa.


h1 (boja: #800000;) /* h1 element koji ima atribut title */
ulaz ( granica: 1px čvrsta #cc; padding: 4px 6px; širina: 300px; )
a (dekoracija teksta: nema; obrub dno: 1px pun #06c; boja: #06c; )
span (prikaz: inline-block; background-image: url("/img/icon_sprite.png"); )
a, a ( pozadina: url("pic.gif") dolje lijevo bez ponavljanja; prikaz: inline-block; širina: 32px; )
(prikaz: blok; plutajući: lijevo; širina: 280px; )

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


Univerzalni selektor, oznaka, identifikator, selektori klasa i atributa i pseudo-klase su jednostavni selektori.

Jednostavni selektori mogu biti povezani u specifične sekvence na osnovu odnosa elemenata u stablu Web dokumenta. Takve konstrukcije se nazivaju kombinatori.

Kontekstualni selektori

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

Kontekstualni ili potomci selektori definiraju više elemenata, od kojih je jedan unutar drugog. U selektoru konteksta, jednostavni selektori su odvojeni razmakom.

Primjer
  1. Puškin A.S.
    • "Pucanj"
    • "mećava"
    • "dubrovski"
  2. Gogol N.V.
    • "inspektor"
    • "Taras Bulba"
    • "mrtve duše"
  3. Tolstoj L.N.
    • "Rat i mir"
    • "Ana Karenjina"
    • "nedjelja"

REZULTAT:

  1. Puškin A.S.
    • "Pucanj"
    • "mećava"
    • "dubrovski"
  2. Gogol N.V.
    • "inspektor"
    • "Taras Bulba"
    • "mrtve duše"
  3. Tolstoj L.N.
    • "Rat i mir"
    • "Ana Karenjina"
    • "nedjelja"

Dječji selektori

Podređeni selektor definira element koji je direktno unutar drugog. U podređenom selektoru, jednostavni selektori su odvojeni znakom veće od (>).

Primjer
  1. Puškin A.S.
    • "Pucanj"
    • "mećava"
    • "dubrovski"
  2. Gogol N.V.
    • "inspektor"
    • "Taras Bulba"
    • "mrtve duše"
  3. Tolstoj L.N.
    • "Rat i mir"
    • "Ana Karenjina"
    • "nedjelja"

REZULTAT:

  1. Puškin A.S.
    • "Pucanj"
    • "mećava"
    • "dubrovski"
  2. Gogol N.V.
    • "inspektor"
    • "Taras Bulba"
    • "mrtve duše"
  3. Tolstoj L.N.
    • "Rat i mir"
    • "Ana Karenjina"
    • "nedjelja"

Susedni selektori

Susedni selektor definiše znak plus (+) koji razdvaja dva niza jednostavnih selektora. Elementi predstavljeni ovim sekvencama nalaze se unutar istog kontejnera i prate prvi direktno, nisu odvojeni nikakvim drugim oznakama.

Primjer

REFLEKSOLOGIJA

REZULTAT:

REFLEKSOLOGIJA

Susedni selektori

Susedni selektor definiše znak tilde (~) koji razdvaja dva niza jednostavnih selektora. Elementi predstavljeni ovim sekvencama nalaze se unutar istog kontejnera i slijede drugi nakon prvog (ne nužno direktno).

Primjer

REFLEKSOLOGIJA

"Svi činovi svjesnog i nesvjesnog života su, po nastanku, refleksi." NJIH. Sechenov

Refleksologija je liječenje bolesti kroz kontrolu refleksa. Uspješno se koristi u kompleksnim programima liječenja ili kao individualna tehnika.

REZULTAT:

REFLEKSOLOGIJA

"Svi činovi svjesnog i nesvjesnog života su, po nastanku, refleksi." NJIH. Sechenov

Refleksologija je liječenje bolesti kroz kontrolu refleksa. Uspješno se koristi u kompleksnim programima liječenja ili kao individualna tehnika.



U ovom vodiču, za kreiranje HTML i CSS fajlova, koristićemo uređivač Notepad ++, namenjen je korisnicima Microsoft Windows i svi primjeri će biti izvršeni u njemu.

Ako imate Mac, onda možete pratiti primjere u uređivaču zagrada, to je kao notepad++ potpuno besplatno. Što se urednika tiče Zagrade, onda je pogodan za korisnike Microsoft Windows, naknadno možete izabrati šta vam je bliže.

Kreirajte interni stilski list

Uzmimo primjer gdje ćete kreirati svoj prvi interni stilski list.

Korak 1: Otvorite uređivač teksta

Istovremeno pritisnite dugmad WIN + R (slično Start - Run), ovo će otvoriti dijalog "trčati" enter i pritisnite Enter (program će se otvoriti ), ili pokrenite program preko njene etikete.

Pred vama će se otvoriti glavni prozor programa:

Korak 2: Kreirajte strukturu dokumenta

Kopirajte ili zalijepite sljedeći HTML kod u uređivač:

</span> Interni stilski list

U kodu primjera ovog vodiča, dodaću dodatne komentare označene svijetlozelenom bojom. HTML koristi posebnu oznaku za kreiranje komentara u vašem kodu., tekst unutar takvog elementa ne prikazuje pretraživač. U CSS kodu, da biste dodali komentar, potrebno je da tekst komentara postavite u sljedeću strukturu: /* tekst komentara */. Možete napraviti komentare u CSS kodu i unutar inline stilova i izvan njega (u zasebnom fajlu).

Korak 3: Dodajte umetnute stilove

Sljedeći korak je dodavanje umetnutih stilova vašoj stranici: za naslov prvog nivoa, boja teksta je crvena (boja: crvena), a za pasuse plava (boja: plava). Pored toga, za naslov prvog nivoa, napravićemo poravnanje teksta prema centru ( text-align : center ). Uvjerite se da su svako CSS svojstvo i njegova vrijednost odvojeni dvotočkom, a svaka deklaracija završava tačkom i zarezom.

</span> Interni stilski list

Dobro je što se bavim samorazvojem.

Mogu naučiti CSS za mjesec dana ili manje

Korak 4: Pregledanje HTML stranice u pretraživaču

Otvorite primjer u pregledniku i provjerite da li rezultat našeg primjera odgovara slici:

Povezivanje eksternog stilskog lista

Sada ćemo kreirati zasebnu datoteku koja će sadržavati stilski list i povezati ga s našim HTML dokumentom.

  1. U Notepad++ kreirajte novu praznu datoteku i sačuvajte je kao page.css (kada sačuvate datoteku, morate odabrati Cascade Style Sheets *.css) u istoj fascikli u kojoj ste kreirali HTML dokument.
  2. Premjestite CSS kod iz prethodnog primjera (sadržaj oznake