一、基本用法
标签选择器也叫元素选择器、类型选择器,是css样式中的一个基础选择器,用于给指定标签设置相应的样式。
其语法规则为:
标签 {
属性: 值;
}
例如给页面中所有p标签的文字颜色设置为红色:
p { color: red; }
二、示例代码
节选白居易《忆江南》:
<head>
<style type="text/css">
h1 { text-aligin: center; } /*所有h1标题居中*/
h2 { text-aligin: center; } /*所有h2标题居中*/
p {
text-indent: 2em;
margin-left: 20px;
margin-right: 20px;
color: rgba(100, 100, 100, 100);
}
</style>
</head>
<body>
<h1>忆江南</h1>
<h2>唐·白居易</h2>
<p> 江南好,风景旧曾谙。(2)日出江花红胜火,春来江水绿如蓝,(3)能不忆江南。 </p>
<h2>作者介绍</h2>
<p> 白居易。。。 </p>
<h2>全文赏析</h2>
<p> 《忆江南三首》是唐代诗人白居易的组词作品。第一首词总写对江南的回忆,选择了江花和春水,衬以日出和春天的背景,显得十分鲜艳奇丽,生动地描 绘出江南春意盎然的大好景象;第二首词描绘杭州之美,通过山寺寻桂和钱塘观潮的画面来验证“江南好”,表达了作者对杭州的忆念之情;第三首词描绘</p>
<p>苏州之美,诗人以美妙的诗笔,简洁地勾勒出苏州的旖旎风情,表达了作者对苏州的忆念与向往。这三首词各自独立而又互为补充,分别描绘江南的景色 美、风物美以及女性之美,艺术概括力强,意境奇妙。</p>
</body>
页面为:
三、选择器分组
对于多个具有同一属性的标签(例如上例中的h1
和h2
标签),可以统一分组写到一个选择器中。语法格式为:
标签1, 标签2 {
值: 属性;
}
两个标签之间用一个逗号隔开,逗号紧跟上一个标签之后,后面可以跟一个空格。
所以上例的样式也可以写成:
h1, h2 { text-aligin: center; }
p {
text-indent: 2em;
margin-left: 20px;
margin-right: 20px;
color: rgba(100, 100, 100, 100);
}
四、属性继承
根据CSS规则,子元素总是继承父元素。例如以下规则:
body {
font-family: Verdana, sans-serif;
}
给body设置字体类型为Verdana,通过CSS继承,body中的元素(如p,ul,li,div等)也都会拥有这一属性——即默认的字体是Verdana。
如果子元素内不想使用继承的属性,那么需要对它单独设定规则:
body {
font-family: Verdana, sans-serif;
}
p {
/* 在p标签中单独设置字体 */
font-family: 微软雅黑;
}
在早期的版本,某些浏览器是不支持继承的。比方说,Netscape 4就不支持继承,它不仅忽略继承,而且也忽略应用于body元素的规则。IE/Windows直到IE6还存在相关的问题,在表格内的字体样式会被忽略。
对于这种情况,我们可以通过被称为"Be Kind to Netscape 4"的冗余法则来处理旧式浏览器无法理解继承的问题。
body {
font-family: Verdana, sans-serif;
}
p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
此处评论已关闭