CSS

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 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 选择器参考手册

选择器

描述

[attribute]

用于选取带有指定属性的元素。

[attribute=value]

用于选取带有指定属性和值的元素。

[attribute~=value]

用于选取属性值中包含指定词汇的元素。

[attribute|=value]

用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[attribute^=value]

匹配属性值以指定值开头的每个元素。

[attribute$=value]

匹配属性值以指定值结尾的每个元素。

[attribute*=value]

匹配属性值中包含指定值的每个元素。

外部样式表

内部样式表

内联样式

背景色

 background-color 属性

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

最后一个水平对齐属性是 justify。

word-spacing 属性：改变字（单词）之间的标准间隔

letter-spacing ：字母间隔修改的是字符或字母之间的间隔

text-transform：处理文本的大小写。这个属性有 4 个值：

  • none
  • uppercase
  • lowercase
  • capitalize

text-decoration 有 5 个值：

  • none
  • underline
  • overline
  • line-through
  • blink
  • white-space: normal  影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
 

Normal: 丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。

如果将 white-space 设置为 pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像 XHTML 的 pre 元素一样；空白符不会被忽略。

nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。

如果元素的 white-space 设置为 pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反，会像正常文本中一样合并空白符序列，但保留换行符。

值

空白符

换行符

自动换行

pre-line

合并

保留

允许

normal

合并

忽略

允许

nowrap

合并

忽略

不允许

pre

保留

保留

不允许

pre-wrap

保留

保留

允许

CSS 文本属性

属性

描述

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 属性最常用于规定斜体文本。该属性有三个值：

  • normal - 文本正常显示
  • italic - 文本斜体显示
  • oblique - 文本倾斜显示

font-weight：设置文本的粗细

font-size 设置文本的大小,值可以是绝对或相对值

属性

描述

font

简写属性。作用是把所有针对字体的属性设置在一个声明中。

font-family

设置字体系列。

font-size

设置字体的尺寸。

font-size-adjust

当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）

font-stretch

对字体进行水平拉伸。（CSS2.1 已删除该属性。）

font-style

设置字体风格。

font-variant

以小型大写字体或者正常字体显示文本。

font-weight

设置字体的粗细。

链接的四种状态：

  • a:link - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻

当为链接的不同状态设置样式时，按照以下次序规则：

  • a:hover 必须位于 a:link 和 a:visited 之后
  • a:active 必须位于 a:hover 之后

修改用于列表项的标志类型，可以使用属性 list-style-type

对各标志使用一个图像，这可以利用 list-style-image 属性

标志出现在列表项内容之外还是内容内部。利用 list-style-position 

属性

描述

list-style

简写属性。用于把所有用于列表的属性设置于一个声明中。

list-style-image

将图象设置为列表项标志。

list-style-position

设置列表中列表项标志的位置。

list-style-type

设置列表项标志的类型。

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 属性来控制这些框的堆放次序。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

clear 属性

值

描述

left

在左侧不允许浮动元素。

right

在右侧不允许浮动元素。

both

在左右两侧均不允许浮动元素。

none

默认值。允许浮动元素出现在两侧。

inherit

规定应该从父元素继承 clear 属性的值。
 

属性

描述

CSS

:active

向被激活的元素添加样式。

1

:focus

向拥有键盘输入焦点的元素添加样式。

2

:hover

当鼠标悬浮在元素上方时，向元素添加样式。

1

:link

向未被访问的链接添加样式。

1

:visited

向已被访问的链接添加样式。

1

:first-child

向元素的第一个子元素添加样式。

2

:lang

向带有指定 lang 属性的元素添加样式。

  

first-line" 伪元素用于向文本的首行设置特殊样式。

irst-letter" 伪元素用于向文本的首字母设置特殊样式：

":before" 伪元素可以在元素的内容前面插入新内容。

":after" 伪元素可以在元素的内容之后插入新内容。

可通过将左和右外边距设置为 "auto"，来对齐块元素。

注释：除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。

把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素：

提示：如果宽度是 100%，则对齐没有效果。

使用 position 属性进行左和右对齐

对齐元素的方法之一是使用绝对定位：

position:absolute;

right:0px;

使用 float 属性来进行左和右对齐

对齐元素的另一种方法是使用 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 模块包括：

  • 选择器
  • 框模型
  • 背景和边框
  • 文本效果
  • 2D/3D 转换
  • 动画
  • 多列布局
  • 用户界面

CSS3 边框

属性

描述

CSS

border-image

设置所有 border-image-* 属性的简写属性。

3

border-radius

设置所有四个 border-*-radius 属性的简写属性。

3

box-shadow

向方框添加一个或多个阴影。

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 */

}

 

CSS3 背景

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

CSS3 文本效果

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

CSS3 字体

 @font-face

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
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded

可选。定义如何拉伸字体。默认是 "normal"。

font-style
  • ormal
  • italic
  • oblique

可选。定义字体的样式。默认是 "normal"。

font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

可选。定义字体的粗细。默认是 "normal"。

unicode-range

unicode-range

可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

CSS3 2D 转换

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 轴。

CSS3 3D 转换

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

2D Transform 方法

函数

描述

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 转换元素的透视视图。

CSS3 过渡

Transition

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。

注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

  • 规定您希望把效果添加到哪个 CSS 属性上
  • 规定效果的时长
  • div
  • {
  • transition: width 2s;
  • -moz-transition: width 2s;  /* Firefox 4 */
  • -webkit-transition: width 2s;        /* Safari 和 Chrome */
  • -o-transition: width 2s;    /* Opera */
  • }
 

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：

向宽度、高度和转换添加过渡效果：

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

transition

简写属性，用于在一个属性中设置四个过渡属性。

3

transition-property

规定应用过渡的 CSS 属性的名称。

3

transition-duration

定义过渡效果花费的时间。默认是 0。

3

transition-timing-function

规定过渡效果的时间曲线。默认是 "ease"。

3

transition-delay

规定过渡效果何时开始。默认是 0。

3

CSS3 动画

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

CSS3 多列

  • column-count
  • column-gap
  • column-rule

 

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

CSS3 用户界面

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
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/selfimprove/p/4606283.html