Meniul
AcasăiOS

Reguli de selectare CSS. Valoarea atributului începe cu un text specific. Selectoare de clasă și ID

Igor. Actualizare: 30 octombrie 2018.

În articolul de început aceasta sectiune a fost dat Informații generale privind, inclusiv o descriere a modului de conectare a stilurilor la codul HTML al unei pagini de site (document), care determină prezența anumitor elemente pe pagina web.

În această publicație ne vom uita la cum să compunem și să scriem corect Proprietăți CSS pentru toate elementele astfel încât browserul să le poată identifica și să le afișeze corect pe pagină.

În special, să ne uităm la ce este o singură regulă de stil în general, care include un selector, precum și proprietățile și valorile acestora.

Sintaxă și opțiuni pentru scrierea regulilor CSS

Deoarece foile de stil în cascadă sunt, deși un limbaj specializat, dar totuși un limbaj, este permis să se facă o analogie între setul de reguli CSS și în text simplu, unde fiecare cuvânt este format din litere, propoziția este formată din cuvinte și fragment de text- din propuneri.

Având în vedere această asociere vizuală, putem deriva o secvență logică care privește structura CSS (este cea mai optimă, după umila mea părere):

  • valori (sau parametri), care se exprimă în cifre, codul culorii, numele fontului etc., în conformitate cu analogia noastră, pot fi considerate litere;
  • Unitatea structurală a CSS este proprietate, care definește partea sa din aspectul unui element pe pagină (culoarea acestuia, fontul textului, dimensiunea, indentarea, poziția etc.), căruia îi corespund valori specifice (una sau mai multe). Aici, combinația dintre numele unei proprietăți și parametrul acestuia poate fi comparată cu un cuvânt (care poate consta și din una sau mai multe litere) dintr-un fragment de text standard;
  • regula CSS - selector(numele stilului) împreună cu set de proprietăți CSS pentru fiecare element determină complet designul și locația acestuia pe pagină. Asociat structural cu o propoziție (un set de cuvinte individuale în text obișnuit);
  • o colecție completă a tuturor regulilor CSS pentru un anumit document (pagina web) asigura afisarea corecta a acestuia in browser. Să comparăm asta cu un pasaj de text finalizat.

Poate că asocierea pe care am propus-o este puțin exagerată, dar cred că îi va ajuta în continuare pe începători să înțeleagă structura generală a limbajului CSS.

Deci, fiecărei proprietăți i se atribuie o anumită valoare (parametru) și pot exista mai multe dintre ele. Setul corespunzător de proprietăți (regula) este aplicat unui anumit selector. Schematic, o regulă CSS poate fi afișată astfel::

Un selector este plasat în față, apoi sunt plasate acolade (deschidere și închidere), între care se află proprietăți CSS cu valorile atribuite, numele fiecărei proprietăți este separat de parametrul corespunzător prin două puncte. Toate proprietățile împreună cu valorile lor sunt separate prin punct și virgulă. Să ne uităm la un exemplu viu:

Corp (dimensiunea fontului: 14px; fundal: #00ff00 url("west.png") repetare-x; )

Vă rugăm să rețineți că proprietatea de fundal are mai multe valori: culoarea de fundal (#00ff00), calea către imaginea de fundal ("west.png") și rezoluția pentru a o repeta pe orizontală (repeat-x). Probabil ați observat că această opțiune de înregistrare este oarecum diferită de diagrama prezentată chiar mai sus.

De fapt, nu există nicio inconsecvență aici. Deoarece CSS nu este sensibil la spații, întreruperi de linie sau file, regulile de stil pot fi scrise într-o varietate de moduri pentru a se potrivi situațiilor specifice.

De exemplu, o intrare de regulă extinsă, al cărei eșantion tocmai a fost prezentat, este cea mai convenabilă pentru percepție și, prin urmare, este folosită de obicei pentru studierea stilurilor sau în fișierul „brut” style.css, care a fost creat pentru un nou site și, prin urmare, nu a fost încă finalizat. Există o altă variantă a aceleiași intrări de regulă CSS:

Corp (dimensiune font: 14px; ) corp ( fundal: #00ff00 url("west.png") repeat-x; )

După cum puteți vedea, același selector se repetă pentru fiecare proprietate. Aceasta nu este o eroare din motivele menționate mai sus, dar acest format de scriere a unei reguli aglomera codul și complică percepția acestuia și, prin urmare, practic nu este utilizat.

O versiune extinsă a notației poate fi prezentată fără silabe:

Corp (dimensiunea fontului: 14px; fundal: #00ff00 url("west.png") repetare-x; )

Dar asta nu este tot. Toate spațiile, precum și caracterul de separare (punct și virgulă) după ultima proprietate (înainte de acolada de închidere), pot fi omise. Acest lucru este, de asemenea, destul de legitim Forma CSS reguli, mai puțin voluminoase, care sunt bune pentru optimizarea site-ului, dar mai puțin lizibile:

Corp (dimensiunea fontului:14px;background:#00ff00 url("west.png") repetare-x)

După ce designul site-ului este gata și totul este introdus modificările necesareîn fișierele în stil CSS, acestea sunt ajustate corespunzător pentru a optimiza resursa web, în ​​timp ce toate spațiile sunt eliminate automat. Acest lucru se poate face manual, dar de ce să pierdeți timp prețios atât de irațional? La urma urmei, chiar și pentru un site mic, fișierul style.css poate conține multe reguli de stil.

Selectoare, proprietăți și aplicarea stilurilor

Am observat deja că în timp există o convergență din ce în ce mai strânsă a HTML și CSS. Dacă în zorii Internetului în forma sa actuală, apariția elementelor pe o pagină web a fost descrisă folosind atribute de etichetă marcare hipertext, atunci și zilele astea utilizare frecventă Această metodă este luată în considerare deoarece codul HTML supraîncărcat adesea nu contribuie la optimizarea corectă a paginilor site-ului, ceea ce dăunează și promovării sale SEO.

Bloc cu text verde înconjurat de un cadru

CSS (identificatorul este precedat de o pictogramă hash):

#zonă (culoare: verde; chenar: 2px solid #d6c99a)

Următoarele opțiuni pot conține atât selectori de etichete, cât și clase cu identificatori.

De ce sunt necesare aceste opțiuni de dimensionare? Cert este că nu este întotdeauna cea mai bună soluție este utilizarea valorilor relative standard, inclusiv procente. Uneori este mai benefic să legați dimensiunea fontului la înălțimea și lățimea ferestrei browserului. Să spunem, dacă înălțimea ferestrei de vizualizare este de 800 px, atunci 1vh = 8px, iar dacă lățimea este de 1500px - 1vw = 15px.

Unitățile vmin și vmax sunt determinate de minimul și dimensiuni maxime zone în înălțime și lățime. Exemplu: înălțimea ferestrei browserului este de 700 px și lățimea este de 1300 px. În acest caz, vmin = 7px și vmax = 13px.

Când setați dimensiuni, trebuie să specificați unitățile (de exemplu, înălțimea: 55px), altfel browserul va afișa incorect elementele corespunzătoare. Înțelesuri, egal cu zero, nu se aplică acestei reguli, pot fi desemnate în două moduri (padding: 0 sau padding: 0px), din motive evidente, prima variantă este în frunte cu un avantaj covârșitor.

Interes

Am decis să menționez separat acest tip de unități. Mai sus am vorbit deja despre avantajul folosirii valorilor relative la setarea proprietăților. Acest lucru se aplică pe deplin la dobândă.

Tabel (lățime: 100%; /* Lățimea tabelului în procent */)

Intrările procentuale sunt folosite destul de des, mai ales atunci când este necesară setarea valorii relativ la părinte sau când dimensiunile depind de anumite circumstanțe externe. De exemplu, o lățime a elementului egală cu 100% se va adapta la ecranele unei game largi de dispozitive și va fi afișată corect acolo.

Cuvinte cheie

Să ne uităm la câteva cuvinte care joacă rolul parametrilor de proprietate și determină una sau alta poziție sau aspectul unui element. Iată câteva exemple ilustrative.

1. Valorile proprietăților de aliniere a textului, care ajută la alinierea orizontală a textului: centru | justifica | stânga | dreapta | începe | Sfârşit. Iată un exemplu cu parametrul justifica:

P (alinierea textului: justificare)

Această notație înseamnă că textul paragrafului este aliniat atât la stânga, cât și la dreapta:

2. CurrentColor- se potrivește cu valoarea proprietății de culoare a elementului curent și specifică o culoare pentru zonele care nu primesc una implicit. Să presupunem că un container cu clasa „bl-2” este imbricat în „bl-1”:

Valoarea currentColor specifică culoarea de fundal

Și stilurile sunt specificate pentru ambele:

Bl-1 ( umplutură: 10px; /* Margini în jurul containerului interior */ fundal: currentColor; /* Culoare fundal */ ) .bl-2 (culoare: albastru; /* Culoare text */ padding: 10px; /* Margini în jurul textului */ fundal: #ccc; /* Culoare de fundal */ )

Dacă nu există o culoare de text specificată pentru un element (proprietatea „culoare”), atunci, implicit, fragmentul de text va fi colorat în negru (în majoritatea browsere populare). În exemplul nostru, pentru containerul exterior („bl-1”) lipsește culoarea. Ca urmare, atunci când se specifică valoarea „currentColor”, fundalul acestui container va deveni negru:

3. Moşteni este un cuvânt cheie ca parametru al valorilor corespunzătoare ale elementelor părinte. Probă:

Valoarea de moștenire determină moștenirea proprietăților

Și regulile CSS pentru asta:

Bl-1 ( chenar: 4px roșu continuu; umplutură: 10px; ) .bl-2 ( chenar: moștenire; umplutură: moștenire; )

Ca urmare, designul și umplutura marginii au fost mutate din blocul părinte (bl-1) în blocul intern (bl-2):

4. Iniţială— utilizat în cazurile în care este necesară setarea parametrilor inițiali ai proprietăților. De exemplu, vă ajută să restabiliți valorile implicite stabilite de browser sau să determinați parametrii initiali, care au fost modificate ca urmare a moștenirii. Exemplu:

Opțiuni de proprietate CSS

Există o mare varietate de semnificații care determină anumite stiluri, care determină aspectul elementelor pe o pagină web.

Citiți mai multe detalii

Și stiluri pentru el:

H2 ( culoare: #2e15d1; font-family: Verdana, sans-serif; ) p ( culoare: verde; ) .init ( culoare: initial; font-family: initial; )


Folosind clasa „init”, aspectul fragmentului de paragraf p inclus în eticheta span și antetul de jos H2 sunt modificate pentru a se potrivi cu setările lor implicite de stil.

5. Dezactivat este un parametru care este în esență un „hibrid” de moștenire și inițială. Definește parametrul proprietății ca moștenire dacă proprietatea este moștenită de la un părinte, altfel ca inițial.

Exemplul 1(acționează ca moștenirea):

Culoare text verde - moștenește valoarea proprietății „color” pentru clasa „zzz”.

Culoarea textului este roșie în funcție de valoarea proprietății „culoare” pentru eticheta p

P (culoare: roșu) .zzz (culoare: verde) .xxx p (culoare: nesetat)

Conform regulilor CSS proprietatea culorii este moștenită, deci „dezactivat” în exemplul nostru revine Culoarea verde text pentru containerul „xxx” care este un copil al lui „zzz”:

Exemplul 2(functioneaza ca initiala):

Culoarea cadrului este neagră - valoarea implicită

Culoarea chenarului (albastru) este setată în proprietățile containerului div

Div ( chenar: 2 px albastru solid; margine-jos: 10 px; margine-sus: 10 px; umplutură: 10 px; ) .xxx ( chenar-culoare: nesetat; )


Deoarece conform regulilor foilor de stil proprietatea de frontieră nu este moștenită, apoi „border-color: unset” readuce culoarea chenarului la valoarea implicită, adică devine neagră.

URL sau adresa

Acest parametru conține și este utilizat atunci când trebuie, de exemplu, să indicați un fișier cu o imagine (citiți cu folosind HTML etichetă img). În acest caz se folosește URL-ul cuvântului cheie(), unde între paranteze și calea către fișierul grafic este indicată:

Corp ( fundal: url(https://site/images/star.jpg) fără repetare; /* Cale absolută */ ) div ( fundal: url(images/globus.jpg) fără repetare; /* Cale relativă * / )

Timp

Folosit, de exemplu, la implementare efecte de animație(da, da, mai departe CSS pur acum puteți crea astfel de lucruri), unde parametrii sunt specificați în secunde (s) sau milisecunde (ms). Valorile pot fi fie numere întregi, fie numere fracționare. În același timp, trebuie să ne amintim că nu trebuie să existe spațiu între număr și unitatea de măsură (2s, 50ms)./p>

Să ne uităm la un exemplu.

Și, în consecință, stiluri pentru el:

Se încarcă ( lățime: 440 px; margine: automată; umplutură: 20 px; fundal: #c49746; culoare: #fff; text-align: center; ) .spin (afișare: inline-block; lățime: 70px; înălțime: 70px; chenar: 10px dublu #ccc; chenar-dreapta: 10px dublu transparent; chenar-rază: 70px; /* Animație */ animație: rotire 5s liniar 0s infinit normal; ) /* Setați rotația */ @keyframes spin ( din ( transform: rotiți( 0deg); ) la (transforma: rotire(360deg); ) )

Pe această pagină Puteți nu numai să vă uitați la rezultat, ci și să încercați să editați unele proprietăți, ca să spunem așa, în practică, în general, experimentați. Desigur, este încă dificil pentru începători să studieze foile de stil în cascadă pentru a înțelege și ține cont de subtilitățile animației, dar cu siguranță va urma o continuare, așa că asigurați-vă că vă abonați la materiale proaspete pentru a obține ceea ce doriți la timp. Dar să continuăm.

Siruri de caractere

Acest tip de opțiune vă permite să adăugați fragmente de text. Șirurile trebuie să fie cuprinse între ghilimele (single sau duble). Mai mult, dacă trebuie să puneți un cuvânt sau o expresie între ghilimele într-un șir, atunci aceste tipuri de ghilimele pot fi combinate.

De exemplu, dacă puneți întreaga linie între ghilimele simple, atunci fragmentul de text intern este între ghilimele duble și invers. Este, de asemenea, permisă utilizarea aceluiași tip, doar în acest caz este necesar să scăpați de ghilimele interne adăugând o bară oblică inversă „\” în fața lor:

  • proprietate: „șir „conținut””
  • proprietate: „șir „conținut””
  • proprietate: "șir\"conținut\""

Pentru a începe, codul HTML:

Versiune curentă articole.

Și acum stilurile:

Nou::după (conținut: „actualizat”; culoare: roșu; )

Culoare

Diferiți parametri pot fi utilizați pentru a indica culorile proprietăților atunci când scrieți reguli CSS. Să ne uităm pe scurt la fiecare dintre ele:

1. Nume. Adevărat, nu toate nuanțele pot fi specificate în acest fel, ci doar unele dintre nuanțe („roșu” - roșu, „verde” - verde, „negru” - negru, „portocaliu” - portocaliu, „galben” - galben, „ măsline” - măsline și altele). Ele pot fi, de asemenea, clasificate ca cuvinte cheie.

P (culoare: verde)

2. Hex ( cod hexazecimal) . Baza sistemului hexazecimal, spre deosebire de binecunoscutul sistem zecimal, este de 16 caractere: 10 numere (de la 0 la 9) și primele 6 litere ale alfabetului latin (A, B, C, D, E, F). ). Literele de la A la F corespund numerelor de la 10 la 15.

P (culoare: #f8f9e3)


3.1. RGB— puteți seta valoarea culorii pe baza sistemului zecimal. Nume aceasta metoda este o abreviere pentru cele trei culori principale implicate: R ed (roșu), G reen (verde), B lue (albastru). Nuanțele fiecăruia dintre ele sunt în intervalul de la 0 la 255. Pentru a utiliza acest sistem, trebuie să scrieți rgb în față și să indicați fiecare dintre componentele de culoare între paranteze: rgb (240, 0, 180). De asemenea, este posibil să utilizați procente:

Div (culoare de fundal: rgb (210, 0, 90); culoare: rgb (100%, 50%, 15%); )

3.2. RGBA- O versiune extinsă a metodei RGB anterioare, conține un canal alfa care setează transparența elementului în intervalul de la 0 la 1. Parametrul „0” este complet transparent, iar „1” este complet opac.

Corp (culoare de fundal: rgba (255,255,255,.9))

4.1. HSL— numele acestei metode nu este, de asemenea, altceva decât o abreviere care include primele litere a trei cuvinte: H ue (nuanță), S aaturat (saturație) și L luminozitate (luminozitate). Aceste caracteristici sunt cele care împreună determină culoarea finală. În acest caz, nuanța este situată într-un anumit loc pe roata de culori:

Deoarece întregul cerc este de 360°, fiecare nuanță (nuanță) corespunde unei valori foarte specifice în grade, cuprinsă între 0° și 359°. În acest caz, parametrii nuanțelor principale sunt următorii: 0° - roșu, 120° - verde, 240° - albastru.

Saturația și luminozitatea sunt măsurate ca procente (de la 0 la 100%). Pentru saturate, parametrul 0 înseamnă nr gamă de culori, iar 100% este cea mai saturată culoare. Cum mai multă valoare luminozitate, cu cât tonul este mai deschis, 0 corespunde negrului, iar 100% corespunde albului.

Div (culoare de fundal: hsl(40,90%,15%))

4.2. HSLA- similar cu RGBA, este o versiune extinsă a HSL, la care se adaugă un indicator de transparență.

Div (culoare: hsla(120,100%,50%,0.6))

Unghiul de rotație sau de înclinare

În CSS, caracteristicile unghiulare (bazate pe un cerc) pot fi folosite ca parametri pentru anumite proprietăți. Iată unitățile folosite:

  • grade - deg(1 cerc complet este de 360 ​​de grade);
  • absolvenți - grad(cerc complet 400grad);
  • radiani - rad. Un cerc întreg este egal cu 2π (aproximativ 6,2832rad);
  • se întoarce - întoarce(1 tură este egală cu o tură completă).

Este important de reținut că pot fi folosite valori negative. Mai jos sunt date exemple ilustrative cu parametrii unor unghiuri (rotații):


Pentru claritate, să folosim caracteristicile de rotație pentru a le implementa umplere cu gradient fundal și ca una dintre componentele eșantionului nostru, vom plasa un anumit text pe pagină:

Umplere de fundal cu gradient.

Acum să creăm o regulă CSS pentru acest fundal:

Corp ( fundal: #f5e573; fundal: gradient liniar (-5deg, #f5e573, #f7f4db 50%, #f7f6eb); )

Puteți evalua rezultatul la această paginăși exersați acolo, editând stilurile după cum doriți. Acest lucru va fi util și pentru dobândirea de abilități practice.

CSS conține reguli de stil care sunt interpretate de browser și apoi aplicate elementelor corespunzătoare din documentul dvs. O regulă de stil constă din trei părți: