Selector CSS personalizat. Selectoare în CSS. Care este diferența dintre class și id

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

• Selector este eticheta HTML căreia i se va aplica stilul. Aceasta poate fi orice etichetă, de exemplu,

  sau etc.

  Proprietate este un tip de atribut al unei etichete HTML. Mai simplu spus, toate atributele din HTML sunt convertite în proprietăți CSS. Pot fi culori, chenare, căptușeală etc.

  Sens- este setat la proprietate. De exemplu, proprietatea culorii poate fi verde, #008000 etc.

  Sintaxa pentru selectoare în CSS este următoarea:

  Selector (proprietate: valoare)

  Exemplu. Puteți seta chenarul tabelului astfel:

  Tabel (chenar: 2px solid #FF8C00; )

  Aici sintaxa selectorului este: table este selectorul și marginea este proprietatea și 2px solid #FF8C00 este valoarea acelei proprietăți.

  Puteți specifica selectoare căi diferite, deoarece vă va fi convenabil. Mai jos sunt tipurile de selectoare.>

  Selectoare standard

  Acesta este același selector pe care l-ați văzut mai sus. Din nou, un alt exemplu pentru a da culoare tuturor titlurilor de primul nivel:

  H1 (culoare: #8B4513; )

  Selectoare universale

  În loc să selecteze elemente de un anumit tip, un selector universal se potrivește pur și simplu cu numele oricărui tip de element:

  * (culoare: #808080; )

  Această regulă afișează conținutul fiecărui element din documentul nostru cu gri.

  Selectoare de descendenți sau selectoare imbricate

  Să presupunem că doriți să aplicați o regulă de stil unui anumit element numai atunci când acesta se află în interiorul unui anumit element, atunci selectorii imbricați sau selectorii descendenți vă vor ajuta în acest sens. După cum se arată în exemplul următor, regula de stil va fi aplicată elementului numai când se află în interiorul unei etichete

  .

  Ul em (culoare: #CD5C5C; )

  Selectori de clasă

  Puteți seta reguli de stil pentru elemente pe baza atributului de clasă. Toate elementele care au această clasă vor fi formatate după o anumită regulă.

  Albastru (culoare: #0000FF; )

  clasa="albastru". Puteți face selectorul de clasă puțin mai specific. De exemplu:

  H1.albastru (culoare: #0000FF; )

  cu atribut clasa="albastru".

  Puteți aplica mai multe selectoare de clasă unui element. Luați în considerare următorul exemplu:

  Acest paragraf va fi formatat cu clase centruȘi îndrăzneţ.

  selectoare ID

  Puteți seta reguli de stil pentru elemente pe baza atributului id. Toate elementele care au acest ID vor fi formatate conform unei anumite reguli.

  #albastru (culoare: #0000FF; )

  Această regulă afișează conținutul din documentul nostru în albastru pentru fiecare element cu atributul id="albastru". Puteți face selectorul de id-uri puțin mai specific. De exemplu:

  H1#albastru (culoare: #0000FF; )

  Această regulă afișează conținutul în albastru numai pentru elemente

  cu atribut id="albastru".

  Adevărata putere a selectoarelor de id este atunci când sunt folosite ca bază pentru selectoarele descendenți, de exemplu:

  #blue h2 (culoare: #0000FF; )

  În acest exemplu, toate titlurile de al doilea nivel vor apărea în albastru atunci când sunt în etichete cu atributul id="albastru".

  Selectoare pentru copii

  Cunoașteți deja selectatorii de descendenți. Există un alt tip de selector care este foarte asemănător cu selectoarele pentru copii, dar are o funcționalitate diferită, selectorul pentru copii. Luați în considerare următorul exemplu:

  Corp > p (culoare: #0000FF; )

  Această regulă va afișa toate paragrafele în albastru dacă sunt un copil direct al elementului . Alte paragrafe plasate în interiorul altor elemente de tip

  sau

  Selectoare adiacente Elementele HTML care se succed se numesc elemente adiacente. Luați în considerare următorul exemplu: Puternic + em (culoare: #0000FF; ) Această regulă va afișa conținutul etichetei în albastru dacă vine după element . Alte etichete , nu vine după etichetă , nu va avea niciun efect al acestei reguli. Selectori de atribute De asemenea, puteți aplica stiluri elementelor HTML cu atribute specifice. Regula de stil de mai jos va potrivi toate elementele de intrare care au un atribut tip cu textul valorii: Intrare (culoare: #0000FF; ) Avantajul utilizării selectoarelor de atribute este că elementul nu se modifică, iar culoarea se aplică numai câmpurilor de text dorite. Următoarele reguli se aplică selectorului de atribute: p - selectează toate elementele de paragraf cu atributul lang. p - selectează toate elementele de paragraf în care atributul lang are valoarea exactă „ru”. p - selectează toate elementele de paragraf în care atributul lang conține cuvântul „ru”. p - selectează toate elementele de paragraf în care atributul lang conține valori care sunt exact „ru” sau încep cu „ru”. Câteva reguli de stil Poate fi necesar să definiți mai multe reguli de stil pentru un singur element. Puteți defini aceste reguli pentru a combina mai multe proprietăți și valorile lor corespunzătoare într-un singur bloc, așa cum se arată în exemplul următor: H1 (culoare: #00CED1; spațiere între litere: .2em; transformarea textului: minuscule; marginea de jos: 2em; greutatea fontului: 700; ) Toate perechile de proprietăți și valori sunt separate prin punct și virgulă (;). Le puteți stoca pe o singură linie sau pe mai multe linii. Pentru o mai bună lizibilitate, păstrați-le pe rânduri separate. Nu vă faceți griji pentru proprietățile menționate în blocul de mai sus. Aceste proprietăți vor fi explicate în lecțiile următoare. Gruparea selectoarelor în CSS Puteți stila multe selectoare dacă doriți. Pur și simplu separați selectoarele cu o virgulă, așa cum se arată în exemplul următor: H1, h2, h3 (culoare: #00CED1; spațiere între litere: .2em; transformare text: minuscule; margine-jos: 2em; greutate font: 700; ) Această regulă de stil va fi aplicată elementelor h1, h2 și h3. Ordinea listei nu contează atunci când se grupează selectori. Toate elementele din selector vor avea declarații corespunzătoare aplicate. Puteți grupa diferite ID-uri de selectare împreună, după cum se arată mai jos: #antet, #conținut, #subsol (poziția: absolut; lățime: 300px; stânga: 250px; ) Astăzi ne vom uita la conceptul de selectoare CSS și la modul în care îi putem folosi pentru a scurta marcajul HTML, făcându-l mai curat. Selectorul CSS este elementul căruia îi vom aplica proprietățile CSS. Cuvântul „selector” se explică de la sine; înseamnă alegere. P (culoare: roșu) div span (fond: verde) ul li (stil listă: niciunul) Selectoare de clasă și ID În exemplul de mai sus avem 3 selectoare - p, div span, ul li. Adică, întregul nostru fișier de stil este format din selectori și proprietățile acestora. Este cel mai convenabil și intuitiv, mai ales pentru începători, să folosești numele clasei etichetei sau identificatorul unic al etichetei ca selector. Pentru a atribui o clasă sau un identificator oricărei etichete, trebuie să-l specificăm printre atributele etichetei respective. O anumită etichetă poate avea maximum 1 ID și număr infinit clase. Exemplu: text în prima div text în a doua div text în a treia div La ce ar trebui să acordați atenție: Clasele și identificatorii pot fi atribuite oricăror (toate) etichete. Fiecare id este unic și nu poate fi repetat în aceeași pagină, spre deosebire de clase! Aceeași clasă poate fi atribuită oricăror etichete și poate fi repetată de orice număr de ori pe o pagină. Dacă vrem să atribuim mai multe clase unei anumite etichete, pur și simplu le specificăm separate printr-un spațiu. Numele claselor și identificatorii pot fi aceleași, dar în afară de nume, nu va exista nimic în comun între ele. Cum se face referire la o clasă sau id într-un fișier de foaie de stil (CSS)? Să ne uităm la un exemplu: #primul (culoare: roșu;) /* accesează id-ul numit primul */.secunda (culoare: albastru;) /* accesează clasa numită secundă */#first .second (culoare: portocaliu;) /* accesează clasa numită a doua NUMAI dacă se află în interiorul etichetei cu identificatorul mai întâi */.prima .a treia (culoare: gri;) /* se referă la clasa numită a treia NUMAI dacă se află în interiorul unei etichete cu clasa întâi */ În cazul nostru, ultimele două instrucțiuni nu vor funcționa, deoarece nu avem clase imbricate în etichete cu atribute date. După cum probabil ați observat, pentru a indica faptul că ne referim în mod specific la id, trebuie să punem un semn hash (#) în fața numelui său fără spații, dacă ne referim la o clasă, atunci trebuie să punem un punct (. ) în fața numelui clasei. Folosirea claselor și a identificatorilor este foarte convenabilă, dar ne mărește marcajul HTML, în mod ideal (care nu există niciodată) ar trebui să nu le folosim deloc, în schimb vom folosi combinații și grupări de selectoare, restul articolului va fi despre ele, dar ! Dar asta nu înseamnă deloc că ar trebui să renunți complet la utilizarea claselor și a identificatorilor, trebuie doar să ții cont de faptul că de foarte multe ori, în loc să creezi o nouă clasă sau id, te poți descurca cu tehnicile descrise mai jos și acestea pot de asemenea, să fie destul de convenabil. Care este diferența dintre class și id? Pe lângă diferențele de mai sus, este de remarcat și faptul că proprietățile specificate de id au o prioritate mai mare decât proprietățile atribuite clasei. Adică dacă scriem: text în diva Apoi culoarea textului va deveni roșie, în ciuda faptului că clasa este mai mică în cod și dacă ar avea prioritate egală textul ar deveni albastru. După sintaxa: în cazurile cu o clasă, putem alege ce etichetă să aibă această clasă, pentru aceasta, după numele tag-ului FĂRĂ spațiu, trebuie să ne referim la clasă. Exemplu: Clasa mea (proprietăți) /* se va aplica tuturor etichetelor care conțin clasa myclass */ div.myclass (proprietăți) /* se va aplica numai etichetelor div care conțin clasa myclass */ Acest lucru va funcționa și pentru id, dar o astfel de intrare este lipsită de sens, deoarece id-ul nu poate fi repetat pe pagină, ceea ce înseamnă că este suficient să declarați id-ul fără eticheta la care se referă: text Se pare că a mai rămas o singură diferență neprecizată și se referă la un subiect pe care nu am plănuit să îl abordez în viitorul apropiat pe acest blog - Javascript. Dar tot trebuie să vă spun despre asta: dacă doriți să accesați un element folosind Javascript, atunci a avea un id pentru acest element va fi foarte convenabil în acest scop. Pentru a face referire la un element prin clasa sa în Javascript, nu există o astfel de caracteristică încorporată, va trebui să utilizați funcții de ajutor + aceasta nu este întotdeauna cross-browser. Concluzia: folosim id și class, dar cu moderație, întrebându-ne mereu dacă este posibil să ne lipsim de ele și cât de recomandabil este. Selector aferent Div p (culoare: verde;) /* Selector după copil */ p(culoare: roșu;) /* selector după etichetă */ Dar așa cum am scris deja în articolul anterior, în primul caz, proprietățile CSS vor fi aplicate tuturor etichetelor p imbricate la ORICE adâncime etichetă div. Dar dacă vrem să aplicăm proprietăți numai descendenților direcți, adică la primul nivel de imbricare: Al treilea nivel Moștenitor direct (primul nivel) Al doilea nivel Moștenitor direct (primul nivel) În acest caz, trebuie să folosim așa-numitul selector aferent, se folosește o paranteză unghiulară pentru a-l desemna, puteți folosi spații, le puteți omite, nu l-aș recomanda: Div>p (culoare: albastru;) /* doar primul nivel de imbricare */ div p (culoare: albastru;) /* absolut toate paragrafele din interiorul unui div */ Selector universal Am rezolvat asta, avem deja 3 tipuri de selectoare în arsenalul nostru, acum vreau să vă spun despre un selector foarte neobișnuit, care iese în evidență printre toate celelalte - acesta este așa-numitul selector universal, care este indicat de un asterisc (*): * (marja: 0; umplutură: 0;) Așa încep fiecare proiect nou și vă sfătuiesc să faceți același lucru. Selectorul universal se aplică tuturor elementelor de pagină (etichete), dar are prioritate zero (mai jos nu are nicio prioritate). Este folosit în mod obișnuit pentru a suprascrie proprietățile CSS pe care browserele le stabilesc în mod implicit pentru unele etichete. Imaginează-ți, asta chiar se întâmplă! Browserele își stabilesc propriile proprietăți pentru destul de multe etichete în mod implicit, de exemplu, eticheta hyperlink culoarea textului albastru și sublinierea, setează căptușeală la eticheta corporală etc. Nu este absolut necesar să ne amintim, să știm și să folosim acest lucru, așa că eliminăm imediat cele mai banale proprietăți folosind un selector universal, cu toate acestea, nu aș recomanda să adăugați altceva la el (sau să adăugați, dar cu atenție), în ciuda celor mai mici Prioritatea (null ) a selectorului universal, în unele cazuri, acesta poate încă suprascrie alte proprietăți pentru dvs., așa că țineți cont de asta. Apropo, atunci când lucrați cu selectoare, ca și în orice lucrare legată de aspect, este foarte convenabil să utilizați vizualizarea elementelor paginii. Dacă nu știți încă lucruri precum Opera Dragonfly, Firebug și inspectorii web în general, atunci, fără a exagera, trebuie să citiți urgent articolul de la linkul de mai sus! Și cine a folosit deja lucruri similare, vă rog să mă urmăriți. Pseudo-clase Spre deosebire de clase, pseudo-clasele nu trebuie să fie specificate în marcajul HTML, acestea sunt calculate chiar de browser. Avem 4 pseudo-clase statice și 3 pseudo-clase dinamice, excluzând CSS 3, mai multe despre asta spre final. Cele statice includ (:first-child, :link, :visited, :lang()): Moștenitor direct (primul nivel) Al treilea nivel Moștenitor direct (primul nivel) Al doilea nivel Moștenitor direct (primul nivel) Rezultat: Desigur, puteți combina selectoare după cum doriți, de exemplu: Div>span p:primul copil (culoare: verde;) /*va funcționa dacă p este primul copil al părintelui său și se află în interiorul unei etichete span care este un copil direct al unei etichete div */ Numele pseudoclasei prezentat mai sus vorbește de la sine primul copil - primul copil. Următoarele două pseudo-clase statice se aplică numai etichetei de hyperlink (:link, :visited), ele aplică proprietăți CSS în funcție de dacă linkul a fost vizitat de un anumit utilizator sau nu: A:link (culoare: albastru;) /* setează culoarea albastră pentru linkurile nevizitate, iar implicit sunt subliniate */ a:vizitat (culoare: verde; text-decor: niciunul;) /* linkurile vizitate vor avea text roșu, eliminați sublinierea */ Pseudo-clasa:lang() este folosită pentru a specifica stiluri diferite în funcție de limbă. Limba în care trebuie aplicat desenul este indicată între paranteze. Aceasta poate fi folosită, de exemplu, pentru a specifica diferite stiluri de citate în ghilimele: Q:lang(de) (ghilimele: „\201E” „\201C”;) /* citate pentru germană */ q:lang(en) (ghilimele: „\201C” „\201D”;) /* citate pentru engleză */ q:lang(ru) (ghilimele: "\00AB" "\00BB";) /* citate pentru limba rusă */ Acesta este poate singurul tip posibil de selector pe care nu l-am folosit niciodată. Pseudoclase dinamice Pseudoclasele dinamice sunt :active, :hover, :focus. Pseudoclasele dinamice sunt declanșate de o anumită acțiune pe pagină, funcționează pentru toate etichetele, și nu doar pentru link-uri, așa cum cred mulți oameni și chiar susțin în blogurile lor! Să luăm în considerare aplicarea lor: P:activ (fond: roșu;) /* stil care va fi aplicat etichetei când faceți clic pe ea (clic de mouse) */ intrare:focalizare (lățime: 400px;) /* stil care va fi aplicat elementului care are în prezent focus (funcționează, de exemplu, pentru câmpurile de introducere a textului: textarea, input). În acest caz, la focalizare, lățimea intrării va deveni egală cu 400 de pixeli, convenabil de utilizat pentru un efect frumos de prelungire a câmpului prin clic. */ div:hover (fond: verde;) /* Declanșat când cursorul trece peste un element, folosit în principal pentru a crea un efect frumos când treceți cu mouse-ul peste linkuri. */ Aplicați aceste stiluri la exemplul nostru de mai sus și veți vedea singur. Selectoare adiacente Selectoarele adiacente sunt vecinul cel mai apropiat de sub cod, nu copilul! Selector foarte convenabil: textul din paragraful din prima div text în paragraful AFARA div textul din paragraful al doilea div text în span din nou paragraful este în afara div Rezultat: Selectoare adiacente generalizate Selectoarele adiacente generalizate acționează exact ca selectoarele adiacente obișnuite, cu excepția faptului că proprietățile se aplică nu doar primului vecin de mai jos, ci tuturor vecinilor specificați de mai jos: text în diva paragraf paragraf paragraf text în span paragraf paragraf paragraf în diva paragraf în diva text în span paragraf Rezultat: Selectori de atribute Selectorii de atribute ne permit să accesăm etichete care au atributul de care avem nevoie sau chiar o anumită valoare: P (proprietăți) /* se aplică tuturor etichetelor p care au un atribut de aliniere */ p (proprietăți) /* unde valoarea atributului align este center */ p (proprietăți) /* unde valoarea atributului align începe la centru */ p (proprietăți) /* unde valoarea atributului align conține centru */ p (proprietăți) /* unde site-ul poate fi, printre alte cuvinte, separat prin spații () */ p (proprietăți) /* unde valoarea atributului de clasă constă numai din sau începe cu cuvântul site, urmat de o cratimă și restul valorii ( sau ) */ p (proprietăți) /* unde valoarea atributului align se termină cu centru */ CSS 3 pseudo-clase Te-ai familiarizat deja cu toți selectoarele principale și acest lucru ar trebui să fie suficient pentru tine în primele două zile. Cu toate acestea, în CSS 3, au apărut multe pseudo-clase noi, acum putem lua nu numai primul copil, ci și orice alt copil, putem merge de la opus, luăm nu primul, ci ultimul copil și așa mai departe si asa mai departe. Toate acestea sunt foarte convenabile și practice, cu excepția faptului că este posibil să aveți probleme cu versiunile mai vechi de IE. Să ne adunăm toate puterile și să trecem prin toate selectoarele rămase, pentru ca ulterior să le poți ține cont atunci când îți creezi propriul layout. :last-child – analog cu:first-child, dar nu ia primul, ci ultimul copil. :only-child – va funcționa dacă elementul (eticheta) este singurul copil. :only-of-type - va funcționa dacă elementul (eticheta) este singurul copil de tipul său. :nth-child() – se referă la copii prin numerele lor ordinale, puteți accesa toate numerele pare sau impare. De exemplu: paragraf paragraf paragraf text în span paragraf paragraf paragraf paragraf paragraf paragraf Rezultat: :nth-last-child – funcționează la fel ca și precedentul, dar raportul începe de la sfârșit. :first-of-type – primul copil de tipul său din părintele direct. :last-of-type – ultimul copil de tipul său din părintele direct. :empty – va funcționa pentru acele etichete care nu conțin un singur caracter (fără text). :not() – aruncă o excepție pentru elementele date. Exemplu: paragraf cu rola de clasă paragraf paragraf paragraf cu rola de clasă Rezultat: Gestionarea câmpurilor, formularelor, butoanelor radio și casetelor de selectare în CSS :activat - se aplică elementelor de interfață accesibile, cum ar fi formulare, butoane, comutatoare etc. În mod implicit, toate elementele interfeței sunt accesibile. :disabled - se aplică elementelor de interfață dezactivate, cum ar fi butoanele, formularele și așa mai departe. Elementele de interfață sunt dezactivate dacă le adăugați atributul dezactivat în HTML sau disabled="disabled" în XHTML. :checked – se aplică elementelor de interfață, cum ar fi radiourile și casetele de selectare, atunci când acestea sunt în poziția pornit. Pseudo-elemente Pseudo-elementele, similare pseudo-claselor, sunt calculate automat de către browser, nu trebuie să ne facem griji pentru acest lucru. Pentru a nu confunda pseudoelementele cu pseudo-clasele din specificația CSS 3, s-a decis să se folosească două puncte duble, în loc de unul singur, așa cum a fost cazul în CSS 2. Prin urmare, pe Internet puteți găsi pseudo. -elemente cu două puncte unice și două două puncte - ambele opțiunea este corectă. Cu toate acestea, pentru o mai bună compatibilitate cu IE, se recomandă utilizarea unui singur două puncte. :first-line – prima linie din interiorul unui element de bloc sau tabel. :first-letter – prima literă din interiorul unui element bloc. Concluzie: acum cunoașteți și puteți folosi toată puterea foilor de stil în cascadă, dar asta nu înseamnă că trebuie să vă grăbiți imediat să creați machete de site web folosind atât de mulți selectori, pseudo-clase și pseudo-elemente cât ați învățat astăzi. Am enumerat toate instrumentele posibile și ar trebui să le alegeți numai pe cele mai necesare pentru dvs. Beneficiile optimizării HTML cu CSS O parte a scopului tuturor celor de mai sus este să se îndepărteze de utilizarea omniprezentă a atributelor de clasă și id în HTML, lăsând astfel totul în seama foilor de stil puternice. Fișierele de stil externe, cum ar fi fișierele externe Javascript, sunt perfect stocate în cache, ceea ce înseamnă că atunci când accesează orice pagină a site-ului tău pentru prima dată, browserul utilizatorului își amintește aceste fișiere și nu le mai descarcă, spre deosebire de pagina site-ului în sine, adică, marcajul HTML, imaginile și textul pe care browserul le descarcă din nou și din nou. Același lucru este valabil și pentru motoarele de căutare, nu le pasă deloc de fișierele dvs. externe, dar le pasă de volumul și conținutul markupului dvs. HTML. Motoarele de căutare trebuie să acceseze cu crawlere întreaga structură a paginii și este în interesul tău să îi ajuți în acest sens, să-și concentreze eforturile asupra conținutului și nu pe un perete greoi de markup format dintr-o grămadă de clase și identificatori, sau mai rău - handlere de evenimente Javascript și stiluri CSS direct în atributele etichetei (și asta se întâmplă în continuare). Puteți să vă certați cu mine, spun ei, putem forța browserul client să descarce toate fișierele conectate, imaginile în mediul său local, să memoreze întreaga pagină în cache și așa mai departe. Pe un astfel de fundal, un astfel de fleac este complet pierdut, dar într-un fel sau altul, reducând pe cât posibil marcajul HTML, câștigi doar, fără să pierzi nimic în afară de un posibil obicei. Pentru a rezuma: datorită optimizării și reducerii HTML, avem un câștig foarte mic în viteza de încărcare a site-ului și SEO (optimizare pentru motoarele de căutare), precum și cod mai curat. Igor. Actualizare: 30 octombrie 2018. Articolul de început al acestei secțiuni a furnizat informații generale cu privire la, 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 o pagină web. În această publicație, vom analiza cum să compunem și să scriem corect proprietățile 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, este totuși posibil să se facă o analogie între un set de reguli CSS și text simplu, în care fiecare cuvânt este format din litere, o propoziție este formată din cuvinte și fragmentul de text însuși este format din propoziții. . 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, cod de culoare, denumire font 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. Aceasta este, de asemenea, o formă complet legitimă de regulă CSS, mai puțin voluminoasă, care este bună pentru optimizarea site-ului, dar mai puțin lizibilă: Corp (dimensiunea fontului:14px;background:#00ff00 url("west.png") repetare-x) Odată ce designul site-ului este gata și s-au făcut toate modificările necesare la fișierele de stil CSS, acestea sunt ajustate în consecință pentru a optimiza resursa web, iar 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 atributele etichetelor de marcare hipertext, astăzi utilizarea unei astfel de metode este considerată prea frecventă, deoarece codul HTML supraîncărcat adesea nu contribuie. la optimizarea corectă a paginilor site-ului, care, inclusiv, dăunând 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? Faptul este că cea mai bună soluție nu este să folosiți întotdeauna valori relative standard, inclusiv procente. Uneori este mai benefic să legați dimensiunea fontului de înălțimea și lățimea ferestrei browserului. Să presupunem, dacă înălțimea ferestrei de vizualizare este de 800 px, atunci 1vh = 8px, iar dacă lățimea este 1500px - 1vw = 15px. Unitățile vmin și vmax sunt determinate de dimensiunile minime și maxime ale zonei în înălțime și, respectiv, 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. Valorile egale cu zero nu se aplică acestei reguli; 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- Acest 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, definind aspect elemente de 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, în caz contrar, 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) În conformitate cu reguli CSS proprietatea culorii este moștenită deci „unset” în exemplul nostru returnează culoarea textului verde pentru containerul „xxx” care este un copil al „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 proprietate de frontieră nu mostenit, 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 imagine (citiți folosind Etichetă HTML 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 Este folosit, de exemplu, la implementarea efectelor de animație (da, on 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 fracții. Î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: 10px dublu-radius: 70px Animație */: spin 5s 0s infinit; 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. Să spunem, dacă iei întreaga linie ghilimele simple, atunci fragmentul de text intern este dublat ș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 CSS poate fi folosit pentru a indica culorile proprietăților atunci când se creează reguli CSS. diverși parametri. 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ă niciunul gamă de culori, iar 100% este maxim culoare saturată. 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 utilizate 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 să rețineți că pot fi folosite valori negative. Mai jos sunt 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 plasați-l pe pagină ca unul dintre componentele mostrei noastre text specific: 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. Salutări, dragi cititori. În articolele anterioare, am studiat în principal atributele stilului CSS. Sunt o mulțime. Unii setează parametrii fontului, alții parametrii de fundal, iar alții parametrii pentru indentări și cadre. În acest articol vom vorbi despre selectoare de stil. Într-unul dintre articolele de care am atins deja. Astăzi ne vom uita la mai multe tipuri de selectoare care nu leagă în mod explicit o regulă de stil la un element de pagină web. Acestea sunt așa-numitele selectoare speciali. Există mai multe tipuri de ele. Combinatori în CSS (Selectori adiacent, copii și context) Combinatoare sunt un tip de selectoare CSS care leagă o regulă de stil la un element de pagină web pe baza locației acestuia față de alte elemente. Primul simbol combinator la care se adauga(+) sau selector adiacent. Plus este setat între două selectoare: <селектор 1> + <селектор 2> { <стиль> } Stilul în acest caz este aplicat la selector 2, dar numai dacă este adiacent selector 1și vine imediat după el. Să ne uităm la un exemplu: puternic + i ( } ... Acesta este un text normal. Acesta este text îngroșat, text simplu, text roșu Acesta este un text normal. Acesta este text îngroșat, text simplu, și acesta este un text normal. Rezultat: Stilul descris în exemplu va fi aplicat numai primului text inclus în etichetă , deoarece vine imediat după etichetă . Combinator tilde(~) se aplică și selectoarelor adiacente, dar de data aceasta pot exista și alte elemente între ele. În acest caz, ambii selectori trebuie să fie imbricați în aceeași etichetă părinte: <селектор 1> ~ <селектор 2> { <стиль> } Stilul va fi aplicat selector 2 care ar trebui să urmeze selector 1. Luați în considerare un exemplu: puternic~i( culoarea rosie; /* Culoarea textului roșu */ } ... Acesta este un text normal. Acesta este text îngroșat, text simplu, text roșu i se aplica regula selectorului adiacent. Acesta este un text normal. Acesta este text îngroșat, text simplu, și acesta este text roșu. Rezultat: După cum puteți vedea, de data aceasta regula de stil a funcționat pentru ambele texte incluse în etichetă , în ciuda faptului că în al doilea caz între etichetă Și merita eticheta . Combinator > se refera la selectoare de copii. Vă permite să legați stilul CSS la un element de pagină web care este imbricat direct într-un alt element: <селектор 1> > <селектор 2> { <стиль> } Stil va fi legat de selector 2, care este direct imbricat în selector 1. div > puternic ( } ... Acesta este un text normal. Acesta este text cursiv aldine. Acesta este un text normal. Și acesta este un text aldine obișnuit. Iar rezultatul: După cum puteți vedea în figură, regula de stil a afectat doar prima etichetă , care este imbricat direct în etichetă . Și părintele imediat al celei de-a doua etichete este eticheta , deci regula nu se aplică lui. În continuare ne vom uita selector de context<пробел> . Vă permite să legați un stil CSS la un element imbricat într-un alt element și poate exista orice nivel de imbricare: <селектор 1> <селектор 2> { <стиль> } Stilul va fi aplicat selector 2, dacă este cumva imbricat în selector 1. Să luăm în considerare exemplul anterior, numai dacă descriere CSS regulile aplică selectorul de context: div puternic( stil font: cursiv /* cursiv */ } ... Acesta este un text normal. Acesta este text cursiv aldine. Acesta este un text normal. Și acesta este, de asemenea, text îngroșat italic. Text simplu și doar text aldine Rezultat: După cum puteți vedea, de data aceasta regula a afectat ambele etichete , chiar și cel care este imbricat în container și într-un paragraf . A eticheta , care este pur și simplu imbricat într-un paragraf regula css nu merge deloc. Selectoare după atributele etichetei Selectorii de atribute sunt selectori speciali care leagă un stil de un element în funcție de faptul că acesta conține un anumit atribut sau are o anumită valoare. Există mai multe opțiuni pentru utilizarea unor astfel de selectoare. 1. Selector de atribute simplu Se pare ca: <селектор>[<имя атрибута тега>] { <стиль> } Și leagă stilul de acele elemente în care este adăugat atributul specificat. De exemplu: puternic( culoarea rosie; } ... Auto acesta este un motor mecanic fără șenile vehicul">vehicul rutier cu cel putin 4 roti. Rezultat: În imagine puteți vedea că regula css (culoarea textului roșu) este aplicată elementului puternic, la care se adaugă atributul titlu. 2. Selector de atribute cu valoare Sintaxa pentru acest selector este următoarea: <селектор>[<имя атрибута тега>=<значение>] { <стиль> } Leagă stil la elemente ale căror etichete au un atribut cu cel specificat NumeȘi sens. Exemplu: A( culoarea rosie; dimensiunea fontului: 150%; } ... .ru" target="_blank">Link în fereastră nouă Rezultat: După cum puteți vedea, ambele elemente de tip hyperlink au atributul ţintă, dar regula css care mărește textul linkului de o dată și jumătate și își schimbă culoarea în roșu este aplicată etichetei al cărui atribut ţintă are sensul "_gol". 3. Una dintre mai multe valori de atribut Unele valori ale atributelor pot fi separate prin spații, cum ar fi numele claselor. Pentru a seta o regulă de stil atunci când valoarea necesară este prezentă în lista de valori ale atributelor, utilizați următorul selector: [<имя атрибута тега>~=<значение>] { <стиль> } <основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> } Stilul este aplicat dacă atributul are valoarea necesară sau face parte dintr-o listă de valori separate prin spațiu. De exemplu: { culoarea rosie; dimensiunea fontului: 150%; } ... Telefonul nostru: 777-77-77 Adresa noastră: St. Moscova Sovetskaya 5 Veți obține următorul rezultat: Regula se aplică unui element ale cărui valori de atribut includ: clasă există un sens tel. 4. Cratima în valoarea atributului Este permisă o cratimă în valorile de identificare și de clasă. Pentru a lega un stil de elemente ale căror valori de atribut pot conține o cratimă, puteți utiliza următoarea construcție: [atribut|="valoare"] ( stil ) Selector[atribut|="valoare"] ( stil ) Stilul este aplicat acelor elemente a căror valoare de atribut începe cu valoarea specificată urmată de o cratimă. De exemplu: { culoarea rosie; dimensiunea fontului: 150%; } ... Paragraful 1 Punctul 2 Punctul 3 Punctul 4 Rezultat: În exemplu, regula de stil se aplică numai acelor elemente de listă al căror nume de clasă începe cu valoare "meniul- ". 5. Valoarea atributului începe cu un text specific Acest selector setează stilul pentru un element dacă valoarea atributului etichetei începe cu o anumită valoare. Pot exista două opțiuni: [<имя атрибута тега>^=<подстрока>] { <стиль> } <основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> } In primul caz stil se aplică tuturor elementelor ale căror etichete au un atribut cu cel specificat Numeși o valoare care începe cu cea specificată subșiruri. În al doilea caz, doar același lucru anumite elemente specificat în selector principal. Exemplu: A( culoare:verde; greutate font: bold; } ... Rezultat: Exemplul arată cum să afișați diferit link-urile externe și link-urile interne. linkuri externeîncepe întotdeauna cu linia „http://”. Prin urmare, în selector indicăm că stilul va fi aplicat doar link-urilor care au atributul hrefîncepe cu sensul http://. 6. Valoarea atributului se termină cu un anumit text Leagă un stil de elemente a căror valoare de atribut se termină cu textul specificat. Are următoarea sintaxă: [<имя атрибута тега>$=<подстрока>] { <стиль> } <основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> } In primul caz stil se aplică tuturor elementelor care au atribut cu cele specificate Numeși are o semnificație care se termină cu cea specificată subșir. În al doilea caz, același lucru, doar la indicat selectoare. În acest fel, de exemplu, puteți afișa diverse formate imagini grafice. De exemplu: IMG ( chenar: 5px roșu continuu; } ... Imagine GIF Format de imagine png Rezultat: În exemplu, toate imaginile cu extensie gif vor fi afișate cu un chenar roșu grosime de cinci pixeli. 7. Valoarea atributului conține șirul specificat Acest selector leagă un stil de etichete a căror valoare de atribut conține text specific. Sintaxă: [<имя атрибута тега>*=<подстрока>] { <стиль> } <основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> } Stil se leagă de elemente care au atribut Cu numele specificat iar valoarea sa contine cea specificata subșir. De exemplu: IMG ( chenar: 5px roșu continuu; } ... Poza din folderul galeriei Imagine dintr-un alt folder Rezultat: În exemplu, stilul este aplicat imaginilor care sunt încărcate din folder "Galerie". Asta e totul despre selectorii de atribute. Toate metodele de mai sus pot fi combinate între ele: Selector[attribute1="valoare1"][attribute2="valoare2"] ( stil ) În plus, permiteți-mi să vă reamintesc despre selectoarele CSS speciale: folosind simbolurile „+” și „~” se formează; simbolul „>” se leagă stiluri css La filiale Etichete; simbol<пробел>generează selectori de context. În articolele viitoare ne vom uita și la pseudo-elemente și pseudo-clase care oferă Unealtă puternică managementul stilului. Asta e tot, ne vedem din nou. Vlad Merjevici Elementele unei pagini web sunt numite adiacente atunci când se succed imediat în codul documentului. Să ne uităm la câteva exemple de relații de elemente. Lorem ipsum dolor sit amet. În acest exemplu, eticheta este un copil al etichetei Pentru că se află în interiorul acestui recipient. Respectiv Acționează ca părinte . Lorem ipsum dolor sta amet. Iată etichetele Și nu se suprapun în niciun fel și reprezintă elemente adiacente. Faptul că se află în interiorul containerului Nu le afectează deloc atitudinea. Lorem ipsum dolor sit amet, consectetuer adipising elită. Etichetele învecinate sunt aici Și , și Și . în care Și elementele adiacente nu sunt tratate deoarece există un container între ele . Pentru a controla stilul elementelor adiacente, utilizați simbolul plus (+) între două selectoare. Sintaxa generală este următoarea. Selector 1 + Selector 2 (Descrierea regulilor de stil) Spațiile din jurul plusului sunt opționale, stilul din această notație este aplicat Selectorului 2, dar numai dacă este adiacent Selectorului 1 și îl urmează imediat. Exemplul 11.1 arată structura modului în care etichetele interacționează între ele. Exemplul 11.1. Folosind selectoare adiacente HTML5 CSS 2.1 IE Cr Op Sa Fx Lorem ipsum dolor sit amet, consectetuer elita adipiscentă. Lorem ipsum dolor sit amet, consectetuer elita adipiscentă. Rezultatul exemplului este prezentat în Fig. 11.1. Orez. 11.1. Evidențierea textului cu culoare folosind selectoare adiacente ÎN în acest exemplu culoarea textului pentru conținutul containerului se modifică când se află imediat după recipient . În primul paragraf, această situație este implementată, astfel încât cuvântul „consectetuer” este afișat cu roșu în browser. În al doilea paragraf, deși există o etichetă , dar nicio etichetă în cartier nu, deci nu se aplică niciun stil acestui container. Să ne uităm la un exemplu mai practic. Adesea devine necesar să se includă diferite note de subsol și note în textul unui articol. De obicei, în acest scop, creezi o nouă clasă de stil și o aplici paragrafului, în acest fel poți schimba cu ușurință aspectul textului. Dar vom merge invers și vom folosi selectoare adiacente. Pentru a evidenția comentariile, să creăm o nouă clasă, să o numim sic și să o aplicăm etichetei . Primul paragraf după un astfel de titlu este evidențiat cu o culoare de fundal și indentare (exemplul 11.2). Aspectul paragrafelor rămase va rămâne neschimbat. Exemplul 11.2. Schimbați stilul de paragraf HTML5 CSS 2.1 IE Cr Op Sa Fx Metode de prindere a leului în deșert Metoda de căutare secvențială Lasă leul să aibă dimensiuni L x W x H, unde L este lungimea leului de la vârful nasului până la ciucul cozii, W este lățimea leului și H este înălțimea acestuia. După care împărțim deșertul într-un număr de dreptunghiuri elementare, a căror dimensiune coincide cu lățimea și lungimea leului. Avand in vedere ca leul poate nu se afla strict intr-o anumita zona, dar in acelasi timp in doua dintre ele, cusca pentru prindere ar trebui sa fie realizata dintr-o suprafata mai mare si anume 2L x 2W. Datorită acestui lucru, vom evita greșeala ca doar jumătate din leu să fie prins în cușcă, sau, mai rău, doar coada acestuia. Notă importantă Pentru a simplifica calculele, coada poate fi aruncată ca eroare de măsurare și nu poate fi luată în considerare. Rezultatul acestui exemplu este prezentat în Fig. 11.2. Orez. 11.2. Modificarea aspectului unui paragraf prin utilizarea selectoarelor adiacente În acest exemplu, textul este formatat folosind paragrafe (tag ), dar scrierea H2.sic + P stabilește stilul doar pentru primul paragraf care urmează etichetei , care are o clasă numită sic adăugată. Selectoarele adiacente sunt convenabile de utilizat pentru acele etichete la care sunt adăugate automat indentări pentru a ajusta independent cantitatea de indentare. De exemplu, dacă etichetele merg la rând Și , apoi distanța dintre ele poate fi reglată cu ușurință folosind selectoare adiacente. Situația este similară pentru etichetele consecutive. Și Și, de asemenea, în alte cazuri similare. Exemplul 11.3 modifică spațiul dintre etichetele specificate în acest mod. Exemplul 11.3. Spații între titluri și text HTML5 CSS 2.1 IE Cr Op Sa Fx Titlul 1 Titlul 2 Paragraf! Deoarece atunci când se utilizează selectoare adiacente stilul este aplicat numai celui de-al doilea element, dimensiunea marginilor este redusă prin includerea unei valori negative pentru proprietatea margin-top. În acest caz, textul se ridică, mai aproape de elementul anterior. Întrebări de verificat 1. Ce etichete din acest cod sunt adiacente? Formula acidului sulfuric:H 2 ASA DE 4 ȘI Și Și Și Și 2. Următorul cod HTML este disponibil: Ultima teoremă a lui Fermat X n+Y n = Z n unde n este un număr întreg > 2 Ce text va fi evidențiat cu roșu folosind stilul SUP + SUP (culoare: roșu; )? Al doilea „n” Al doilea și al treilea „n”. Internet Programe Instrucțiuni Browsere Windows 10 Android iOS Conexiune Ultimele note Firmware Samsung Galaxy J7 (2016) SM-J710F Firmware Samsung galaxy j 7 Rezolvarea problemei cu fișierele de pe un card de memorie Cum să recuperați fișierele din folderul dir pierdut Viber nu vede contacte Cum să copiați o unitate flash USB sau un disc bootabil pe o altă unitate flash folosind UltraISO Copiați un disc de pornire Windows 7 Nu pot configura actualizările Windows - ce ar trebui să fac? Popular Cum să selectați mai multe fotografii folosind tastatura Program educativ militar-financiar Unde puteți crea o ramă foto online Rame online Photoshop fără înregistrare Știri 2024-04-25 01:41:12 WhatsApp: trucuri pentru a ajuta la gestionarea corespondenței 2024-04-24 01:40:28 Cum să transformați un scaner obișnuit într-un scaner de rețea 2024-04-24 01:40:27 Photo Collage Max - un program în limba rusă pentru crearea de colaje foto 2024-04-24 01:40:27 Cele mai bune programe pentru a crea o unitate flash USB bootabilă 2024-04-24 01:40:27 Cele mai bune editori foto pentru PC views.ru views.ru - Totul despre tehnologia modernă. Defecțiuni, rețele sociale, internet, viruși 2024 - Toate drepturile rezervate Contacte Despre site Publicitate pe site Internet Programe Instrucțiuni Browsere Internet Programe Instrucțiuni Browsere