CSS基础语法

CSS语法

CSS-regler består av två huvudsakliga delar: selektorn, samt en eller flera deklarationer.

selector {declaration1; declaration2; ... declarationN }

Selektorn är vanligtvis det HTML-element du vill ändra stil på.

Varje deklaration består av en egenskap och ett värde.

Egenskap (property) är den stil egenskap (style attribute) du vill ställa in. Varje egenskap har ett värde. Egenskap och värde skiljs med ett kolon.

selector {property: value}

Denna rad av kod definierar textfärgen för h1-elementet som röd och ställer in fontstorleken till 14 pixlar.

I detta exempel är h1 en selektor, color och font-size är egenskaper, red och 14px är värden.

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

Följande schema visar strukturen på ovanstående kod:

CSS语法

Tips:Använd klamrar för att omge deklarationer.

Olika skrivningar och enheter av värden

Förutom engelska ordet red kan vi använda hexadecimala färgvärden #ff0000:

p { color: #ff0000; }

För att spara byte kan vi använda CSS-kortform:

p { color: #f00; }

Vi kan använda RGB-värden på två sätt:

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

Observera att när du använder RGB-procentandelar, måste du skriva procenttecknet även om värdet är 0. Men i andra fall behöver du inte göra detta. Till exempel när storleken är 0 pixlar, behöver du inte använda px-enheter efter 0, eftersom 0 är 0, oavsett enhet.

Kom ihåg att skriva citationstecken

Tips:Om värdet är flera ord, måste värdet inkludera citationstecken:

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

Fler deklarationer:

Tips:Om du vill definiera fler än en deklaration, måste varje deklaration separeras med ett semikolon. Följande exempel visar hur du definierar en centrerad rubrik med röd text. Det sista regeln är att du inte behöver lägga till ett semikolon, eftersom semikolonet är en separator, inte ett sluttecken. Ändå väljer de flesta erfarna designers att lägga till ett semikolon vid slutet av varje deklaration, vilket minskar risken för fel när du lägger till eller tar bort deklarationer från befintliga regler. Som detta:

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

你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：

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

空格和大小写

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：

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

是否包含空格不会影响CSS在浏览器的工作效果，同样，与XHTML不同，CSS对大小写不敏感。不过存在一个例外：如果涉及到与HTML文档一起工作的话，class和id名称对大小写是敏感的。