Atribute de clasă și id

Atributul CLASS este cu siguranță cel mai des folosit atribut în document HTML. Cu toate acestea, nu ar trebui să abuzați de acest lucru. Prezența unui atribut în fiecare sau aproape fiecare element de document indică un stil slab. CSS ar trebui să fie compus cu atenție, astfel încât să existe cât mai puține atribute CLASS în document. De exemplu, dacă celulele unui tabel de document trebuie să aibă proprietăți identice, atunci ar fi mai logic să setați aceste proprietăți folosind un selector de context (vezi 5.2), mai degrabă decât prin specificarea atributului CLASS pentru fiecare celulă de tabel și, cu siguranță, nu prin definirea acestor proprietăți pentru toate celulele tuturor tabelelor.

CSS pentru celulele tabelului

table.special-table td (

chenar: 1px solid #000000;

Este posibil să enumerați mai multe clase ca valoare pentru atributul CLASS. Toate acestea vor fi aplicate simultan, urmând regulile de prioritate pentru selectoare descrise în secțiunea 5.6. Numele claselor trebuie separate printr-un spațiu, așa cum se arată în exemplul următor:

Specificarea mai multor clase pentru un element

Același lucru este valabil și pentru atributul ID, singura diferență fiind că ID-ul nu poate fi repetat de mai multe ori într-un document. În consecință, atributul ID identifică un anumit bloc sau element unic al documentului, de exemplu, navigarea de sus, subsol, blocarea drepturilor de autor etc. Atributele ID nu trebuie folosite dacă sunt îmbunătățite folosind JavaScript pe pagină - aceasta va crea complicatii suplimentare pentru programatorii JavaScript.

Elemente și atribute neutilizate sau rar utilizate

ÎN aceasta sectiune descrie acele elemente și atribute a căror utilizare ar trebui redusă la minimum sau deloc utilizată.

element FONT

De ceva timp, elementul FONT a fost considerat inacceptabil pentru utilizare, după cum a confirmat consorțiul W3C. Cert este că elementul FONT nu este un element care determină structura documentului, ci este responsabil doar pentru stilul de afișare. Deoarece toate stilurile trebuie introduse în CSS pentru ca documentul HTML să reflecte în mare măsură structura documentului și într-o măsură mai mică stilul acestuia, utilizarea elementului FONT creează dificultăți suplimentare la editarea documentelor și la transformarea lor în alte specificații. Prin urmare, nu utilizați niciodată elementul FONT.

elementul HR

Elementul HR (regula orizontală) este conceput pentru a afișa un separator orizontal sub forma unei linii. În documentele de design strict, elementul HR practic nu este utilizat datorită afișajului său specific browsere diferite. Încercați să nu utilizați acest element decât dacă este absolut necesar.

element HARTĂ

Elementul MAP este conceput pentru a aplica o grilă de coordonate unei imagini, evidențiind astfel zonele imaginii care sunt hyperlinkuri.

Utilizarea elementului MAP introduce o confuzie inutilă în structura documentului, făcând mai puțin ușor de înțeles căutarea în roboți și oameni. Ar trebui să evitați utilizarea acestui element decât dacă este absolut necesar.

Element CADRU

Utilizarea elementului FRAME presupune utilizarea unei structuri de cadru de document, pentru care trebuie să existe o cerință corespunzătoare din partea clientului. Utilizarea unei structuri de cadru de document are o serie de dezavantaje, inclusiv inaccesibilitatea conținutului unor documente robot de căutare, imposibilitate de adresare pagina specifică cadru etc. Nu utilizați rame decât dacă este specificat în cerințe.

Atributul NOWRAP

Atributul NOWRAP este destinat să indice că textul dintr-un element nu trebuie împărțit pe mai multe linii.

De ceva vreme, atributul NOWRAP a fost foarte nepopular, a fost înlocuit cu proprietate CSS spatiu alb cu valoarea nowrap. Utilizați atributul NOWRAP pentru browserele care nu acceptă proprietatea CSS cu spațiu alb. De regulă, asta este deja browsere învechite ca Internet Explorer 5.0 sau Netscape 4. În cazul XHTML, atributul NOWRAP, ca orice alt atribut, trebuie să aibă o valoare conform regulilor XML.

Atributul NOWRAP în XHTML

Atributul ROWSPAN

Atributul ROWSPAN al elementului TD specifică câte rânduri de tabel trebuie combinate într-unul singur. Datorită înțelegerii sale mixte de către browsere, acest atribut se face extrem de nepopular. Încercați să evitați utilizarea acestui atribut în documentele dvs. Urmând această regulă, veți fi mai sigur că documentul dvs. se va afișa corect în diferite browsere.

atribut STYLE

Atributul STYLE specifică stilul CSS pentru un element dintr-un document HTML. După cum sa discutat mai sus pentru elementul FONT, ar trebui să utilizați atributul STYLE numai în cazuri de necesitate extremă sau în scopuri de depanare. Avantajul acestui atribut este că Stiluri CSS, descrise în interiorul acestuia au cea mai mare prioritate în comparație cu atributele de stil HTML și orice alte stiluri pentru acest element descris în CSS.

Bună ziua, dragi cititori ai site-ului blogului. Astăzi vom continua să ne umplem materialele cu materiale și să începem să vorbim despre un lucru atât de fundamental precum selectorii în Limbajul CSS.

Există șapte tipuri de ele - tag, clasă, Id, universal, atribute, precum și pseudo-clase și pseudo-elemente. Cam mult, nu-i așa? Ei bine, nu contează, să le privim pe toate puțin câte puțin și cu exemple detaliate.

ÎN publicații anterioare ne-am uitat deja și ne-am familiarizat cu unitățile de dimensiuni, cum ar fi și am învățat despre principiile moștenirii în CSS. Ei bine, astăzi, așa cum am spus, deschidem un capitol foarte serios în studiul limbajului de markup stil.

Selectoare de etichete și clase în CSS

Înainte de a studia regulile de stil, va trebui să învățați cum și în funcție de ce principii să setați acele etichete prin care browserul va înțelege la ce elemente de cod HTML trebuie aplicate. Selectoarele sunt diferite. Cele mai simple, din punct de vedere al înțelegerii, folosesc nume de tag, cărora le vor trebui aplicate regulile limbajului CSS scris după ele.

ÎN în acest exemplu Toate etichetele paragrafului P vor folosi culoarea fontului roșu și culoarea de umplere a fundalului gri. Orice regulă CSS poate avea mai mulți selectori specificați simultan. Cum ar trebui citite? Mereu de la dreapta la stânga, adică începeți cu cel mai apropiat de bretele de deschidere.

În exemplul de mai sus, prima linie arată un selector de etichetă (element) care forțează culoarea fontului să fie roșie pentru toate containerele Div.

Conținutul unui container Div obișnuit

În a doua linie vedem un exemplu de selector complex în care avem următoarele element nou, Cum clasă. Este înregistrată ca . Putem folosi un nume arbitrar ca valoare pentru clasă folosind simbolurile ,,,[_],[-].

Dar, pe lângă clasă, limbajul de markup stil folosește și Id. Care este diferența dintre o clasă și un Id? Valoarea acestuia din urmă trebuie să fie unică, deoarece Id este un identificator unic pentru o etichetă HTML și numele (valoarea) acesteia pot fi folosite o singură dată în cod.

Și valoarea pentru clasă nu este unică și poate fi folosită pentru oricare cantitati mari elemente din cod. Acestea. etichete diferite(Div, P, H1 etc.) pot avea aceeași valoare pentru atributul lor de clasă:

Cum este folosit în selectoarele CSS? Se pare că numele lui este scris cu un punct în față.

Prin urmare, când vedem ceva care începe cu un punct în codul CSS, înțelegem imediat asta despre care vorbim despre clasa. Dacă ne uităm la exemplul dat în captură de ecran, acum în toate elementele codului HTML unde este scris „clasa” cu valoarea „Albastru”, textul va fi colorat în albastru.

Dar acest lucru nu se va întâmpla deloc pentru că am ales numele de clasă „Albastru”. L-am putea numi orice (chiar și „xyz”), iar culoarea din exemplul nostru este setată exact așa cum a fost atribuită selectorului cu această clasă. Sper că acest lucru este clar? Să schimbăm numele (valoarea) clasei din exemplu:

Paragraf cu text

Paragraf cu text

Acestea. Acum avem clasa XYZ și o regulă scrisă pentru ea:

Xyz (culoare:albastru)

Colorat textul paragrafului în albastru. Acest exemplu subliniază încă o dată acest lucru nume pentru atributul de clasă poți folosi orice. Totuși, să continuăm.

Să aruncăm o altă privire la un exemplu despre modul în care selectorii de etichete și clase sunt utilizați în CSS. Să ne imaginăm că avem următoarele reguli de stil:

Div (culoare:roșu) div.a123 (culoare:verde) .xyz (culoare:albastru)

Să ne imaginăm și că în codul HTML avem următoarele elemente:

În conformitate cu regulile prescrise pentru selectoarele specificate, conținutul elementelor de cod HTML date ar trebui să arate astfel:

Acum să vedem de ce browserul a interpretat stilul acestor elemente de cod HTML în acest fel. Pentru primul container Div, în care nu este specificată nicio clasă, se va aplica regula CSS aplicabilă tuturor containerelor: div (culoare: roșu). În consecință, conținutul său va fi colorat în roșu. Asta trebuia arătat.

În eticheta din a doua Div avem clasa „a123”. În acest caz, se vor aplica regulile CSS corespunzătoare „div.a123” (pentru că avem doar o etichetă Div cu atributul class="a123" scris în ea). Prin urmare, conținutul celui de-al doilea recipient va fi colorat Culoarea verde.

Dar probabil ați observat că puteți aplica și la a doua Div primul CSS regula „div (culoare:roșu)”, deoarece este destinată tuturor containerelor fără excepție. Aceasta are ca rezultat o contradicție care se rezolvă în Mod CSS introducerea unui concept.

Vom vorbi despre asta în detaliu puțin mai târziu, dar deocamdată voi spune doar că prioritatea „div.a123” (pentru a doua Div din exemplul luat în considerare) va fi mai mare.

Apropo, o situație similară apare cu a treia Div din exemplul nostru. Există două opțiuni pentru aceasta: selectorul de etichete „div” și selectorul de clasă „.xyz”. Din nou, din motive care nu au fost încă explicate de mine (citiți despre asta la linkul de mai sus), prioritatea acestuia din urmă va fi mai mare, astfel încât conținutul celui de-al treilea container va fi colorat în albastru.

Sa trecem peste. În exemplul de mai sus, avem o etichetă de paragraf P, care conține class="a123". Se pare că acest element nu se încadrează în niciunul dintre cele trei selectoare pe care le-am specificat (toți trei au ratat-o).

Are doar o intersecție cu a doua opțiune, dar acest selector va fi folosit doar pentru etichetele „Div” cu clasa „a123”, și nu pentru eticheta de paragraf P. Ca urmare, culoarea textului din acest paragraf va rămâne implicită , adică negru.

În continuare, în exemplu, avem un element paragraf cu class="xyz". I se va aplica ultima regulă CSS „.xyz (culoare:albastru)”. Prin urmare, textul acestui paragraf va fi colorat în albastru. Aici, cred, totul este clar.

Selector universal și ID unic

Acum să trecem la ID-urile pe care le-am menționat deja. Când vedem ceva în codul CSS un hash in fata, atunci asta înseamnă că avem de-a face cu Id:

De obicei, acest selector este scris fără a menționa eticheta, la care se referă (prima opțiune din exemplul dat chiar mai sus), deși a doua opțiune de ortografie este și ea acceptabilă, dar este rar folosită. Acest lucru se datorează faptului că valoarea atributului Id din cod va fi unică, ceea ce înseamnă că nu pot exista două elemente cu aceleași valori Id. Acestea. nu are rost să lămurim, deși acest lucru nu este interzis.

Prin urmare, de obicei, ei scriu pur și simplu un hash (hash), urmat imediat de valoarea (numele) atributului Id. Să presupunem că avem următoarea regulă pentru Id:

#spate (culoare:roșu)

iar codul conține următorul fragment:

care, ca urmare a aplicării regulii după „#back” la aceasta, va fi interpretată de browser după cum urmează:

Container Div cu ID unic

CSS oferă, de asemenea selector universal indicat printr-un asterisc, ceea ce arată că această regulă se va aplica în general oricărui element din cod:

* (culoarea neagra)

În acest caz, textul inclus în orice etichetă va fi negru (culoarea implicită). Este clar că toți ceilalți selectori (etichete, clase și Id) vor avea o prioritate mai mare decât cea universală.

Selectorii de atribute și viitorul lor în CSS modern

Toate opțiunile descrise mai sus (etichetă, clasă, Id și universal) vor funcționa în absolut toate browserele. Dar există și alte opțiuni care nu funcționează peste tot.

Acest tip include selectoare de atribute, care sunt foarte convenabile și vă permit să extindeți semnificativ și, în același timp, să simplificați posibilitățile de influență direcționată asupra, dar care, din păcate, nu sunt pe deplin acceptate de toate browserele.

După cum probabil vă amintiți, în limbaj HTMLîn interiorul etichetelor putem folosi diverse atribute care ne permit să dăm anumite proprietăți conținutului acestor elemente în sine. Prin urmare, ar fi logic să folosim nu numai nume de etichete, ci și nume de atribute ca selectoare în limbajul CSS.

De fapt, am făcut deja acest lucru când ne-am uitat la clasa și id-ul, deoarece erau în esență atribute ale unor etichete. Doar ID-ul și clasa au un foarte mare importanțăîn layout și au fost duși la grupuri separate, fiecare cu propria sintaxă.

Cum să folosiți alți selectori care există în limbă? Atributele HTML(nu Id și nu clasă)? Destul de simplu - închide-le în paranteza patrata :

(culoare:verde)

Acum orice etichetă din codul HTML care are „titlu” scris în ea va avea o culoare de text verde.

Foarte comod, dupa parerea mea. Dar întreaga problemă cu utilizarea selectorilor de atribute este aceea nu funcționează în IE 6 și mai josîn general sau funcționează, dar numai parțial. Până când ponderea utilizatorilor care accesează Internetul folosind IE 6 este zero, aceasta mod convenabil, cel mai probabil, nu va fi utilizat pe scară largă în aspect. Dar, cu toate acestea, trebuie să știți despre existența lor și să le puteți folosi.

După cum puteți vedea din exemplu, nu contează dacă atributul specificat în selector are vreo valoare sau este gol. Dar asta nu este tot ce poți face cu ea, pentru că este doar un cântec.

Puteți indica în ele nu numai numele atributului, ci și semnificația acestuia:

(culoare:verde)

Ca urmare, regulile CSS specificate pentru un astfel de selector vor fi aplicate numai etichetei care are un „titlu” cu valoarea „Primul paragraf” (în exemplul nostru aceasta va fi a doua linie):

Exemplul descris a fost o egalitate strictă, dar puteți scrie acest selector astfel:

(culoare:verde)

Acea. această regulă CSS se va aplica numai acelor elemente de cod HTML al căror „titlu” conține cuvântul „paragraf” (în exemplul nostru aceasta va fi a doua și a treia linie):

Sintaxa selectorului de atribute interpretează «~=» ca „întregul cuvânt este conținut”. De exemplu, pentru un element cu title="Second paragraph" CSS правило «color:green» уже применяться не будет.!}

Dar o poți pune în schimb «*=» și atunci nu numai că vor fi luate în considerare cuvinte individuale specificate în selector, dar și părți de cuvinte (orice fragment de text conținut oriunde în atribut):

(culoare:verde)

În acest caz, și pentru elementul cu title="Second paragraph" сработает правило «color:green» и его текст подкрасится !} verde. Sper că acest lucru este clar. Există și un astfel de operator ca «^=» (tot ceea ce începe cu valoarea specificată în paranteze), ceea ce ajută la crearea unui selector de atribute ca acesta:

(culoarea rosie)

Probabil vă amintiți că atributul pentru specificarea . Deci, destul de des, link-urile interne de pe un site web sunt făcute relative, dar link-urile externe nu pot fi făcute altfel decât pentru a le face absolute.

Prin urmare, totul linkuri externe va începe cu „http”, iar cele interne pot fi specificate în formă relativă fără a utiliza „http”. Acea. Selectorul specificat în exemplul nostru va permite colorează toate linkurile externe de pe site(toate absolute) în roșu. Ei bine, cele relative care nu conțin „http” vor rămâne culoarea care a fost adoptată pentru ele în mod implicit. Cred că e minunat!!!

După cum puteți vedea, selectoarele de atribute ne oferă o mulțime de posibilități și faptul că nu sunt încă utilizate pe scară largă este meritul companiei foarte sărace și jignite Melkosoft și, în special, creația lor IE 6. Dar încetul cu încetul încep pentru a fi folosite în CSS și în curând, bineînțeles, își vor face drum în viață.

Da, există un alt operator «$=» - tot ce se termină cu valoarea specificată între ghilimele:

(culoare:verde)

Ca urmare, a doua și a treia rânduri din primul nostru exemplu vor fi colorate în verde, deoarece sensul de „titlu” se termină în „raf”. Acesta este modul în care selectoarele de atribute ar funcționa minunat limbaj modern CSS, dacă un anumit procent de utilizatori care folosesc browserul IE 6 nu mai exista.

De fapt, dintre toate tipurile, mai avem doar două de luat în considerare: . Dar vreau să mut acest lucru la următorul articol, unde vom vorbi și despre diferitele lor combinații.

Multă baftă! Inainte de pe curând pe paginile site-ului blogului

Puteți viziona mai multe videoclipuri accesând

S-ar putea să fiți interesat

Selectoare de pseudo-clase și pseudo-elemente în CSS (hover, first-child, first-line și altele), relații între Etichete HTML cod
Prioritățile în Css și creșterea lor datorită Important, combinarea și gruparea selectoarelor, stilurilor de utilizator și autor
Stilul listei(tip, imagine, poziție) - reguli Css pentru personalizare aspect liste în cod HTML
Fundal în CSS (culoare, poziție, imagine, repetare, atașament) - totul pentru a seta culoarea de fundal sau imagine de fundal elemente HTML
CSS - ce este, ca tabelele stiluri în cascadă conectați-vă la codul HTML folosind Style și Link
Unități de dimensiune (pixeli, Em și Ex) și reguli de moștenire în CSS

Specifică o clasă de stil care vă permite să asociați un anumit element cu design de stil. Este posibil să specificați mai multe clase într-o valoare deodată, separându-le cu un spațiu.

Sintaxă

clasa="<имя класса>"

Valori

În HTML4, numele claselor pot conține litere (A-Z, a-z), numere (0-9), cratime (-) și liniuțe de subliniere (_) și nu trebuie să înceapă cu un număr. Utilizarea literelor ruse în cursuri este inacceptabilă. HTML5 elimină aceste restricții, dar pentru compatibilitatea cu browserele mai vechi și JavaScript, se recomandă să respectați aceste reguli.

Valoare implicită

Exemplu

Lămpile fluorescente sunt folosite pentru iluminarea artificială a încăperii. Se remarcă prin eficiență luminoasă ridicată, de lungă durată durata de viata, luminozitate scăzută a suprafeței luminoase, apropiată de compoziția spectrală naturală a luminii emise, care asigură o bună redare a culorii.

Pentru a preveni iluminarea ecranului prin fluxuri de lumină, deschiderile ferestrelor sunt echipate cu perdele care difuzează lumina.

Specificație

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă ) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru a implementa standardul.
• Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
• Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
• Ciornă ( Proiect de specificație) - prima versiune a standardului.

Standardul HTML viu (Living) iese în evidență - nu aderă la numerotarea tradițională a versiunilor, deoarece este în dezvoltare constantă și este actualizat în mod regulat.

Browsere

Următoarele notații sunt utilizate în tabelul browserului.

Fiecare element HTML poate avea un atribut id. Este destinat să identifice orice etichetă specifică. Ar trebui să existe o singură etichetă cu o anumită valoare de atribut în întreaga pagină HTML id. Prezența mai multor elemente cu aceeași valoare id nu este permisă și poate duce la o eroare. Valoarea atributului id poate consta din litere din alfabetul latin, cifre, litere de subliniere și cratime. Mai mult, valoarea atributului poate începe cu Literă latină sau dintr-un caracter de subliniere (dar nu dintr-un număr sau alt caracter). În plus, valorile atributelor id caz sensibil. Atribut id numit global deoarece poate fi folosit cu orice elemente HTML.
În CSS, selectorul de id conține simbolul (#) , urmat imediat de valoarea atributului id. De exemplu, următorul selector de id se potrivește cu elementul

, valoarea atributului id care este egal cu capitolul 7:

#capitolul7 (culoarea fundalului:#FF00FF;)

După descrierea identificatorului, acesta ar trebui inclus în etichetă:

Antet de al doilea nivel cu id

Exemplu: Utilizarea unui ID

• Incearca-l tu insuti "

Antet de al doilea nivel cu id

Titlu de al doilea nivel

Titlu de al doilea nivel

Antet de al doilea nivel cu id

Titlu de al doilea nivel

Titlu de al doilea nivel

Clase

Clasele sunt folosite pentru a clasifica elementele după grupuri generale, deci spre deosebire de atribut id, mai multor elemente pot primi un nume de clasă comun. Dând elementelor același nume de clasă, puteți aplica stiluri tuturor acestor elemente simultan folosind o singură regulă de stil. Pentru a face acest lucru, ar trebui să utilizați atributul clasă. Valoarea sa ar trebui să descrie cărei clase îi aparține elementul.
O clasă este similară cu un identificator, dar în loc de simbol (#) înaintea numelui clasei este indicat un punct (.) :

După ce ați descris clasa, ar trebui să o includeți în eticheta de deschidere a elementului:

Titlu de al doilea nivel

Exemplu: aplicarea atributelor idȘi clasă

• Incearca-l tu insuti "

Antet de al doilea nivel cu id și class=test

Antet de al doilea nivel cu clasă=test

Titlu de al doilea nivel

Al doilea nivel al titlului cu clasa=test portocaliu