XHTML（DIV+CSS）布局网页时，CSS文件定义规则

来源：互联网发布：windows api教程编辑：程序博客网时间：2024/05/21 17:36

一、XHTML（DIV + CSS）的基本结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>DIV + CSS</title>
    
    <link href="css/css.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
</style>
<script src="/js/js.js'/>" type="text/javascript"></script>
  <script type="text/javascript">
</script>

</head>

<body>

</body>
</html>

说明：XHTML文件的所有标签必须关闭，例如HTML中的<br>、<hr> 必须是 <br />、<hr /> 。

二、CSS文件定义规则：

1、当在HTML中定义为 <div id="divID"></div> 时，在 css 文件中对应的设置语法则是 #divID{} ；如果在HTML中定义为 <div class="divID"> </div>时，则在 css 文件中对应的设置语法是 .divID{} 。

2、HTML中的一切元素都可以定义，例如：body、table、tr、td、th、form、img、input……，当HTML元素不包含在 <div></div> 中时，如果你要在 css文件中设置它们，则直接写入元素的名称加上一对大括号{}就可以了，例如： body{…}，table td{…}…… ，当HTML元素在<div></div>中按照 ”第3点“ 和 ”第4点“ 的方式定义。

3、如果<div id="divID"></div> 这个层中包括了一个 <img></img>，则这个 img 在 css文件中对应的设置语法应该是 #divID img {}；如果 <img></img> 包含在 <div class="divID"></div> 这个层中时，则设置语法应该是 .divID img {} 。

4、如果<div></div>中有其他HTML元素，这些HTML元素有三种方式来定义 css：

（1）、给各个HTML元素定义一个 id 或者 class，然后按照 ”第1点“ 定义<div></div>的方式，采用 #id{} 或 .class{} 来定义该标签的 css （此时可以给各个相同元素定义不一样的 css）；

（2）、采用“第3点“ 来给该标签定义 css ，例如：#divID table {} （定义层divID下的<table></table>）、#divID table td{} （定义层divID下的<table></table>下的<td></td>）、.divID table td{} （定义层divID下的<table></table>下的<td></td>） …… ，（此时是为特定层的HTML元素定义，在同一层下的相同元素有一样的 css）

（3）、采用 ”第2点“ 的方法直接定义 css （此时整个网页文件中相同元素有一样的 css ）；

5、所有的 css 定义代码都应该写在大括号“ {} ”中，各样式属性结束用 “；” 属性和值直接使用“:”，例如：

body {
font-family: "微软雅黑";
……;
}

.divClass {
……;

……;
}

#divID {
……;

……;
}

table td {

……;

……;
}

6、css 中注释使用 /* */ ，XML、HTML使用 ，JSP 使用 <%-- --%>。

复制去Google翻译翻译结果