CSS-valitsinryhmitys

Valitsimen ryhmittely

Oletetaan, että haluat h2-elementin ja kappaleiden olevan harmaat. Tämä voidaan tehdä helpoiten seuraavalla lausunnolla:

h2, p {color:gray;}

Aseta h2- ja p-valitsimet säännön vasemmalle puolelle, erottamaan ne pilkulla, ja määrität siten säännön. Oikeanpuolinen tyyli (color:gray;) sovelletaan näihin valitsimiin viittaaviin elementteihin. Pilkku kertoo selaajalle, että säännössä on kaksi eri valitsinta. Ilman tätä pilkullista, säännön merkitys olisi täysin erilainen. Katso jälkeläisvalitsimet.

Voit ryhmitellä minkä määrän valitsijoita tahansa, ei ole rajoituksia.

Esimerkiksi, jos haluat näyttää monia elementtejä harmaana, voit käyttää seuraavaa sääntöä:

body, h2, p, table, th, td, pre, strong, em {väri: harmaa;}

Vinkki:Ryhmittämisen avulla luoja voi "pakata" tietyn tyyppisiä tyylejä yhteen, mikä mahdollistaa yksinkertaisemman tyyleiluettelon.

Seuraavat kaksi sääntöryhmää tuottavat saman tuloksen, mutta on selvää, mikä on helpompi kirjoittaa:

/* ei ryhmittämistä */
h1 {väri: sininen;}
h2 {väri: sininen;}
h3 {väri: sininen;}
h4 {väri: sininen;}
h5 {väri: sininen;}
h6 {väri: sininen;}
/* ryhmittäminen */
h1, h2, h3, h4, h5, h6 {väri: sininen;}

Kokeile itse

Ryhmitys tarjoaa mielenkiintoisia valintoja. Esimerkiksi, seuraavassa kaikissa sääntöryhmissä on samanarvoisia, ja jokainen ryhmä näyttää eri tavoin valitsijoita ja lausekkeiden ryhmittämistä:

/* ryhmä 1 */
h1 {väri: hopea; tausta: valkoinen;}
h2 {väri: hopea; tausta: harmaa;}
h3 {väri: valkoinen; tausta: harmaa;}
h4 {väri: hopea; tausta: valkoinen;}
b {väri: harmaa; tausta: valkoinen;}
/* ryhmä 2 */
h1, h2, h4 {väri: hopea;}
h2, h3 {tausta: harmaa;}
h1, h4, b {tausta: valkoinen;}
h3 {väri: valkoinen;}
b {väri: harmaa;}
/* ryhmä 3 */
h1, h4 {väri: hopea; tausta: valkoinen;}
h2 {väri: hopea;}
h3 {väri: valkoinen;}
h2, h3 {tausta: harmaa;}
b {väri: harmaa; tausta: valkoinen;}

Kokeile itse:

Huomaa, että ryhmässä 3 käytettiin 'lausunnon ryhmittelyä'. Kerromme sinulle lisää 'lausunnon ryhmittelystä' myöhemmin.

Yleinen valitsin

CSS2 tuotti uuden yksinkertaisen valitsimen - yleisen valitsimen (universal selector), joka näkyy tähdellä (*). Tämä valitsin voi matchata minkä tahansa elementin, aivan kuten jokainen tähti.

Esimerkiksi seuraava sääntö tekee jokaisesta elementistä punaisen:

* {color:red;}

Kokeile itse

Tämä lausunto on yhtä hyvä kuin luettelo kaikista elementeistä dokumentissa olevista ryhmitellyistä valitsimista. Käyttämällä yleistä valitsinta ( vain yksi tähti) voit määrittää color-ominaisuuden arvoksi red kaikissa elementeissä dokumentissa yhdellä painalluksella ( vain yksi tähti).

Lausunnon ryhmittely

Voimme ryhmitellä sekä valitsimet että lausunnot.

Oletetaan, että haluat, että kaikki h1-elementit näyttävät punaisella taustalla ja käyttävät 28 px korkeaa Verdana-fonttia sinisellä tekstillä. Voit kirjoittaa seuraavan tyylimäärityksen:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Mutta tämän tekniikan tehokkuus ei ole korkea. Erityisesti kun luodaan lista useista tyyleistä elementille, se voi olla vaikeaa. Päinvastoin, voimme ryhmitellä lausunnot yhteen:

h1 {font: 28px Verdana; color: white; background: black;}

Tämä on täysin sama vaikutus kuin edellisissä 3 rivissä oleva tyylihavaus.

Huomaa, että jokaisen lausunnon lopussa käytettävä semikolmo on erittäin tärkeä. Selain jättää huomiotta tyylihavena olevat välilyönnit. Kun semikolmo on lisätty, voit käyttää seuraavaa muotoa tyylien luomiseen ilman pelkoa:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Kokeile itse

No niin, tällaisen kirjoitusmuodon luettavuus onko parempi.

Kuitenkin, jos toinen semikolmella jätetään huomiotta, käyttöagentti tulkii tyylihavena seuraavasti:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Kokeile itse

Koska background ei ole kelvollinen arvo colorille ja koska colorille voidaan määrittää vain yksi avainsana, käyttöagentti jättää täysin huomiotta tämän color-deklaroinnin (mukaan lukien background: black). Tämä tarkoittaa, että h1-otsikko näkyy vain sinisellä, ilman punaista taustaa, mutta on todennäköisempää, että h1 ei näy lainkaan sinisellä. Päinvastoin, nämä otsikot näkyvät vain oletusvärillä (yleensä mustalla) eivätkä ole mitään taustaväriä. font: 28px Verdana -deklarointi toimii edelleen normaalissa järjestyksessä, koska se päätyy oikein semikolmella.

Kuten valitsinryhmityksessä, lausetyypityökalu on myös mukava tapa lyhentää tyylejä, tehdä niistä selkeämpiä ja helpommin ylläpidettäviä.

Vinkki:On hyvä tapa lisätä pistoaineella säännön viimeiseen lauseseen. Kun lisätään sääntöön uusi lause, ei tarvitse huolestua siitä, että unohtaa lisätä pistoainetta.

Valitsinryhmityksen ja lausetyypityökalun yhdistäminen

Voimme käyttää valitsinryhmitystä ja lausetyypityökalua yhdessä yhdessä säännössä, mikä mahdollistaa suhteellisen monimutkaisten tyylejä määrittämisen vähäisillä lauseilla.

Tämä sääntö määrittää kaikkien otsikkojen tyylit monimutkaiseksi:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Kokeile itse

Tämä sääntö määrittää kaikkien otsikkojen tyylit valkoisella taustalla olevaksi harmaaksi tekstinä, sisäetäisyydeksi 10 pikseliä, ja 1 pikselin täytetyksi reunaksi, tekstin kirjasin Verdana.