《CSS教程》02章 CSS的设置方法

本章继续CSS的设置方法。

对指定元素的设定

上一章所举的例子就是对指定的元素设置

元素名 { ～ }

sample/s02_01.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>指定元素的设置</title>
<style type="text/css">
<!--
body { margin: 3em }
h1 {
    font-size: medium;          /* 标准文字大小 */
    padding: 0.3em;
    color: #ffffff;             /* 前景为白色 */
    background: #ff6600         /* 背景为Orange */
}
p {
    padding: 1em;
    border: double 3px #ff6600  /* Orange的双线框 */
}
-->
</style>
</head>
<body>

<h1>这是h1元素的内容</h1>

<p>这是p元素的内容</p>

</body>
</html>

对多个元素的相同属性的设定

将多个元素用逗号隔开进行设置

元素名，元素名，元素名，... { ～ }
*`也可以对元素的一部分指定"#ID名或".class名"

sample/s02_02.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>指定元素的设置</title>
<style type="text/css">
<!--
h1,p {
    font-size: medium;          /* 标准文字大小 */
    padding: 1em;
    border: double 3px #ff6600  /* Orange的双线框 */
}
-->
</style>
</head>
<body>

<h1>这是h1元素的内容</h1>

<p>这是p元素的内容</p>

</body>
</html>

对所有元素的相同属性的设定

将元素名换成*可以适用于所有元素

* { ～ }
注：也可以对元素的一部分指定"#ID名或".class名"

sample/s02_03.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>指定元素的设置</title>
<style type="text/css">
<!--
* {
    font-size: medium;    /* 标准大小 */
    font-weight: normal;  /* 标准粗细 */
}
-->
</style>
</head>
<body>

<h1>这是h1元素的内容</h1>
<h2>这是h2元素的内容</h1>
<h3>这是h3元素的内容</h1>
<h4>这是h4元素的内容</h1>
<h5>这是h5元素的内容</h1>
<h6>这是h6元素的内容</h1>

<p>这是p元素的内容</p>

</body>
</html>

对元素中指定ID或class的设定

本节是CSS的重要内容，务必完全掌握。前面所讲的内容中，设定好的元素在任何地方都以同样的值表示。如果对某一元素需要在不同地方显示不同的式样，如何来实现呢？

#ID名 { ～ }
.class名 { ～ }
要素名#ID名 { ～ }
要素名.class名 { ～ }

sample/s02_04.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>指定元素的设置</title>
<style type="text/css">
<!--
#myid {
    padding: 0.5em;
    border: outset 8px #ff0000  /* 红色边框 */
}
p.myclass {
    padding: 0.3em;
    color: #ffffff;             /* 白色文字 */
    padding: 1em;
    background: #ff6600         /* Orange背景颜色 */
}
-->
</style>
</head>
<body>

<h1 class="myclass">这是h1元素的内容</p>
<p>这是p元素的内容</p>
<p class="myclass">这是在p元素，指定了"class='myclass'"</p>
<p>这是p元素的内容</p>
<p id="myid">这是在p元素，指定了"id='myid'"</p>
<p>这是p元素的内容</p>
<p class="myclass">这是在p元素，指定了"class='myclass'"</p>
<p>这是p元素的内容</p>

</body>
</html>

为什么h1元素的一行不变化呢？因为在定义时myclass是只对p元素有效。