CSS工作原理学习(2)

伪类

接着上次的从伪类开始了。伪类分UI伪类和结构化伪类。其中UI伪类会在html元素处于某个状态时,为该元素应用css样式,比如鼠标悬浮时候什么的。结构化伪类会在标记中存在某种结构上的关系时,为相应元素应用css样式。

1.UI伪类

  • 链接伪类:共有4个,因为链接始终会处于4种状态中的一个。 >>Link,此时,链接就在那儿等着用户点击。 >>Visited,用户此前点击过这个链接。 >>Hover,鼠标指针正悬停在链接上。 >>Active,链接正在被点击(鼠标在元素上按下,还没有释放)。
  • focus伪类:e:focus。表单中的文本字段在用户单击它时会获得焦点,然后用户才能在其中输入字符。input:focus {border:1px solid blue;}为该字段加蓝色边框,让用户明确知道输入的字符会在哪里。
  • target伪类:如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以用:target伪类选中它。

2.结构化伪类

结构化伪类可以根据标记的结构应用样式,比如根据某元素的父元素或前面的同胞元素是什么。

  • :first-child :last-child,代表一组同胞元素中的第一个和最后一个。
  • nth-child,e:nth-child(n),n里面写数字,代表第几个。

伪元素

  • ::fisrt-letter伪元素,p::first-letter {font-size:300%;},达到首字母放大的效果。酒不用手动给字母加标签。
  • ::first-line伪元素,可以选中第一行。
  • ::before ::after,可用于在特定元素前面或后面添加特殊内容。

继承

css中大部分继承是跟文本有关的,比如颜色,字体,字号。但是有些属性并不能继承,涉及元素盒子的定位和显示方式,比如边框,外边距,内边距。字体和文本样式是可以继承的,所以用相对字体单位时(em,ex,百分比)要格外小心。如果标签的字体大小是80%,而后代也设置成80%,那么最终将是64%。

层叠

层叠就是层叠样式表中的层叠,是一种样式在文档层次中逐层叠加的过程,让浏览器面对某个标签特定属性值的多个俩元,切丁最终使用哪个。层叠时css的核心机制

1.样式来源

  • 浏览器默认样式表
  • 用户样式表
  • 作者链接样式表(按照它们链接到页面的先后顺序)
  • 作者嵌入样式
  • 作者行内样式

2.层叠规则

  • 找到应用给每个元素和属性的所有声明。
  • 按照顺序和权重排序。如果匹配的属性在下一个来源也有定义,则更新该属性值。
  • 按特指度排序。specifictiy,表示一条规则有多明确。对每个选择符按ICE公式计算。比如body p#largetext ul.mylist li,就是114。 >> 选择符中有个id,就在i的位置上加1; >> 选择符中一个类,就在c的位置上加1; >> 选择符中有个元素(标签),就在e的位置上加1;
  • 顺序决定权重。如果两条规则都影响某元素的同一属性,而且特指度也相同,则位置靠下(或后声明)的规则胜出。

查理简单层叠要点:

  • 包含id的选择符􏲔过包含类的选择符,包含类的选择符􏲔过包含标签名的选择符。􏵙
  • 如果几个不同源都为同一标签的同一属性定义了样式,行内式胜过嵌入样式,胜过链接样式。在链接样式表中,具有相同特指度的样式,后声明的胜过先声明的。
  • 设定的样式胜果继承的样式,此时不考虑特指度。

规则声明

css属性值主要分三类:文本值,数字值,颜色值。

  • 文本值。所有css属性都有文本值。比如visibility的visible和hidden值等等。
  • 数字值。用于描述元素的各种长度,包括绝对值和相对值。相对值有em,ex和百分比。其中百分比很适合设定被包含元素的宽度,此时的百分比就是相对于宽度而言的。把html结构元素的宽度设定为body宽度的百分比,时流式设计的关键所在。这种布局设计可以随着用户调整浏览器窗口大小而成比例地伸缩。
  • 颜色值。 >> 颜色名。比如red,aqua等。 >> 十六进制颜色。前两位定义红色,中间绿色,后面时蓝色。 >>RGB值。比如rgb(0,255,0) >>RGB百分比值。 >>HSL。色相,饱和度,亮度。记住红橙黄绿蓝靛紫,色相值分别是0,35,60,125,230,280,305。 >>Alpha通道。用于设置颜色的不透明度(能够透过多少背景)。

这是更新的网页。里面新加的内容是伪类的应用,在链接未被点击时候是黑色,点击之后是灰色,鼠标悬停有下划线,点击时候是红色。然后为了让这个链接和下面的图片有一个距离,加了个div在a上让它变成block。然后给block加了margin。
链接在这里哟!~
http://7xipcz.com1.z0.glb.clouddn.com/20150514/css_2.10.html


备注几个:
sublime注释: control+/
关掉标签页:点击鼠标滚轴
打开刚关掉的网页:command+shift+T

2015-05-14 22:3051