当前阅读教程:CSS入门到精通 > 示例2:内部样式(多重样式) | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 示例1:外部样式 | 下一篇: 示例3:外部链接样式和内部样式顺序对掉 |
我们沿用上面示例1的代码,在html代码中增加h2标签的内部样式;这样我们在一个html页面中既有外部样式,也有内部样式,这样就形成了多重样式。 我们尝试在示例1中的外部引入样式后面(如果在前面效果会不同,后面会讲到),加入如下内部样式代码: <style> h2{ /*外部样式文件中有同样的样式,原来是居中,内部样式覆盖后居右*/ text-align: right; /*居右*/ } </style> 这样我们整个页面就会有多重样式了,那么我们这里就涉及到多重样式的优先级了。 在上面代码中,外部样式表定义了 h2{ color: red; /* 红色 */ text-align: center; /* 居中 */ } 内部样式定义了 h2{ /*外部样式文件中有同样的样式,原来是居中,内部样式覆盖后居右*/ text-align: right; /*居右*/ } 我们上面两段代码中都定义了h2标签的样式,并且我们两段代码都定义了text-align样式,那么我们最终以哪个为准呢。 对于内部样式和外部样式来说,哪个顺序在后面,就以哪个为主;对于上面的两段代码来说,text-align样式最终显示居右。 完整代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>多重样式</title> <!--引入同目录下的外部样式文件mycss02.css--> <!--外部样式定义了h2的字体颜色为红色,且字体居中--> <link rel="stylesheet" type="text/css" href="mycss02.css" /> <!--在后面加入内部样式,这样就形成了多重样式--> <style> h2{ /*外部样式文件中有同样的样式,原来是居中,内部样式覆盖后居右*/ text-align: right; /*居右*/ } </style> </head> <body> <h2>居右的,红色字体</h2> </body> </html> 效果图 |
|
上一篇: 示例1:外部样式 | 下一篇: 示例3:外部链接样式和内部样式顺序对掉 |