Reguli de stil CSS. Selector structural de pseudoclase

1. Ce sunt foile de stil CSS în cascadă?

Aşa, ce sunt foile de stil în cascadă CSS?

css(engleză) Foi de stil în cascadă - foi de stil în cascadă) - limbaj de descriere aspect document scris folosind limbajul de marcare. Pentru a face mai ușor de înțeles pentru un începător, foile de stil în cascadă css sunt concepute pentru a crea modele frumoase și ușor de editat de pagini de site web html.

Foile de stil în cascadă au fost folosite pentru prima dată în anii 90 ai secolului trecut. Dar la început nu erau la fel de populare ca acum, deoarece diferite browsere percepeau și afișau paginile html care foloseau css în mod diferit.

După ceva timp, pentru a simplifica munca constructorilor de site-uri, browserele au început să fie „adaptate” la aceleași standarde. Astăzi, aproape toate programele folosite pentru a vizualiza paginile de Internet reproduc în mod egal site-uri care utilizează foi de stil în cascadă CSS.

Observatiile mele!!! Conform observațiilor mele personale, așa ultimele versiuni browsere precum Opera, Mazilla ForeFox, Maxthon, Google Chromeși Internet Explorer arată pagini care folosesc foi de stil în cascadă aproape identic, dar dacă browserele nu o fac ultimele generații, atunci paginile site-ului web vor arăta diferit. Și pentru ca site-ul dvs. să arate la fel în aproape toate browserele, există tehnologii speciale pentru specificarea foilor de stil în cascadă.

Deci, să începem să creăm o nouă foaie de stil și să o atașăm la documentul nostru.

2. Cum se creează o foaie de stil CSS în cascadă?

În această parte a articolului vom crea și vom conecta o foaie de stil în cascadă la cea mai simplă pagină html.

Deci, hai să facem asta:

1. Creăm un folder care va conține pagina noastră html și foaia de stil în cascadă. Lasă folderul meu să se numească „css”

2. Creăm o pagină html simplă (index.html). Puteți citi cum se face acest lucru aici.

3. Acum creăm un document text simplu (similar cu crearea html pagini), numiți-o doar style.css.

Ca urmare, ar trebui să obțineți acest lucru:

Gata, fișierul care va conține stilurile css este gata.

Acum să conectăm foaia de stil creată la fișierul index.html.

3. Cum se conectează o foaie de stil în cascadă css?

Deci, pentru a conecta o foaie de stil la o pagină html, trebuie să introduceți fișierul index.html din etichetă adauga tag:

Aici în atribut href="style.css" este specificată calea către fișierul cu stiluri CSS. În acest caz, fișierele css și index.html se află în același folder.

De exemplu, dacă fișierul nostru index.html avea următorul cod:

Important!!! Apropo, nu uitați să setați codificarea la 1251 (ANSI-Cyrillic) când salvați fișierul index.html în Notepad. Pentru că dacă nu faceți acest lucru și salvați fișierul într-o codificare diferită, browserul vă va afișa „doodle-uri” în loc de texte.

Dacă totul este făcut și salvat corect, atunci în browser veți vedea următoarele:

Asta e tot, fișierul index.html a fost creat și la el au fost conectate și foile de stil css.

Acum să verificăm funcționarea foilor de stil CSS.

Deci, să începem cu cel mai simplu lucru și să setăm eticheta stil nou, care definește imaginea de fundal a paginii html, culoarea de fundal a paginii (dacă imaginile sunt dezactivate în browserul vizitatorului paginii), marginile de sus și de jos, fontul implicit, dimensiunea și culoarea acestuia.

Pentru a seta o imagine de fundal, trebuie să o marcați în folderul cu fișierele noastre.

Descărcați arhiva bg.zip, dezarhivați-o și plasați fișierul bg.jpg în folder css. Ar trebui sa o ai asa:

Acum să setați stilul pentru etichetă document html, în foaia de stil trebuie să scrieți următoarele:

corp (...) - setarea stilurilor CSS pentru etichetă

imagine de fundal:url(bg.jpg); - imagine de fundal, unde parametrul url(...jpg) specifică calea completă către imaginea care va fi fundalul

culoare de fundal:#f6f6f6; - fundalul corpului documentului (tag ). Acest atribut este activat dacă browserul vizitatorului are imaginile dezactivate

margin-top:0px; - distanța de la corpul documentului până la partea de sus a browserului. În acest caz, Cascading Style Sheets css setează spațierea la 0 px.

margine-jos: 0px; - distanța de la corpul documentului până la partea de jos a browserului. În acest caz, foile de stil CSS în cascadă setează spațierea la 0px

font-family:Verdana; - setarea fontului implicit pentru un document

dimensiunea fontului: 12px; - dimensiunea fontului documentului 12 pixeli

culoare:#000000; - culoarea textului. În acest caz, foile de stil CSS setează culoarea fontului la albastru închis.

După ce salvați fișierul style.css, veți vedea următoarele în browser:

Foi de stil în cascadă sau CSS pentru începători (un atelier despre HTML „corect”)

Partea rusă a internetului crește pe zi ce trece. În ultimii doi ani, volumul total al paginilor în limba rusă s-a dublat. Astăzi, în Rusia, nu vei surprinde pe nimeni cu fraza<домашняя страничка>sau un cuvânt englezesc . Dacă mai devreme crearea de pagini web a fost lotul unor aleși și doar cei recunoscuți domneau în vastitatea Runetului<киты>web design, acum chiar și fiul meu de zece ani, în timpul liber de la școală, își creează în liniște propria pagină, intenționând să o plaseze pe un server gratuit (cum ar fi narod.ru sau boom.ru), care anul trecut Există, de asemenea, o mulțime de ei pe RuNet. Oamenii care nu sunt implicați în design web astăzi sunt probabil doar cei care nu sunt conectați la internet sau sunt leneși. Mulți oameni, după ce au rătăcit pe internet, mai devreme sau mai târziu se gândesc să-și creeze propria pagină. Pentru ei a fost scris acest articol.

Vom vorbi aici despre<правильном>HTML pentru începători, și anume despre câteva caracteristici suplimentare aprobate oficial de Internet Consortium (http://www.w3.org/). În special, despre unele dintre capabilitățile oferite de HTML dinamic (DHTML). Și chiar mai precis - despre cum să utilizați CSS (foi de stil în cascadă sau foi de stil în cascadă) pentru a crea o pagină care va arăta mai bine decât paginile create folosind<классического>HTML, în timp ce ocupă mai puțin spațiu și, în consecință, se încarcă mai rapid.

Puțini oameni care decid să-și creeze propria prezență pe web pentru prima dată se înarmează cu Notepad sau alt editor de text precum HomeSite De obicei, un începător gândește așa:<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - Eu creez texte în MS Word, prezentări în MS PowerPoint, așa că voi lua un program similar pentru a crea o pagină web - MS FrontPage...> După ce a luat o astfel de decizie, sculptorul web nou creat se jefuiește de două ori.

Prima dată - în sensul utilizării raționale a spațiului web. Faptul este că toți editorii vizuali de pagini web, care includ MS FrontPage menționat, se introduc în pagini create <отсебятину>- o mulțime de etichete suplimentare inutile. Excepție, poate, este Macromedia Dreamweaver (pentru care a câștigat o popularitate binemeritată atât în ​​rândul începătorilor, cât și al profesioniștilor). Dar nici măcar el nu este ideal în acest sens - îi place să arunce gunoi sursă ghilimele (în cele mai multe cazuri complet inutile), precum și inserarea caracterelor de spațiu care nu se rup în locurile cele mai nepotrivite. Pentru dreptate, este de remarcat faptul că toți editorii vizuali oferă utilizatorului posibilitatea de a lucra cu codul sursă al paginii care este creată, dar FrontPage, atât de iubit de mulți, va reface totul în felul său, de îndată ce vei reveniți la modul vizual.

Rezultă de aici că pentru a doua oară un începător se jefuiește tocmai în ceea ce privește flexibilitatea și controlul complet asupra conținutului paginii create - editorii vizuali nu oferă aceeași libertate de creativitate pe care o va face lucrul direct cu codul sursă al paginii create. da-ti.

Ei bine, acum să trecem direct la subiect - crearea de pagini web frumoase și mici folosind foi de stil în cascadă (în textul ulterioar voi folosi numele lor prescurtat - CSS). Se presupune că, dragi cititori, citind introducerea, sunteți de acord cu mine, ați abandonat editorii vizuali, ați primit o carte despre HTML, ați studiat cel puțin un număr mic de etichete și atribute de bază și sunteți dornici să știți ce este CSS și ce este este folosit cu.

Formatare logica si fizica

Versiunea HTML clasică 3.2, cea mai comună pe în acest moment pe Web, ne oferă un mijloc de formatare fizică a documentelor, pentru care există etichete speciale (de exemplu, etichete , , ) și multe atribute diferite (dimensiune, culoare, înălțime, lățime etc.). Caracteristicile formatării web ne obligă să scriem aceste etichete și atribute din nou și din nou pentru fiecare paragraf nou, ceea ce, desigur, crește foarte mult dimensiunea codului paginii. În plus, cu această metodă de formatare, în cazul analizării structurii documentului, rămâne neclar de ce este evidențiat acest cuvânt cu aldine- doar pentru frumusețe sau pentru a atrage o atenție deosebită din partea utilizatorului final? Dacă o persoană în viață este încă capabilă să înțeleagă cel puțin construcția logică a paginilor în HTML clasic, atunci acest lucru nu se poate spune despre motoarele de căutare sau, de exemplu, despre browserele vocale. Scoate-le și pune logica pură în structura paginii. Tocmai din această cauză<неподвластности>Pentru analiza logică, această metodă de formatare a fost numită formatare fizică. În schimb, la crearea noii specificații HTML 4.0, formatarea logică a fost pusă în prim-plan, adică formatarea în care structura și designul documentului să fie clar separate. Această metodă de formatare este recomandată pentru utilizarea de către consorțiul de Internet, deoarece oferă capabilități extinse de căutare a informațiilor pe Internet, vă permite să structurați și să analizați mai precis informațiile folosind motoarele de căutare și, de asemenea, reduce semnificativ dimensiunea paginilor și timpul necesar. pentru a încărca complet. Separarea structurii documentului și a designului este realizată folosind CSS.

Este de remarcat faptul că începuturile formatării logice au fost prezente și în etichetele HTML clasice

,

,

, desigur, a contribuit la împărțirea documentelor în niște blocuri logice. Însă mulți autori de pagini au folosit și continuă să folosească aceste etichete în alte scopuri: din cauza deficitului de resurse pentru designul paginii, etichetele de titlu, de exemplu, au fost folosite pentru a evidenția elemente din pagină care nu erau de fapt titluri. CSS, pe de altă parte, oferă suficiente instrumente de stil pentru a vă permite să urmați mai îndeaproape regulile de formatare logică și să separați cu adevărat structura paginii de prezentarea sa vizuală.

Atribuirea stilurilor elementelor individuale ale paginii

CSS vă permite să atribuiți propriul stil vizual oricărei etichete HTML, inclusiv . Dacă stilul este setat pentru etichetă , este moștenit de toate elementele (paragrafe, titluri etc.) plasate în interiorul acestei etichete container, în cazul în care nu există stiluri personalizate pentru aceste elemente. Astfel, nu mai trebuie să scriem etichete și atribuie culoarea, dimensiunea etc. pentru fiecare paragraf de pe pagină - doar setați un anumit stil pentru etichetă , iar toate paragrafele de pe pagină vor fi afișate conform acestui stil. Cum să faci asta?

Să presupunem că vrem ca toate paragrafele să fie afișate cu font Times New Roman de 12 puncte, verde închis. Pentru a face acest lucru, trebuie să specificați atributul de stil al etichetei , atribuindu-i valoarea corespunzătoare. Sintaxa este:

12pt; culoare: verde închis;">

Astfel, toate paragrafele de pe pagină sunt afișate așa cum ne-am dorit, iar codul nu este înfundat cu etichete și atributele acestora. Imaginează-ți economiile legate de dimensiunea fișierului dacă pagina ta constă dintr-o mulțime de text!

Vă rugăm să rețineți că atunci când am specificat stilul fontului, după numele Times New Roman am indicat stilul serif, care înseamnă orice font cu serif. Dacă computerul utilizatorului final nu are instalat fontul Times New Roman, browserul va înlocui oricare dintre fonturile serif disponibile, iar afișarea paginii va fi cât mai aproape de ceea ce ați dorit. Mai mult, exemplul dat va fi de înțeles atât pentru IE (4.0 și mai mare) cât și pentru NN (4.0 și mai mare). Deși trebuie să facem imediat o rezervare că Netscape Navigator nu acceptă toate caracteristicile oferite de CSS și DHTML, iar acest lucru, desigur, nu crește numărul fanilor săi.

Exemplul de mai sus folosește încorporarea stilului direct în eticheta documentului - așa-numitul stil inline. Această metodă de a lega CSS la un fișier HTML este recomandată în cazuri izolate - dacă acest stil este planificat să fie aplicat unui singur element dintr-o singură pagină a site-ului. Dacă stilul trebuie aplicat mai multor elemente de pe aceeași pagină sau mai multor pagini deodată, sunt recomandate alte metode de legare CSS și HTML, despre care vom discuta în continuare.

Atribuirea stilurilor mai multor elemente de pe aceeași pagină - crearea unei foi de stil încorporate

Până acum am vorbit despre stabilirea unui singur stil pentru un element. Acum vom învăța cum să creăm foi de stil.

Să presupunem că vrem ca toate paragrafele de pe pagină să arate ca exemplul anterior, cu toate titlurile de primul nivel în verde Arial aldine de 16 puncte și toate titlurile de al doilea nivel în 14 puncte Helvetica aldine, galben-verde. Pentru a face acest lucru, trebuie să creăm în<голове>pagini (oriunde între etichete Şi) o foaie de stil încorporată în care vom scrie mai multe reguli deodată. Pentru a face acest lucru, creați o etichetă container foaie de stil care începe cu o etichetă de deschidere. În interiorul acestei etichete container, suntem liberi să definim orice număr de reguli CSS, constând dintr-un selector (numele etichetei HTML căreia i se va aplica regula) și definiția acestuia (direct un set de formatoare), cuprinse între acolade. . Sintaxa pentru exemplul de mai sus este:

dimensiunea fontului: 12pt;

culoare: verde închis;

dimensiunea fontului: 16pt;

greutatea fontului: bold;

familie de fonturi: Arial, sans-serif;

dimensiunea fontului: 14pt;

culoare: verdegalben;

greutatea fontului: bold;

font-style: italic;

Acest mod de a lega CSS și HTML se numește încorporare. Este recomandat să îl utilizați în cazurile în care decideți să setați un anumit set de reguli de formatare pentru o singură pagină a site-ului și, conform planului dvs., toate celelalte pagini ar trebui să arate diferit.

Atribuirea de stiluri mai multor pagini de site simultan

Pe lângă încorporare și încorporare, importarea și legarea foii de stil sunt folosite pentru a lega CSS și HTML. Acestea sunt, desigur, cele mai bune modalități de a oferi un aspect și o senzație consistentă mai multor pagini (sau chiar tuturor) paginilor aceluiași site. În acest caz, întreaga foaie de stil este stocată într-un singur fișier (extensia fișierului trebuie să fie standard - .css).

Iată un exemplu de conținut al unui astfel de fișier (de exemplu, my.css):

font-family: „Times New Roman”, serif;

dimensiunea fontului: 12pt;

culoare: verde închis;

familie de fonturi: Arial, sans-serif;

dimensiunea fontului: 16pt;

greutatea fontului: bold;

familie de fonturi: Arial, sans-serif;

dimensiunea fontului: 14pt;

culoare: verdegalben;

greutatea fontului: bold;

font-style: italic;

Vă rugăm să rețineți: etichete nu sunt folosite foi de stil în interiorul fișierului - extensia .css indică în mod clar browserului că fișierul este o foaie de stil. Un astfel de fișier poate fi legat la mai multe pagini simultan (sau importat în mai multe pagini deodată). În fișierul html pentru legare trebuie să scrieți oriunde între etichete Şi urmatoarea linie:

Această linie indică faptul că fișierul care este legat este o foaie de stil (rel="stylesheet"), formatul acestui fișier este .css (type="text/css") și se află în același director cu fișierul html, sau are o adresă URL diferită (href="my.css"). Evident, putem scrie această linie în oricare (sau în toate) fișierele noastre html. Astfel, un singur design de stil va fi prescris pentru mai multe pagini simultan.

Vă rugăm să rețineți că stilurile încorporate (stilurile specificate pentru elementele individuale ale paginii folosind atributul stil) și stilurile încorporate (stilurile specificate în<голове>pagini în interiorul unei etichete de container. Stilurile interne au prioritate față de cele externe, dar sunt inferioare stilurilor inline (specificate prin atributul stil).

...

1.3. Stiluri încorporate

Când scriem stiluri inline, scriem codul CSS în fișierul HTML, direct în interiorul etichetei element folosind atribut de stil:

Fii atent la acest text.

Astfel de stiluri afectează doar elementul pentru care sunt setate.

1.4. regulă @import

regulă @import Vă permite să încărcați foi de stil externe. Pentru ca directiva @import să funcționeze, trebuie să apară în foaia de stil (externă sau internă) înaintea tuturor celorlalte reguli:

Regula @import este folosită și pentru a include fonturi web:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Tipuri de selectoare

Selectoare reprezintă structura unei pagini web. Ele ajută la crearea regulilor pentru formatarea elementelor paginii web. Selectorii pot fi elemente, clasele și identificatorii acestora, precum și pseudo-clase și pseudo-elemente.

2.1. Selector universal

Se potrivește cu orice element HTML. De exemplu, * (marja: 0;) va reseta marginile pentru toate elementele site-ului. Selectorul poate fi folosit și în combinație cu o pseudo-clasă sau pseudo-element: *:after (stiluri CSS) , *:checked (stiluri CSS) .

2.2. Selector de elemente

Selectoarele de elemente vă permit să formatați toate elementele de acest tip pe toate paginile site-ului. De exemplu, h1 (familie de fonturi: homar, cursiv;) va seta stilul general de formatare pentru toate titlurile h1.

2.3. Selector de clasă

Selectorii de clasă vă permit să specificați stiluri pentru unul sau mai multe elemente cu același nume de clasă, plasate în locuri diferite pe pagină sau pe pagini diferite site-ul. De exemplu, pentru a crea un titlu cu clasa de titlu, trebuie să adăugați atributul de clasă cu titlul de valoare la eticheta de deschidere

și setați stilul pentru clasa specificată. Stilurile create folosind o clasă pot fi aplicate altor elemente, nu neapărat de acel tip.

Instrucțiuni pentru utilizarea unui computer personal

.titlu (transformare text: majuscule; culoare: albastru deschis; )

2.4. Selector ID

Selectorul ID vă permite să formatați unul element specific. Id-ul trebuie să fie unic și poate apărea o singură dată pe o singură pagină.

#sidebar ( lățime: 300px; float: stânga; )

2.5. Selector de descendenți

Selectorii descendenți aplică stiluri elementelor dintr-un element container. De exemplu, ul li (text-transform: majuscule;) va selecta toate elementele li care sunt copii ale tuturor elementelor ul.

Dacă doriți să formatați descendenții unui anumit element, trebuie să dați acelui element o clasă de stil:

p.întâi a (culoare: verde;) — acest stil se va aplica tuturor legăturilor descendente ale unui paragraf cu clasa întâi;

p .first a (culoare: verde;) - dacă adăugați un spațiu, linkurile situate în interiorul oricărei etichete .first class care este un copil al elementului vor fi stilate

Mai întâi a (culoare: verde;) - acest stil va fi aplicat oricărui link situat în interiorul altui element, desemnat de class.first .

2.6. Selector de copii

Un element copil este un copil direct al elementului său care îl conține. Un element poate avea mai multe elemente copil, iar fiecare element poate avea doar un părinte. Selectorul copil vă permite să aplicați stiluri numai dacă elementul copil vine imediat după elementul părinte și nu există alte elemente între ele, adică elementul copil nu este imbricat în nimic altceva.
De exemplu, p > strong va selecta toate elementele puternice care sunt copii ale elementului p.

2.7. Sora selectoare

Fraternitatea apare între elemente care au un părinte comun. Selectoarele de frați vă permit să selectați elemente dintr-un grup de elemente de același nivel.

h1 + p - va selecta toate primele paragrafe imediat după orice etichetă

fără a afecta paragrafele rămase;

h1 ~ p - va selecta toate paragrafele care sunt sora oricărui titlu h1 și imediat după acesta.

2.8. Selector de atribute

Selectorii de atribute selectează elemente în funcție de numele sau valoarea atributului:

[atribut] - toate elementele care conțin atributul specificat - toate elementele pentru care este specificat atributul alt;

selector[atribut] - elemente de acest tip care conțin atributul specificat, img - doar imagini pentru care este specificat atributul alt;

selector[attribute="valoare"] - elemente de acest tip care conțin atributul specificat cu o anumită valoare, img - toate imaginile al căror titlu conține cuvântul floare;

selector[atribut~="valoare"] - elemente care conțin parțial valoare dată, de exemplu, dacă unui element i se dau mai multe clase separate printr-un spațiu, p — paragrafe al căror nume de clasă conține caracteristică ;

selector[atribut|="valoare"] - elemente a căror listă de valori de atribut începe cu cuvântul specificat, p - paragrafe al căror nume de clasă este caracteristică sau începe cu caracteristică ;

selector[atribut^="valoare"] - elemente a căror valoare de atribut începe cu valoarea specificată, a - toate legăturile care încep cu http:// ;

selector[attribute$="valoare"] - elemente a căror valoare de atribut se termină cu valoarea specificată, img - toate imaginile în format png;

selector[attribute*="valoare"] - elemente a căror valoare de atribut conține cuvântul specificat oriunde, a - toate linkurile al căror nume conține book .

2.9. Selector de pseudo-clase

Pseudo-clasele sunt clase care nu sunt atașate etichetelor HTML. Acestea vă permit să aplicați reguli CSS elementelor atunci când are loc un eveniment sau respectă o anumită regulă. Pseudoclase caracterizează elemente cu următoarele proprietăți:

:hover - orice element peste care este plasat cursorul mouse-ului;

:focus — element interactiv, care a fost accesat folosind tastatura sau activat cu mouse-ul;

:activ - element care a fost activat de utilizator;

:valid - câmpuri de formular al căror conținut a fost verificat în browser pentru conformitatea cu tipul de date specificat;

:invalid — câmpuri de formular al căror conținut nu se potrivește cu tipul de date specificat;

:activat - toate câmpurile de formulare active;

:disabled — câmpuri de formular blocate, adică într-o stare inactivă;

:in-range - câmpuri de formular ale căror valori sunt în intervalul specificat;

:out-of-range - câmpuri de formular ale căror valori nu se încadrează în intervalul specificat;

:lang() - elemente cu text în limba specificată;

:not(selector) - elemente care nu conțin selectorul specificat - clasă, identificator, nume sau tip câmp de formular - :not() ;

:target este un element cu simbolul # care este referit în document;

:checked — elemente de formular selectate (selectate de utilizator).

2.10. Selector structural de pseudoclase

Pseudoclase structurale selectează elementele copil conform parametrului specificat în paranteze:

:nth-child(odd) - elemente copil impar;

:nth-child(even) - chiar elemente copil;

:nth-child(3n) - fiecare al treilea element dintre copii;

:nth-child(3n+2) - selectează fiecare al treilea element, începând cu al doilea copil (+2) ;

:nth-child(n+2) - selectează toate elementele începând cu al doilea;

:nth-child(3) - selectează al treilea element copil;

:nth-last-child() - în lista de elemente copil, selectează elementul cu locație specificată, asemănător cu:nth-child() , dar începând de la ultimul, în sens invers;

:first-child - vă permite să stilați doar primul element copil al etichetei;

:last-child - vă permite să formatați ultimul element copil al etichetei;

:only-child - selectează un element care este singurul element copil;

:empty - selectează elemente care nu au copii;

:root - selectează elementul care este rădăcina în document - element html.

2.11. Selector de pseudoclase de tip structural

arata spre tip specific eticheta copil:

:nth-of-type() - selectează elemente similare cu :nth-child() , dar ia în considerare doar tipul elementului;

:first-of-type - selectează primul copil dintr-un anumit tip;

:last-of-type - selectează ultimul element de acest tip;

:nth-last-of-type() - selectează un element de tipul dat într-o listă de elemente în funcție de locația specificată, începând de la sfârșit;

:only-of-type - selectează singurul element de tipul specificat dintre elementele sale fii element părinte.

2.12. Selector de pseudo-element

Pseudoelementele sunt folosite pentru a adăuga conținut, care este generat folosind proprietatea conținut:

:first-letter - selectează prima literă a fiecărui paragraf, se aplică doar elementelor bloc;

:first-line - selectează prima linie a textului elementului, se aplică numai elementelor bloc;

:before - inserează conținutul generat înaintea elementului;

:after - adaugă conținut generat după element.

3. Combinație selectoare

Pentru a selecta mai precis elementele pentru formatare, puteți utiliza combinații de selectoare:

img:nth-of-type(even) - va selecta toate imaginile cu numere pare al căror text alternativ conține cuvântul css .

4. Gruparea selectoarelor

Același stil poate fi aplicat mai multor elemente în același timp. Pentru a face acest lucru, trebuie să enumerați selectorii necesari în partea stângă a declarației, separați prin virgule:

H1, h2, p, span (culoare: roșie; fundal: alb; )

5. Moștenirea și cascada

Moștenirea și cascada sunt două concepte fundamentale în CSS care sunt strâns legate. Moștenirea este locul în care elementele moștenesc proprietăți de la părintele lor (elementul care le conține). Cascada se manifestă în modul în care diferite tipuri foile de stil sunt aplicate unui document și modul în care regulile conflictuale se suprascriu reciproc.

5.1. Moştenire

Moştenire este mecanismul prin care anumite proprietăți sunt transmise de la un strămoș la descendenții săi. Specificația CSS prevede moștenirea proprietăților legate de conținutul text al paginii, cum ar fi culoarea, fontul, spațierea literelor, înălțimea liniilor, stilul listei, alinierea textului, indentarea textului, transformarea textului, vizibilitatea, alb. -spațiu și spațiere între cuvinte. În multe cazuri, acest lucru este convenabil deoarece nu trebuie să setați dimensiunea și familia de fonturi pentru fiecare element de pe pagina web.

Proprietățile legate de formatarea blocurilor nu sunt moștenite. Acestea sunt fundal , chenar , afișare , float și clar , înălțime și lățime , margine , min-max-înălțime și -lățime , outline , overflow , padding , position , text-decoration , vertical-align and z-index .

Moștenirea forțată

Prin folosirea cuvânt cheie moștenire poate forța un element să moștenească orice valoare de proprietate a elementului său părinte. Acest lucru funcționează chiar și pentru proprietăți care nu sunt moștenite în mod implicit.

Cum sunt setate și cum funcționează stilurile CSS

1) Stilurile pot fi moștenite de la elementul părinte (proprietăți moștenite sau folosind valoarea de moștenire);

2) Stilurile situate în foaia de stil de mai jos suprascrie stilurile situate în tabelul de mai sus;

3) Pot fi aplicate stiluri dintr-un element surse diferite. Puteți verifica ce stiluri sunt aplicate în modul dezvoltator browser. Pentru a face acest lucru, faceți clic pe element clic dreapta mouse-ul și selectați „Vizualizare cod” (sau ceva similar). Coloana din dreapta va lista toate proprietățile care sunt setate pe acest element sau moștenite de la un element părinte, împreună cu fișierele de stil în care sunt specificate și linia ordinală de cod.

Orez. 2. Modul dezvoltator în browser Google Chrome

4) Când definiți un stil, puteți utiliza orice combinație de selectori - un selector de element, o pseudo-clasă de element, o clasă sau un identificator de element.

div (chenar: 1px solid #eee;) #wrap (lățime: 500px;).box (float: stânga;).clear (clear: ambele;)

5.2. Cascadă

În cascadă este mecanismul care controlează rezultatul finalîntr-o situație în care unui element sunt aplicate diferite reguli CSS. Există trei criterii care determină ordinea în care sunt aplicate proprietățile — regula!importantă, specificitatea și ordinea în care sunt incluse foile de stil.

Regulă!important

Greutatea unei reguli poate fi specificată folosind cuvântul cheie!important, care este adăugat imediat după valoarea proprietății, de exemplu, span (font-weight: bold!important;) . Regula trebuie plasată la sfârșitul declarației înaintea parantezei de închidere, fără spațiu. Un astfel de anunț va avea prioritate față de toate celelalte reguli. Această regulă vă permite să anulați o valoare de proprietate și să setați una nouă pentru un element dintr-un grup de elemente în cazul în care nu există acces direct la fișierul de stil.

Specificitate

Pentru fiecare regulă, browserul calculează specificitatea selectorului, iar dacă un element are declarații de proprietate conflictuale, se ia în considerare regula care are cea mai mare specificitate. Valoarea specificității are patru părți: 0, 0, 0, 0. Specificitatea selectorului este definită după cum urmează:

pentru id, se adaugă 0, 1, 0, 0;
pentru clasa 0, 0, 1, 0 se adaugă;
pentru fiecare element și pseudo-element se adaugă 0, 0, 0, 1;
pentru un stil inline adăugat direct unui element - 1, 0, 0, 0 ;
Un selector universal nu are specificitate.

H1 (culoare: albastru deschis;) /*specificitate 0, 0, 0, 1*/ em (culoare: argintiu;) /*specificitate 0, 0, 0, 1*/ h1 em (culoare: auriu;) /*specificitate: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (culoare: albastru;) /*specificitate: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (culoare: gri;) /*specificitate 0, 0, 1, 0 */ #sidebar (culoare: portocaliu;) /*specificitate 0, 1, 0, 0*/ li#sidebar (culoare: aqua;) /*specificitate: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Ca rezultat, acele reguli care sunt mai specifice vor fi aplicate elementului. De exemplu, dacă un element are două specificități cu valorile 0, 0, 0, 2 și 0, 1, 0, 1, atunci a doua regulă va câștiga.

Ordinea meselor conectate

Puteți crea mai multe foi de stil externe și le puteți conecta la o singură pagină web. Dacă în mese diferite se va întâlni sensuri diferite proprietățile unui element, apoi, ca rezultat, regula din foaia de stil listată mai jos va fi aplicată elementului.

Acasă - Setări - Setări utilizatorși configurați afișarea bannerelor:

O puteți face diferit dacă doriți să fie afișate alte bannere.

Nume de utilizator

Acum să trecem mai departe: " Utilizatori» => « Grupuri de utilizatori» => « Lista de grupuri» alege grupul doritși să începem coafarea.
Pentru a face acest lucru, trebuie să setați un stil CSSîn paragraful „ Stilul CSS pentru numele de utilizator" Vom folosi stiluri pentru text:

Fragment de cod - culoarea poreclei. Puteți utiliza valorile de culoare: format RGB- rgb(r, g, b); notație hexazecimală - #RRGGBB; Format RGBa - rgba(r, g, b, a); Nume de culori de bază: aqua, negru, albastru, fucsia, gri......
familie de fonturi - familia de fonturi pentru poreclă (Arial, Georgia, Verdana....) Lista fonturilor poate include unul sau mai multe nume, separate prin virgulă. Dacă numele fontului conține spații, cum ar fi Trebuchet MS, acesta trebuie inclus între ghilimele simple sau duble. Când browserul întâlnește primul font din listă, verifică prezența acestuia pe computerul utilizatorului. Dacă nu există un astfel de font, următorul nume din listă este luat și, de asemenea, analizat pentru prezență. Prin urmare, fonturile multiple crește probabilitatea ca cel puțin unul dintre ele să fie detectat pe computerul client.
dimensiunea fontului - dimensiunea fontului porecla. Aveți voie să utilizați orice valid unități CSS: em (înălțimea fontului elementului), ex (înălțimea caracterului x), puncte (pt), pixeli (px), procente (%) etc. Dimensiunea fontului elementului părinte este luată ca 100% (sau nu este specificat).
pentru toate paragrafele paginii curente! - determină stilul fontului poreclei - regulat, italic sau oblic (normal, italic, oblic).
greutatea fontului - setează saturația (îndrăzneală) fontului (bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900).
De asemenea, puteți utiliza o umbră de text pentru porecla dvs.:
text-umbră - sunt specificati patru parametri: x-shift, y-shift, raza de estompare si culoare (1px 1px 2px black). Este permisă specificarea mai multor parametri de umbră, separându-i prin virgulă (1px 1px 2px negru, 0 0 1em roșu)

Exemplu:
Indicăm CSS stilul poreclei:

Culoare: roșu; greutatea fontului: bold; dimensiunea fontului: 12px;

Aliniază porecla la centru
Setări stil>>Elemente mesaje>>Nume utilizator
În blocul „Altele” adăugați

Alinierea textului: centru;

Ce avem

Fundal animat pentru numele de utilizator

ÎN „Stil CSS pentru numele de utilizator” adăugați fundal

Fundal: url(dosarul cu imaginea/glitter_001.gif) fără repetare

Există 14 fundaluri diferite în arhiva de mai jos.

Titluri de utilizator

„Text banner utilizator„Noi scriem oricare, nu va fi vizibil”,” – numele clasei, de exemplu admin, V EXTRA.css seteaza stilul:

Administrator ( fundal: url(image folder/admin.gif) fără repetare; afișare: bloc; lățime: 120px; înălțime: 30px; culoare: rgba(0, 0, 0, 0); margin-left: -5px; )

Să vedem ce s-a întâmplat

„Text banner utilizator„Noi scriem numele grupului” Altul, folosindu-l pe al lui Nume CSS-clasă" - numele clasei, de exemplu admin-ribbon, V EXTRA.css seteaza stilul:

/* Clasificarea utilizatorului */ .admin-ribbon, .moder-ribbon, .member-ribbon (culoare: #FCE2E3; display: block; font-size: 12px; font-weight: bold; height: 38px; line-height: 38px; text-align: 0 0 transparent: "styles/default/icons/admin_ribbon.png") .moder; panglică ( background: url("styles/default/xenforo/icons/moder_ribbon.png") no-repeat scroll 0 0 transparent; ) .member-ribbon ( background: url("styles/default/xenforo/icons/member_ribbon.png) ") derulare fără repetare 0 0 transparent; ) /* END Clasifică utilizator */

În arhiva de mai jos veți găsi 3 panglici pentru banner.

Culoare personalizată pentru bannere:
Accesați pagina cu lista de grupuri: /admin.php?user-groups/ - selectați grupul de care aveți nevoie - În câmpul „Text banner utilizator:”, introduceți numele de care aveți nevoie - În setarea „Design banner utilizator:”, selectați opțiunea „Altele, folosind numele tău CSS” -class:” și în acest câmp indicăm: userBanner stilul meu- Salvam toată chestia asta într-un șablon EXTRA.css adauga acest cod:

UserBanner.my-style (culoare: alb; culoare de fundal: verde; )

sau așa

UserBanner.my-style (culoare: alb; culoare de fundal: verde; culoare chenar: verde; )

Exemplu de bannere care folosesc stiluri CSS.
Să facem bannere folosind doar CSS. După cum am menționat deja, pentru aceasta folosim „Altul, folosind propriul nume de clasă CSS”, stabilim pentru fiecare grup propria sa clasă, iar în EXTRA.css, specificați stilurile pentru aceste clase:

Admin_style, .lamer_style, .moder_style, .user_style ( imagine de fundal: liniar-gradient(în sus, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); bordura-radius: 3px ; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) dimensiunea fontului: 11px 0 5px; ; poziție: text-align: text-shadow: 0 0 0 transparent, 1px .admin_style (color de fundal: rgba, 0,5, 0,7); ; .moder_style (culoare de fundal: rgba(0, 155, 4, 0,5); chenar: 1px rgba(0, 155, 4, 0,7); ) .user_style ( culoare de fundal: rgba(0, 51, 155, 0,5); bordura: 1px rgba solid (0, 51, 155, 0.7); );