Aici avem stiluri scrise pentru toate elementele p (paragrafelor). Să le analizăm în detaliu:
- fundal - stabilește culoarea de fundal. Culoarea poate fi specificată prin nume, cod.
- lățimea este lățimea blocului. Aici este dat în pixeli. Rețineți că inscripția 250px este creată împreună. Dacă unitățile de măsură scriu separat de număr - atunci aceasta va provoca o eroare CSS
- înălțimea este înălțimea elementului.
Destul de simplu? Da! Stilul este specificat în formatul de proprietate: valoare. Sfârșitul liniei este marcat cu punct și virgulă.
Se pune întrebarea, dar dacă vrem să creăm un element al unui paragraf care va diferi în design față de alte paragrafe? Pentru a face acest lucru, trebuie să dați elementului un nume. Există două modalități posibile:
- Atribuiți un nume unic elementului, care nu va fi repetat în pagină și va caracteriza fără echivoc acest element. Acest nume se numește un identificator. Cum setează un ID:
Cum se configurează un aspect pentru un element cu id și clasă? Să examinăm un exemplu:
După cum puteți vedea, pentru a vă referi la elementul care are un id, puneți semnul # în fața numelui identificatorului în CSS. Pentru a atribui stiluri clasei elementului, puneți o perioadă înaintea numelui clasei. Observați că #one și .two sunt scrise împreună.
Cum se scriu selectori
- h2 - stilurile descrise mai jos se aplică tuturor antetelor de nivel secundar
- p - stilurile sunt aplicate tuturor paragrafelor
- .se aplică un singur stil pentru toate articolele care au clasa unu
- #four - stilul se aplică pentru un element cu id = patru.
- p.one - stil va aplica pentru paragrafe care au clasa unu
- h2 # five - stilul se va aplica numai antetului celui de-al doilea nivel cu id egal cu cinci
Puteți vedea exemple de procesare a textului utilizând CSS în următoarea lecție.
CSS - un instrument puternic pentru descrierea regulilor de design, vă permite nu numai să specificați un design static, ci și să animați elementele html ale paginii. Un exemplu de animație poate fi găsit aici.
Mai multe articole:
lecții front-end și back-end
Articole similare
Trimiteți-le prietenilor: