CSS XTHML书写规范以及常见问题总结(页面最优化)

下面是详细讲解“CSS XHTML书写规范以及常见问题总结(页面最优化)”的攻略。

1. CSS XHTML书写规范

1.1 文档类型声明

在 XHTML 中，一定要声明文档类型，可以使用以下任意一种：

<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1.2 字符编码

在 XHTML 中，指定字符编码方式需要在页面 HEAD 部分添加以下代码：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

1.3 网页结构

网页主要由 HEADER、NAV、ARTICLE、ASIDE、MAIN、FOOTER 组成。其中，ARTICLE、ASIDE、MAIN 都需要进行区块分割，其次，NOSCRIPT 标签应作为页面 BODY 的第一个子元素，SCRIPT 标签应尽量放在 HTML 的最后面。

1.4 使用 HTML 属性

尽量避免在 HTML 中使用 STYLE 属性，可以使用 CLASS 和 ID 来实现样式。同时，尽量不要在 CSS 中使用 !important 属性，除非必须。

2. 常见问题总结

2.1 盒子模型问题

在 CSS 中，盒子模型包含：外边距（margin）、边框（border）、内边距（padding）和实际内容（content），而且盒子模型的宽度计算包括了四个部分的宽度。要解决盒子模型的问题，可以使用 box-sizing 属性，取值可以是 content-box 或 border-box。

.box {
  box-sizing: border-box;
}

2.2 CSS 选择器问题

在 CSS 中，选择器的匹配规则是从右到左的，也就是说，应该尽量把不同的属性放到不同的选择器之中，以提高效率。同时，要注意使用 ID 和 CLASS 选择器，以提高 CSS 代码的可维护性。

2.3 CSS 样式问题

避免 CSS 文件过大，应尽可能使用合并和压缩 CSS 文件。此外，要注意 CSS 样式表的继承关系，合理地使用可继承属性，也要避免使用不必要的样式。

示例说明

示例一

在一个网页中有多个按钮，按钮的样式相同，只是颜色不同，那么可以使用 CLASS 属性来实现样式。

<button class="btn1">按钮1</button>
<button class="btn2">按钮2</button>
<button class="btn3">按钮3</button>

.button {
  font-size: 14px;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
}

.btn1 {
  background-color: red;
}

.btn2 {
  background-color: blue;
}

.btn3 {
  background-color: green;
}

示例二

在一个页面中有多个表格，那么可以使用 ID 属性来实现样式。

<table id="table1">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<table id="table2">
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

#table1 tr td {
  border: 1px solid red;
}

#table2 tr td {
  border: 1px solid green;
}

以上就是“CSS XHTML书写规范以及常见问题总结(页面最优化)”的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS XTHML书写规范以及常见问题总结(页面最优化) - Python技术站