CSS实现了网页内容和样式定义的分离，是web前端领域的一大突破。
所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1 浏览器缺省设置
2 外部样式表 通常link导入
3 内部样式表（位于 <head> 标签内部） 通过<style>标签定义
4 内联样式（在 HTML 元素内部） 通过style属性定义
1 CSS语法
CSS规则由两个主要部分构成：选择器，以及一条或多条声明：
selector {declare1;decclare2;....}
每个declare都是一个k:v对，说明一个属性对应的值。如果值为多个单词，需要为之加上引号。例如：
h1 {
color:"this is my color";
font-size:14px;
}
适用相同声明的选择器，可以进行分组。例如：
h1,h2,h3,h4 {
color:red;
font-size:14px;
}
对于样式声明，子元素将继承父元素的属性。如果希望不依赖于继承工作，同可以针对子元素进行重新声明。缺点是未利用继承复用的特性，优点是可以跳过继承带来的问题.
2 选择器
最简单的为元素选择器，只选择特定的标签，如h1。
2.1 派生选择器
也称为上下文选择器，比如你想选中div节里的h1，而非外部的h1，则应该这样：
div h1 {color:red;}
需要注意的是两个元素之间的层次间隔可以是无限的，即h1可能是div的孙元素。
如果只希望选择子元素，可以在两元素之间加>。如div>h1 {color:red;}。子选择器也可以和其他选择器结合使用。
如果要选择某一元素的同父下一个兄弟节点，可以使用兄弟选择器，如h1+p {color:red;}
2.2 id选择器
id选择器可以为定义了id属性的HTML元素指定特定的样式。HTML元素的ID需要是唯一的。
id选择器以#来定义。id选择器可以单独使用，也可以和上下文选择器一起工作，例如：
#red p {color:red;} 可以选择id="red"标签下的所有p标签。
div #content {text-align:center;} 可以选择div标签下id="content"的标签
div#content 只选择定义了id=content的div标签
2.3 类选择器
id选择器可以为定义了class属性的HTML元素指定样式。HTML元素的CLASS可以是重复的。
class选择器.来定义。class选择器可以单独使用，也可以和上下文选择器一起工作，例如：
.content p {text-align:center;} 可以选择class="content"标签内的p标签。
div .content {text-align:center;} 可以选择div标签下class="content"的标签
div.content 只选择定义了id=content的div标签
2.4 属性选择器
属性选择器可以为声明了指定属性的HTML元素指定样式。在为不带有class和id的标签设置样式时有用。
属性选择器以[]来定义。
[title] 可以选择声明了title属性的标签。
[title=test] 可以选择声明title="test"的标签
[title~=test] 可以选择声明title的值中包含多个，但含有test的标签，适合由空格分隔的多个值
[title|=test] 可以选择声明title的值中包含多个，但含有test的标签，适合由-分隔的多个值
可以和上下文选择器一起使用。
a[href][..] 可以只选择声明了href的a标签
2.5 杂项
多个选择器以","分隔，表示或的意思；空格分隔的选择器表示后者是前者的子孙。
3 CSS样式
3.1 背景
background-color 设定标签的背景色，支持属性padding
background-image 设定标签的背景图片，以拉伸方式展现
background-repeat 设置背景图片平铺重复，默认为平铺。repeat-x repeat-y用来指定在何维度上重复,no-repeat不允许平铺
background-position 设置图片在背景中的位置，可以使用top这类名词，也可用长度值如100px或百分数值。位置由X Y的形式来确定，多张图片层叠透明后，设置不同的偏移位置后，在resize时会产生相对移动不同的现象，能表现出3D的样式。
background-attachment 设置背景关联。默认为scroll，即随着文字图片滚动，文字长时，图片会消失。可设fixed固定图片。
background 可以一起设置上面的多个属性。如background red url(./url) top center fixed;
示例：
.container {
background-color: #C8E395;
background-image:url(./bg_01.gif);
background-repeat: no-repeat;
background-position: 100% 0%;
background-position: top right;
background-position: 800px 600px;
background-attachment:fixed;
padding:20px;
}
需要注意的是所有背景属性不能继承。
3.2 文本
text 可在此属性中声明所有下面的属性的值
color 设置文本的颜色
direction 设置文本的显示方向，值有ltr/rtl，默认为ltr
text-align 设置文本行之间互相的对齐方式，默认为left,其他值有right/center/justify(两端对齐)
text-indent 设置块文本缩进。可应用到所有块级标签上，行内标签需要使用内外边距来实现缩进。
可设置为负值，实现首行的悬挂缩进。可以使用所有长度单位。此属性支持继承。
text-transform 设置字母的大小写转换，值有lowercase/uppercase/none/capitalize
text-decoration 设置文字的格式，值有none/underline/overline/line-throung/blink
word-spacing 设置字之间的水平间距。值支持各种单位
letter-spacing 设置字母间的间距。
white-space 设置文本中空格的处理方式，normal表示按正常处理，pre表示按源格式处理空格
line-height 设置行间距，支持各种单位。默认行高是110%-120% 或 20px 或 1
示例：
h1 {
text-indent: -0.2em;
text-transform: none;
word-spacing: 0;
text-decoration:underline overline;
}
3.3 字体
CSS支持的字体系列分两类，即通用字体和特殊字体。通用字体有5种，分别为Serif Sans-serif Monospace Cursive Fantasy字体。
font 可以在此属性中声明下面所有属性的值
font-family 设置字体系列，可以先设置一个具体字体，后跟一个通用字体。当具体字体不存在时，也能fallover
font-size 用于设置文字大小。可以设置为绝对或相对值。绝对值不允许用户改变大小。相对值em相对周围元素大小。
font-style 用于设置字体倾斜。值有normal/italic/oblique
font-variant 用于设定小型大写字母，其不是大写字母，书写不太相同
font-weight 用于设定文本线条粗细，100-900有9级，bold为700,normal为400
示例：
body {
font-family: sans-serif;
font-weight: 700;
}
3.4 链接
链接的特殊之处在于，其有4种状态，未点击，已经点击，鼠标悬浮，点击中；不同的状态下有不同的样式。
为了实现不同状态时的控制，只需要按顺序定义以下4个状态即可。
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
3.5 列表
list-style 可以在此属性中，声明所有下面的属性的值
list-style-image 设定小标为图像
list-style-position 设定小标的位置，值有inside/outside/inherit
list-style-type 设定列表项的小标样式，值有square/circle/disc/*-alpha/...
示例
ul {list-style-type: circle;}
ul {list-style-position: }
ul {list-style-image: url(arrow.gif);}
3.6 表格
border-collapse 设置将表格边框合并为单一边框，值有collapse/separate，默认分离
border-spacing 在边框为分离模式时，设置横线间隔，需要分别指定水平、垂直边距
border-color 设置表格边框颜色
caption-side 设置表格标题的位置，值有top/bottom
empty-cells 在边框为分离模式时，是否显示空单元格的边框，值有show/hide
table-layout 设置表格是否根据内容自动扩展，值有automatic/fixed
width 设置表格的宽度
height 设置表格的高度
text-align 设置表格中文字的水平对齐,left/right
vertical-align 设置表格中文字的垂直对齐方式，值有top/bottom/center
padding 设置表格内容与边框的距离，为td/th元素设置此属性
3.7 边框
outline 设置边框的所有以下属性
outline-color 设置轮廓线的颜色
outline-style 设置轮廓线的样式，值有dotted/solid/double/dashed/....
outline-width 设置轮廓线的粗细，如normal/thick等，也可以是数值等
更多属性参考http://www.w3school.com.cn/cssref/index.asp
3 CSS 框模型
CSS框模型规定了元素内容，内边距、边框、外边距的方式。
3.1 内边框
padding 内边距，定义了内容和边框的距离，可以以上、右、下、左的方式定义。如 h1 {padding:10px 0.2em 2ex 20%;}。也可通过以下几个属性分别定义
padding-top/padding-right/padding-bottom/padding-left
3.2 边框
border 用来设置边框的属性，可以设置样式、颜色、宽度
border-style 指定各方向上的样式，值有hidden/dotted/solid/dashed/double/inset/outset等
border-top-style/border-right-style/border-bottom-style/border-left-style
border-width 指定各方向上的宽度，值有thin/medium/thick/length
border-top-width border-right-width border-bottom-width border-left-width
border-color 指定各方向上的颜色，支持颜色名、RGB函数、16进制数、transparent默认为透明
border-top-color border-right-color border-bottom-color border-left-color
3.3 外边距
围绕边框的空白区域是外边距。设置外边距会创建额外的空白。
margin 设置4个方向上的空白值，以上右下左的方式，支持对称性，可以简写数值的个数。
margin-bottom/margin-left/margin-right/margin-top
{ margin: 1 2 3} = {margin:1 2 3 2}
4 CSS定位
HTML中的元素分为块元素和行内元素。但CSS可以通过display属性来设置行内元素为block或设置块属性为none块的。
CSS有三种基本定位机制：普通定位、相对定位、绝对定位和浮动。
position 设置定位的方式，值有relative/absolate/fixed
overflow
clip
vertical-align
z-index
所谓普通定位就是指元素位置由其在HTML中的位置决定。块级框从上到下一个接一个的排列。
所谓相对定位就是指元素相对于本身应该在的位置进行相对的移动。元素依然占用其原有的位置空间，但其覆盖了其他元素。在此模式下，通过四个属性来精确定位
top 设置顶部与原位置的偏移，值可以是负值以表示相反的方向移动
right 设置右侧与原位置的偏移
bottom 设置底部与原位置的偏移
left 设置左侧与原位置的偏移
所谓绝对定位就是指从文档中完全删除，并相对于其包含块定位，元素在绝对位置重新定位。绝对定位的元素的位置相对于最近已定位祖先元素，如果元素没有已定位的祖先元素，则其位置相对于最初的包含块。子元素按已相对定位的父元素进行绝定位在多数浏览器工作良好。
由于绝对定位的框与文档流无关，其也覆盖页面上的其它元素。可以设置z-index属性来控制这些框的堆放次序。
top 设置顶部与父元素的偏移，值可以是负值以表示相反的方向移动
right 设置右侧与父元素的偏移
bottom 设置底部与父元素的偏移
left 设置左侧与父元素的偏移
固定定位是绝对定位的一种，其包含块是viewport。这样可以创建出位置不变的元素。
浮动的框可以向左或右移动，直到其外边缘碰到包含框或另一个浮动框。如果包含块宽度不够，则一系列浮动定位的元素自动向后排列，找到一个容得下的位置展示。
浮动框不在文档的普通流中，文档中普通流中的块框表现得就像浮动框不存在一样。虽然框的表现是如不存在，但框内的文本内容会受浮动元素的影响，会移动以留出空间，所以创建浮动框可使文本围绕图片。CSS的float属性和clear属性可以设置浮动。
5 选择器增强特性
5.1 通配符选择器
CSS2引入了通配符选择器，*可以和任何元素匹配。同一个元素的类如果包含多个词，则选择时需要将空格转换为.
5.2 伪类
锚的伪类
a:link 用来定位未访问链接
a:visited 用于定位已访问链接
动态伪类，大多数元素都支持
a:hover 用于定位鼠标悬浮
a:active 用于定位当前激活
a:focus 用于定位当前获得输入焦点的元素
x:first-child伪类，可以定位第一次出现的x元素。
x:focus 伪类，可以向有键盘输入焦点的元素添加样式
x:lang 伪类，可以为不同语言定义特定规则。
5.2 伪元素
x:first-line 选择第一行，可以设置font/color/background/word-space/text-decoration/vertical-align/text-gransform/line-height/clear属性
x:first-letter 选择第一个字母，可以设置同上的属性
x:before 选择x前，属性有content，可以设置内容
x:after 选择x后，属性有content，可以设置内容
7 CSS3简介
CSS3被划分成模块，完全兼容CSS2并在原有的基础上增加了动画、多列、UI等支持，并增加了原有模块的属性。
对于下面的属性，不同的浏览器及版本支持也不同，在chrome及safari中旧版本还要加-webkit-前缀。
7.1 边框
border-radius 为边框设置圆角
box-shadow 为边框添加阴影，语法为box-shadow:h-shadow v-shadow blur spread color inset;
border-image 设置图片来创建边框，也可以下面的几个属性来设置
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
7.2 背景
background-size 设置背景图片的尺寸，参数为长和宽
background-origin 设置背景图片的定位的区域，值可以是content-box、padding-box 或 border-box 区域
可以为background-image指定多个图片，进行叠加显示
background-clip 设置背景图片的铺展区域，值可以是content-box、padding-box 或 border-box 区域
7.3 文本效果
text-shadow 设置文字阴影，text-shadow: h-shadow v-shadow blur color;
word-wrap 设置自动换行
text-overflow 设置文本超出显示范围的处理方式
7.4 字体
在CSS3中，可以设置字体的源位置，这样用户便可以显示何意的字体了。
首先定义字体
@font-face
{
font-family:name
src:url('font-name.ttf')
}
然后使用字体
div {font-family:name;}
7.5 转换
CSS3支持2d/3d的转换，2d转换只在平面内变化，而3d则支持向内/外的第三维的变换
transform支持以下2d方法，对元素进行平移、拉伸、翻转、旋转等
translate(x,y) 对元素进行平移，位置于x,y参数决定
scale(tx,ty) 对元素进行拉伸，参数x,y指定两维方向为原来的倍数
skew(dx,dy) 对元素进行翻转，根据给定对x,y轴的角度
以上函数各有一个带X和Y后缀的函数，用于单独指定在单一维度上进行转换
rotate(deg) 对元素进行顺时针旋转，角度由deg参数确定
matrix() 将以上方法组合在一起使用，给定6个参数
transform支持以下3d方法
rotateX(deg) 元素绕x轴旋转指定角度
rotateY(deg) 元素绕y轴旋转指定角度
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
其他的转换属性如下
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。
7.6 过渡
transition 需要首先指定一个属性和时长。然后指定何应用及应用的效果。
示例：
div { transition: width 2s, height 2s, transform 2s;}
div:hove {width 200px; height 300px; transform:rotate(180deg);}
也可以一次指定多个效果，中间以逗号隔开。transition实际是以下4个属性的简写。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
7.8 动画
动画是使元素从一种样式变化为另一种样式的效果。
@keyframes规则用于创建动画。得利用animation设置动画的时长。
示例：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: myfirst 5s;
}
使用from to或0% - 100%来定义变化阶段。
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3
7.9 多列
CSS3可以创建多个列来对文本进行布局，例如可将元素在三列中显示。
column-count 规定元素应该被分隔的列数。 3
column-fill 规定如何填充列。 3
column-gap 规定列之间的间隔。 3
column-rule 设置所有 column-rule-* 属性的简写属性。 3
column-rule-color 规定列之间规则的颜色。 3
column-rule-style 规定列之间规则的样式。 3
column-rule-width 规定列之间规则的宽度。 3
column-span 规定元素应该横跨的列数。 3
column-width 规定列的宽度。 3
columns 规定设置 column-width 和 column-count 的简写属性。 3
7.10 用户界面
CSS3支持用户重设元素尺寸、盒尺寸及轮廓等。
appearance 允许您将元素设置为标准用户界面元素的外观 3
box-sizing 允许您以确切的方式定义适应某个区域的具体内容。 3
icon 为创作者提供使用图标化等价物来设置元素样式的能力。 3
nav-down 规定在使用 arrow-down 导航键时向何处导航。 3
nav-index 设置元素的 tab 键控制次序。 3
nav-left 规定在使用 arrow-left 导航键时向何处导航。 3
nav-right 规定在使用 arrow-right 导航键时向何处导航。 3
nav-up 规定在使用 arrow-up 导航键时向何处导航。 3
outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 3
resize 规定是否可由用户对元素的尺寸进行调整。 3
7.11 色彩
opacity 设置元素的透明度，0表示完全透明，100%表示完全不透明
RGBA 设置元素的颜色与透明度
8 单位
% 百分比
in 英寸
cm 厘米
mm 毫米
em
1em 等于当前的字体尺寸。
2em 等于当前字体尺寸的两倍。
例如，如果某元素以 12pt 显示，那么 2em 是24pt。
在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的一个点)
9 参考
9 参考
8085
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
