CSS层叠样式表最佳入门教程（三）

来源：网络整理责任编辑：栏目编辑发表时间:2013-07-02 03:16　点击:次

　　其中my.css样式单文件的内容如下：

　　h3 { font-family: "宋体"; font-size: 12pt color: green }

　　执行的结果如下：

　　输入的外部式样单

　　4、[ 主题：需要特别说明的一些问题--CSS进阶]

　　★☆★CSS的继承性问题：

　　看了下面的例子就知道了，如果定义

　　h1 { color:yellow }

　　即，告诉浏览器将所有〈B〉标签内的文字用蓝色显示。

　　但是，如果使用如下的HTML语法：

　　〈h1〉层叠〈I〉式样单〈/I〉的例子〈/h1〉

　　对于〈I〉标签并没有设定样式，但因为〈I〉位于〈H1〉之中，所以它将继承〈H1〉设定的样式，也以黄色显示。

　　层叠式样单的例子

　　★☆★CSS的优先级问题：

　　如果混合使用三种式样单，优先级：inline 〉 embed 〉 link 式样单。

　　★☆★特别指定的样式单的优先级大于继承的式样，例：

以下是引用片段：
　　BODY { color: green }
　　P { color: yellow}

　　特别规定是：〈P〉中的文字用黄色显示，但它同时也继承了〈BODY〉的绿色规定。但是特别指定了的式样的优先级大于继承的式样，所以〈P〉之内的文字用黄色显示。

　　★☆★Netscape Communicator 和 IE 4.0对于CSS的理解是不完全相同的。

　　这就意味这并非全部的css都能在两个浏览器中执行时得到同样的结果。所以，最好使用两种浏览器检测一下。

　　5、[ 主题：关于CSS中的类-CLASS ]

　　★☆★ 先看一个简单的例子：以下是常见按钮，使用"类"控制字体的按钮是不是漂亮了许多?而没有使?quot;类"控制的按钮的字体看上去就有点变形?本例使用9pt大小的宋体字控制的。

　　这是"类"的一个用途。

　　奥秘是这样的：

　　先定义一个"类---class"：

以下是引用片段：
　　〈style type="text/css"〉
　　〈!--
　　.pt9 { font-family: "宋体"; font-size: 9pt}
　　--〉
　　〈/style〉

　　这里"类"的名字叫做"pt9",前面有一个"."。

　　然后在HTML中加上class="pt9"即可，如下：

以下是引用片段：
　　〈form method="post" action="..."〉
　　〈input type="submit" name="Submit" value="使用了类的按钮" class="pt9"〉
　　〈/form〉

　　是不是非常简单?

　　★☆★再进一步看看-- 一个标签可以定义数个"类"。

以下是引用片段：
　　P.green { color: green }
　　P.yellow { color: yellow}
　　P.red { color: red}

　　在HTML中，这样做(只要引用相应的类就可以了)：

以下是引用片段：
　　〈P CLASS="green"〉绿黄色显示的字符〈/P〉
　　〈P CLASS="yellow"〉黄色显示的字符〈/P〉
　　〈P CLASS="red"〉红色显示的字符〈/P〉