Acest articol prezintă un subiect interesant și important cunoscut sub numele de Selectează și o urmărește cu o demonstrație practică de susținere. Următoarele indicații vor fi tratate în acest articol,
- Stilizarea elementelor HTML
- Selectoare CSS
- Selector ID CSS
- Selector de clasă CSS
- Selector universal CSS
- Selectoare de grup CSS
Deci, hai să începem atunci,
Stilizarea elementelor HTML
Să înțelegem ce este CSS înainte de a ajunge la selectoarele CSS. Dacă HTML trebuie considerat un schelet, atunci CSS (Cascading Style Sheets) este ca mușchii și pielea. Creierul este JavaScript. Deci, pentru o pagină web, stilurile CSS sunt în esență aspectul și designul. De la poziționarea imaginilor și a textului la dimensiunea fontului și culoarea de fundal, CSS controlează aspectul elementelor HTML într-un browser.
Puteți înțelege mai bine CSS, dacă aveți o bună înțelegere a selectorilor CSS. Aceste selectoare vă permit să vizați elemente HTML specifice, astfel încât să le puteți aplica stilul potrivit.
Să înțelegem cum putem selecta elemente HTML,
Cum se selectează elemente?
Spuneți, doriți ca un anumit titlu să fie stilat diferit de restul conținutului dintr-o pagină web. Acum, folosind selectoarele CSS puteți viza elementul HTML respectiv pentru a-l stiliza diferit. Selectorii CSS ajută la definirea elementelor pentru care se aplică un anumit set de reguli CSS. Există diferite tipuri de selectoare CSS care vă permit să alegeți cu precizie elementele pe care doriți să le stilizați. Puteți oferi întregii pagini web un stil general și apoi puteți lucra pentru a stiliza alte elemente ale paginii.
Selectorii fac parte dintr-o regulă CSS, iar acești selectori vin chiar înainte de declararea blocurilor CSS. Pentru o mai bună înțelegere, puteți consulta imaginea de mai jos.
Continuăm cu articolul CSS Selectors
Selectoare CSS
Acest selector vă permite să selectați un element HTML după numele său.
Luați în considerare codul de mai jos:
p {text-align: centru culoare: magenta}Acest stil va fi aplicat la fiecare paragraf.
Paragraful 1
Paragraful 2
Acest cod vă va oferi următoarea ieșire:
Acest stil va fi aplicat la fiecare paragraf
Paragraful 1
Paragraful 2
În codul de mai sus, elementele HTML au fost aliniate central și au culoarea „magenta”.
Continuăm cu articolul CSS Selectors
Selector ID CSS
Selectând atributul id al unui element HTML, puteți selecta acel element specific. Deoarece id-ul este unic pentru o pagină, puteți selecta elementul potrivit folosind atributul id.
Puteți selecta elementul HTML folosind „#” urmat de ID-ul acelui element. De exemplu, „#firstname” selectează elementul în care ID-ul este „prenume”.
Luați în considerare următorul cod:
# para1 {text-align: center color: orange}Salut Lume
Acest paragraf nu va fi afectat.
Ieșirea pentru codul de mai sus este:
Salut Lume
Acest paragraf nu va fi afectat.
După cum puteți vedea în rezultatul de mai sus, prin includerea id = ”para1 ″, am reușit să schimbăm culoarea acelui element în portocaliu. Celălalt element care nu are acest lucru rămâne neafectat.
Continuăm cu articolul CSS Selectors
Selector de clasă CSS
Folosind selectorul de clase, puteți selecta elemente HTML care au un anumit atribut de clasă. Puteți defini selectorul folosind un punct (simbol punct) urmat de numele clasei. De exemplu, .intro selectează elementele în care clasa este „intro”. Un lucru de reținut este că nu puteți începe niciodată un nume de clasă cu un număr.
Luați în considerare următorul cod:
.center {text-align: centru culoare: roz}Această rubrică este roz și aliniată la centru.
Acest paragraf este roz și aliniat în centru.
Ieșirea codului de mai sus este:
Această rubrică este roz și aliniată la centru.
Acest paragraf este roz și aliniat în centru.
Puteți utiliza selectoare de clasă CSS pentru un anumit element. Dacă doriți să fie stilizat un singur element specific, atunci puteți utiliza numele elementului împreună cu selectorul de clase.
tutorial mysql workbench pentru începători
De exemplu, luați în considerare următorul cod:
p.center {text-align: centru culoare: roz}Această rubrică nu este afectată
Acest paragraf este roz și aliniat în centru.
Ieșirea codului de mai sus este:
Această rubrică nu este afectată
Acest paragraf este roz și aliniat în centru.
După cum puteți vedea în ieșire, titlul h2 nu este afectat de stil. Deoarece am specificat „p.center”, doar paragraful este afectat de stil.
Continuând cu acest articol CSS Selectors,
Selector universal CSS
Acest tip de selector poate fi considerat un caracter wildcard care selectează toate elementele din pagină. Selectează toate elementele de pe pagină și este specificat prin „*”.
De exemplu, luați în considerare codul de mai jos:
* {color: darkgreen font-size: 30px}Acesta este un test (font mai mic)
Acesta este un paragraf.
Ieșirea pentru codul de mai sus este:
Salut Lume
Acesta este un test (font mai mic)
Acesta este un paragraf.
După cum puteți vedea în ieșire, toate elementele definite folosind selectorul de grup au aceeași definiție a stilului - sunt aliniate în centru și culoarea fontului este cyan.
Acest lucru ne aduce la sfârșitul acestui articol.
Verificați-ne care vine cu instruire live condusă de instructor și experiență în viața reală a proiectului. Această instruire vă face să aveți abilități de a lucra cu tehnologii web back-end și front-end. Include cursuri de dezvoltare web, jQuery, Angular, NodeJS, ExpressJS și MongoDB.
Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii a articolului și vă vom răspunde.