Textbook css - clase css
Clasele sunt selectori cheie CSS, deoarece ele oferă posibilități aproape nelimitate pentru aplicarea de stiluri la diferitele elemente HTML. Clasa Selector începe întotdeauna cu o perioadă de (.), După care se înregistrează fără un nume de clasă spațiu. În general, următoarea sintaxă:
Numele clasei - un cuvânt aleatoriu vii cu tine, dar există o limită, aceasta poate consta numai din caractere ale alfabetului latin (a-z, A-Z), numere (0-9), linii de pauză (-) și subliniere (_). Mai mult decât atât, numele clasei nu poate începe cu o cifră, sau o cratimă, urmată de o cifră. De exemplu, clasele .block-1. -block3. kartinkiBlock. _7Block_vnizu - corectă și .1 bloc. -7block - nr.
Bine, clasa, am creat stiluri pentru el înregistrate, dar cum să-l aplice la elementele? Ei bine, totul este ușor. Eticheta este un element esențial necesar să se specifice, pur și simplu atributul class = „ClassName“. în cazul în care class_name este numele clasei pe care a inventat. Și aceeași clasă pot fi utilizate în orice număr de etichete. Asta e tot.
După cum vă amintiți, CSS nu este sensibil la majuscule, dar există un „dar“. Numele clasei trebuie să corespundă întotdeauna exact la ceea ce prescrie atributul de clasă. De exemplu, dacă aveți un .menuHeader de clasă, este necesar să se scrie „menuHeader“ class = tag-ul. și nu clasa = „menuheader“. class = "MenuHeader" etc.
Ei bine, e timpul să examineze exemplul, dar nu vă alarmați în prealabil atât de multe stiluri. De fapt, dacă ești doar un pic pentru a le uite cu atenție, sunt sigur că toți înțeleg dintr-o dată.
Un exemplu de utilizare a claselor în CSS
Rezultatul în browser
Se combină clase CSS
CSS este permis claselor de asociere, în care acesta poate fi utilizat pentru un scop cu totul diferit: de a aplica mai multe clase de la un element sau elemente pentru reducerea eșantionului.
Pentru a aplica un stil la un element de mai multe clase, aceste clase au nevoie pentru a derula printr-un decalaj în atributul clasă. în care, în cazul în care mai multe clase prezintă aceeași proprietate, atunci acesta va fi utilizat, care este mai mică în stiluri tabel cod.
Utilizarea mai multor clase CSS la un singur element
Rezultatul în browser
Bold text albastru.
Text cursiv Bold.
Bold verde text.
După cum puteți vedea, în ultimul paragraf din exemplul de text verde ca .green clasă este mai mică decât .blue. Să mergem mai departe.
Uneori, este nevoie de asociere cu o altă clasă sau un alt selector de clasă (de exemplu, o etichetă), sau ambele simultan pentru a restrânge domeniul de aplicare al eșantioanelor. Pentru a face acest lucru, toate selectorii sunt specificate într-un rând fără un spațiu, în acest caz, stilurile vor fi aplicate numai acelor elemente care corespund în mod direct tuturor acestor selectoare. Sintaxa generală:
Exemplu clase în selectorii de asociere CSS
Rezultatul în browser
Notă: în general, combinarea mai multor clase de selectoare folosite în aspectul este destul de rar. dar unirea claselor cu alte selectoare - foarte des. mai ales cu selectorul tag-ul.
În acest exemplu, am folosit aceeași clasă (.Notă) pentru diferite tag-uri, precum și cu stiluri foarte diferite. De asemenea, să acorde o atenție la ultimul tag . textul este nu numai proprietățile acestor clase au fost folosite în ea, ci și pentru ei și proprietatea de ansamblu.
Această sarcină va fi mai greu mai devreme. La început l gândit să aștepte un pic, dar apoi a decis că era în clasele sale definesc. La urma urmei, e mai bine acum decât mai târziu umflaturi umple, atunci când într-adevăr preferați pentru a crea site-ul tau. Mai ales pentru că, cu toate proprietățile CSS care sunt necesare aici, s-au confruntat deja, bine, cu excepția faptului că unul s-ar putea să nu fie familiarizați. Deci