CSS参考手册 | 52的小窝

CSS 英文全称：Cascading Style Sheets（层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

引入CSS

引入css有4种方式, 分别是

style属性引入
style标签引入
link标签引入
@import导入

这4种方式引入的内容, 最终生效的是范围小的（除了!important）, style属性引入一定是最小的 ,其他3种按具体引入顺序, 后者会覆盖前者

style属性引入

是指html标签中使用style属性, 仅对该标签有效

<div style="background-color:red;">我是一个div</div>

style标签引入

标签引入, 对整个页面均有效

<style>
    #mydiv{
       background-color:green; 
   }
</style>
<div id="mydiv">我也是一个div</div>

link标签引入

通过外部css文件引入, 依然对整个页面有效, 应该指定rel属性, 否则可能引入失败

<link type="text/css" rel="stylesheet" href="xxx/style.css">
<div id="mydiv2">我通过外部css渲染</div>

外部的css文件中, 写法与style标签内容相同, 例如

#mydiv2{
    background-color:black;
}

@import导入

这个用法必须是css中使用, 也就是在css中使用, 例如在css文件中这样写

@import "demo.css";

上述代码也可以写成

@import url("demo.css");
@import url(demo.css);

当不使用url时，后面的路径必须使用引号。

此外，它可以指定媒体查询。例如：

@import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);

它带来的好处是, 能够对多个css整合. 下面举一个例子：

假设你有一个html页面, 要对这个页面进行css渲染, css分成很多部分, 包括①整体布局划分,②字体选择,③颜色搭配… 那么你可以这样做

在页面中使用 link 引入main.css, 然后在main.css中@import多个其他css, 这样就合成了最终的css.

这样的方案在开发时方便控制, 但在生产阶段, 不推荐使用, 而是使用压缩min.css，明显能减少请求次数。

CSS语法

这里介绍CSS语法相关内容

CSS标准语法

css的标准语法是

选择符{属性1:属性值1;属性2:属性值2;...}

例如以下实例：

#demo{
    color:red;
    text-align:center;
}

CSS注释

在css文件中的注释仅有一种, 必须使用 /**/ ,可以是单行的或者多行

语法示例:

h2{text-align:center;}  /* 等效于 <h2 align="center"></h2> */

其中，/**/是css的多行注释，css只有这一种样式，该注释和html注释类似同样能够查看源码时看到。

!important语法

此语法用于提升CSS样式的优先级，应用了!import的样式将不会被覆盖。

div{
    color: #eee;
}

IE6及以下浏览器有个比较显式的支持问题存在，!important在同一条规则集{}里不生效。请看下述代码：

div {
	color: #f00 !important;
	color: #000;
}

IE6及以下浏览器div的文本颜色为#000，其他浏览器中颜色为#f00。

@charset 规则

@charset 属性指定样式文件(.css 后缀)中使用的字符编码，且只能在 CSS 文件中使用。

它必须是样式表中的第一个元素，而前面不得有任何字符。

如果有多个 @charset 规则被声明，只有第一个会被使用，而且不能在 HTML 元素或 HTML 页面的中使用，即不能在 <style> 元素内使用。

语法：

@charset "charset";

实例：

@charset "UTF-8";
@charset "utf-8"; /*大小写不敏感*/
/* 设置css的编码格式为 Unicode UTF-8 */
@charset 'iso-8859-15'; /* 无效的, 使用了错误的引号 */
@charset 'UTF-8';       /* 无效的, 使用了错误的引号 */
@charset  "UTF-8";      /* 无效的, 多于一个空格 */
 @charset "UTF-8";      /* 无效的, 在 @ 之前多了一个空格 */
@charset UTF-8;         /* 无效的，UTF-8 没有使用引号 */

@media查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets ，可以用于HTML和XML:

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
<?xml-stylesheet media="mediatype and|not|only (media feature)" rel="stylesheet" href="example.css" ?>

mediatype属性参数

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备

media feature属性参数

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

列举几种使用方式：

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}
@media all and (device-height:800px){ … }
@media all and (orientation:landscape){ … }
@media all and (device-aspect-ratio:16/10){ … }
@media all and (min-color:1){ … }
@media all and (monochrome:0){ … }
@media all and (grid:0){ … }

提示：针对各个设备的px值，可以通过浏览器开发者工具调试获取。一般来说：

移动端：小于768px
平板：[768, 1024]
PC端：大于1024px

CSS选择器详解

css选择器非常多，非常灵活

基本选择器

基本选择器是使用频率最高的选择器，也是其他选择器的基础。

通配符选择器

通配符, 这里指的是 * , 表示应用于所有元素

*{
   color:red;
}
/* 所有的元素都会生效 */

id选择器

id选择器, 仅选择某个id, 一个页面中仅有一个id, 如果有多个也不会报错, 但是仅第一个生效, 也就是会选到第一个

/*语法规则是 #id名称 */
#test{
  color:blue;
}
/* id为test的会生效 */

类选择器

类选择器, 会选择有class的元素

/*语法规则是 .class名称 */
.test{
   color:green;
}
/* 所有test类均会生效*/

标签选择器

对同一类标签进行选择, 比如 p 标签

/* 语法规则: 标签名 */
p{
   color: yellow;
}
/* 所有的p标签都会生效 */

与选择器

这个说法是本站的说法, 是指同时具有 a 和 b 属性, 比如一个元素有2个class

它并不只能选2个, 而是可以多个选择器”与操作”, 注意中间没有空格

/* 语法规则: 选择器1选择器2 */
.a.b{
   font-size:24px;
}
/* 同时具有a类和b类的才会生效 */

或选择器

这也是非官方说法, 表示可以是 a, 又可以是 b, 也就是a和b都会生效

/* 语法规则: 选择器1,选择器2*/
.c,.d{
   font-size:36px;
}
/*所有类名为c和所有类名为d的都会生效*/

后代选择器

后代选择器, 会选择第一个选择器中的元素的, 又符合第二个选择器的元素

这个选择器和 “与选择器” 看起来非常像, 注意这里中间有空格

/* 语法规则: 选择器1 选择器2 */
div p{
   text-align:center;
}
/* 仅选择div下的p标签元素 */

子选择器

在上面的子选择器中, 如果有多层嵌套, 那么都会生效, 比如

<div>
    <nav><p>我是一个p标签</p></nav>
</div>

而, 如果是子选择器, 只会选择div中的直接子元素, 孙子元素或以下不生效

/* 语法规则: 选择器1>选择器2 */
div > p{
    text-align:right;
}
/* 仅选择div下的直接子选择p */

相邻兄弟选择器

会选择选择器1之后的紧跟着的选择器2的元素

/* 语法规则 选择器1 + 选择器2 */
div + p{
  font-family:"华为行楷";
}
/* 会选择div后紧跟着的第一个p标签 */

兄弟选择器

选择器1之后的, 任何符合选择器2的元素都会生效

/* 语法规则: 选择器1 ~ 选择器2 */
div~p{
   font-family:"宋体";
}
/* 会选择位于div后的所有p标签 */

属性选择器

css属性选择器, 基于属性或属性值进行选择选择

属性选择器语法

属性选择器, 可以分为属性名和属性值选择器, 基本语法相同

/* 仅考虑属性名时语法如下 */
选择器[属性名]
/* 考虑属性值时, 语法如下 */
选择器[属性名 操作符 属性值]

第一种比较简单, 也就是选中拥有某个属性名即可, 例如

p[title] –> 选中拥有title属性的p标签

操作符参考列表

1.等于操作符=

选中属性名刚好等于属性值的元素

p[title="hello"]{
   text-align:center;
}

2.开头操作符^=

选中以某个属性值开头的元素

p[title^="ab"]{
   text-align:right;
}
/* 比如title为ab,abc,abcd等以ab开头的 */

PS: 它有一个旧版本, 是 |= , 它的属性值必须是一个单词, 或者后面跟着连字符

[class|=top]
{
background:yellow;
}
//它的属性值必须是单词, 或后面跟着连字符
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="content">Are you learning CSS?</p>

3.结尾操作符$=

选中某个属性值结尾的元素

p[title^="ff"]{
   color:green;
}
/* 比如title为 cff, dff, gff等 */

4.包含操作符*=

包含某个子字符串

div[class*="test"]
{
background:blue;
}
/* class中,类名包含了test都会被选中 */

PS: 它同样有一个旧版本, 是 ~= ,旧版本的必须是一个单词, 且左右两边必须是空格

[title~=flower]
{
border:5px solid yellow;
}
//只能是空格, 不能是连字符,无空格更不行
<input title="test flower hello" /> //生效
<input title="testflower hello" /> //不生效
<input title="test flower-hello" /> //不生效

伪元素选择器

css伪元素, 可以理解为并不真实存在的元素, 它类似于元素却并非元素, 往往是基于现有元素的一部分

伪元素选择器语法

伪元素使用 :: 作为选择

/* 语法规则: 元素选择器::状态 */
p::selection{
   background-color: orange;
}
/* 表示p中选中的文字会变成橙色, 旧版火狐中使用 -moz-selection */

伪元素参考列表

1.前插入内容before

插入的内容, 可以是文字元素, 以及对文字的样式控制

这个插入的文字元素, 和p中原有的文字会被分别渲染

p::before{
   content: '前插入文字元素';
   color:red;
}

2.后插入内容after

和before相似, 在后面插入内容

p::after{
  content: '后插入的内容';
  color:blue;
}

3.选中内容content

表示选中的内容, 比如文字

p::before{
   content: '前插入文字元素';
   color:red;
}

4.首字符

选中第一个字符

p::first-letter{
	font-size: 48px;
}
/* 第一个字符大小为48px */

5.第一行

选中第一行

p::first-line{
	font-family: "华文行楷";
}

6.占位提示符placeholder

对placeholder操作, 比如改变颜色

::placeholder {
  color: yellow;
}

伪类选择器

css伪类, 表示元素中符合一种特殊状态的类, 通过伪类选择器, 可以选择具有某种特殊状态的元素

伪类选择器语法

伪类和伪元素容易混淆, 伪元素往往表示元素的部分内容, 伪类表示一种状态

选择器语法很简单, 这里仍然是非官方说法, 这里的状态是一种特殊描述

/* 语法规则: 选择器:状态 */
a:visited{
   color:red;
}
/* 被访问过的超链接字体为红色 */

01-a链接状态

由于伪类状态非常多, 这里进行一下分类, 主要用于表示a链接的

1.1,正常的链接link,

这个伪类仅a链接可以使用

a:link{
   color: yellow;
}
/* 未访问过的正常的链接 */

1.2.链接已访问visited,

仅可以用于a链接标签

a:visited{
   color:red;
}
/* 被访问过的超链接字体为红色 */

1.3,鼠标悬浮hover,

此伪类可用于所有元素, 当鼠标指向元素时触发, 默认鼠标变成pointer小手

在 ie6 浏览器中, 不支持对a链接标签以外的元素使用。

a:hover{
  color:green;
}
/* 鼠标悬浮在a标签中时触发 */

1.4.点击未松手active,

此状态仅用于a链接标签

a:active{
  color:black;
}
/* 按住未松手时的a标签状态 */

PS: 超链接伪类有顺序，分别是link，visited，hover，active

02-子元素状态

子元素状态, 主要用于选择子元素

2.1没有子元素(包括文本)empty

选择没有子元素, 也没有文本的p元素

p:empty{
  height:20px;
  background:yellow;
}

2.2.第一个子元素first-child

选中所有是父元素第一个子元素的p元素, 注意不是p中的第一个子元素

p:first-child{
   background-color: yellow;
}
<div><p>我是第一个子元素的p元素</p></div>
<main><p>我也是第一个子元素的p元素</p></main>

2.3第一个此类子元素first-of-type

上面是父元素的第一个元素, 这里是父元素的第一个p元素

p:first-of-type{
   background-color: blue;
}

2.4.最后一个子元素last-child

选中所有是最后一个子元素p元素, 注意不是p的最后一个子元素

p:last-child{
   background-color: blue;
}
<div><p>我是最后一个子元素的p元素</p></div>
<main><p>我也是最后一个子元素的p元素</p></main>

2.5最后一个此类子元素last-of-type

父类中最后一个p元素, 不是最后一个元素

p:last-of-type{
  background-color:gray;
}

2.6.正数第n个子元素nth-child

这个语法和上面的稍微不同, 要指定n, 指定顺数第n个子元素的p元素

n 可以是数字、关键词或公式。比如 odd表示奇数, even表示偶数, 公式如3n+1

p:nth-child(even){
   font-size:24px;
}

2.7.倒数第n个子元素nth-last-child

和上面的类似, 只是是倒序

p:nth-child(2+1){
   font-size:24px;
}

2.8正数第n个此类子元素nth-of-type

同父元素中第n个此类子元素

p:nth-of-type(even){
  background-color:gray;
}

2.9倒数第n个此类子元素nth-last-of-type

p:nth-of-type(odd){
  background-color:yellow;
}

2.10仅有一个子元素only-child

父类中仅有一个元素, 且它为p元素

p:only-type{
  background-color:black;
}

2.11仅有一个此类元素only-of-type

p:only-of-type{
  background-color:green;
}

03-表单状态

3.1.已选择select

选择已被选中的radio,checkbox等, 仅在opera浏览器正常显示

input:checked
{
  background:red;
}

3.2.默认选择default

input:default {
  box-shadow: 0 0 1px 1px red;
}
/* 默认选项会显示阴影,也就是女性 */
<input type="radio" name="gender" value="male" > 男性<br>
<input type="radio" name="gender" value="female" checked> 女性

3.3.不可编辑的disabled

使用了disabled属性的表单输入框

input[type="text"]:disabled
{
background:blue;
}

3.4.已启用的enabled

input[type="text"]:enabled
{
background:yellow;
}

3.5.获取焦点focus

表示获取了焦点的元素, 注意焦点仅能同时有一个元素获得, 在 ie6 不被支持

input:focus{
   background-color: yellow;
}
/* 获取了焦点的input */

3.6.一定范围内的in-range

需要指定min和max

<!DOCTYPE html>
<html>
<head>
<style>
input:in-range {
  border: 2px solid yellow;
}
</style>
</head>
<body>

<h1>演示 :in-range 选择器</h1>

<input type="number" min="5" max="10" value="7">

<p>请尝试输入超出范围的数字（小于 5 或大于 10），来查看消失的样式。</p>

</body>
</html>

3.7.不确定状态indeterminate

不确定状态, 很少用的到, 仅做了解

<!DOCTYPE html>
<html>
<head>
<style> 
input:indeterminate {
  box-shadow: 0 0 1px 1px red;
}
</style>
</head>
<body>

<h1>indeterminate 选择器</h1>
<p>下面的复选框处于不确定状态（通过 JavaScript）。如果单击它，它的状态将变为“已选中”，并失去其红色阴影颜色，因为它不再是不确定的。</p>
<p>请注意，不确定的复选框拥有“-”图标，而不是复选标记或空白框。</p>

<input type="checkbox" id="myCheckbox"> 复选框

<script>
// 通过 JavaScript 使复选框处于不确定状态
var checkbox = document.getElementById("myCheckbox");
checkbox.indeterminate = true;
</script>

</body>
</html>

3.8.无效值invalid

input:invalid {
  border: 2px solid red;
}
/* 当输入的值不对时, 比如下面的值不是email,改变它就会消失 */
<input type="email" value="supportEmail">

3.9.不带有require属性的: optional

input:optional {
  background-color: yellow;
}

3.10.超出指定范围的out-of-range

input:out-of-range { 
  border: 2px solid red;
}

3.11.设置了只读的readonly

input:-moz-read-only { /* For Firefox */
  background-color: yellow;
}

input:read-only { 
  background-color: yellow;
}

3.12.未规定只读的read-write

默认就是可读可写的

input:-moz-read-write { /* For Firefox */
  background-color: yellow;
}

input:read-write { 
  background-color: yellow;
}

04-其他状态

4.1.处于全屏模式的fullscreen

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Safari 语法 */
:-webkit-full-screen {
  background-color: yellow;
}

/* IE11 语法 */
:-ms-fullscreen {
  background-color: yellow;
}

/* Standard 语法 */
:fullscreen {
  background-color: yellow;
}

/* 设置按钮的样式 */
button {
  padding: 20px;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>全屏模式</h1>
<p>单击“打开全屏模式”按钮以全屏模式打开此页面。通过单击键盘上的“Esc”键或使用“关闭全屏模式”按钮将其关闭。</p>

<button onclick="openFullscreen();">打开全屏模式</button>
<button onclick="closeFullscreen();">关闭全屏模式</button>

<script>
// 使用 JavaScript 在全屏模式中打开页面
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

<p>注释：Internet Explorer 10 以及更早的版本不支持全面模式。</p>

</body>
</html>

4.2.选择某种语言的lang

p:lang(en)
{ 
background:yellow;
}

4.3.非某种选择器not

/* 设置非 <p> 元素的所有元素的背景色： */
:not(p)
{ 
background-color: #ff0000;
}

4.4.根元素root

选择 html 元素

:root{
    background:red;
}

4.5,显示文档内链target

:target
{
border: 2px solid blue;
background-color: green;
}
/* 突出显示文档内联 */

4.6.数据合法的valid

input:valid {
  background-color: yellow;
}

选择器优先级

在相同的引入方式样式中, 又对各个选择器进行了区分

首先, 在css中!import的优先级最高，最高是绝对性，超过内嵌

p{
  background-color:red !important;
}

优先级最高也就意味着最终生效

除此之外, 对id选择器, 类和伪类选择器, 元素选择器等选择器进行比较, 最终的结果是( 伪元素不会冲突,排除此项 )

!important > 内嵌 > id > 伪类 > 类选择器 > 元素选择器 > 通配符选择器 > 继承

span{
    border:inherit；
}
/* 继承是一种默认行为，有些会继承，有些不会继承，上面的代码就是让span继承父元素的border */

此外，在组合选择器中，

与选择器大于普通选择器，会将优先级叠加
在或选择器中，优先级不变，会分别计算

CSS样式设计

css有多种引入方式，可以在多个位置编写，也有多种写法。

但有如下几种推荐：

推荐使用外部css，因为link标签是异步加载的。
尽量减少css的数量，每次请求都是要耗费时间的
尽量使用css类，而不是一句一句css样式执行
尽量不要使用通配符，有可能的话尽量使用直接子选择器代替后代选择器

设计样式类是非常有用的，前端框架几乎都设计了很多样式类。

颜色与取值

颜色与单位等样式介绍

颜色模式

css色彩有多种合成模式，对应多种写法，大概有以下5种

名称	版本	描述
Color Name	CSS1	用颜色名称来指定颜色。包括基本颜色关键字、系统颜色、SVG颜色关键字等
HEX	CSS1	十六进制记法。语法如：#rrggbb或#rgb
HEXA	CSS3	十六进制记法。语法如：#rrggbbaa
RGB	CSS2	rgb记法
RGBA	CSS3	rgba记法
HSL	CSS3	hsl记法
HSLA	CSS3	hsla记法
transparent	CSS1/CSS3	全透明
currentColor	CSS3	当前颜色

提示：RGB可以使用数字（0-255），或者百分号（%）。而RGBA中最后的a表示阿尔法通道，表示不透明度。

提示：HSL表示色轮，S表示颜色的强度（饱和度）（0是灰色，1表示亮度），L表示亮度（黑与白的关系）（0是黑，1表示白）

例如，以下是合法的色彩赋值实例：

// 颜色名
color:red;
background-color: bluegreen;
// rgb
color: rgb(255,0,255);
background-color: rgb(0%,100%,100%);
// rgba
color:rgba(255,0,255,0);//全透明
background-color:(100%,0%,100%,100%);//红色
// 十六进制
color: #ff00ff;
background-color: #0ff;
// hsl
color: hsl(0,100%,50%);
background-color: hsl(0,100%,50%);

如果使用#ddd，那么它和#dddddd是一样的，类似的还有#f0f与#ff00ff。

长度单位

长度单位有多种，大概可以分成：相对单位，绝对单位。

基础相对单位：

长度单位	版本	描述
em	CSS1	相对于当前对象内文本的字体尺寸
ex	CSS1	相对于字符“x”的高度。通常为字体高度的一半
ch	CSS3	数字“0”的宽度
rem	CSS3	相对于根元素(即html元素)font-size计算值的倍数

相对窗口单位：

vw	CSS3	相对于视口的宽度。视口被均分为100单位的vw
vh	CSS3	相对于视口的高度。视口被均分为100单位的vh
vmax	CSS3	相对于视口的宽度或高度，总是相对于大的那个。视口的宽度或高度被均分为100单位的vmax
vmin	CSS3	相对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vmin

绝对长度单位：

cm	CSS1	厘米
mm	CSS1	毫米
q	CSS3	1/4毫米（quarter-millimeters）; 1q = 0.25mm
in	CSS1	英寸（inches）; 1in = 2.54cm
pt	CSS1	点（points）; 1pt = 1/72in
pc	CSS1	派卡（picas）; 1pc = 12pt
px	CSS1	像素（pixels）; 1px = 1/96in

函数支持

名称	版本	描述
calc()	CSS3	用于动态计算长度值。
toggle()	CSS3	允许子孙元素使用取值序列中的值循环替换继承而来的值。
counter()	CSS2/3	插入计数器
counters()	CSS2/3	重复插入的计数器
attr()	CSS2/3	插入元素的属性值

CSS样式参考

css规则由属性和样式组成。在这里是完整的CSS样式参考。

背景与边框

属性	版本	继承性	描述
border	CSS1	无	简写属性。定义元素边框的外观特性。参阅outline属性
border-width	CSS1	无	简写属性。定义元素的边框厚度
border-style	CSS1	无	简写属性。定义元素的边框样式
border-color	CSS1	无	简写属性。定义元素的边框颜色
box-shadow	CSS3	无	定义元素的阴影
border-radius	CSS3	无	简写属性。定义元素的圆角
border-image	CSS3	无	简写属性。定义将图像应用到元素的边框上
border-image-source	CSS3	无	定义元素边框样式所使用的图像。
border-image-slice	CSS3	无	用以指定从哪 4 个位置分割图像（遵循上右下左的顺序）
border-image-width	CSS3	无	定义元素边框图像的厚度
border-image-outset	CSS3	无	定义边框图像从边框边界向外偏移的距离
border-image-repeat	CSS3	无	定义分割图像怎样填充边框图像区域
background	CSS1/3	无	简写属性。定义元素的背景特性
background-color	CSS1	无	定义元素使用的背景颜色
background-image	CSS1/3	无	定义元素使用的背景图像
background-repeat	CSS1/3	无	定义元素的背景图像如何填充
background-attachment	CSS1/3	无	定义滚动时背景图像相对于谁固定
background-position	CSS1/3	无	指定背景图像在元素中出现的位置
background-origin	CSS3	无	指定的背景图像计算background-position时的参考原点(位置)
background-clip	CSS3	无	指定对象的背景图像向外裁剪的区域
background-size	CSS3	无	定义背景图像的尺寸大小

border样式

缩写边框属性设置在一个声明中所有的边框属性。

属性值	说明
border-width	指定边框的宽度
border-style	指定边框的样式
border-color	指定边框的颜色
inherit	指定应该从父元素继承border属性值

可以设置的属性分别（按顺序）：border-width, border-style,和border-color.

如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。

设置四个边框样式：

p
{
border:5px solid red;
}

border-width样式

border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值。

参数数量	描述
1	四个边框
2	上下、左右
3	上、左右、下
4	上、右、下、左

属性值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

设置四个边框的宽度：

p
{
    border-style:solid;
    border-width:15px;
}

border-style样式

border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。

参数数量	描述
1	四个边框
2	上下、左右
3	上、左右、下
4	上、右、下、左

属性值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

设置四个边框的样式：

p
{
    border-style:solid;
}

border-color样式

border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。

参数数量	描述
1	四个边框
2	上下、左右
3	上、左右、下
4	上、右、下、左

注意：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

值	说明
color	指定背景颜色。在CSS颜色值查找颜色值的完整列表
transparent	指定边框的颜色应该是透明的。这是默认
inherit	指定边框的颜色，应该从父元素继承

设置四个边框颜色：

p
{
border-style:solid;
border-color:#ff0000 #0000ff;
}

box-shadow样式

定义元素的阴影。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

向 div 元素添加阴影：

div
{
    box-shadow: 10px 10px 5px #888888;
}

border-radius样式

定义元素的圆角

border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同

值	描述
length	定义圆角的形状。
%	以百分比定义圆角的形状。

例子1：

border-radius:2em;

等价于：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

例子2：

border-radius: 2em 1em 4em / 0.5em 3em;