注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

和申的个人主页

专注于java开发,1985wanggang

 
 
 

日志

 
 

第二章 .选择器 (第一部分) 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout  

2013-02-11 02:27:56|  分类: Html/Js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout
学习笔记

第二章 .选择器  (第一部分)
2.1 伪类与伪元素 (pseudo-class pseudo-element)
(pseudo第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页 adj.假的,虚伪的,n.[口]假冒的人,伪君子)
CSS2.1中的伪类:
:link---- 未访问过的链接
:visited----访问过的链接
:hover----鼠标悬停的元素
:focus----获取焦点的元素
:active----激活的元素(例如一个被单击的链接元素)
:first-child----作为其他元素的第一个子元素的元素
:lang()----根据元素的lang属性确定的元素
CSS2.1中的伪元素:
::first-line
::first-letter
::before
::after

    例如:放大每个h1的一个字母到其他字母的2.5倍:
h1::first-letter {font-size:250%}  (目前一个冒号也可)
    伪类使用示例:
li.first-child {border-left: none;}
CSS3中增加的伪类:
:target
:root
:nth-child()
:nth-of-type()
:nth-last-of-type()
:first-of-type
:last-of-type
:only-of-type
:only-child
:last-child
:empty
:not()
:enabled
:disabled
:checked
    目前还没有被广泛的支持
2.3 为目标元素添加样式
    例子:
    锚点(anchor)也可以使用id
<h3><a name="sec2-7">Exceptions</a></h3>
<h3 id="sec2-7">Exceptions</h3>
<html>
<head>
<meta charset="utf-8"/>
<style>
h3:target {color: maroon; background: #FFA;}
</style>
</head>
<body>
<h3>hello</h3>
<p>精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout
目前还没有被广泛的支持</p>
<h3 id="sec2-7">Section 2.7</a></h3>
<p>精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout
     目前还没有被广泛的支持</p>
<a href="http://1985wanggang.blog.163.com/blog/test.html#sec2-7">Section 2.7</a>
<a href="http://1985wanggang.blog.163.com/blog/test.html">没有锚点</a>
</body>
</html>
 第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
    第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
 
     上面为效果对比图

2.3 特殊性 (specificity)
      特殊性是一个选择器“特殊程度”的数字表示,有3样东西经常用来确定选择器的特殊性:
每个元素描述符贡献0,0,1,0;
每个类、伪元素或者属性描述符贡献0,0,1,0;
每个ID描述符贡献0,1,0,0;
例如:
div ul ul li0,0,0,44个元素描述符
div.aside ul li0,0,1,31个类描述符,3个元素描述符
a:hover0,0,1,11个伪类描述符,1个元素描述符
div.navlinks a:hover0,0,2,21个伪类描述符,1个类描述符,2个元素描述符
#title em0,1,0,11个ID描述符,1个元素描述符
h1#title em0,1,0,21个ID描述符,2个元素描述符
       每个级别相互独立,具有单独类描述符的选择器回会比有13个元素的描述符组成的选择器有更高的特殊性。
.aside /*0,0,1,0*/
div table tbody tr td div ul li ol li ul li pre /* 0,0,0,13 */
       另个容易误解的例子:
ul li { font-sytle: normal;}
html li { font-sytle: italic;}
       它们当中那个会赢?它们的特殊性都是0,0,0,2.其实答案是后面写的会赢,与html元素相比ul元素在文档中的位置离li元素更近也不管用。特殊性只是单纯的数值,她不会以任何方式评估页面的结构。所以这个例子中列表元素全部都是斜体,因为当特殊性相同是后声明的规则会胜出。

      第一位的0是用于行内样式(inline style)的,且仅用于行内样式。因此,如果哟下面的样式和标记,则div的背景将会是蓝色。
div#header {background:purple;} /* 0,1,0,0 */
<div id="header" style="background: blue;"> <!-- 1,0,0,0 -->

2.4 重要性
    !important (如果是程序员,需要注意这个标记不代表不重要,!编程中多表示取否定的意思)
a:hover {color: red !important; text-decoration: none;}
     基本上任何重要的声明都会覆盖非重要的声明。
div#gohome a#home {color: red;}
div a {color: green !import;}

<div id="gohome"><a id="home" href="/">Home</a></div>
     第一个规则的特殊性(0,2,0,2) 对应解决颜色冲突没有任何作用,因为!important可以胜过它。
当然,如果我们为第一条规则也添加一个重要标志,那么情况就不同了
div#gohome a#home {color: red !important;}  /* 0,2,0,2*/
div a {color: green !import;}                                /* 0,0,0,2*/
      由于两个颜色声明都为重要的,所以会采用正常的叠加规则来解决冲突,即,特殊性有起作用了,所以链接会变成红色。
      这提醒我们使用!important是要非常小心,因为一旦使用它覆盖其他规则,很快会发现必须再用另外的!important覆盖这条重要的规则,最终会把所有的声明都变成重要的,也就意味着最终没有一个规则是重要的。

2.5 省略简写属性值得关键词时会发生什么
       例子:
strong {font: bold italic small-caps medium/1.2 Verdana, sans-serif;}
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
 
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页


        结果,这样会对strong元素应用1.2倍行高且字体为粗斜体、中等字号、小型大写字母(small-caps medium-size)的Verdana( 或者其他sans-serif字体)样式。
        缩减属性值:

strong {font: medium Verdana, sans-serife;}
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
 
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页



        则结果是中等大小、正常粗细的Verdana字体(如果Verdana不可用,则使用 sans-serif),而粗体消失了。
        省略部分简写属性值得时候,缺失的部分就好使用该属性的默认值。因此当省略了字体粗细(font-weight)、字体样式(font-style)和字体异体(font-variant)时,行高(line-height)实际相当于:
strong {font: normal normal normal medium/normal Verdana, sans-serif;}
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
 
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页


没有声明样式的strong元素
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页

strong {font: normal normal normal small/normal Verdana, sans-serif;}
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页

   注意规则覆盖:
   body { background:#FCC url(/i/pagebg.gif) 10px 25% no-repeat fixed;}
   body { background: url (i/body-bg.gif); }
    两条作用结果页面会有一个新的从左上角的背景图像,且当页面滚动时会随着页面滚动。这是因为第二条规则等价于:
   body { background: transparent url(i/body-bg.gif 0 0 repeat scroll; }
   如果确实想要这样的效果可以这样做,但似乎目的是把图片替换。那这种情况下只需设置图片属性即可,如:
    body { background-image: url(i/body-bg.gif); }
    
    margin: 1em;             margin: 1em 1em 1em 1em;
    padding: 10px 25px margin:10px 25px 10px 25px;
    border-color: red green blue;    border-color: red green blue green;
   这些值顺序上下左右 TRBL(top-right-bottom-left),,记不住的麻烦(TRouBLe);

2.6 选择性覆盖简写属性
    可以用简写属性声明80%, 然后再另一处通过覆盖实现另外20%
    例子:
    假设想实现一个具有3px的点线边框,其中3条是黑色的,而第四条边是红色的,可以用如下声明:
    border: 3px dotted black;
    border-left-color: red;
    如果对浏览器默认的字号满意,可以这么写:
    h1, h2, h3, h4, h5, h6 { font-weight: normal; font-sytle: italic; font-family: Helvetica, sans-serif; line-height: 1.5;}
    另一方面,如果想自己设置标题字号,可以换个思路:
    h1, h2, h3, h4, h5, h6 { font: italic; 100%/1.5 Helvetica, sans-serif;}
    h1 { font-size: 225%;}
    h2 { font-size: 185%;}
    h3 { font-size: 140%;}
    /* ... ... */
    当使用这种选择性覆盖时,最好确保用来覆盖的简写属性的属性出现在简写属性之后。只有通过这种方式,当选择器具有相同的特殊性时候,用来fuga简写属性的属性才能胜过相应的简写属性。
2.7 通用选择  (*)
    选择器中 星号 * 使用
    * { color: blue;}            
   <div>
    <h1>Hey-ho!</h1>
    <p>I'm a <em>paragraph</em>. </p>
    <ol>
    <li>Uno</li>
    <li>Deux</li>
    <li>Drei</li>
    </ol>
    </div>
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
 
    就这么简单:
    div * {border: 1px solid red;}
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
 
  结果应该和这样写效果一样:
  div h1, div p, div em, div ol, div li {border:1px solid red;}
  
   区别,特殊性:
       * { color: blue;}     /* 0,0,0,0 */
    div * {border: 1px solid red;} /* 0,0,0,1 */
    div h1, div p, div em, div ol, div li {border:1px solid red;}  /* 0,0,0,2 */

2.8 ID还是类
     简单答案:对应页面中可能不止出现异常的“标签”使用类,对应任何只出现一次的使用ID.
     经典例子: 页头(header) 和页脚(footer),前提任何页面都只有一个页头和一个页脚。类就比较分散,比如可以用more表示“详细信息”链接,用tabs表示一组标签导航选项卡,或者用odd表示奇数表格行。
     例子:
     #header {background: black;}
     #header a {color: white;}
     
<style>
#header > div {margin:auto 50px;}
#content {margin:auto 50px;}
    /*全站样式表中*/
     #header {background: black;}
     #header a {color: white;}
 /*想将页头设置成浅灰色,链接有一个舒缓的暗绿色*/
 #header {background: #BBB;}  /* 浅灰色 */
 .navlink a {color: #257000;} /* 暗绿色 */ /*由于#header a 有更高的特殊性,所以页头链接仍然是白色*/
</style>
<div id="header">
<div>
<h1> SuperMuscleGro Works!</h1>
<div class="navlinks">
<a href="http://1985wanggang.blog.163.com/blog/#">Home</a>
<a href="http://1985wanggang.blog.163.com/blog/#">Science</a>
<a href="http://1985wanggang.blog.163.com/blog/#">Magic</a>
<a href="http://1985wanggang.blog.163.com/blog/#">Contact</a>
</div>
</div>
</div>
<div id="content">
    <h1>Hey-ho!</h1>
    <p>I'm a <em>paragraph</em>. </p>
    <ol>
    <li>Uno</li>
    <li>Deux</li>
    <li>Drei</li>
    </ol>
 </div>
  第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页 
               页头毫无吸引力的链接
<style>
#header > div {margin:auto 50px;}
#content {margin:auto 50px;}
    /*全站样式表中*/
     #header {background: black;}
     #header a {color: white;}
 /*想将页头设置成浅灰色,链接有一个舒缓的暗绿色*/
 #header {background: #BBB;}  /* 浅灰色 */
 .navlink a {color: #257000;} /* 暗绿色 */ /*由于#header a 有更高的特殊性,所以页头链接仍然是白色*/
 #header .navlinks a , .navlinks a {color: #257000;} /* 暗绿色 */
</style>
<div id="header">
<div>
<h1> SuperMuscleGro Works!</h1>
<div class="navlinks">
<a href="http://1985wanggang.blog.163.com/blog/#">Home</a>
<a href="http://1985wanggang.blog.163.com/blog/#">Science</a>
<a href="http://1985wanggang.blog.163.com/blog/#">Magic</a>
<a href="http://1985wanggang.blog.163.com/blog/#">Contact</a>
</div>
</div>
</div>
<div id="content">
    <h1>Hey-ho!</h1>
    <p>I'm a <em>paragraph</em>. </p>
    <ol>
    <li>Uno</li>
    <li>Deux</li>
    <li>Drei</li>
    </ol>
 </div>
第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
           页头引入注目的链接

 换成类,即:
 <div class="header">
全站样式表中:
 .header {background: black;}
 .header a {color: white;}
联系信息页面样式表中:
 .header {background: #BBB;}  /* 浅灰色 */
 .navlinks a {color: #257000;} /* 暗绿色 */
最终就是漂亮的绿色文字链接。
<style>

.header > div {margin:auto 50px;}
.content {margin:auto 50px;}
    /*全站样式表中*/
     .header {background: black;}
     .header a {color: white;}
 
/*想将页头设置成浅灰色,链接有一个舒缓的暗绿色*/
 .header {background: #BBB;}  /* 浅灰色 */
 .navlinks a {color: #257000;} /* 暗绿色 */ /*由于#header a 有更高的特殊性,所以页头链接仍然是白色*/
</style>
<div class="header">
<div>
<h1> SuperMuscleGro Works!</h1>
<div class="navlinks">
<a href="http://1985wanggang.blog.163.com/blog/#">Home</a>
<a href="http://1985wanggang.blog.163.com/blog/#">Science</a>
<a href="http://1985wanggang.blog.163.com/blog/#">Magic</a>
<a href="http://1985wanggang.blog.163.com/blog/#">Contact</a>
</div>
</div>
</div>
<div class="content">
    <h1>Hey-ho!</h1>
    <p>I'm a <em>paragraph</em>. </p>
    <ol>
    <li>Uno</li>
    <li>Deux</li>
    <li>Drei</li>
    </ol>
 </div>
 第二章 .选择器 学习笔记 精彩绝伦的CSS,《Smashing CSS》 Professional Techniques for Modern layout - 和申 - 和申的个人主页
     页头引入注目的链接
     所以,大部分或者全部标签都应用类。
     另外,如果没法确定什么时候标签会从一个变成多个。页头(header)就是个最后的例子,因为一个页面中可能有多个“页头”。如果觉得奇怪可以的话,可以想想新闻网站。每个部分都有自己的页头。页脚也一样。因此一贯使用类就很合理了。
     如果可以确定某个元素是惟一的,并且永远不会重复。或者,希望用ID给选择器赋予更高的特殊性,以便轻松地使它胜过其他选择器。不过ID对应脚本,链接目标,和其他CSS之外的东西都至关重要,所以使用ID需要小心。
     
2.9 ID与类共用
    有一个唯一的元素并且它还是一大类元素中的一分子。例如,假设站点侧边栏中有一小堆面板,每个面板都有一个框并且具有特定的颜色和字体,但是每个面板都有独特的地方,比如不同的背景图等。
   <div clas="panel" id="weather">
   <div clas="panel" id="stocks">
   <div clas="panel" id="latest">
    CSS:
   .panel {
           border:1px solid silver;
           background: #EEE top left no-repeat;
           color: #333;
           font: x-small sans-serif;}
   #weather {background-image: url(/pix/panel-weather.jpg);}
   # stocks {background-image: url(/pix/panel- stocks.jpg);}
   # latest {background-image: url(/pix/panel- latest.jpg);} 
   或者将其中两个组合成为一个选择器:
   .panel #weather {font=weight: bold;}
   #latest.panel {color: #511;}
   它们的书写顺序无关紧要,不必跟他们在HTML中出现的顺序一致。


2.10 多类
   可以用任意多的词组成一个有空格分隔的列表,将其作为该属性的值。即,可以给元素应用多个类。
    比如前面的例子:
    <div class="panel weather">
    <div class="panel stocks">
    <div class="panel latest">
    调整下css:
    .panel {
           border:1px solid silver;
           background: #EEE top left no-repeat;
           color: #333;
           font: x-small sans-serif;}
   .weather {background-image: url(/pix/panel-weather.jpg);}
   .stocks {background-image: url(/pix/panel- stocks.jpg);}
   .latest {background-image: url(/pix/panel- latest.jpg);} 
   或者将其中两个组合成为一个选择器:
   .panel #weather {font=weight: bold;}
   #latest.panel {color: #511;}
    类在html源代码中书写顺序与样式表中的书写顺序无关,即.panel.weather 的效果与.weather.panel的效果一样。无论两个类在html源代码中书写顺序如何,特殊性也都是一样的。,他们在源代码中是否被其他类目分隔开也是无关紧要的。
     <div class="weather alert tornado watch panel">
     此时通过.panel .weather 和.weather .panel 都可以选中该元素。
     注意事项:IE6及其早期版本不识别样式表中多个类的写法,当使用 .panel .weather时,IE6只会识别成 .weather .尽管在HTML 中仍然可以使用多个类,并且可以在CSS中定位这些类,但是每次只能使用一个类。因此, .weather 和 .panel 都可以在IE6下很好地匹配之前例子中的标记,只是IE6会假定 .weather .panel给元素应用了一个包含panel这个词的类,这可能不是你想要的结果。

2.11 简单的属性选择
     通过元素已有属性选择元素,或者基于元素属性值得某个方面进行选择。
      例如:
      a[href]
      该选择器会选择所有含有href属性的a元素,不会选择没有href属性的a元素,命名锚点(例如<a name="top">)。它基本是a:link, a:visited的简化版。例如应用:
      a[href] {color:green}
      可以选中<a href="http://1985wanggang.blog.163.com/blog/#">和 <a href="http://w3.org/">
       如果想选中特定的url:
      a[href="http://w3.org/"]  { font-style: italic;}
   只会选择属性值中http://w3.org/的链接,  如果有这样的链接http://www.w3.org则不会选中。
   必须精确匹配才行。
   
2.12 类的属性选择
    div[class~="panel"]
     ( ~ ) 以空格分隔的类名列表中包含该词的元素
    例如:
    img[alt~="figure"]               任何alt属性文本中包含"figure"的图像元素
    table[summary~="data"]    任何summary属性文本中包含"data"的表格元素
    * [title~="2009"]                  任何title属性文本中包含"2009"的元素

2.13 ID还是属性选择器
    p#lead-in {font-weight: bold;}  /* 0,1,0,1 */
    p[id="lead-in"] {font-weight: normal; font-style:italic;} /* 0,0,1,1 */
    得到的是lead-in段落同时拥有加粗和斜体效果.










  评论这张
 
阅读(686)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016