DIVCSS 第八章 CSS 定义选择器

[复制链接]
ARCHY明星会员实名认证 发表于 2012-10-3 10:33:33 [DIVCSS] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。选择器有类别选择器、标签选择器、ID选择器、后代选择器、子选择器、伪类选择器、通用选择器、群组选择器、相邻同胞选择器和属性选择器,css3定义中有更多的选择器类型,但由于各浏览器支持不一,所以不推荐使用,在此不详细叙述。下面我们具体介绍一些常用选择器。

一、ID与类class

选择器是用于控制页面设计的样式,即ID 选择器何类选择器。一直以来,许多开发人员经常将ID 与类混淆,或者不能正确的使用这两种选择器,或者简单的认为是一个代替另一个,这种认知是及其错误的。
(1)、应用ID
每个ID 在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID 只
用于页面的唯一元素,如页眉,主导航条,布局区块等.
示例:
  1. <p id=”hightlight”>This paragraph has red text.</p>
复制代码
相应的CSS 代码:
  1. #hightlight{
  2. color:#FFFFFF;
  3. }
复制代码
(2)、将ID与选择器结合
  1. /*适合所有h2 标题*/
  2. h2{
  3. color:# 333;
  4. font-size:16px;
  5. }
  6. /*只适合title 的h2 标题*/
  7. h2#title {
  8. color:# eee;
  9. }
复制代码
相应的XHTML 代码:
  1. <h2>Title Of My Article</h2>
  2. <h2 id=”title”>Title Of My Article</h2>
复制代码
(3)、ID的使用场合
对于每个ID,每个页面只能有一个元素使用该样式,因此ID 应该为每个页面唯一存在并仅使用一次的元素不保留。
(4)、避免使用ID的场合
当一个以上的地方需要使用同一CSS 规则时,不应该使用ID。
(5)、应用类
类可以无限次的使用,因此它是应用CSS 的非常灵活的方法。
  1. <p class=”hightlight”>his paragraph has red text.</p>
复制代码
相关CSS 代码:
  1. .hightlight {
  2. color:FFFFFF;
  3. }
复制代码
(6)、结合多个类和ID
范例:
  1. <ul id=”drinks”>
  2. <li class=”mix”>Beer</li>
  3. <li class=”mix”>Spirtis</li>
  4. <li class=”hot”>Cola</li>
  5. <li class=”hot”>Lemonade</li>
  6. </ul>
复制代码
相应的CSS 代码:
  1. ul#drinks {
  2. color:FF6600;
  3. }
  4. .mix {
  5. Color:# 999999;
  6. }
  7. .hot {
  8. Color:# 333333;
  9. }
复制代码
(7)、利用类改写基本样式:
  1. p{Color:#ff6600;}
  2. .bleached {Color:#ccc;}
复制代码
相应的XHTML 代码:
  1. <p>This paragraph has red text.</p>
  2. <p class=”bleached”>This paragraph has red text.</p>
复制代码
(8)、直接将类链接到元素上
  1. p.bleached {color:red;}
复制代码
相应的XHTML 代码:
  1. <p class=”bleached”>This paragraph has red text.</p>
复制代码
(9)、避免,适合
对于class,如果多次重复使用或者使用子类选择器,那么就选择class,如果是定义唯一性的标记,比如布局,那么用id。

二、层叠

(1)、外部链接实现层叠
  1. <link rel=”stylesheet” type=”text/css” href=”css/one.css”>
  2. <link rel=”stylesheet” type=”text/css” href=”css/two.css”>
  3. <link rel=”stylesheet” type=”text/css” href=”css/three.css”>
复制代码
(2).导入样式实现层叠
  1. @import url(“one.css”)
  2. @import url(“two.css”)
  3. @import url(“three.css”)
复制代码
注意点:必须牢记一个规则,越晚给的规则越重要.

三、分组
  1. h1{
  2. Font-family:隶书,宋体,楷体;
  3. Line-height: 140%;
  4. Color:# 333;
  5. }
  6. h2{
  7. Font-family:隶书,宋体,楷体;
  8. Line-height: 140%;
  9. Color:# 333;
  10. }
  11. h3{
  12. Font-family:隶书,宋体,楷体;
  13. Line-height: 140%;
  14. Color:# 333;
  15. }
  16. /*分组后*/
  17. h1,h2.h3{
  18. Font-family:隶书,宋体,楷体;
  19. Line-height: 140%;
  20. Color:# 333;
  21. }
  22. /*分组例外*/
  23. h1{
  24. Font-style:italic;
  25. }
复制代码
四、继承
  1. h1 {
  2. Color:# 333;
  3. }
  4. <h1>This is the greatest heading <i>in the world</i></h1>
复制代码
从BODY 继承
  1. Body {
  2. Margin:10px;
  3. Font-family:隶书;
  4. Background:#000;
  5. Color:#fff;
  6. }
复制代码
五、上下文选择器
  1. h1{
  2. Color: #ccc;
  3. }
  4. i {
  5. Color:# 000;
  6. }
  7. /*使用上下文选择器*/
  8. h1 I {
  9. Color:# 000;
  10. }
复制代码
六、子类选择器
  1. .box {
  2. color:red;
  3. }
  4. .box1 {
  5. font-weight:bold;
  6. }
  7. .box2 {
  8. font-style:italic;
  9. }
  10. <div class="box">Box</div>
  11. <div class="box box1">Box1</d iv>
  12. <div class="box box2">Box2</d iv>
复制代码
七、其他选择器

(1)、类型选择器
  1. p{color:black;}
  2. a{text-decoration:underline;}
  3. h1{font-weight:bold;}
复制代码
(2)、后代选择器
  1. h2 i{color:red;}
  2. li a{text-decoration:none;}
  3. #main h1{Color:red;}
复制代码
(3)、伪类
  1. a:link{color:blue;}
  2. a:visited{color:green;}
  3. a:hover,a:active{color:red;}
  4. input:focus{background-color:yellow;}
复制代码
(4)、通用选择器
  1. *{
  2. Padding:0;
  3. Margin:0;
  4. }
复制代码
(5)、高级选择器
高级选择器,目前支持还不太完善,所以对于站点功能很重要的任何元素上,应该避免使用这些高级选择器。

1、子选择器和相邻同胞选择器

子选择器
  1. #nav > li {background:url(bg.gif) no-repeat left top;}
  2. <ul id="nav">
  3. <li>Home</li>
  4. <li>Server
  5. <ul>
  6. <li>Development</li>
  7. <li>Consultancy</li>
  8. </ul>
  9. </li>
  10. <li>Contact Us</li>
  11. </ul>
复制代码
相邻同胞选择器:
  1. h1+p{font-weight:bold;}
  2. <h1>Main Heading</h1>
  3. <p>First Paragraph</p>
  4. <p>Second Paragraph</p>
复制代码
2、属性选择器
  1. <strong title=”Cascading Style Sheets”>CSS</strong>
  2. strong[title] {border-bottom: 1px dotted #999;}
  3. strong[title]:hover {cursor:help;background:#ccc}
复制代码
八、代码注释与结构
  1. /*body styles*/
  2. body {
  3. Font-size:67.5%;
  4. }
复制代码
1、添加结构性注释
  1. /*---------------------------------------------------
  2. Version: 1.1
  3. Author: andy budd
  4. Email:info@andybudd.com
  5. Website:http:www.andybudd.com
  6. -----------------------------------------------------*/
复制代码
2.自我提示
  1. /*
  2. Use the star selector hack to give IE a different font size
  3. http://www.info.co.ph
  4. */
复制代码
布局结构是使用有意义的标记。

第七章 CSS 各种滤镜




上一篇:新浪微博discuz插件(全新v2接口兼容X2和X2.5)
下一篇:15天学习DIV+CSS教程汇总导读

大神点评6

非一般感觉明星会员实名认证 发表于 2012-10-3 11:51:59 [DIVCSS] 显示全部楼层
  前排支持啦!
神马都是浮云... ...
晓宁、 发表于 2012-10-3 13:53:39 [DIVCSS] 显示全部楼层
板凳 支持
jingjinxin 发表于 2012-12-15 10:40:36 [DIVCSS] 显示全部楼层
好贴,学习了!感谢楼主分享。
anyta 发表于 2013-1-1 20:35:52 [DIVCSS] 显示全部楼层
没有前几章那么生涩
邦妮儿 发表于 2015-9-19 17:13:39 [DIVCSS] 显示全部楼层
工场是互联网教育践行者,针对互联网企业岗位提供在线直播,视频教程和多种形式的教学服务,帮助学习者快速进入互联网行业,并不断引进国内外先进的在线教育理念和技术,努力打造国内在线学习平台第一品牌
zs3120678757 发表于 2015-9-24 14:44:50 [DIVCSS] 显示全部楼层
谢谢你的分享,学习了
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表