Jinsi ya kumaliza CSS

Jinsi ya kuingia mawakala ya kifaa

Kama mfanya wa kifaa yana kusoma mawakala ya kifaa, hii inatumika kumaliza muundo wa hatua ya HTML. Jinsi ya kuingia mawakala ya kifaa ina uhusiano tatu:

Mawakala ya kifaa ya nje

Kama mawakala yanahitajika kwa walauzi wengi wa hatua, mawakala ya kifaa ya nje ni chochote. Kama umeenda kwa mawakala ya kifaa ya nje, unaweza kumaliza muundo wa eneo kote kwa kumwambia faili moja. Wengi wa walauzi wanaongea kwa tabia ya <link> kwenye kichwa cha hatua:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Mfanya wa kifaa hupata ujumbe kutoka faili mystyle.css kwa kumtumia mambo ya mawakala ya kifaa kwa kumtumia hii.

Mawakala ya kifaa ya nje inaweza kusoma kwenye mashairi ya kifaa ya nje. Faili haikufaa kuwa na tabia ya html. Mawakala ya kifaa inafaa kusafishwa kwa .css. Hii ni mufano wa faili ya mawakala ya kifaa:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Hatarisha kuwa nje ya thamani na kina. Kama umeenda kwa "margin-left: 20 px" ikizingatia "margin-left: 20px", hii inafaa katika IE 6 pekee, lakini inasababisha kumtumika kwa Mozilla/Firefox au Netscape.

Mawakala ya kifaa ya ndani

Kama hatua kwa mawakala moja inahitajika mawakala ya kizuri, inafaa kutumia mawakala ya kifaa ya ndani. Unaweza kutumia tabia ya <style> kwenye kichwa cha hatua, kama hii:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Mawazo ya kifaa

Kwa sababu inatengeneza uenezi wa muundo na maudhui, mawazo ya kifaa inaumia namna ya kufaa sana ya mawakala. Tukikubali kwa hili, kwa mfano, kama mawazo yanahitajika kwa kifaa kimoja tu.

Kuwa tumekuenda kwa mawazo ya kifaa, inafaa kuongea kwa kifaa kwa tabia ya mawazo (style). Tabia ya mawazo inaweza kuwa na kila kiwango cha CSS. Msahio huu inonyesha jinsi kumaliza rangia ya uandikaji na muda wa kimaumizi:

style="color: sienna; margin-left: 20px">
This is a paragraph

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

而内部样式表拥有针对 h3 选择器的两个属性：

h3 {
  text-align: right; 
  font-size: 20pt;
  }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color: red; 
text-align: right; 
font-size: 20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。