CSS perus kieli

CSS kieli

CSS-säännöt koostuvat kahdesta pääosasta: valitsimesta ja yhdestä tai useammasta määritelmästä.

valitsin {määritelmä1; määritelmä2; ... määritelmäN }

Valitsin on yleensä HTML-elementti, jonka tyylejä haluat muuttaa.

Jokainen määritelmä koostuu yhdestä ominaisuudesta ja arvosta.

Ominaisuus (ominaisuus) on tyylejä, joita haluat asettaa. Jokaisella ominaisuudella on arvo. Ominaisuus ja arvo erotetaan kololla.

valitsin {ominaisuus: arvo}

Tämän rivin tehtävänä on määrittää h1-elementin tekstiväri punaiseksi ja asettaa fonttikoon 14 pikseliä.

Tässä esimerkissä h1 on valitsin, väri ja fonttikoko ovat ominaisuuksia, red ja 14px ovat arvoja.

h1 {väri:red; fonttikoko:14px;}

Seuraava kuvitus näyttää yllä olevan koodin rakenteen:

CSS kieli

Vinkki:Käytä sulkeita määritelmien ympärillä.

Arvojen eri muodot ja yksiköt

Kuten englantia sanalla red, voimme käyttää heksadesimaalista väriarvoa #ff0000:

p {väri: #ff0000;}

Voimme säästää tilaa käyttämällä CSS:n lyhennettyä muotoa:

p {väri: #f00;}

Voimme käyttää RGB-arvoja kahdella tavalla:

p {väri: rgb(255,0,0);}
p {väri: rgb(100%,0%,0%);}

Huomaa, että RGB-prosenttien tapauksessa on kirjoitettava prosenttimerkki, vaikka arvo on 0. Tämä ei kuitenkaan ole tarpeen muissa tapauksissa. Esimerkiksi, kun kohteessa on 0 pikseliä, px-yksikköä ei tarvitse kirjoittaa, koska 0 on 0 riippumatta yksiköstä.

Muista kirjoittaa lainausmerkit

Vinkki:Jos arvo koostuu useista sanoista, lisää arvoa lainausmerkeihin:

p {kirjasinkokonaisuus: "sans-serif";}

Useita määritelmiä:

Vinkki:Jos haluat määrittää useita määritelmiä, erota ne toisistaan semikololla. Seuraava esimerkki näyttää, miten määritellään keskelle sijoitettu punainen tekstiparagrafi. Viimeinen sääntö on, että semikoltoa ei tarvitse lisätä, koska semikololla on erottava merkki englanniksi, ei loppumerkki. Kuitenkin useimmat kokeneet suunnittelijat lisäävät semikolonin jokaisen määritelmän loppuun, koska tämä vähentää virheiden mahdollisuutta, kun lisäät tai poistat määritelmiä nykyisistä säännöistä. Esimerkiksi:

p {tarkista-tekstin-tasaus-keskelle; color:red;}

Sinun tulisi kuvata vain yksi ominaisuus kussakin rivissä, mikä parantaa tyylejä määrittävän luettavuutta, kuten näin:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

Välit ja isokirjain

Useimmat tyylejä sisältävät useita sääntöjä, ja useimmat säännöt sisältävät useita lausuntoja. Useiden lausuntojen ja väliteten käytön avulla tyylejä on helpompi muokata:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

Tyhjät välit eivät vaikuta CSS:n toimintaan selaimessa, samoin kuin XHTML:ään erottuna, CSS ei ole herkkä kirjainkoon suhteen. On kuitenkin poikkeus: jos työskennellään HTML-dokumentin kanssa, luokka- ja ID-nimet ovat herkkiä kirjainkooon.