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

ຫຼັກສະຫຼົກຊັບສິນສະໄໝ CSS

• ປຶ້ມສຳຮອງ CSS
• ສິ່ງພົບຂອງ CSS
• ວິທະຍາສາດພື້ນຖານ CSS
• ວິທະຍາສາດສູງສູງ CSS
• ການເລືອກຄູ່ສົມມຸດຊະນະການ CSS
• ການເລືອກຄູ່ id CSS
• ການເລືອກຄູ່ຊະນະການ CSS
• ການສ້າງ CSS
• ພາບຫຼັງ CSS
• ການຄວບຄຸມຂໍ້ຄວາມ CSS
• ການຄວບຄຸມອົງການ CSS
• ການຄວບຄຸມລາຍການ CSS

ຮູບຈຳລອງບັນຊີ CSS

• ຄວາມຫຼັງຂອງການສ້າງຮູບຮ່າງ CSS
• ການຄວບຄຸມກາງລາຍການ CSS
• ການຄວບຄຸມບໍລາສັບ CSS
• ການຄວບຄຸມກາງລາຍການ CSS
• ການຄວບຄຸມກາງລາຍການ CSS

ການຕັ້ງຕົວ CSS

• ການຄວບຄຸມທີ່ຢູ່ບໍລິເວນ CSS
• ການຄວບຄຸມທີ່ຢູ່ບໍລິເວນ CSS
• ການຄວບຄຸມທີ່ຢູ່ບໍລິເວນ CSS
• ການຫຼຸດສູນ CSS

ການເລືອກຕົວ CSS

• ການເລືອກບັນຊີຂອງສິ່ງ CSS
• ການຂະໜານຄູ່ສົມມຸດ CSS
• ການສະແດງຄູ່ສົມມຸດຊະນະການ CSS
• ການສະແດງຄູ່ id CSS
• ການສະແດງຄູ່ປະສົມປະສານ CSS
• ການເລືອກຄູ່ພັນທະຍາ CSS
• ການເລືອກບັນຊີສິດລົງກັນ CSS
• ການເລືອກບັນຊີບັນດາບັນຊີສະຫຼາດ CSS

ຫຼັກສະຫຼົກທີ່ຕ້ອງເລືອກ

ການສະເໜີຫຼັກສະຫຼົກ:

• ສະຖານນິວຢາຂອງ CodeW3C.com

ປະສົມປະກອບຄວາມ CSS ສາມາດກໍານົດພາບຄວາມສາມາດຄວາມສາມາດ.

ດ້ວຍປະສົມປະກອບຄວາມ, ທ່ານສາມາດປ່ຽນສີຫຼັກ, ຄວາມລະດັບການບາດກັບຄວາມລະດັບ, ການຕັ້ງຕົວການການຕັ້ງຕົວ, ການປັບປຸງຄວາມສາມາດ, ການຫັນອອກຫຼາຍ, ແລະອີກຫຼາຍອີກຫຼາຍ.

ການຫຼຸດການອອກຂໍ້ຄວາມ

ການຫັນອອກຫຼາຍຄັນທີ່ທຳອິດຂອງບົດສະຫຼົກໃນເວັບໄຊ, ນັ້ນເປັນການດຳເນີນການຂະໜາດຫຼັກສັບສິນທີ່ໃຊ້ຫຼາຍທີ່ສຸດ.

CSS ສະໜອງ ປະສົມປະກອບ text-indentການປະສົມປະກອບນັ້ນສາມາດດຳເນີນການຫັນອອກຫຼາຍຄວາມສາມາດງ່າຍດາຍ.

ດ້ວຍການໃຊ້ປະສົມປະກອບ text-indent, ທຸກປະກອບຄັນທີ່ທຳອິດຂອງຫົວຄວາມສາມາດຫັນອອກຫຼາຍຕົວກັບຄວາມລະດັບທີ່ຈະໃຫ້, ທັງເປັນຄວາມລະດັບທີ່ບໍ່ພົບ.

ປະສົມປະກອບນີ້ມັກສາມາດນຳໃຊ້ເພື່ອປົກປັກຄືນການຄຳຂອງຄູ່ມວນຊະນະວ່າ:

p {text-indent: 5em;}

Note:ທົ່ວໄປຈະສາມາດນຳໃຊ້ text-indent ສຳລັບທັງໝົດຫລັກສະນະທີ່ອັດສະຕາລີ ແຕ່ບໍ່ສາມາດນຳໃຊ້ປະສົມປະກອບທີ່ນຳໃຊ້ທາງຊ່ອງ ແຕ່ບໍ່ສາມາດນຳໃຊ້ text-indent ສຳລັບທັງໝົດຫລັກສະນະທີ່ນຳໃຊ້ທາງຊ່ອງຫລືກິດຈະກຳນາຍົກ. ແຕ່ວ່າຖ້າຫລັກສະນະທີ່ອັດສະຕາລີ (ເປັນຕົວຢ່າງຄູ່ມວນຊະນະ) ມີພາບກິດຈະກຳນາຍົກໃນກິດຈະກຳນາຍົກຂອງການປົກປັກຄືນຂອງກິດຈະກຳນາຍົກນີ້ຈະປ່ຽນຕົວກັບຄູ່ມວນຊະນະນີ້:

ຄຳແນະນຳ:ຖ້າຕ້ອງຈະສ້າງຄວາມປົກປັກຄືນຂອງກິດຈະກຳນາຍົກຂອງຫລັກສະນະພາບກິດຈະກຳທີ່ນຳໃຊ້ທັງໝົດທາງຊ່ອງຫນາມອອກຫລືອອກຫນາມຂອງກິດຈະກຳນາຍົກ:

ນຳໃຊ້ຈຸດຕິດຕາມດັ້ງນັ້ນ:

text-indent ສາມາດຕິດຕາມທັງຈຸດຕິດຕາມດັ້ງນັ້ນວ່າ:

p {text-indent: -5em;}

ແຕ່ວ່າໃນການກະຈາຍ text-indent ທີ່ມີຄວາມຍາວດັ້ງນັ້ນຈະຕ້ອງລະວັງຄວາມຢ່າງຫນັງຫນົງວ່າຖ້າມີຄູ່ມວນຊະນະນີ້ຈະມີຄວາມຍາວດັ້ງນັ້ນຫົກສັດທີ່ຈະລຸກລ້າງພາຍໃນປະຕູບອກສະໜາມ. ເພື່ອຫຼີກລ້າງບັນຫາການສະແດງນີ້ເຮັດໃຫ້ການຕິດຕາມຈຸດຕິດຕາມທີ່ມີຈຸດຕິດຕາມຫນາມລົງຫລືຈຸດຕິດຕາມອອກ:

p {text-indent: -5em; padding-left: 5em;}

ນຳໃຊ້ຕາມຕາລະດັບຂອງຕາມ.

text-indent ສາມາດນຳໃຊ້ທັງໝົດອັນດັບຄວາມຍາວ ລວມທັງຕາມຕາລະດັບຂອງຕາມລະດັບຂອງຕາມ.

ຕາມລະດັບຮອບຄືວ່າ text-indent ສາມາດຕິດຕາມໄດ້ວ່າ:

ໃນຄັ້ງນີ້ຫົກສັດທີ່ຈຸດຕິດຕາມແມ່ນ 20% ຈາກຄູ່ມວນຊະນະຂອງພາຍໃນວ່າ 100 ພັນຈອນດາວ:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>ນີ້ແມ່ນຄູ່ມວນຊະນະ.</p>
</div>

ຕິດຕາມ

ປະສົມປະກອບ text-indent ສາມາດຕິດຕາມໄດ້ວ່າ:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>ນີ້ແມ່ນຄູ່ມວນຊະນະ.</p>
</div>
</div>

ຄູ່ມວນຊະນະກຳລັງຕິດຕາມຈຸດຕິດຕາມ id ວ່າ inner ກໍ່ຈະປົກປັກຄືນ 50 ພັນຈອນດາວ ຍ້ອນວ່າຄູ່ມວນຊະນະກຳນີ້ມີຈຸດຕິດຕາມຈຸດຕິດຕາມ.

水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。

ຄຳແນະນຳ:ການຕົວຊີວິດປະຕູຫຼັກຫຼືປະຕູຕາມກະດູ, ຈະຈະຕັ້ງການຂັດກະຈັດປະຕູຫຼັກຫຼືປະຕູຕາມກະດູພາຍໃນການຕັ້ງການປະຕູຫຼັກຫຼືປະຕູຕາມກະດູທີ່ມີຄວາມຍາວຫຼືຍາວຢູ່ທີ່ຕາມຄຳສັ່ງ.

text-align:center ແລະ <CENTER>

ທ່ານອາດຈະຄິດວ່າ text-align:center ແລະ <CENTER> ມີຜົນດຽວກັນ, ແຕ່ບັນດາບົດບັນຍັດນີ້ບໍ່ແມ່ນດຽວກັນ.

<CENTER> ບໍ່ພຽງແຕ່ມີຜົນຕໍ່ກັບຄຳຕົວຊີວິດ, ຍັງຈະມີຜົນຕໍ່ກັບປະຕູຫຼາຍຂຶ້ນ. text-align ບໍ່ຈະນຳມາກັບປະຕູ, ແຕ່ພຽງແຕ່ກະຈາຍຄຳຕົວຊີວິດພາຍໃນປະຕູ. ປະຕູບໍ່ຈະຕົວມາຈາກປະຕູທີ່ໜຶ່ງໄປຫາປະຕູອື່ນ, ແຕ່ພຽງແຕ່ຄຳຕົວຊີວິດຈະມີຜົນ.

justify

ປະສານການຕົວຊີວິດພາຍໃນພາບການຕົວຊີວິດລະບົບທີ່ສຸດທ້າຍແມ່ນ justify.

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

ສິ່ງທີ່ຕ້ອງລະວັງແມ່ນ, ການຂັດຄຳຕົວຊີວິດຈະເປັນການກຳນົດໂດຍຜູ້ອຳນວຍການ (ບໍ່ແມ່ນ CSS) ສຳລັບການຂັດຄຳຕົວຊີວິດທີ່ຈະຂະຫຍາຍເພື່ອກະຈາຍບ່ອນທີ່ອາຍອກຂອງປະຕູຂອງປະຕູພີ້ມ. ສຳລັບລາຍລະອຽດຫຼາຍຂື້ນ, ຂໍ້ສັງເກດ ຫນັງສະຫຼຸບ CSS text-align。

ການຂັດຄຳ

ປະສານ word-spacingສາມາດປ່ຽນການຂັດຄຳ(ຄຳວັດຖຸ)ລະດັບປົກກະຕິ. ຄຳສັ່ງມີຄວາມຍາວຫຼືຍາວຢູ່ທີ່ຕາມຄຳສັ່ງແມ່ນ normal ແລະຄວາມຍາວຫຼືຍາວຢູ່ທີ່ຕາມຄຳສັ່ງແມ່ນ 0.

ປະສານ word-spacing ຍັງມີຄວາມຍາວຫຼືຍາວຢູ່. ຖ້າມີຄວາມຍາວຫຼືຍາວຢູ່ທີ່ຕາມຄຳສັ່ງ, ການຂັດຄຳວັດຖຸຈະເພີ່ມຂື້ນ. ຖ້າມີຄວາມຍາວຢູ່ທີ່ຕາມຄຳສັ່ງ, ການຂັດຄຳວັດຖຸຈະນຳຂ້າງກັນ:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
ນີ້ແມ່ນວິດີໂອອີກອົງ. ການຂັດຂອງຄຳວັດຖຸຈະເພີ່ມຂື້ນ.


This is a paragraph. The spaces between words will be decreased.

实例 TIY ：增加或减少单词间距（字间隔）

Note:如需深入理解 CSS 对“字”（word）的定义，请访问 ຄຳວັດຖຸ CSS word-spacing。

ຄວາມຫຼິ້ນຂອງຄຳຕົກລົງ

letter-spacing 属性ຄືກັບ word-spacing ຜະສັງການ letter-spacing ຈະເຮັດໃຫ້ຄຳຕົກລົງບໍ່ກັນກັບບໍ່ມີການປ່ຽນແປງ ບໍ່ມີການປ່ຽນແປງຄວາມຫຼິ້ນທີ່ຈະເຮັດໃຫ້ຄຳຕົກລົງບໍ່ກັນກັບບໍ່ມີການປ່ຽນແປງ:

ຄືກັບຜະສັງການ word-spacing ຄຸນນະພາບທີ່ມີຂອງ letter-spacing ກໍ່ຈະຢູ່ບໍ່ດົນນຳ. ຄຸນນະພາບທີ່ຈະໃຊ້ໂດຍກົງແມ່ນ keyword normal (ທີ່ຄືກັບ letter-spacing:0). ຄູ່ມວນຊົນຂອງຄຳຕົກລົງຈະເຮັດໃຫ້ຄຳຕົກລົງບໍ່ກັນກັບບໍ່ມີການປ່ຽນແປງ ບໍ່ມີການປ່ຽນແປງຄວາມຫຼິ້ນທີ່ຈະເຮັດໃຫ້ຄຳຕົກລົງບໍ່ກັນກັບບໍ່ມີການປ່ຽນແປງ:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

ຄວາມນຳໃຊ້ TIY : ການຄວບຄຸມຄວາມຫຼິ້ນຂອງຄຳຕົກລົງ

ການປະນີ້ຂອງຄຳຕົກລົງ

text-transform 属性ການປັບປູງຄວາມຫຼິ້ນຂອງຂໍ້ຄວາມ. ຜະສັງການນັ້ນມີ 4 ຄຸນນະພາບ:

• none
• uppercase
• lowercase
• capitalize

ຄູ່ມວນຊົນ none ບໍ່ເຮັດການປ່ຽນແປງຂອງຂໍ້ຄວາມໃດໆ ຈະໃຊ້ຄວາມຫຼິ້ນຂອງໂຕໃນເອກະສານແບບເກີດໃນມັນ. ອີງຕາມຊື່ວ່າ uppercase ແລະ lowercase ຈະເຮັດໃຫ້ຂໍ້ຄວາມຫຼິ້ນຄືນເປັນຄວາມຫຼິ້ນທົບທຽມ. ສຸດທ້າຍ capitalize ຈະເຮັດໃຫ້ຄຳທຳອິດຂອງແຕ່ລະວັດທະນາຄານຫຼິ້ນຄືນ.

ຄືກັບຜະສັງການນັ້ນ text-transform ອາດບໍ່ມີຄວາມສໍາຄັນຫຼາຍ ແຕ່ພາຍໃນທີ່ທ່ານຕັ້ງໃຈທີ່ຈະປ່ຽນຄວາມຫຼິ້ນຂອງທຸກມີຊາວນັກຂຽນຄືນໃຫ້ຫຼິ້ນຄືນມາກໍ່ມີຄວາມສໍາຄັນ. ບໍ່ຈຳເປັນປ່ຽນແປງສະໝອງທຸກມີຊາວນັກຂຽນສະແນວໃດກໍ່ຕາມ ພຽງແຕ່ມີການນຳໃຊ້ text-transform ຈະເຮັດການປ່ຽນແປງສະໝອງຂອງທ່ານ:

h1 {text-transform: uppercase}

ການນຳໃຊ້ text-transform ມີຜົນປະໂຫຍດສອງສອງບ່ອນ. ຄັ້ງທຳອິດນັ້ນພຽງແຕ່ມີການຂຽນຂັ້ນການປົກກະຕິກໍ່ສາມາດເຮັດການປ່ຽນແປງຂອງການປັບປູງມາໄດ້ຊອບຮາຍຫຼາຍບ່ອນ ບໍ່ຈຳເປັນປ່ຽນແປງສະໝອງ h1 ສະແນວໃດ. ຄັ້ງທີສອງນັ້ນພາຍໃນຖ້າທ່ານຕັ້ງໃຈທີ່ຈະປ່ຽນຄວາມຫຼິ້ນຂອງທຸກມີຊາວນັກຂຽນຄືນຫຼັງນັ້ນພຽງແຕ່ມີການເຮັດການປ່ຽນແປງຈະມີຄວາມງ່າຍກວ່າ:

ຄວາມນຳໃຊ້ TIY : ຄວບຄຸມຄວາມຫຼິ້ນຂອງມີຊາວນັກຂຽນ

ການປັບປູງຂອງຂໍ້ຄວາມ

ຫຼັງຈາກນັ້ນພວກເຮົາຈະເຈລະຈາ text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。

text-decoration 有 5 个值：

• none
• underline
• overline
• line-through
• blink

不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：

a {text-decoration: none;}

Note:如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。

还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线，则规则如下：

a:link a:visited {text-decoration: underline overline;}

不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来。

处理空白符

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：

This     paragraph has    many
    spaces           in it.

可以用以下声明显式地设置这种默认行为：

p {white-space: normal;}

上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。

实例 TIY ：white-space: normal

值 pre

不过，如果将 white-space 设置为 pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像 XHTML 的 pre 元素一样；空白符不会被忽略。

如果 white-space 属性的值为 pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个 pre 元素。

实例 TIY ：white-space: pre

Note:经测试，IE 7 以及更早版本的浏览器不支持该值，因此请使用非 IE 的浏览器来查看上面的实例。

ຄູ່ມວັດຖຸ nowrap

ຄູ່ມວັດຖຸທີ່ຕ້ານກັບນັ້ນແມ່ນ nowrap ທີ່ຈະປ້ອງກັນການຫົວໜ້າຄວາມຂອງປະກອບຢ່າງ ທີ່ຈະຫົວໜ້າຄວາມບໍ່ຫົວໜ້າຄວາມບໍ່ຫົວໜ້າຄວາມ. ໃນ CSS nowrap ແມ່ນຄືກັບ HTML 4 <td nowrap> ທີ່ຈະປ້ອງກັນການຫົວໜ້າຄວາມຂອງການກຳນົດຄວາມພິການ. white-space ທີ່ຈະຮັກສາກົດລະບຽບການກຳນົດຄວາມພິການບັນດາປະກອບຢ່າງ.

ຄວາມທີ່ຈະສະແດງ TIY: white-space: nowrap

ຄູ່ມວັດຖຸ pre-wrap ແລະ pre-line

CSS2.1 ໄດ້ເພີ່ມຄູ່ມວັດຖຸ pre-wrap ແລະ pre-line ທີ່ບໍ່ມີໃນສະບັບ CSS ກ່ອນນັ້ນ. ຄວາມຜົນງານຂອງຄູ່ມວັດຖຸນີ້ແມ່ນອະນຸຍາດໃຫ້ຜູ້ສ້າງການບັນທຶກຄວາມພິການບັນດາຄວາມພິການ.

ຖ້າສະເພາະ white-space ຂອງປະກອບຢ່າງແມ່ນ pre-wrap ຄັນຈະຮັກສາຕົວຕາມການຕິດຕາມກົດລະບຽບການກວດກາການກຳນົດຄວາມພິການສະເພາະທີ່ຈະຮັກສາການກວດກາກົດລະບຽບການກຳນົດຄວາມພິການ. ຖ້າສະເພາະນັ້ນຈະຮັກສາກົດລະບຽບການກຳນົດຄວາມພິການທີ່ຈະຮັກສາກົດລະບຽບການກຳນົດຄວາມພິການ.

Example TIY: white-space: pre-wrap

Example TIY: white-space: pre-line

Note:We tested the two examples above in IE7 and FireFox2.0 browsers, but the result is that the values pre-wrap and pre-line are not well supported.

Summary

The following table summarizes the behavior of the white-space property:

Text direction

If you are reading an English book, you will read from left to right and from top to bottom, which is the flow direction of English. However, not all languages are like this. We know that ancient Chinese is read from right to left, of course, including Hebrew and Arabic, etc. CSS2 introduced a property to describe its directionality.

direction propertyAffects the writing direction of block-level elements, the layout direction of table columns, the direction of horizontal filling of its element box, and the position of the last line in two-aligned elements.

Note:For inline elements, only when unicode-bidi propertyThe direction property will only be applied when set to embed or bidi-override.

direction property has two values: ltr and rtl. Most of the time, the default value is ltr, which displays text from left to right. If you want to display text from right to left, you should use the value rtl.

ປະກອບທາງມີເຕັກນິກການຂຽນຂໍ້ຄວາມ

ອຸປະກອນອຸປະກອນ

ປຶ້ມການອະທິບາຍ CSS

ການນຳໃຊ້ CSS

ການທົດລອງ CSS

ສາຍລາຍ CSS

ຊາວສະໜັບສະໜູນ