Šis ir div ar id div-container div>
Šī ir rindkopa ar klasi paragrāfs-klase p> body> html>
Piezīme: Mēs piemērosim CSS noteikumus iepriekšminētajam piemēram.
Elementu atlasītājs
The elementu atlasītājs atlasa HTML elementus, pamatojoties uz elementa nosaukumu (vai tagu), piemēram, p, h1, div, span utt.
PIEZĪME : Iepriekš minētajā piemērā tiek izmantots šāds kods. Varat redzēt visiem piemērotos CSS noteikumus
tagus un
tagus.
CSS:
h1 { color: red; font-size: 3rem; } p { color: white; background-color: gray; } Izvade:
CSS elementu atlasītāja izvade
ID atlasītājs
The id atlasītājs izmanto id atribūts HTML elementu, lai atlasītu konkrētu elementu. An id elements ir unikāls izmantojamajā lapā id atlasītājs.
Piezīme: Iepriekš minētajā piemērā tiek izmantots šāds kods, izmantojot id atlasītāju.
CSS:
#div-container{ color: blue; background-color: gray; } Izvade:
CSS ID atlasītāju piemēra izvade
Klases atlasītājs
The klases atlasītājs atlasa HTML elementus ar noteiktu klases atribūtu.
Piezīme: Iepriekš minētajā piemērā tiek izmantots šāds kods, izmantojot klases atlasītāju. Lai izmantotu klases atlasītāju, CSS ir jāizmanto (. ), kam seko klases nosaukums. Šis noteikums tiks piemērots HTML elementam ar klases atribūtu rindkopu klase
CSS:
.paragraph-class { color:white; font-family: monospace; background-color: purple; } Izvade:
CSS klases atlasītāja piemēra izvade
Universālais selektors
The Universāls selektors (*) CSS izmanto, lai atlasītu visus elementus HTML dokumentā. Tas ietver arī citus elementus, kas atrodas zem cita elementa.
Piezīme: Iepriekš minētajā piemērā tiek izmantots šāds kods, izmantojot universālo selektoru. Šī CSS kārtula tiks piemērota katram lapas HTML elementam:
CSS:
* { color: white; background-color: black; } Izvade:
CSS universālā atlasītāja izvades piemērs
Grupas atlasītājs
The Grupas atlasītājs tiek izmantots, lai visus ar komatu atdalītos elementus veidotu vienā stilā.
Piezīme: Pieņemsim, ka vēlaties piemērot kopīgus stilus dažādiem atlasītājiem, tā vietā, lai rakstītu noteikumus atsevišķi, varat tos rakstīt grupās, kā parādīts tālāk.
CSS:
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; } Izvade:
CSS grupas atlasītāja piemēra izvade
Atribūtu atlasītājs
The atribūtu atlasītājs [atribūts] tiek izmantots, lai atlasītu elementus ar noteiktu atribūtu vai atribūta vērtību.
Piezīme: Iepriekš minētajā piemērā tiek izmantots šāds kods, izmantojot atribūtu atlasītāju. Šī CSS kārtula tiks piemērota katram lapas HTML elementam:
CSS:
[href] { background-color: lightgreen; color: black; font-family: monospace; font-size: 1rem; } Izvade:
CSS atribūtu atlases piemēra izvade
Pseidoklases atlasītājs
To izmanto, lai veidotu jebkura elementa īpaša veida stāvokli. Piemēram, to izmanto elementa stila veidošanai, kad peles kursors atrodas virs tā.
Piezīme: Mēs izmantojam vienu kolu (:) a gadījumā Pseidoklases atlasītājs .
Sintakse:
Selector:Pseudo-Class { Property: Value; } CSS:
h1:hover{ background-color: aqua; } Izvade:
CSS pseido selektora piemēra izvade
Pseidoelementu atlasītājs
To izmanto, lai veidotu jebkuru konkrētu elementa daļu. Piemēram, to izmanto jebkura elementa pirmā burta vai pirmās rindas veidošanai.
Piezīme: Mēs izmantojam dubulto kolu (::) a gadījumā Pseidoelementu atlasītājs .
Sintakse:
Selector:Pseudo-Element{ Property:Value; } CSS:
p::first-line{ background-color: goldenrod; } Izvade:
CSS pseidoelementu atlasītāja piemēra izvade