Johdanto CSS-valitsimien tyyppeihin
CSS-valitsimien tyyppejä käytetään valitsemaan sisältö, jonka haluamme tyyliä. Se auttaa elementtien valinnassa luokan, tunnuksen, tyypin jne. Perusteella. CSS-valitsin on osa CSS-säännöstöä.
CSS-valitsimien tyypit
Meille on saatavana viisi CSS-valintalaitetta. Tarkastelemme seuraavia tärkeitä CSS-valitsijoita:
- CSS Universal Selector.
- CSS-elementin valitsin.
- CSS-tunnuksen valitsin.
- CSS-luokan valitsin.
- CSS-määritevalitsin.
1. CSS Universal Selector
HTML-sivulla sisältö riippuu HTML-tunnisteista. Tunnistepari määrittelee tietyn verkkosivuelementin. CSS-yleinen valitsin valitsee kaikki verkkosivun elementit.
Esimerkki:
* (
color: blue;
font-size: 21px;
)
Nämä kaksi koodiriviä, joita ympäröivät tukit, vaikuttavat kaikkiin HTML-sivun elementteihin. Julistamme universaalin valitsimen tähdellä avatun kihara-aukon alussa. Universal Selektoria voidaan käyttää yhdessä muiden valitsimien kanssa.
2. CSS-elementin valitsin
CSS-elementin valitsin tunnetaan myös tyypin valitsimena. Elementin valitsija CSS: ssä yrittää sovittaa HTML-elementit, joilla on sama nimi. Siksi valitsin
- vastaa kaikkia
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatsheet CSS3
- CSS-haastattelukysymykset
- SASS vs. SCSS
- SASS-haastattelukysymykset
- Esimerkkejä HTML-tilatusta luettelosta
- elementit eli kaikki kyseisen HTML-sivun järjestämättömät luettelot.
Katsokaamme esimerkkiä elementin valitsimelle.
ul (
border: solid 1px #ccc;
)
Ymmärtääksesi tätä paremmin katsomme esimerkkiä HTML-koodista soveltaaksesi yllä kirjoittamaamme CSS-koodia.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Esittelyteksti
Tässä esimerkissä löydämme pääasiassa kolme elementtiä, nimittäin
- elementti, tunniste ja toinen
- elementti. Koska CSS-koodimme koskee
- nimen mukaan, muutokset rajalla tehdään vain meidän
- tunnisteita, ei tunnisteille. Yleensä nämä muutokset eivät koske
- samoin kuin tunnisteita, mutta joissakin tilanteissa tyylit saattavat koskea sisäisiä elementtejä.
3. CSS-tunnuksen valitsin
CSS ID -valitsin auttaa kehittäjää sovittamaan kehittäjän luoman tunnuksen tyylisisältöön. ID-valitsinta käytetään hash (#) -merkin avulla ennen kehittäjän ilmoittamaa ID-nimeä. ID-valitsin vastaa jokaista HTML-elementtiä, jolla on ID-attribuutti, jolla on sama arvo kuin valitsimella, ilman hash-merkkiä.
Tässä on esimerkki:
#box (
width: 90px;
margin: 10px;
)
Tätä CSS-koodia voidaan käyttää vastaamaan elementtiä, jolla on tunnus 'laatikko', kuten seuraavassa virkkeessä.
Tässä tunniste on vain esimerkki. Voimme kirjoittaa ID-määritteen mille tahansa HTML-tunnisteelle. ID-valitsin vastaa elementin sisällä olevaa ID-ominaisuutta ja etsii sen muotoilua. Esimerkissämme muotoilu on voimassa niin kauan kuin mikä tahansa elementti sisältää tunnusmääritteen 'laatikko'.
Käytetyn tunnuksen arvon oletetaan olevan ainutlaatuinen. Jos samaa tunnusta käytetään kahdelle tai useammalle elementille, koodi on teknisesti virheellinen, mutta elementin muotoilu on edelleen voimassa, joten samaa tunnusta ei yleensä tarvita.
Joudut käyttämään erilaista tunnusta joka kerta jokaiselle HTML-sivulle, on melko jäykkä. Jäykkyysongelmien lisäksi CSS: n ID-valitsimet kohtaavat myös spesifisyyttä.
4. CSS-luokan valitsin
CSS-luokan valitsin on yksi hyödyllisimmistä valitsimista kaikista valitsimista. Se ilmoitetaan käyttämällä pistettä, jota seuraa luokan nimi. Tämän luokan nimen määrittää kooderi, kuten tunnusvalitsimella. Luokan valitsin etsii jokaista elementtiä, jolla on ominaisuusarvo, jolla on sama nimi kuin luokan nimellä, ilman pistettä.
Esimerkki:
.square (
margin: 20px;
width: 20px;
)
Tätä CSS-koodia voidaan käyttää vastaamaan elementtiä, jolla on luokan neliö, kuten seuraavassa virkkeessä.
Tämä tyyli koskee myös kaikkia muita HTML-elementtejä, joilla on luokan ominaisuusarvo 'neliö'. Elementti, jolla on sama luokan ominaisuusarvo, auttaa meitä käyttämään tyylejä uudelleen ja välttää tarpeetonta toistoa. Lisäksi luokan valitsin on hyödyllinen, koska se antaa meille mahdollisuuden lisätä useita luokkia tiettyyn elementtiin. Voimme lisätä useamman kuin yhden luokan attribuuttiin erottamalla jokaisen luokan välilyönnillä.
Esimerkki:
Tässä neliö, lihavoitu ja muoto ovat kolme erityyppistä luokkaa.
5. CSS-määritevalitsin
CSS Attribute -valitsimen tyylit sisältävät attribuutin ja hakasulkeissa mainitun määritteen arvon mukaan. Mitään välilyöntejä ei saa olla aukon aukon edessä.
input(type="text") (
background-color: #fff;
width: 100px;
)
Tämä CSS-koodi vastaa seuraavaa HTML-elementtiä.
Samoin, jos määritteen 'tyyppi' arvo muuttuu, Attribuutin valitsin ei vastaa sitä. Esimerkiksi valitsin ei vastaa attribuuttia, jos tyypin arvo muuttuu tekstistä arvoksi 'lähetä'. Jos attribuutin valitsijassa ilmoitetaan vain attribuutti eikä määritteen arvoa, niin se vastaa kaikkia HTML-elementtejä, joissa on attribuutti 'type', riippumatta siitä, onko arvo 'teksti' vai 'lähetä'.
Esimerkki:
input(type) (
background-color: #fff;
width: 100px;
)
Voimme käyttää myös ominaisuusvalitsimia, joissa arvoa ei määritetä hakasulkeiden ulkopuolella. Tämä auttaa meitä kohdistamaan vain määritteen, elementistä riippumatta. Esimerkissämme se kohdistaa määrän 'type' perusteella riippumatta elementistä 'input'. CSS-valitsimet auttavat meitä yksinkertaistamaan koodiamme ja auttavat meitä käyttämään ja käyttämään samaa CSS-koodia useille HTML-elementeille. Ne auttavat meitä muotoilemaan verkkosivumme tiettyjä segmenttejä ja osia. Ne tarjoavat meille mahdollisuuden muotoilla samanlaisia elementtejä yhdenmukaisesti verkkosivuillamme. CSS-valitsimet ovat siis tärkeä osa CSS: n oppimiskäyrää.
Suositellut artikkelit
Tämä on opas CSS-valitsimien tyyppeihin. Tässä olemme keskustelleet CSS-valitsimien erityypeistä esimerkillä. Voit myös käydä läpi muiden ehdotettujen artikkeleidemme saadaksesi lisätietoja -