ວິທີທີ່ສ້າງ CSS

ວິທີທີ່ເຂົ້າໃນ sheet style

ເມື່ອbrowserອ່ານເອກະສານsheet style, ມັນຈະຮັບມືການຮັບມືໃຫ້ HTML document. ວິທີທີ່ຈະເຂົ້າໃນ sheet style ມີສາມວິທີ:

sheet style ຕ່າງກັນ

ເມື່ອstyleຕ້ອງນຳໃຊ້ໃນຫຼາຍເວັບໄຊ, sheet style ຕ່າງກັນຈະເປັນທາງເລືອກທີ່ດີ. ໃນກໍລະນີທີ່ນຳໃຊ້ sheet style ຕ່າງກັນ, ທ່ານສາມາດປ່ຽນແບບພາບໃນຂະບວນສະບັບທັງໝົດດ້ວຍການປ່ຽນເອກະສານດຽວ. ແຕ່ລະເວັບໄຊທີ່ຕ້ອງນຳໃຊ້ tag <link> ໃນຫົວໜ້າເອກະສານ. tag <link> ຈະຢູ່ໃນຫົວໜ້າເອກະສານ (document header):

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

browser ຈະອ່ານການສະແດງ style ຈາກເອກະສານ mystyle.css ແລະຈະອອກຮູບແບບອີກຄັ້ງອີກອີກອີກ.

sheet style ຕ່າງກັນສາມາດຖ່າຍໃນບູບແບບຂັ້ນພາບ. ບັນດາເອກະສານບໍ່ຕ້ອງກວມ tag html. sheet style ຄວນຖືກບັນທຶກທີ່ຫົວໜ້າ .css. ບົດສະຫຼຸບເຫດນັ້ນຢູ່ໃນເອກະສານ sheet style:

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

ບໍ່ຕ້ອງອອກບາງຈຸດທີ່ພາຍທາງຂອງຄວາມນັບນັກວັດສະດຸ ແລະ ກັບຄວາມນັບນັກວັດສະດຸ. ຖ້າທ່ານນໍາໃຊ້ "margin-left: 20 px" ທີ່ບໍ່ມີຈຸດທີ່ພາຍທາງ "margin-left: 20px", ມັນຈະປະສົບຜົນດີເທົ່ານັ້ນໃນ IE 6 ແຕ່ບໍ່ຈະປະສົບຜົນດີໃນ Mozilla/Firefox ຫຼື Netscape.

sheet style ອິນເຕີ້

ເມື່ອໂດຍບາງການທີ່ຕ້ອງການstyleສະແດງທີ່ພິເສດ, ຄວນນຳໃຊ້ sheet style ອິນເຕີ້. ທ່ານສາມາດນຳໃຊ້ tag <style> ໃນຫົວໜ້າເອກະສານເພື່ອກໍານົດ sheet style ອິນເຕີ້, ຄືກັບນັ້ນ:

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

style inline

ຍ້ອນຈະຈັບກວມການສະແດງແລະຂອງຂອງຫຼັງກັນ, style inline ຈະສູນເສຍຫຼາຍຄວາມສຳຄັນຂອງ sheet style. ລະເວນອະນາຄົມນີ້ຫຼາຍ, ອີງຕາມຫົວຂໍ້ທີ່ຕ້ອງນຳໃຊ້ປະເພດທີ່ພຽງແຕ່ຄັດທີ່ພຽງແຕ່ບົດສະຫຼຸບດຽວກັນ.

ກໍຕ້ອງໃຊ້ຮູບແບບລະເບີດຢູ່ໃນຕາຕະລາງທີ່ກ່ຽວຂ້ອງເພື່ອນຳໃຊ້ຮູບແບບ (style) 属性. Style 属性ສາມາດກວມຂອງທຸກປະເພດ CSS. ບົດສະຫຼຸບນີ້ສະແດງວ່ານັບວິທີທີ່ຈະປ່ຽນສີຂອງວັດສະດຸສະບັບທີ່ຢູ່ຫຼັງຄະແນນຂອງຂ້າງຊ້າຍ:

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