CSS的分类和优先级
- 浏览器缺省设置
- 外部样式表(
<head>标签内部)，定义在单独css文件中，由<link>标签引用，
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
- 内部样式表(
<head>标签内部，由<style>标签包围)
<style type="text/css">
hr {color: sienna;}
</style>
- 内联样式表，在HTML元素内部使用
style属性,style可以包含任何css属性。
<p style="color: sienna; margin-left: 20px">
优先级 4>3>2>1 ;
CSS基本语法
selector {
property1: value1;
property2: value2;
...
}
- selector被称为选择器，代表要被渲染的元素，可能是元素HTML名称、id值或者class值；
- 可以指定多个选择器，用逗号隔开; 如果是空格隔开，表示派生选择器，即空格前后的元素具有父子关系；
选择器分类
- 元素选择器，即直接使用html元素作为选择器，可以用
*表示所有元素。 - 类选择器，又叫class选择器，顾名思义该选择器作用于指定的class元素，使用
.class表示。类选择器可以和元素选择器结合使用，如p.class1，表示class='class1'的p元素。 - ID选择器，作用与指定
id的元素，使用#id表示。 - 属性选择器，作用于特定属性的元素,语法:
可选的元素名[属性名],还可以根据属性值选取特定元素，如a[href='http://www.bb.com']，选取href为’http://www.bb.com’的a标签。其他高级语法：~=部分匹配，即匹配词列表中某个词；^=匹配开始;$=匹配结尾；*=包含子串； - 后代选择器或派生选择器，使用空格隔开，从左至右为祖先后代关系。
- 子元素选择器，使用
>隔开父子元素。 - 相邻兄弟选择器，使用
+链接，但只选择右边的元素，两个元素必须相邻，且有共同的父元素。
CSS样式
背景
背景色：
background-color: red;
背景图像：
background-image: url("img_file");
背景重复：
取值：repeat-x,水平重复; repeat-y,垂直重复; no-repeat,不重复.
background-repeat: repeat-y;
背景定位：
可能取值: top, bottom, right, left, center，百分比, px(相对于元素左上角内边距的偏移量); 分别表示垂直和水平方位，所以最多赋两个值，一个表示垂直，另一个表示水平，如果只赋一个值，另一个默认center；
background-position: top;
背景关联：
背景图是否随视图窗口滚动。
取值：scroll(默认), fixed, inherit, initial, local, unset.
background-attachment: fixed;
以上所有背景相关属性都可以统一放入background属性赋值，用空格隔开。
文本
文本缩进：
text-intent，可以赋值em或百分比(相对于父元素)。
水平文本对齐：
text-align，可能值left,right,center,justify等，只影响文本，不影响元素本身。
字母间隔：
letter-spacing,影响单词的每个字母或者字符之间的间隔，可以使用em,px,百分比等多种单位；另外word-spacing定义单词之间的间隔，但是这里的单词并不是传统意义的单词，只要有空白符隔开，都会被认为是单词，所以慎用word-spacing。
大小写转换：
text-transform，取值：
- none，默认，不转换
- uppercase, 大写
- lowercase,小写
- captalize，首字母大写
文本装饰：
text-decoration，取值：
- none，默认，无装饰
- underline, 下划线
- overline，上划线
- line-through，贯穿线
文本颜色：
color
字体类型：
font-family,CSS 定义了 5 种通用字体系列：
- Serif 字体
- Sans-serif 字体
- Monospace 字体
- Cursive 字体
- Fantasy 字体
具体可参考：http://www.w3school.com.cn/css/css_font-family.asp
字体风格:
font-style,可能值，
- normal, 正常显示
- italic, 斜体
- oblique, 文本倾斜
italic和oblique在大部分场景下显示效果相同，只有部分字体本身不支持倾斜的话，italic是无效的，所以只能使用oblique。
字体加粗:
font-weight，取值：
- 100~900，九级粗度
- bold, 相当于700
- normal, 相当于400
- bolder, 比继承的粗度更粗
- lighter, 比继承的粗度更细
字体大小:
font-size, 可以使用em,px,百分比,smaller,larger等定义字体大小，其中em是相对大小单位，与实际大小的对应关系为: 实际大小= 继承来的大小*em。
链接
链接<a>有四种状态：
- a:link, 普通，未被访问的状态
- a:visited, 已访问
- a:hover, 鼠标指针位于链接上方
- a:active, 链接被点击的时刻
其中冒号前面的a也可以换成a的#id或者.class，为某个或某些特定的链接指定样式。可分别为这几种状态指定color,background,font-family,text-decoration等样式，但是实测时发现color值不能使用关键字，如red,green等，要使用十六进制表示的RGB值，如#00FF00.
列表
列表即有序列表<ol>和无序列表<ul>,列表样式包括：
list-style-type:square,列表项的标志符号，也可以使用list-style-image:url()自定义图像；list-style-position, 列表符号的位置, 默认outside，当设置是为inside的时候，列表项整体会后移。
表格
border系属性用于设置<table>、<td>、<th>、<tr>等边框，包括样式(border-style)、颜色(border-color)、厚度(border-width)、是否单线(border-collapse)、边框与边框之间的间距(border-spacing，当border-collapse设置为collapse时，看不到效果).
表格边框默认不显示(border-style为’none’)，要设置样式为其他值后才会显示。
除此之外还可以设置以下表格相关属性：
pading: 内边距margin: 外边距text-align和vertical-algin: 文本对齐
轮廓
在元素的最外围画一层指定样式的边框
相关属性:
outline-coloroutline-styleoutline-widthoutline
定位
CSS定位有三种：普通流、浮动和绝对定位。
定位属性:position，取值：
static: 默认，无定位，元素框正常生成。relative: 相对定位，相对于其本来位置偏移。absolute: 绝对定位，相对于最近已定位的祖先元素，可能覆盖页面上的其他元素，可以通过z-index控制边框的对方次序。fixed: 相对于浏览器窗口定位，即元素不会随浏览器滚动。
除static外，其他属性值还可与top、bottom、left、right配合使用，表示具体的偏移值。
浮动：float
浮动框不在文档的普通流中，他可以想做或者向右移动，直到碰到它的包含框或另一个浮动框。
如果一个元素不想其周围出现浮动元素，可以使用clear指定对应的边即可。
CSS3
新边框属性
-
border-radius, 设置圆角，四个角可以分别设置。 -
border-image,使用图像充当边界线。
新的背景属性
-
background-size, 背景图像大小。 -
background-origin,背景开始绘制的区域，取值有border-box、padiing-box和content-box。就像贴纸一样，将贴纸从指定区域的左上角开始贴。 -
backgound-clip,背景图像的绘制区域，将该区域外的图像裁剪掉，效果就像先按照background-origin区域贴好贴纸，然后将background-clip区域外的贴纸裁剪掉。 -
background-image，不是新属性，但是多了使用方式，可以指定多个url作为背景。 -
box-shadow,盒模型阴影。
渐变
-
线性渐变:
liner-gradient,例子background:linear-gradient(red,blue)，设置一个从上到下，从red渐变到blue的背景色。如果设置从左到右的渐变色，可以设置一个90度的渐变角度，如backgound:linear-gradient(90deg,red,blue)。 -
径向渐变:
radial-gradient, 例子,background: radial-gradient(circle, red, yellow, green)，设置圆形的径向渐变效果。
新的文本属性
- 文本阴影:
text-shadow:5px 5px green，文本溢出时该如何处理，取值有：ellipsis(省略号)、clip(裁剪)等。 - 文本溢出:
text-overflow:ellipsis(溢出时显示省略号)。
注：另一个相似属性
overflow,不针对文本，而是整个内容区域溢出时的处理，取值有hidden、scroll等。
- 使用自定义字体：
@font-face
2D转换
- 移动:
translate(x,y) - 缩放:
scale(x,y) - 旋转:
rotate(angle) - 倾斜:
skew(x,y)
过渡
transition-property:应用过渡的CSS属性。transition-duration:过渡时长，默认0。transition-delay:延时。transition-timing-function:过度效果
动画
定义：
@keyframes myname {
from {property_name: value;}
to {property_name: value;}
}
使用:
div {
animation-name: myname;
animation-duration: 2s;
...
}
多列
把内容分成多部分显示，只有当内容足够多时才会分成多列。
column-count: 列数column-width: 列宽column-gap: 两列之间的间隙column-rule-style: 分割线的样式column-rule-color: 分割线颜色column-rule-width: 分割线宽度
设置元素尺寸可伸缩
resize,取值horizontal(水平方向可伸缩)、vertical(垂直方向可伸缩)、both(水平和垂直可伸缩)。
一般要与overflow同时使用才有效果。即会在元素右下角生成可拉伸的三角区，拖动该区域就可以伸缩元素了。
3019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
