CSS学习(八)——定义选择器
来源:互联网 发布:淘宝比较好的银饰店 编辑:程序博客网 时间:2024/04/29 17:40
ID定义型与class定义型排版样式
(1) 对于ID定义型,每个ID在页面中只能用一次。尽管一个ID在页面内多次使用也能实现效果,但是这样写不规范。如果同一个样式页面内多次使用,应该用class定义型。
(2) ID可与标记定义型结合使用,例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">h2#title{color:red;}</style><title>定义选择器</title></head><body><h2 id="title">能实现效果</h2><p id="title">无法实现效果</p></body>上面例子中,h2#title的意思是只有应用于属性名称h2的title才起效果。
(3) class定义型可以与ID定义型混合使用,例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">ul#list{color:red;}.style1{color:blue;}.style2{color:green;}</style><title>定义选择器</title></head><body> <ul id="list"> <li class="style1">类目一</li> <li class="style2">类目二</li> <li>类目三</li> </ul></body>
(4) class定义型也可以与标记定义型结合使用。例如,CSS代码:p.style{color:red;} HTML代码:<p class="style">定义型混用</p>
类似地,如果将.style应用于其他属性名称,例如<div class="style">定义型混用</div> 这里的.style是不起作用的。
(5) class定义型支持同时引用多种样式,例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">.setting{color:red;}.setting1{font-size:40px;}.setting2{font-style:italic;}</style><title>定义选择器</title></head><body> <p class="setting setting1">定义选择器学习</p> <p class="setting setting2">定义选择器复习</p></body>
层叠
当使用外部排版样式时,如果同个html文档中引用多个层叠样式表文档,且层叠样式表的内容优先级一样,则位置越靠下的文档优先级越高。也即多个层叠样式表文档的属性设定值发生冲突时,以位置靠下的文档的内容为准。例子:
第一个层叠样式表文档,标题:css1.css
p{color:red;font-size:50px;font_weight:bold}第二个层叠样式表文档,标题:css2.css
p{color:green;font-size:50px;font_weight:bold}HTML文档:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="css1.css" /><link rel="stylesheet" type="text/css" href="css2.css" /><title>定义选择器</title></head><body> <p>层叠样式</p></body>因为css2.css在css1.css的下方,因此文档内容的颜色会设置为绿色。
分组
在使用行内、class、ID或混用的的定义型时,如果多个属性的设定值相同,则可以将它们写在一起。例如:<style type="text/css">h1,h2,h3{color:red;font-size:50px;}</style>
如果其中某一个或某几个存在不同的设定值,可以再单独写出来。
上下文
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">p i{color:red;font-size:50px;}div i{color:green;font-size:40px;}</style><title>定义选择器</title></head><body> <p>定义选择器<i>学习</i></p> <div>定义选择器<i>复习</i></div></body>在这段代码中,p i{}和div i{}中分别定义了<p></p>和<div></div>中标记<i></i>的属性设定值。这样写的效果是不同的标记内的<i>标记赋予了不同的属性,比较简洁。注意,如果要设定标记<p></p>和<div></div>的属性,需要另外再写。
这个功能同样支持在标记定义型与ID(或class)定义型混用时使用。比如:p#setting i{}
0 0
- CSS学习(八)——定义选择器
- CSS基础学习八:派生选择器
- CSS学习笔记—选择器
- Css基础学习(八)—表格
- Css学习总结(4)——CSS选择器总结
- css学习——标签选择器,id选择器,类选择器,后代选择器
- php学习——css复习一(选择器)
- 【CSS】——选择器的学习
- CSS学习杂记——选择器
- CSS(三)— 选择器
- css 样式 (一)定义选择器
- css学习3——子元素选择器,交集选择器,并集选择器,兄弟选择器,序选择器
- css学习笔记——CSS 属性 选择器
- CSS选择器(学习备忘)
- 前端技术学习之选择器(八)
- CSS——选择器
- CSS——选择器
- CSS—组合选择器
- Centos 7.2 配置防火墙
- elasticsearch 查询(match和term)
- Meanshift算法之再思考
- ACM中java的使用
- 【Java】多态和动态绑定中的坑
- CSS学习(八)——定义选择器
- Exercise(14):小小故事
- bzoj 1433: [ZJOI2009]假期的宿舍(最大流)
- iOS判断机型
- 频繁Toast的解决办法
- Hadoop MapReduce 统计红楼梦出现次数最多的名字
- Agnostic Learning (不可知学习)
- 【Java】多态和动态绑定中的坑
- HDU 1233 还是畅通工程