【CSS】文档向学习笔记

（这是15年初学css时记的笔记）

选择器

#简单选择器

标签选择器

直接把标签名加前面。

类选择器

用.+ className选择。className必须以字母开头，区分大小写。可以出现多次。

id选择器

用#+idName选择。只出现一次。

通配符选择器

用*可以选择页面中的所有元素。

属性选择器-[att]

用[]来选择具有某些属性的标签选中。
如[disabled]、[type=button]。
id选择器就是属性选择器的一个特例#nav{} == [id=nav]{}

属性选择器-[att~=val]

用[att ~= val]来选择属性中包含某些值的标签，只要存在一个值就会被选中，值与值之间用空格来分隔。
类选择器就是这种属性选择器的一个特例.sports{} == [class~=sports]{}

属性选择器-[att|=val]

用[att|=val]来选择属性中具有某些字符串片段的标签，只要字符串片段匹配到就会被选中。一般用在<p lang="">这种标签中。

属性选择器-[att^=val]

用[att^=val]来选择以属性中以某些字符开头的标签。例如要分开选择a标签中http地址与锚点两种不同的属性可以用[herf^="#"]来选中。

属性选择器-[att$=val]

用[att$=val]来选择属性以某些字符结尾的标签。比如a标签连接到了一个doc文档和一个pdf文档，如果要区分的选择可以用[herf$=pdf]来选择。

属性选择器-[att*=val]

用[att*=val]来选择属性中包含某些字符串的标签。
比如要选中a标签中game频道与sport频道的标签，可以用`[href*=“game.163.com”]。

伪类选择器

用a:link如果选择a标签中的链接的标签。
用a:visited选择已经点进去之后的链接。
用a:hover选择鼠标移上去的链接。
用a:active选择鼠标点击时的链接。

:enabled选择元素可用的状态。
:disabled选择元素不可用的状态。
checked选择单选框复选框这种用户选中的元素。

用li:first-child选中一组子元素中的第一个。
用li:last-child选中一组子元素中的最后一个。
用li:nth-child(even)选中所有偶数项的子元素。
用li:nth-child(3n+1)选中4,7……位的子元素。
用li:nth-last-child(3n+1)选中倒数第4,7……位子元素。

用:only-child选中只有一个子元素的父元素。
用:first-of-type选中一类子元素中出现的第一个。
用:last-of-type选中一类子元素中的最后一个。
用:nth-of-type(even)选中一类子元素中的偶数项元素。
用:nth-last-of-type(2n)选中倒数的偶数项子元素。

用span:only-of-type选中一组父标签中仅有的那个span。

伪元素选择器

如果要凸显出类中的某个元素就要用伪元素选择器。
推荐使用两个冒号。

::first-letter

::first-letter{color:red;}选择第一个元素。

::first-line

::first-line{}用于选择页面中第一行。

::before/after

::before{content:"…"} after{content:"…"}
这两个伪元素选择器用于在某些元素之前/之后插入一些内容。

::selection

::selection伪元素选择器用于被选中的内容样式。可以更改选中内容的颜色什么的。
##组合选择器
###后代选择器
如果只想选择某一个div中全部的h2,可以用后代选择器。

<div class="main">
	<h2>标题一</h2>
	<div>
		<h2>标题二</h2>
		<p>段落一</p>
	</div>
</div>

.main h2{color:red};会将class为main的div中所有的h2选中。

子选择器

如果只想选择这个div子类中的h2选中，使用.main>h2{},这样只会选中main这个div下一级子类的h2。
###兄弟选择器

<div>
	<h2>标题</h2>
	<p>段落一</p>
	<p>段落二</p>
	
</div>

如果要选中这段代码中两个紧挨着中的某个标签的样式，使用兄弟选择器。注意这个紧挨着的关系不是嵌套……
比如要只选择h2下的第一个p，使用h2+p{color:red;}
如果要选择h2下的所有p，使用h2~p{color: red;}

选择器分组

如果有好多标签要套用统一的样式，可以这么做：

h1,h2,h3{color:gray; font-family:sans-serif;}

继承

在母元素上设置的样式大部分可以自动继承到子元素。但是有几个比较常见的例外：background、border、position

继承的优先级

计算方法
a = 行内样式
b = Id选择器的数量
c = 类、伪类和属性选择器的数量
d = 标签选择器和伪元素选择器的数量
a>b>c>d 依次降低。

如果优先级相同，后出现的会覆盖掉之前出现的。
改变应用样式的先后顺序的几种方法：

1. 改变同等级选择器出现的先后顺序。
2. 提升选择器的优先级。
3. 在某一项属性之后加!important关键字，这样就会无视优先级。

文本

font-size 文字大小

px、百分比、em什么的。

font-family 字体名称

指一类字体，较为常用的只有两种：serif、sans-serif（衬线体和非衬线体）。可用逗号分隔取多个值。

font-weight 字体加粗

值有normal普通、bold加粗。一般字体都支持400（普通），700（加粗）这两档。

font-style 字体倾斜

值有normal、italic倾斜、oblique当字体没设置斜体时强制倾斜，oblique一般不用。

line-height 行距

值有normal、number一般由浏览器决定，1.1~1.2左右、lengthpx,em、百分比。默认行高是30px。如果设置行高为一个数字，行高则由字体大小的px乘以这个数字设置。

font 快速设置的font中的多个样式

设置顺序是：倾斜/加粗（可选） 字体大小（必填） 行高（可选，添加前必须在前面添加一个“/”） 字体（必填，可填多个值）。如果顺序错误或必填项缺少，font设置将不起作用。

text-align 字体对齐方式

left  right //左对齐  右对齐
center  justify //居中  两端对齐

vertical-align 垂直对齐

vertical的属性

baseline	位于基线
sub	下标
super	上标
top	对齐到行高最高点
text-top	对齐到font-size最高点
middle	居中
bottom	对齐到行高最低点
text-bottom	文本最低点
``	以行高为参照的百分比
``	以baseline为起点，向上的px、em

text-indent 文本缩进

``	可填em、px(如果是正数向后缩进)
``	以一行容器的宽度为单位缩进百分比(正数向后缩)

white-space 空行、换行处理

用于设置换行不要保留，空格、tab要不要合并，是否要自动换行。
pre-wrap会保留换行和空格，同时会自动换行，所以比较常用。

	换行(New Lines)	空格tab	自动换行(Text Wrapping)
normal	collapse(折叠收缩)	collapse	wrap(自动换行)
nowrap	collapse	collapse	no wrap(行满不换行)
pre	preserve	preserve	no wrap
pre-wrap	preserve	preserve	wrap
pre-line	preserve	collapse	wrap

word-wrap 文本换行

normal	不换行
break-word	自动换行，中断单词

word-break 断词

normal	单词中间不允许断掉
keep-all	单词都不break
break-all	任意两个词都可以break掉

text-shadow 文字阴影

文字阴影可以不填。
<length>后接2到3个值。分别是x，y，虚化值。
<color>可选，不填就用字体颜色。

text-decoration 文本修饰

修饰可以不填。
underline、overline、lind-through三个不冲突，分别是下划线上划线中划线。

text-overflow 文字溢出

这个属性用来设置一行文字不能完全在一行显示时后面接省略号的效果。如果使用了text-overflow一般来说后面两个属性也必须如下设置：

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

cursor 光标设置

可以用图片自定义鼠标形状，可以使用多个图片。
后面可以接如下值[auto | default | none | help | pointer | zoom-in | zoom-out | move]
auto是自动处理，未设置时的默认样式。
default是普通的箭头光标。
none让光标消失。
help带个问号。
pointer是点连接的那个手指形状。
zoom-in/out是缩小，放大镜形状。
move分向两边的箭头，上下的箭头。

当自定义图片失效是缺省使用pointer。
e.g.cursor:pointer; cursor:url(xx.cur), pointer;

inherit 强制继承

不管父元素是什么，让子元素继承父元素的属性值。

position

有多种定义方式可以设定标签的位置如何突破流的限制在全屏位置设置。有四种属性：

absolute 绝对定位

元素原来的位置就不会保留，需要另外去指定原来的位置。
##relative 相对定位
这会使元素偏移某一个距离，仍然保持原来的形状，它原来占据的空间仍然会保留，这与absolute相反，但是会偏移一个距离。

static 静态定位

元素框