ຕາຕະລາງຫຼັກສານ

ຫຼັກສານສຳນວນອັງສານ CSS

• ປື້ມການສຶກສາ CSS
• ການນຳໄຊ CSS
• ການຫຼັກສູດພື້ນຖານ CSS
• ການຫຼັກສູດພື້ນຖານ CSS
• ການຫຼັກສູດການເລືອກຄູ່ມືຫຼັກສູດ
• ການເລືອກຄູ່ມື id
• ການເລືອກຄູ່ມືຄວາມ
• ການສ້າງ CSS
• ການສ້າງບໍ່ດຳເນີນງານ
• ການສ້າງຄຳຂຽນ
• ການສ້າງພາສານ
• ການສ້າງບັນຊີ

ຫົວເຫຼັກກະຕຸບວົງອອກ CSS

• ການສ້າງຫຼັກສູດວິນເທີ່
• ການສ້າງພາບພາຍໃນ
• ການສ້າງບາບ
• ການສ້າງຂອບຂອງ
• ການສ້າງການຄວບຄຸມຂອງ

ການຕິດຕັ້ງ CSS

• ການສ້າງຫຼັກສູດການຕິດຕັ້ງ
• ການຕິດຕັ້ງທີ່ຕິດຕັ້ງ
• ການຕິດຕັ້ງທີ່ຕິດຕັ້ງ
• ການຕິດຕັ້ງທີ່ປິນ

ການເລືອກຫຼັກສານ CSS

• ການເລືອກຄູ່ມືຫຼັກສູດ
• ການຮວບຮວມຄູ່ມື
• ການປັບບັນທຶກຄູ່ມືຄວາມ
• ການປັບບັນທຶກ ID
• ການປັບບັນທຶກຄູ່ມືບັນດາລັກສະນະ
• ການເລືອກຄູ່ມືຜູ້ທີ່ມີຄວາມຮັບຜິດຊອບ
• ການເລືອກຄູ່ມືຜູ້ລູກ
• ການເລືອກຄູ່ມືຈິດຕະວັດນະໂຍບາຍ

ຫຼັກສານຫຼິ້ນ

ການຄົ້ນຫາຫຼັກສານ:

• ສະຫະກອນ CodeW3C.com

ຖະແຫຼງຫົວເຫຼັກກະຕຸບຂອງ CSS: ອອກບວກສາຍກະຕຸບ, ຂະໜາດ, ການສະເໝີ, ຮູບແບບ (ເຊັ່ນ: ອັນຕະວັນ) ແລະ ການປ່ຽນຂອງຄຳເວົ້າ (ເຊັ່ນ: ພາສາຫັກຂະໜາດນ້ອຍ).

ການສ້າງຄູ່ມືຄວາມລະບົບ

在 CSS 中，有两种不同类型的字体系列名称：

• 通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
• 特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

• Serif 字体
• Sans-serif 字体
• ນັກຄືນ Monospace
• ນັກຄືນ Cursive
• ນັກຄືນ Fantasy

ຖ້າເຈົ້າຕ້ອງການຮູ້ຮູບຄືນຫຼາຍຫນັງກ່ຽວກັບນັກຄືນທົ່ວໄປກະຈາຍການອ່ານ: ການສ້າງຄູ່ມືຄວາມລະບົບ.

ນັກຄືນທົ່ວໄປ

ການຕັ້ງຕົວ: ປະສົມປະເພດ font-family ການກໍານົດນັກຄືນຂອງຂໍ້ຄວາມ:

ການຕັ້ງຕົວນັກຄືນທົ່ວໄປ

ຖ້າເຈົ້າຕ້ອງການໃຊ້ນັກຄືນ sans-serif ແຕ່ບໍ່ຄຳຄວາມສຳຄັນວ່າແມ່ນໃຜນັກຄືນໃດຫນັງນັ້ນກໍ່ມີການກ່າວຫານີ້ວ່າ:

body {font-family: sans-serif;}

ທີ່ຈະທົດລອງດຽວຕາມ.

ຜູ້ອອກນຳໃຊ້ຈະເລືອກນັກຄືນຈາກສາຍ sans-serif (ອີງຕາມ Helvetica) ແລະນຳໃຊ້ສຳລັບປະກອບ body. ຍ້ອນມີການຖືກຕ້ອງຢູ່ຂອງນັກຄືນນັ້ນຈະມີການນຳໃຊ້ນັກຄືນນັ້ນສຳລັບປະກອບທັງໝົດທີ່ຕິດຕັ້ງໃນ body ເຖິງວ່າຈະມີການຕັ້ງຕົວຫຼາຍຫນັງນັ້ນ:

ນັກຄືນທົ່ວໄປ

ນອກຈາກການຕັ້ງຕົວຊື່ນັກຄືນທົ່ວໄປຂອງ font-family ພວກເຮົາກໍ່ສາມາດຕັ້ງຕົວນັກຄືນຫຼາຍຫຼາຍຫນັງນັ້ນຂຶ້ນ:

ບົດສະຫຼຸບທີ່ລົງມາສະແດງປະກອບ h1 ທັງໝົດຕົກຕາມ Georgia:

h1 {font-family: Georgia;}

ທີ່ຈະທົດລອງດຽວຕາມ.

ກົດລະບຽບນັ້ນຈະມີບັນຫາອີກຢ່າງໜຶ່ງວ່າຖ້າຜູ້ອອກນຳໃຊ້ບໍ່ໄດ້ຖືກຕິດຕັ້ງ Georgia ແລ້ວຈະຕ້ອງໃຊ້ນັກຄືນມົນລະບົບມີຄວາມສຳຄັນທົ່ວໄປຂອງຜູ້ອອກນຳໃຊ້ໃນການສະແດງປະກອບ h1:

ພວກເຮົາສາມາດແກ້ໄຂບັນຫານີ້ດ້ວຍການປະສົມນັກຄືນສະເພາະຫຼັງຈາກນັກຄືນທົ່ວໄປ:

h1 {font-family: Georgia, serif;}

ທີ່ຈະທົດລອງດຽວຕາມ.

ຖ້າຜູ້ອ່ານບໍ່ໄດ້ຖືກຕິດຕັ້ງ Georgia ແຕ່ໄດ້ຖືກຕິດຕັ້ງ Times (ນັກຄືນໃນສາຍ serif) ຜູ້ອອກນຳໃຊ້ອາດຈະໃຊ້ Times ສໍາລັບປະກອບ h1. ເຖິງວ່າ Times ບໍ່ຕົກລົງກັບ Georgia ແຕ່ຍັງຄົງສາມາດເຂົ້າກັບກັບຢ່າງຫຼາຍ:

ດັ່ງນັ້ນພວກເຮົາເຫັນວ່າຈະແນະນຳການຕັ້ງຕົວຊື່ນັກຄືນທົ່ວໄປຂອງ font-family. ດັ່ງນັ້ນຈະມີຫົນທາງຫຼັງໃຫ້ບໍ່ມີຜູ້ອອກນຳໃຊ້ບັນດານັກຄືນທີ່ຕົກລົງກັບກົດລະບຽບພາຍໃນຜູ້ອອກນຳໃຊ້ບັນດານັກຄືນທີ່ຕົກລົງກັບກົດລະບຽບພາຍໃນຜູ້ອອກນຳໃຊ້:

ຖ້າເຈົ້າຮູ້ຄວາມລະບຸຕົວຂອງບັນດານັກຄືນຂະໜາດຫຼາຍຫຼາຍແລ້ວກໍ່ສາມາດຈະຕັ້ງຕົວຂອງປະກອບສະບັບທີ່ຄ້າຍຄືກັນ. ເພື່ອເຮັດແນວນັ້ນຕ້ອງຈະຈັດລະບຸຕົວຂອງນັກຄືນດັ່ງກ່າວຕາມອັນດັບຄວາມສຳຄັນແລະສົ່ງຕົວດ້ວຍຄຳແນະນຳ:

p {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}

ທີ່ຈະທົດລອງດຽວຕາມ.

根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择一种可用的 serif 字体。

使用引号

您也许已经注意到了，上面的例子中使用了单引号。只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。

单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号：

...

ທີ່ຈະທົດລອງດຽວຕາມ.

字体风格

font-style 属性最常用于规定斜体文本。

该属性有三个值：

• normal - 文本正常显示
• italic - 文本斜体显示
• oblique - 文本倾斜显示

ບົດສະຫຼຸບ

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

ທີ່ຈະທົດລອງດຽວຕາມ.

italic 和 oblique 的区别

font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。

italic - ມີຮູບແບບຂອງການປ່ຽນຮູບແບບທີ່ງາມຫຼາຍຫຼືຫຼາຍຫຼາຍຢ່າງຫຼາຍ ເພື່ອສະແດງຮູບແບບທີ່ຫຼາຍຫຼືຫຼາຍຫຼາຍ. ທີ່ບໍ່ແມ່ນ ຂະແນມoblique - ຂະແນມທີ່ສະແດງຢູ່ທີ່ຕັ້ງຢ່າງທຳມະດາ ແຕ່ກໍ່ຕັ້ງຢູ່ທີ່ສະແດງຢູ່ທີ່ສະໝອງ.

ເປັນປະຈຳການທີ່ italic ແລະ oblique ທີ່ເບິ່ງຄືກັນຢູ່ໃນສາຍເວັບປະຕິບັດ.

ການປ່ຽນຮູບແບບຂອງມີຕົວ

ປະສົມປະກອບ font-variantສາມາດກຳນົດຂະແນມນ້ອຍສະແດງ.

ຂະແນມຂັ້ນນ້ອຍສະແດງບໍ່ແມ່ນຂະແນມທີ່ຫຼາຍ ຫຼືຂະແນມນ້ອຍ ນີ້ມີຂະແນມທີ່ມີຂະໜາດຫຼາຍຫຼືຫຼາຍຫຼາຍຢ່າງຫຼາຍ.

ບົດສະຫຼຸບ

p {font-variant:small-caps;}

ທີ່ຈະທົດລອງດຽວຕາມ.

字体加粗

font-weight 属性设置文本的粗细。

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

ບົດສະຫຼຸບ

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

ທີ່ຈະທົດລອງດຽວຕາມ.

ຂະໜາດມູນລະບົບມູນລະບັບ

ປະສົມປະສານ font-sizeຈຸດຂະໜາດຂອງຂໍ້ຄວາມ.

ມີຄວາມສາມາດຈັດການຂະໜາດຂອງຂໍ້ຄວາມໃນພາກສາດການຈັດການເວັບໄຊປະສົງກໍານົດຫຼາຍ ແຕ່ບໍ່ຄວນຈະດັດແປງຂະໜາດຂອງຂໍ້ຄວາມເພື່ອໃຫ້ບົດຄວາມເບິ່ງຄືຫົວຂໍ້ ຫຼືໃຫ້ຫົວຂໍ້ເບິ່ງຄືບົດຄວາມ.

ສວຍງາມທີ່ຈະນຳໃຊ້ HTML ກຳນົດຫົວຂໍ້ຢ່າງຖືກຕ້ອງ ເຊັ່ນ: ນຳໃຊ້ <h1> - <h6> ເພື່ອກຳນົດຫົວຂໍ້ ແລະ <p> ເພື່ອກຳນົດບົດຄວາມ.

ຄູ່ມູນ font-size ສາມາດເປັນຄູ່ມູນອັດຕາຫຼືຄູ່ມູນສະພາບ.

ຂະໜາດອັດຕາ:

• ຈຸດຂອງຂໍ້ຄວາມໃຫ້ມີຂະໜາດທີ່ກໍານົດກ່ອນ:
• ບໍ່ອະນຸຍາດຜູ້ຄົນໃນການດັດແປງຂະໜາດຂອງຂໍ້ຄວາມໃນທຸກສາທາລະນະສຸກ (ບໍ່ມີປະສິດທິພາບ)
• ຂະໜາດອັດຕາກົງໃຫ້ມີປະສິດທິພາບທີ່ສຸດໃນການກຳນົດຂະໜາດພາບທີ່ອອກມາທີ່ຕາມຄວາມຍາວ:

ຂະໜາດທາງສະພາບ:

• ຈຸດຂະໜາດທາງສະພາບກັບປະກອບອາກາດອ້ອມຂ້າງ
• ອະນຸຍາດຜູ້ຄົນໃນການດັດແປງຂະໜາດຂອງຂໍ້ຄວາມໃນສາທາລະນະສຸກ

ເຫັນວ່າ:ຖ້າພວກເຮົາບໍ່ໄດ້ຈຸດຂະໜາດຂອງມູນລະບົບມູນລະບັບ ຂໍ້ຄວາມທຳມະດາ (ເຊັ່ນ: ບົດຄວາມ) ຈະມີຂະໜາດຄົງເກົ່າ 16 pixels (16px=1em).

ນຳໃຊ້ pixels ເພື່ອຈຸດຂະໜາດຂອງມູນລະບົບມູນລະບັບ

ຈາກການຈຸດຂະໜາດຂອງຂໍ້ຄວາມດ້ວຍ pixels ພວກເຮົາສາມາດດັດແປງຂະໜາດຂອງຂໍ້ຄວາມຢ່າງສົມບູນ:

ບົດສະຫຼຸບ

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

ທີ່ຈະທົດລອງດຽວຕາມ.

ໃນ Firefox, Chrome, and Safari ພວກເຮົາສາມາດດັດແປງຂະໜາດຂອງຂໍ້ຄວາມໃນຫົວຂໍ້ນີ້ອອກມາ ແຕ່ບໍ່ສາມາດໃນ Internet Explorer.

ເຖິງວ່າພວກເຮົາສາມາດດັດແປງຂະໜາດຂອງຂໍ້ຄວາມໃນຈຸດມີການດັດແປງຂະໜາດຂອງສາທາລະນະສຸກໄດ້ ນີ້ກໍ່ບໍ່ແມ່ນການດັດແປງຂະໜາດຂອງຂໍ້ຄວາມໃນທັງໝົດໜ້ານີ້ ແຕ່ພຽງແຕ່ຂໍ້ຄວາມ.

ນຳໃຊ້ em ເພື່ອຈຸດຂະໜາດຂອງມູນລະບົບມູນລະບັບ

ຖ້າພວກເຮົາຢາກຫຼີກລ່ວງບັນຫາທີ່ບໍ່ສາມາດດັດແປງຂະໜາດຂອງຂໍ້ຄວາມໃນສາທາລະນະສຸກມີຕີ້ມິສເຊີ້ຢູ່ທີ່ບໍ່ສາມາດດັດແປງຂະໜາດຂອງຂໍ້ຄວາມໄດ້ ນັກພັດທະນາຫຼາຍຄົນໃຊ້ສະເພາະຈຸດນັກສະແດງ em ແທນ pixels.

W3C 推荐使用 em 尺寸单位。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

可以使用下面这个公式将像素转换为 em：pixels/16=em

（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）

ບົດສະຫຼຸບ

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

ທີ່ຈະທົດລອງດຽວຕາມ.

在上面的例子中，以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，在 IE 中仍存在问题。在重设文本大小时，会比正常的尺寸更大或更小。

ປະສົມພັນບັນສະມນຂອງສິບຕະນາຄົມແລະ EM

ຄວາມຕ້ອງການທີ່ຈະມີຜົນງານທີ່ດີໃນທຸກບັນຊີບັດແບບແມ່ນຈະຈັດຕັ້ງຄວາມຂະໜາດຂອງ font-size ຂອງບັນຊີ body (ບັນຊີເພື່ອບັນຊີພາຍໃນ) ດ້ວຍອັດຕາສະມານຂອງສິບຕະນາຄົມ.

ບົດສະຫຼຸບ

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

ທີ່ຈະທົດລອງດຽວຕາມ.

ພາສາຂອງພວກເຮົາອາດຈະມີຜົນງານທີ່ດີ. ພວກເຮົາສາມາດສະແດງຂໍ້ຄວາມດຽວກັນໃນທຸກບັນຊີບັດແບບ, ແລະອະນຸຍາດບັນຊີບັດແບບທຸກບັນຊີທີ່ຈະຂະຫຍາຍຄວາມຂະໜາດຂອງຂໍ້ຄວາມ.

ປະເພນັງມີບັນສາສະພາບສະເຕດຊີສະບັນ

ຫນ້າໄປ

ອຸປະກອນ

ຄູ່ມືການສອນ

ການຊີ້ບັນທຶກ CSS

ການທົດສອບ CSS

ການທົດສອບ CSS