CSS Basic Syntax

CSS 语法

Ang katuruan ng CSS ay binubuo ng dalawang pangunahing bahagi: ang selector, at isang o ilang deklarasyon.

selector {deklarasyon1; deklarasyon2; ... deklarasyonN }

Ang selector ay karaniwang ang HTML elemento na gusto mong baguhin ang estilo.

Ang bawat deklarasyon ay binubuo ng isang pagkakataon at isang halaga.

Ang pagkakataon (property) ay ang estilo na gusto mong itakda ng pagkakasanggunian (style attribute). Mayroon isang halaga para sa bawat pagkakataon. Ang pagkakataon at halaga ay mahahati ng katalaang tuldok.

selector {pagkakataon: halaga}

Ang ginagamit ng ito na linya ng kodigo ay upang magbigay ng kulay ng teksto ng h1 elemento na pula, at upang itakda ang sukat ng font na 14 paksihan.

Sa halimbawa na ito, ang h1 ay ang selector, ang color at font-size ay ang mga attribute, ang red at 14px ay ang halaga.

h1 {color:red; font-size:14px;}

Ang ilang ilustrasyon sa ibaba ay nagpapakita ng estraktura ng ito na nasa itaas na kodigo:

CSS 语法

Mga pahintulot:Gumamit ng mga butas ng balon upang palakain ang deklarasyon.

Diferente na pormasyon ng halaga at unit

Hindi lamang ang salitang Ingles na red, maaari rin naming gamitin ang labingwalong himpilang kulay na #ff0000:

p { color: #ff0000; }

Para sa pagtutuos ng bybento, maaari naming gamitin ang maikling pormat ng CSS:

p { color: #f00; }

Maaari rin naming gamitin ang dalawang paraan upang gamitin ang RGB halaga:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

Pansin na kapag gumagamit ng RGB porsiyento, kahit na ang halaga ay 0, dapat magbigay ng porsiyento simbolo. Ngunit sa ibang pangsitwasyon, hindi na ito kinakailangan. Halimbawa, kapag ang sukat ay 0 paksihan, hindi kailangang gamitin ang paksihan simbolo ng 'px', dahil 0 ay 0, kahit anong simbolo ng paksihan.

Tandaan na magbigay ng pagkilala

Mga pahintulot:Kung ang halaga ay ilang mga salita, dapat magbigay ng pagkilala sa halaga:

p {font-family: "sans serif";}

Maraming deklarasyon:

Mga pahintulot:Kung nais na magbigay ng higit sa isang deklarasyon, dapat gamitin ang puno ng tuldok upang maghiwalay ang bawat deklarasyon. Ang mga halimbawa sa ibaba ay nagpapakita kung paano magbigay ng isang paralya na may pahalagang puro pababangkas. Ang huling patakaran ay hindi kailangang magkaroon ng puno ng tuldok, dahil ang puno ng tuldok ay isang simbolo ng paghiwalay, hindi ng pagtatapos. Gayunpaman, ang karamihan sa mga may karanasan na designer ay nagpapaputok ng puno ng tuldok sa kahabaan ng bawat deklarasyon, ang kalakay nito ay maaaring mapigilan ang posibilidad ng pagkakamali kapag kinakailangang dagdagan o magbawas ng deklarasyon. Gaya ng ganito:

p {text-align:center}; color:red;}

Dapat mong ilarawan ang isang attribute lamang sa bawat linya, upang mapalakas ang pagbabasa ng paglalarawan ng estilo, tulad ng ito:

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

Espasyo at capitalization

Ang karamihan ng stylesheet ay may higit sa isang patakaran, at ang karamihan ng patakaran ay may higit sa isang pahayag. Ang paggamit ng maraming pahayag at espasyo ay ginagawang mas madaling i-edit ang stylesheet:

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

Ang pagkakabit ng espasyo ay hindi makakaapekto sa gumagana ng CSS sa browser, katulad din, iba sa XHTML, ang CSS ay hindi masasabi ang kasalanan ng pagbigkas. Subalit may isang katangian: kapag gumagawa ng pagkakaisa sa HTML dokumento, ang pangalan ng class at id ay masasabi ang kasalanan ng pagbigkas.