CSS优先级是如何工作????
将优先级表示为用逗号隔开的四个数字就会相当简单,比如:1, 1, 1, 1 或0, 2, 0, 1
第一个数字(a)通常就是0,除非在标签上使用style属性;
第二个数字(b)是该选择器上的id的数量的总和;
第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red]);
第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等);
伪类:
通用选择器(*)是0优先级;
插入样式表的方法有三种:
- 外部样式表
- 内部样式表
- 内联样式
- 多重样式
层叠次序
当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 head 标签内部)
- 内联样式(在 HTML 元素内部)
CSS Text(文本)
文本修饰:text-decoration 属性用来设置或删除文本的装饰,主要是用来删除链接的下划线
文本转换:指定在一个文本中的大写和小写字母
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进:用来指定文本的第一行的缩进, text-indent 属性
文本间隔:word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的
letter-spacing | 设置字符间距 |
line-height | 设置行高 |
text-align | 对齐元素中的文本 |
text-decoration | 向文本添加修饰 |
text-indent | 缩进元素中文本的首行 |
text-shadow | 设置文本阴影 |
text-transform | 控制元素中的字母 |
unicode-bidi | 设置或返回文本是否被重写 |
vertical-align | 设置元素的垂直对齐 |
white-space | 设置元素中空白的处理方式 |
word-spacing | 设置字间距 |
CSS Fonts(字体)
sans-serif字体被认为是比serif字体容易阅读
italic 和 oblique 的区别
- 斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。
- 倾斜(oblique)文本是正常竖直文本的一个倾斜版本。
使用 em 单位代替像素
使用百分比和EM组合
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
四个链接状态是:
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻