如何添加 CSS

当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。

ສາມວິທີທີ່ນຳໃຊ້ CSS

ມີສາມວິທີທີ່ສາມາດສົ່ງເຂົ້າ CSS:

  • CSS ນອກສະໜາມ
  • ການແບບ CSS
  • ການແບບ CSS ທີ່ຢູ່ບ່ອນໃນ

CSS ນອກສະໜາມ

ຜ່ານການນຳໃຊ້ຮູບແບບນອກສະໜາມ CSS, ທ່ານພຽງແຕ່ຈະເອົາໃຫ້ເປັນບົດສະຫຼຸບວ່າຈະປ່ຽນແປງຮູບແບບທັງໝົດຂອງເວັບໄຊດຽວພຽງໜຶ່ງເອກະສານ!

ແຕ່ເວັບໄຊ HTML ທຸກໆໜຶ່ງຕ້ອງບັນຈຸປະເທດຕິດຕາມ <link> ໃນສະຖານທີ <head>:

ຕົວຢ່າງ

ຮູບແບບພາບນອກໄດ້ຖືກກໍານົດໃນສະຖານທີ <head> ຂອງ HTML ເວັບໄຊ:

<!DOCTYPE html>
<html>



<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

亲自试一试

ແບບຊັບສັບຕໍ່ຕົວອອກແບບກາງສາມາດຖືກຂຽນໃນບັນນາທິການຄົ້ນຄວ້າທີ່ທຳມະດາ ແລະຕ້ອງຖືກຮັບອອກຈາກຫົວໜ້າ .css.

ແບບຊັບສັບຕໍ່ຕົວອອກແບບກາງ .css ບໍ່ຄວນກວມເອກະສານ HTML ໃດໆ.

"mystyle.css" ແມ່ນແບບດັ່ງກ່າວນີ້:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

ຄຳເຕືອນ:ບໍ່ຕ້ອງໃຫ້ມີຈຸດນອກລະຫວ່າງຄຳນວຍຄວາມ ແລະ ອັດຕາ (ຕົວຢ່າງ margin-left: 20 px;）。ການຂຽນທີ່ຖືກຕ້ອງແມ່ນ:margin-left: 20px;

ການແບບ CSS

ຖ້າ HTML ບາງຢ່າງມີການແບບທີ່ອອກຈາກມັນດຽວ

ການແບບທີ່ຢູ່ບ່ອນໃນ <style> ຂອງ head

ຕົວຢ່າງ

ການແບບທີ່ຢູ່ບ່ອນໃນ <head> ຂອງ HTML ບາງຢ່າງ

<!DOCTYPE html>
<html>



<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

亲自试一试

ການແບບ CSS ທີ່ຢູ່ບ່ອນໃນ

ການແບບທີ່ຢູ່ບ່ອນໃນ (ບໍ່ອາດຮູ້ວ່າ inline style) ສາມາດນຳໃຊ້ເພື່ອການຂະບວນການສະແດງສຳລັບຢ່າງດຽວ.

ຖ້າຕ້ອງນຳໃຊ້ການແບບທີ່ຢູ່ບ່ອນໃນ

ຕົວຢ່າງ

ການແບບທີ່ຢູ່ບ່ອນໃນ <style> ຂອງບາງຢ່າງ

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

亲自试一试

ຄຳເຕືອນ:ການແບບທີ່ຢູ່ບ່ອນໃນປະເພດ

ການເປັນສິ່ງໃດນັ້ນ

ຖ້າມີການກໍານົດບັນດາລັກສະນະໃນການເປັນທີ່ຄິດເລີຍຂອງການເປັນສິ່ງໃດນັ້ນ

ຖ້າມີການແບບແບບຊັບສັບຕໍ່ຕົວອອກແບບກາງແບບສຳລັບ <h1> ຢ່າງດັ່ງກ່າວນີ້:

h1 {
  color: navy;
}

ຫຼັງຈາກນີ້ແບບຊັບສັບພາຍໃນແລະໄດ້ກໍານົດແບບສຳລັບ <h1> ຢ່າງດັ່ງກ່າວນີ້:

h1 {
  color: orange;    
}

ຕົວຢ່າງ

ຖ້າມີການແບບຊັບສັບພາຍໃນທີ່ເຊື່ອມຕໍ່ຕົວອອກແບບກາງຫຼັງຈາກນີ້ຖ້າມີການກໍານົດໃນທີ່ກໍານົດແບບ

亲自试一试

ຕົວຢ່າງ

ແຕ່ຖ້າມີການເຊື່ອມຕໍ່ຕົວອອກແບບກາງກ່ອນນີ້定义了内部样式，则

元素将是深蓝色：

亲自试一试

层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

  1. 行内样式（在 HTML 元素中）
  2. 外部和内部样式表（在 head 部分）
  3. 浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

亲自试一试