《CSS mastery》 读书笔记

 

又翻了一下之前的读书笔记,再重温了忘掉的细节。最近一年的工作,由于有重构岗位的同学负责CSS的编写,虽说还是接触到,但毕竟不写好久了,有些东西还是忘记了,例如选择器的权重计算细节。这个笔记只是部分,后半部分快速浏览了,没写笔记。

 

1、元素命名规则
  • 类名或者ID以元素是做什么的来命名,不要以元素的外观表现来命名。
  • 类名或者ID全部小写,并用连字符号或许下划线分隔。(.add-class)
2、伪类
  • 链接伪类: :link和:visited
  • 动态为例: :hover :active :focus
    • 设置:fouces与:hover相同的样式,让使用键盘来访问元素(更多时候是a标签)时,表现就跟用鼠标移到该元素上的效果相同
    • 用途:
      • <a></a>使用:link,:visited,:hover,:active,:focus使链接的效果更丰富;:link指未访问<a>标签前
        • 注意:<a>中使用伪类是,必须注意伪类套用样式的顺序,不然会导致后面的伪类覆盖了前面的伪类的情况
        • 顺序为:a:link,a:visited,a:hover,a:focus,a:active(记忆:LVHFA)
        • 习惯:LV一般一起设置,HFA一起设置
        • eg: a:link,a:visited{text-decoration:none;} a:hover,a:focus,a:active{text-decoration:underline;}
      • 表格行<tr></tr>中使用:hover伪类,悬停的该行整行变色
      • 提交按钮上使用:active
      • 输入框中使用:focus,使输入时获得丰富效果
  • 注意:IE7及以下的版本不支持除链接外的其他元素上使用伪类选择器!
3、选择器
  • 常用选择器:
    • 类型(元素、简单)选择器
    • ID选择器
    • 类选择器
    • 伪类
  • 通用选择器: *(通配)
  • 高级选择器:
    • 子选择器、相邻同胞选择器
      • 子选择(IE7以上才支持): #nav>li 选择#nav下的直接(第一个)li子元素,注意与通用选择器(#nav li)的区别
      • 注意这个选择器与后代选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择
      • 相邻同胞选择(定位位于同一个父元素下某个元素之后的一个元素): h2+p 选择h2后面紧跟的一个p元素
    • 属性选择器(IE6不支持)
      • eg: [id="header"]{ color:red;}(指拥有id=header属性的所有元素 或者 div[title]{}(指选择有title属性的div元素)
  • 伪元素选择器:
    • first-letter、first-line、before、after
    • eg: p :first-letter{color:red;} div:after{content:"a";}
4、层叠和特殊性
  1. 层叠:处理同一个元素可能有一个或多个样式规则,层叠给每个规则分配一个重要度。
  2. 特殊性:选择器的特殊决定规则的次序。
    1. 规则是,给每种选择器分配一个数字值,然后将规则的每个选择器的值加起来,计算出该数值来,按照最高数值的规则来应用样式
    2. style行内属性的规则特殊性总是高于其他选择器(因为其特殊性为1,0,0,0)
    3. 两个规则的特殊性相同,后定义的规则优先
    4. 选择器特殊性分为4个等级a,b,c,d(特殊性:a,b,c,d)
      1. style行内样式,a=1;
      2. b等于ID选择器的总数
      3. c等于类、伪类和属性选择器的数量
      4. d等于类型选择器和伪元素选择器的数量
        • eg: style="" 特殊性:1,0,0,0 如果基数是10,则特殊性是1000
        • eg: #wrapper #content 特殊性:0,2,0,0 如果基数为10,则特殊性是200
      5. 最终计算规则的特殊性时,基数默认不是指定为某个特定值的,如果选择器数量不多,可以指定基数就是为10来计算
5、继承
  1. 概念:应用样式的元素的后代会继承样式的某些属性。例如字号和颜色
  2. 注意和层叠区分开来
  3. 同时,继承而来的样式特殊性为空!直接应用于元素的样式总能覆盖继承而来的样式。

《CSS mastery》 读书笔记,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。