Acest capitol este un fel de continuare a primului capitol al metodelor de punere în aplicare CSS în documentul HTML. Am amânat acest capitol „pentru mai târziu“, încălcând astfel secvența standard de învățare CSS, cu singurul scop de faptul că înainte de timp, nu bloca capul cu informații, care la început a fost de neînțeles pentru tine.

Acum, că sunteți deja familiarizați cu unele dintre proprietățile CSS, pentru a înțelege principiile de construcție și de punere în aplicare CSS în HTML, a venit timpul și necesitatea de a vorbi despre clasele CSS și ID-uri, ca de formare suplimentară, deși este posibil, dar nu va dezvălui pe deplin toate posibilitățile CSS .

Să începem cu clasa ..

Pentru a atribui un element sau un grup de elemente identice de stil personal, diferit de principal, deja menționat în descrierea stilului documentului? Nu știu ați pus această întrebare sau nu, dar mai devreme sau mai târziu, este necesar să se găsească răspunsul.

Deci să presupunem că în fișierul CSS pentru elementul

am aplicat următorul stil:

Și totul pare să fie bine. toate punctele sinenkie și dimensiunea ei 14px, dar trebuie să ne asigurăm că unele dintre aceste secțiuni au fost roz! Și ce ??

Vino la clasele de ajutor.

Ei bine, hai să încercăm? Iată cum:

Permiteți-mi să explic p - este un element de HTML (selector), în acest caz, secțiunea noastră, .rose - este un nume de clasă individuală pe care ne-am inventat, aceasta nu poate fi în mod necesar orice -Pink a crescut, punctul dintre numele de selectare și de clasă este un tribut de respect pentru sintaxa acceptată în CSS - acum, browser-ul va înțelege că elementul p afișat în clasa a crescut.

Ei bine, am atribuit numele acum trebuie să specificați un document HTML tag-uri (în acest caz, etichetele

), Care necesită un stil individual. Acest lucru se face cu ajutorul atributului de clasă.

Această secțiune folosește numele clasei de trandafir și astfel distins de grosul

În acest exemplu, clasa „a crescut“ poate fi atribuită numai la punctul - membru p. Pentru această descriere stilistică ar putea extinde la toate elementele din fișierul CSS (sau între tag-uri în antetul documentului) elementul nu este menționat în mod explicit, iar sintaxa ia forma următoare:

Acum intră orice clasă de elemente = „a crescut“ stil ar lua clasa.

Să acorde o atenție la faptul că descrierea stilului lipsă derivat într-o clasă separată, elementele de bază derivă din descrierea stilistică, sau preluate din proprietățile unui „default“ element.

De exemplu, titlul

Era albastru, și a devenit roz, dar și-a păstrat sale dimensiunea de 22 pixeli, la fel ca în clasa noastră a crescut nu vorbesc despre dimensiunea fontului întrebării. numai noi „convenit“ cu browser-ul pe care elementele grupului va fi roz a crescut.

ei au aceiași identificatori id selectorii sunt foarte asemănătoare cu clasele, cu singura diferență că identificatorul poate avea un singur nume unic în întregul document. ID-urile sunt de obicei utilizate în cazul în care devine necesar pentru a controla stilul unui element dinamic folosind un script, referindu-se la numele său individual.

În numele de fișier CSS este specificat cu diez la început.

Așa cum, de exemplu:

Un element dorit este adăugat la id atribut = „bloc“ de ex

Element de identificare a secțiunii

Deci, ce este diferența dintre clasă și id?

Eu arăt un exemplu:

Italic, în acest exemplu, atribuit un mâner script care poate dinamic blocuri

unic numit „bloc“ și „block1“ (ascunde și arată-l făcând clic pe link-ul), și, deși este credeți că un pic, este clar din scris cele de mai sus, dar scopul acestui exemplu este de a arăta modul în care script-ul poate accesa unitatea prin intermediul atributului id. Dar, cu ajutorul claselor, nu am fi realizat un astfel de rezultat.

Ei bine, cred că, a explicat ceva de genul ..

Când construirea CSS fi logic, urmați „semnificația“ de elemente și ordinea lor, precum și acestea sunt imbricate în codul HTML.

Ce face?

Ei bine, în primul rând, doar pentru citire convenabilă și „navigație“ pe caietul de sarcini CSS. Când aveți nevoie pentru a găsi ceea ce ar putea fi elementul pe care deja inițial va reprezenta în cazul în care este vorba de începutul, la mijlocul sau la sfârșitul ..

Ar vedea (a se vedea prima) utilizator la „greșit“ clădire CSS? font Nisa, împrăștiate la întâmplare în fereastra browser-ului? Sau construi normal, dar fără un font frumos? - Aceasta este pentru tine de a decide!

anterior ◈ următoarea