Sākums CSS
CSS balstās uz modeļu saskaņošanas noteikumiem, lai noteiktu, kurš stils attiecas uz kādu dokumenta elementu. Šos modeļus sauc par selektoriem, un tie ir no atzīmju nosaukumiem (piemēram, p, lai atbilstu rindkopas tagiem), uz ļoti sarežģītiem modeļiem, kas atbilst ļoti specifiskām dokumenta daļām (piemēram, p # myid> b.highlight atbilst jebkurai b tagam ar izcilas klases, kas ir rindkopas bērns ar id myid).
CSS selektors ir CSS stila zvana daļa, kas identificē, kāda web lapas daļa ir jāformulē. Atlasītājs satur vienu vai vairākas īpašības, kas nosaka, kā tiks atlasīts atlasītais HTML stils.
CSS atlasītāji
Ir vairāki dažādi selektoru veidi:
- tipa selektori, kas atbilst konkrētam elementam
- klases selektoru saskaņošanas elementi ar konkrētu klasi
- ID atlasītāji - elementa saskaņošana ar konkrētu ID
- pēcteča selektori -atbilstošie elementi, kas ir konkrēta elementa pēcnācēji
- bērnu selektoru saskaņošanas elementi, kas ir konkrēta elementa bērns
- Universālie selektori - atbilst jebkuram elementam
- blakus esošie brāļu selektori-atbilstības elementi, kas tieši pirms tam ir īpašs elements
- atribūtu selektoru atbilstības elementi ar īpašu atribūtu vai atribūtu vērtību
- pseidoklases selektoru saskaņošanas elementi ar īpašu pseidoklasi
- pseidoelementu selektoru saskaņošanas elementi ar īpašām pseidodelementa īpašībām
Formatēt CSS stilus un CSS atlasītājus
CSS stila formāts izskatās šādi:
selektors {stila īpašums: stils; }
Atdaliet vairākus selektorus, kuru stils ir ar komatu. To sauc par selektoru grupēšanu. Piemēram:
selektors1 , selektors2 {stila īpašums: stils; }
Grupēšanas selektori ir stenogrāfijas mehānisms, lai jūsu CSS stili būtu kompakti.
Iepriekš minētajai grupai būtu tāda pati ietekme kā:
selektors1 {stila īpašums: stils; }
selektors2 {stila īpašums: stils; }
Vienmēr pārbaudiet savus CSS atlasītājus
Ne visas pārlūkprogrammas atbalsta visus CSS atlasītājus. Tāpēc pārliecinieties, ka jūsu selektori tiek pārbaudīti tik daudzās pārlūkprogrammās, cik vien iespējams. Bet, ja jūs izmantojat CSS 1 vai CSS2 selektorus, jums vajadzētu būt labi.