Paano Gumawa ng CSS

Paano Magkakabit ng Stylesheet

Kapag binabasa ng browser ang isang stylesheet, ito ay magiging batayan para sa pormat ng HTML dokumento. Ang tatlong paraan para sa pagkakabit ng stylesheet ay:

External Stylesheet

Kapag ang style ay kailangan gamitin sa maraming pahina, ang external stylesheet ay magiging magandang pinili. Kapag gumagamit ka ng external stylesheet, maaari mong baguhin ang hitsura ng buong site sa pamamagitan ng pagbabago ng isang file. Bawat pahina ay gumagamit ng <link> tag upang ma-link sa stylesheet.<link> tag sa ulo ng (dokumentong) header:

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

Ang browser ay mababasa ang mga deklarasyon ng style mula sa file na mystyle.css at magkakaroon ng pormat ng dokumento nito.

Ang external stylesheet ay maaaring maisulat sa anumang text editor. Ang file ay hindi dapat maglaman ng anumang html tag. Ang stylesheet ay dapat isave sa .css extension. Isang halimbawa ng file na stylesheet ay:

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

Huwag maglagay ng puwang sa pagitan ng halaga at ang unit. Kung gamiting mo ang "margin-left: 20 px" sa halip ng "margin-left: 20px", ito lamang ay magiging epektibo sa IE 6, ngunit hindi gumagana sa Mozilla/Firefox o Netscape.

Internal Stylesheet

Kapag ang isang dokumento ay nangangailangan ng espesyal na style, dapat gamitin ang internal stylesheet. Maaari mong gamitin ang <style> tag sa ulo ng dokumento upang tanggapin ang internal stylesheet, tulad ng ganito:

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

Inline Style

Dahil sa paghahalo ng paglalarawan at nilalaman, ang inline style ay mawawala ang maraming kaalamang ng stylesheet. Mag-ingat gamitin ito na paraan, halimbawa kapag ang style ay kailangan lamang magamit sa isang elemento lamang.

Para gamitin ang inline style, dapat mo magamit ang style attribute sa naaangkop na tag. Ang style attribute ay maaaring maglaman ng anumang CSS attribute. Ang halimbawa ay ipinapakita kung paano baguhin ang kulay ng paragrafo at ang left margin:

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）会被内部样式表中的规则取代。