CSS样式代码基础教程.PPT

可以使用任何名称命名类，但通常应使用有具体含义的名称。例如，如果需要在网页的三处使用H1标记符，每处的文本具有不同的颜色，此时可以定义以下类样式： H1.color_red{coler:red} H1.color_yellow{coler:yellow} H1.color_blue{coler:blue} 然后在网页中需要使用该类处用class属性引用这些类，如下所示： H1 class=color_red此标题为红色/H1 H1 class=color_yellow此标题为黄色/H1 H1 class=color_blue此标题为蓝色/H1 此时如果使用了H1标记符但没有使用相应的class属性，则不应用所定义的样式。 实际上，不仅可以为某个或某些标记符定义类，还可以定义应用于所有标记符的类(称为通用类)，此时直接用句点后跟类名即可，如下所示： classname{property:value;……} 例如，可以定义一个类： .red{color:red} 然后在需要引用该类的任意标记符内使用class属性，以便所有引用该类的标记符都可以采用所定义的样式。在定义了以上的red类后，就可以用以下方式引用它： p class=red本行文字为红色/p h1 class=red本标题为红色/h1 在本案例中，以下代码是对类的定义： .water{ font-family:隶书; font-size:24px; text-align:right}/*类选择器*/ h3.hello{ font-family:隶书; text-align:center; font-size:36px}/*指定的类选择器*/ 应用的效果可以从图1－3中看到。这里就指出并不是所有的标记都可以使用“.hello”类的。它只为h3服务。 4．用户定义的ID选择器 当网页设计者想在整个网页或几个页面上多处以相同样式显示标记符时，除了使用.classname的方式定义一个通用类样式以外，还可以使用ID定义样式。要将一个ID样式包括在样式定义中，应用一个井号(#)作为ID名称的前缀，如下所示： #IDname{property:value……} 定义了ID样式后，需要在引用该样式的标记符内使用id属性。例如，可以定义一个ID样式如下： #red{color:red} 然后可以存若干不同的HTML标记符中使用该样式规则,如下所示： p id=red本行文字为红色。/p h1 id=red本标题红色。/h1 在本例中也使用了ID选择器： #danger{ color:#990000; font-family:华文彩云; font-size:24px}/*ID选择器*/ ?提示：使用.classname和使用#IDname这两种方式在效果上并没有区别，但最好只使用其中之一，以免造成混淆。 5．虚类选择器 对于a标记符,可以用虚类的方式设置不同类型链接的显示方式，所谓不同类型超链接，是指访问过的、未访问过的、激活的以及鼠标指钍悬停于其上的这4种状态的超链接。 可以通过指定下列选择器之一设置超链接样式： a:link或:link当超链接没被访问过时，所设置的样式应用于超链接。 a:visited或:visited当超链接已被访问过时，所设置的样式应用于超链接。 a:active或:active当超链接当前为被选中状态时，所设置的样式应用于超链接。 a:hover或:hover当鼠标指针移动到超链接之上时，所设置的样式应用于超链接。 例如本例中，以下一组样式定义可以使网页中的超链接文字在未访问过时