css权威指南读书笔记

今天翻手机，翻到了许久之前看css权威指南时的笔记，遂移到博客中来。

1.属性选择器
p.one class名为one的p元素
p[class][name] 含有class和name属性的p元素
p[class="one"][name="two"] class属性为one且name属性为two的p元素
p[class~="one"] class属性包含one的p元素
p[class^="one"] class属性以one开头
p[class$="one"] class属性以one结尾
p[class*="one"] class属性包含one
p[class|="one"] class属性为one或以之开头

2.伪类
链接的伪类:link :visited :focus :hover :active
:lang(fr) 类似于|=，意为语言为法语的元素

3.伪元素
:first-letter
:first-line
:before {content:"前面插入的内容";color:red;}

4.特殊性值
ID # 0,1,0,0
Class 0,0,1,0
P标签名 0,0,0,1
通配符* 0,0,0,0
伪类 特殊性值没有

5.字体变形
font-variant:small-caps 小型大写字母
text-transform:uppercase 字母大写
capitalize 首字母大写
字体下载
@font-face{font-family:"name";src: url("www");}

6.文本格式
p{text-indent:3em;}段落首行缩进3字符
text-align:center;居中
word-spacing:1em文字间隔
letter-spacing:1em 字母间隔

7.DOM可见性
visibility 属性
hidden 元素不可见，但保留在文档中的位置（该属性可继承，如果要求部分子元素显示要显式声明此部分visibility:visible）

而overflow的hidden,元素不可见的同时也不会占据文档流

8.定位
Relative 相对定位元素
当发生冲突时bottom=-top值，right=-left

Absolute绝对定位元素
如果不定义height、width；left、right的值将影响元素大小（拉伸/压缩）

9.表格
Border-collapse:collapse
用于表格单元格中间空隙合并

table{border-space:1px 3px;}
表单元格之间x轴空隙1px；y轴空隙3px。

li{list-style-image:url(...);}
为列表标志改变默认样式（改用图片）

li{list-style-position:inside;}
将标志（小圆点）置于列表项内部，默认值是outside，所以我们通常看到的小圆点是在外面的

10.a标签手势
a:hover{cursor:pointer;}
该属性使得光标形状变成“手”
crosshair十字准星

11.边框轮廓

outline-style
轮廓样式，类似于元素边框，可以包在边框外面