标签:
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。
记得写引号
提示:如果值为若干单词,则要给值加引号:
p {font-family: "sans serif";}
空格和大小写
大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。
样式继承问题:后代元素创建新的样式就可以覆盖祖先元素的样式
只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
[title]
{
color:red;
}
CSS 选择器参考手册
选择器 |
描述 |
用于选取带有指定属性的元素。 |
|
用于选取带有指定属性和值的元素。 |
|
用于选取属性值中包含指定词汇的元素。 |
|
用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
|
匹配属性值以指定值开头的每个元素。 |
|
匹配属性值以指定值结尾的每个元素。 |
|
匹配属性值中包含指定值的每个元素。 |
background-image
在页面上对背景图像进行平铺,background-repeat
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
background-position:改变图像在背景中的位置,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
设置固定的图像:background-attachment:fixed
所有的背景属性在一个声明中:background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
属性 |
描述 |
background |
简写属性,作用是将背景属性设置在一个声明中。 |
background-attachment |
背景图像是否固定或者随着页面的其余部分滚动。 |
background-color |
设置元素的背景颜色。 |
background-image |
把图像设置为背景。 |
background-position |
设置背景图像的起始位置。 |
background-repeat |
设置背景图像是否及如何重复。 |
text-indent:实现文本缩进。
可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
text-align:将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。
最后一个水平对齐属性是 justify。
word-spacing 属性:改变字(单词)之间的标准间隔
letter-spacing :字母间隔修改的是字符或字母之间的间隔
text-transform:处理文本的大小写。这个属性有 4 个值:
text-decoration 有 5 个值:
Normal: 丢掉多余的空白符。如果给定这个值,换行字符(回车)会转换为空格,一行中多个空格的序列也会转换为一个空格。
如果将 white-space 设置为 pre,受这个属性影响的元素中,空白符的处理就有所不同,其行为就像 XHTML 的 pre 元素一样;空白符不会被忽略。
nowrap,它会防止元素中的文本换行,除非使用了一个 br 元素。
如果元素的 white-space 设置为 pre-wrap,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行。如果设置为这个值,源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反,会像正常文本中一样合并空白符序列,但保留换行符。
值 |
空白符 |
换行符 |
自动换行 |
pre-line |
合并 |
保留 |
允许 |
normal |
合并 |
忽略 |
允许 |
nowrap |
合并 |
忽略 |
不允许 |
pre |
保留 |
保留 |
不允许 |
pre-wrap |
保留 |
保留 |
允许 |
属性 |
描述 |
color |
设置文本颜色 |
direction |
设置文本方向。 |
line-height |
设置行高。 |
letter-spacing |
设置字符间距。 |
text-align |
对齐元素中的文本。 |
text-decoration |
向文本添加修饰。 |
text-indent |
缩进元素中文本的首行。 |
text-shadow |
设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。 |
text-transform |
控制元素中的字母。 |
unicode-bidi |
设置文本方向。 |
white-space |
设置元素中空白的处理方式。 |
word-spacing |
设置字间距。 |
设置字体样式:font-family
只有当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。
font-style 属性最常用于规定斜体文本。该属性有三个值:
font-weight:设置文本的粗细
font-size 设置文本的大小,值可以是绝对或相对值
属性 |
描述 |
font |
简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
font-family |
设置字体系列。 |
font-size |
设置字体的尺寸。 |
font-size-adjust |
当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。) |
font-stretch |
对字体进行水平拉伸。(CSS2.1 已删除该属性。) |
font-style |
设置字体风格。 |
font-variant |
以小型大写字体或者正常字体显示文本。 |
font-weight |
设置字体的粗细。 |
链接的四种状态:
当为链接的不同状态设置样式时,按照以下次序规则:
修改用于列表项的标志类型,可以使用属性 list-style-type
对各标志使用一个图像,这可以利用 list-style-image 属性
标志出现在列表项内容之外还是内容内部。利用 list-style-position
属性 |
描述 |
简写属性。用于把所有用于列表的属性设置于一个声明中。 |
|
将图象设置为列表项标志。 |
|
设置列表中列表项标志的位置。 |
|
设置列表项标志的类型。 |
|
marker-offset |
|
li {list-style : url(example.gif) square inside}
text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中:
vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐:
属性 |
描述 |
border-collapse |
设置是否把表格边框合并为单一的边框。 |
border-spacing |
设置分隔单元格边框的距离。 |
caption-side |
设置表格标题的位置。 |
empty-cells |
设置是否显示表格中的空单元格。 |
table-layout |
设置显示单元、行和列的算法。 |
属性 |
描述 |
CSS |
outline |
在一个声明中设置所有的轮廓属性。 |
2 |
outline-color |
设置轮廓的颜色。 |
2 |
outline-style |
设置轮廓的样式。 |
2 |
outline-width |
设置轮廓的宽度。 |
2 |
盒子模型:
属性 |
描述 |
position |
把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
top |
定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
right |
定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
bottom |
定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
left |
定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
overflow |
设置当元素的内容溢出其区域时发生的事情。 |
clip |
设置元素的形状。元素被剪入这个形状之中,然后显示出来。 |
vertical-align |
设置元素的垂直对齐方式。 |
z-index |
设置元素的堆叠顺序。 |
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块
因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
值 |
描述 |
left |
在左侧不允许浮动元素。 |
right |
在右侧不允许浮动元素。 |
both |
在左右两侧均不允许浮动元素。 |
none |
默认值。允许浮动元素出现在两侧。 |
inherit |
规定应该从父元素继承 clear 属性的值。 |
|
||
属性 |
描述 |
CSS |
向被激活的元素添加样式。 |
1 |
|
向拥有键盘输入焦点的元素添加样式。 |
2 |
|
当鼠标悬浮在元素上方时,向元素添加样式。 |
1 |
|
向未被访问的链接添加样式。 |
1 |
|
向已被访问的链接添加样式。 |
1 |
|
向元素的第一个子元素添加样式。 |
2 |
|
向带有指定 lang 属性的元素添加样式。 |
first-line" 伪元素用于向文本的首行设置特殊样式。
irst-letter" 伪元素用于向文本的首字母设置特殊样式:
":before" 伪元素可以在元素的内容前面插入新内容。
":after" 伪元素可以在元素的内容之后插入新内容。
可通过将左和右外边距设置为 "auto",来对齐块元素。
注释:除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
把左和右外边距设置为 auto,规定的是均等地分配可用的外边距。结果就是居中的元素:
提示:如果宽度是 100%,则对齐没有效果。
对齐元素的方法之一是使用绝对定位:
position:absolute;
right:0px;
对齐元素的另一种方法是使用 float 属性
CSS 尺寸属性允许你控制元素的高度和宽度。同样,还允许你增加行间距。
属性 |
描述 |
height |
设置元素的高度。 |
line-height |
设置行高。 |
max-height |
设置元素的最大高度。 |
max-width |
设置元素的最大宽度。 |
min-height |
设置元素的最小高度。 |
min-width |
设置元素的最小宽度。 |
width |
设置元素的宽度。 |
属性 |
描述 |
clear |
设置一个元素的侧面是否允许其他的浮动元素。 |
cursor |
规定当指向某元素之上时显示的指针类型。 |
display |
设置是否及如何显示元素。 |
float |
定义元素在哪个方向浮动。 |
position |
把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
visibility |
设置元素是否可见或不可见。 |
IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小,越透明。
Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。只有 Internet Explorer 支持 behavior 属性。使用 JavaScript 和 HTML DOM 取而代之
最重要的 CSS3 模块包括:
属性 |
描述 |
CSS |
设置所有 border-image-* 属性的简写属性。 |
3 |
|
设置所有四个 border-*-radius 属性的简写属性。 |
3 |
|
向方框添加一个或多个阴影。 |
3 |
Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox、Chrome 以及 Safari 支持所有新的边框属性。
对于 border-image,Safari 5 以及更老的版本需要前缀 -webkit-。
Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-。
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
CSS3 允许您为元素使用多个背景图像。
属性 |
描述 |
CSS |
background-clip |
规定背景的绘制区域。 |
3 |
background-origin |
规定背景图片的定位区域。 |
3 |
background-size |
规定背景图片的尺寸。 |
3 |
Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。
所有主流浏览器都支持 word-wrap 属性。
Internet Explorer 9 以及更早的版本,不支持 text-shadow 属性。
属性 |
描述 |
CSS |
hanging-punctuation |
规定标点字符是否位于线框之外。 |
3 |
punctuation-trim |
规定是否对标点字符进行修剪。 |
3 |
text-align-last |
设置如何对齐最后一行或紧挨着强制换行符之前的行。 |
3 |
text-emphasis |
向元素的文本应用重点标记以及重点标记的前景色。 |
3 |
text-justify |
规定当 text-align 设置为 "justify" 时所使用的对齐方法。 |
3 |
text-outline |
规定文本的轮廓。 |
3 |
text-overflow |
规定当文本溢出包含元素时发生的事情。 |
3 |
text-shadow |
向文本添加阴影。 |
3 |
text-wrap |
规定文本的换行规则。 |
3 |
word-break |
规定非中日韩文本的换行规则。 |
3 |
word-wrap |
允许对长的不可分割的单词进行分割并换行到下一行。 |
3 |
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。
注释:Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
描述符 |
值 |
描述 |
font-family |
name |
必需。规定字体的名称。 |
src |
URL |
必需。定义字体文件的 URL。 |
font-stretch |
|
可选。定义如何拉伸字体。默认是 "normal"。 |
font-style |
|
可选。定义字体的样式。默认是 "normal"。 |
font-weight |
|
可选。定义字体的粗细。默认是 "normal"。 |
unicode-range |
unicode-range |
可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
Transform
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 需要前缀 -ms-。
translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转
scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
属性 |
描述 |
CSS |
transform |
向元素应用 2D 或 3D 转换。 |
3 |
transform-origin |
允许你改变被转换元素的位置。 |
3 |
matrix(n,n,n,n,n,n) |
定义 2D 转换,使用六个值的矩阵。 |
translate(x,y) |
定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) |
定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) |
定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) |
定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) |
定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) |
定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) |
定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) |
定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) |
定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) |
定义 2D 倾斜转换,沿着 Y 轴。 |
transform
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换(它只支持 2D 转换)。
rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。
rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。
属性 |
描述 |
CSS |
transform |
向元素应用 2D 或 3D 转换。 |
3 |
transform-origin |
允许你改变被转换元素的位置。 |
3 |
transform-style |
规定被嵌套元素如何在 3D 空间中显示。 |
3 |
perspective |
规定 3D 元素的透视效果。 |
3 |
perspective-origin |
规定 3D 元素的底部位置。 |
3 |
backface-visibility |
定义元素在不面对屏幕时是否可见。 |
3 |
函数 |
描述 |
matrix3d(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 转换元素的透视视图。 |
Transition
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。
注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开:
向宽度、高度和转换添加过渡效果:
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
属性 |
描述 |
CSS |
简写属性,用于在一个属性中设置四个过渡属性。 |
3 |
|
规定应用过渡的 CSS 属性的名称。 |
3 |
|
定义过渡效果花费的时间。默认是 0。 |
3 |
|
规定过渡效果的时间曲线。默认是 "ease"。 |
3 |
|
规定过渡效果何时开始。默认是 0。 |
3 |
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
在 @keyframes 中创建动画时,把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,应该始终定义 0% 和 100% 选择器。
属性 |
描述 |
CSS |
@keyframes |
规定动画。 |
3 |
animation |
所有动画属性的简写属性,除了 animation-play-state 属性。 |
3 |
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 |
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
注释:Internet Explorer 9 以及更早的版本不支持多列属性。
column-count 属性规定元素应该被分隔的列数:
column-gap 属性规定列之间的间隔:
column-rule 属性设置列之间的宽度、样式和颜色规则。
属性 |
描述 |
CSS |
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 |
Firefox、Chrome 以及 Safari 支持 resize 属性。
Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。
所有主流浏览器都支持 outline-offset 属性,除了 Internet Explorer。
resize 属性规定是否可由用户调整元素尺寸。
box-sizing 属性允许以确切的方式定义适应某个区域的具体内容
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同:
属性 |
描述 |
CSS |
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 |
标签:
原文地址:http://www.cnblogs.com/selfimprove/p/4606283.html