当前位置: 首页 > web>阅读正文

CSS参考手册

2021.11.17 朱丰华 323 次 留下评论 21464字

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

引入CSS

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

  1. style属性引入
  2. style标签引入
  3. link标签引入
  4. @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 NameCSS1用颜色名称来指定颜色。包括基本颜色关键字、系统颜色、SVG颜色关键字等
HEXCSS1十六进制记法。语法如:#rrggbb或#rgb
HEXACSS3十六进制记法。语法如:#rrggbbaa
RGBCSS2rgb记法
RGBACSS3rgba记法
HSLCSS3hsl记法
HSLACSS3hsla记法
transparentCSS1/CSS3全透明
currentColorCSS3当前颜色

提示: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。

长度单位

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

基础相对单位:

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

相对窗口单位:

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

绝对长度单位:

cmCSS1厘米
mmCSS1毫米
qCSS31/4毫米(quarter-millimeters); 1q = 0.25mm
inCSS1英寸(inches); 1in = 2.54cm
ptCSS1点(points); 1pt = 1/72in
pcCSS1派卡(picas); 1pc = 12pt
pxCSS1像素(pixels); 1px = 1/96in

函数支持

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

CSS样式参考

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

背景与边框

属性版本继承性描述
borderCSS1简写属性。定义元素边框的外观特性。参阅outline属性
border-widthCSS1简写属性。定义元素的边框厚度
border-styleCSS1简写属性。定义元素的边框样式
border-colorCSS1简写属性。定义元素的边框颜色
box-shadowCSS3定义元素的阴影
border-radiusCSS3简写属性。定义元素的圆角
border-imageCSS3简写属性。定义将图像应用到元素的边框上
border-image-sourceCSS3定义元素边框样式所使用的图像。
border-image-sliceCSS3用以指定从哪 4 个位置分割图像(遵循上右下左的顺序)
border-image-widthCSS3定义元素边框图像的厚度
border-image-outsetCSS3定义边框图像从边框边界向外偏移的距离
border-image-repeatCSS3定义分割图像怎样填充边框图像区域
backgroundCSS1/3简写属性。定义元素的背景特性
background-colorCSS1定义元素使用的背景颜色
background-imageCSS1/3定义元素使用的背景图像
background-repeatCSS1/3定义元素的背景图像如何填充
background-attachmentCSS1/3定义滚动时背景图像相对于谁固定
background-positionCSS1/3指定背景图像在元素中出现的位置
background-originCSS3指定的背景图像计算background-position时的参考原点(位置)
background-clipCSS3指定对象的背景图像向外裁剪的区域
background-sizeCSS3定义背景图像的尺寸大小

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;
}

定位

属性版本继承性描述
positionCSS2/3用于指定一个元素在文档中的定位方式
z-indexCSS2定义一个元素在文档中的层叠顺序
topCSS2定义了元素的上外边距边界与其包含块上边界之间的偏移
rightCSS2定义了元素的右外边距边界与其包含块右边界之间的偏移
bottomCSS2定义了元素的底外边距边界与其包含块底边界之间的偏移
leftCSS2定义了元素的左外边距边界与其包含块左边界之间的偏移
clipCSS2/3定义了元素的哪一部分是可见的。区域外的部分是透明的

布局

属性版本继承性描述
displayCSS2/3定义了元素是否显示,及生成哪种盒用于显示
floatCSS1定义了元素向左或者向右浮动放置。请参阅clear属性
clearCSS1定义了一个元素是否可以放置在它之前的浮动元素旁边,或者必须向下移动在新行中放置。请参阅float属性
visibilityCSS2定义了元素是否可见。与display属性不同,此属性为隐藏的对象保留其占据的物理空间
overflowCSS2/3简写属性。定义了元素处理溢出内容的方式

尺寸与补白

属性版本继承性描述
widthCSS1定义了元素内容区(Content Area)的宽度
min-widthCSS2定义了元素内容区(Content Area)的最小宽度
max-widthCSS2定义了元素内容区(Content Area)的最大宽度
heightCSS1定义了元素内容区(Content Area)的高度
min-heightCSS2定义了元素内容区(Content Area)的最小高度
max-heightCSS2定义了元素内容区(Content Area)的最大高度
marginCSS1为元素设置所有四个方向(上右下左)的外边距
paddingCSS1为元素设置所有四个方向(上右下左)的内边距,即内容和元素边界之间的空间

颜色

属性版本继承性描述
colorCSS1指定颜色。请参阅 颜色值
opacityCSS3定义元素的不透明度

字体

属性版本继承性描述
fontCSS1/2简写属性。定义元素的文本特性
font-styleCSS1指定元素的文本是否为斜体
font-variantCSS1定义元素的文本是否为小型的大写字母
font-weightCSS1定义元素文本字体的粗细
font-sizeCSS1定义元素的字体大小
font-familyCSS1定义元素文本的字体名称序列
font-stretchCSS3定义元素的文字是否横向拉伸变形
font-size-adjustCSS3定义小写字母x的高度与对象文字字号的比率。

文本

属性版本继承性描述
text-transformCSS1/3定义元素的文本如何转换大小写
white-spaceCSS1指定元素是否保留文本间的空格、换行;指定文本超过边界时是否换行。
tab-sizeCSS3定义元素内容中制表符的长度
word-breakCSS3定义元素内容文本的字间与字符间的换行行为
word-wrap/overflow-wrapCSS3定义元素内容文本遇到边界时如何换行
text-alignCSS1/3定义元素内容的水平对齐方式
text-align-lastCSS3定义块内文本内容的最后一行(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)或者被强制打断的行的对齐方式
text-justifyCSS3定义使用什么方式实现文本内容两端对齐
word-spacingCSS1/3指定单词之间的额外间隙
letter-spacingCSS1/3指定字符之间的额外间隙
text-indentCSS1/3定义块内文本内容的缩进
vertical-alignCSS1/2定义行内元素在行框内的垂直对齐方式
line-heightCSS1定义元素中行框的最小高度
text-size-adjustCSS3定义移动端页面中元素文本的大小如何调整

文本装饰

属性版本继承性描述
text-decorationCSS1/3简写属性。定义元素文本装饰
text-decoration-lineCSS3定义元素文本装饰线条位于文本的哪个位置
text-decoration-colorCSS3指定元素文本装饰线条的颜色
text-decoration-styleCSS3定义元素文本装饰线条的形状
text-decoration-skipCSS3定义元素文本装饰线条必须跳过内容中的哪些部分
text-underline-positionCSS3定义元素装饰线的位置
text-shadowCSS3定义文字是否有阴影及模糊效果

书写模式

属性版本继承性描述
directionCSS2检索或设置文本流的方向
unicode-bidiCSS2用于同一个页面里存在从不同方向读进的文本显示。与 <‘ direction ‘> 属性一起使用
writing-modeCSS3设置或检索对象的内容块固有的书写方向

列表

属性版本继承性描述
list-styleCSS1复合属性。设置列表项目相关内容
list-style-imageCSS1设置或检索作为对象的列表项标记的图像
list-style-positionCSS1设置或检索作为对象的列表项标记如何根据文本排列
list-style-typeCSS1/2设置或检索对象的列表项所使用的预设标记

表格

属性版本继承性描述
table-layoutCSS2设置或检索表格的布局算法
border-collapseCSS2设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开
border-spacingCSS2设置或检索当表格边框独立时,行和单元格的边框在横向和纵向上的间距
caption-sideCSS2设置或检索表格的caption对象是在表格的那一边
empty-cellsCSS2设置或检索当表格的单元格无内容时,是否显示该单元格的边框

内容

属性版本继承性描述
contentCSS2用来和:after及:before伪元素一起使用,在对象前或后显示内容
counter-incrementCSS2设定当一个selector发生时计数器增加的值
counter-resetCSS2将指定selector的计数器复位
quotesCSS2设置或检索对象内使用的嵌套标记

用户界面

属性版本继承性描述
appearanceCSS3设置或检索外观按照本地默认样式
text-overflowCSS3当块容器overflow为非visible时,定义内联内容溢出其块容器是否截断或者添加(…)及自定义字符
outlineCSS2复合属性。设置或检索对象外的线条轮廓
outline-widthCSS2设置或检索对象外的线条轮廓的宽度
outline-styleCSS2设置或检索对象外的线条轮廓的样式
outline-colorCSS2设置或检索对象外的线条轮廓的颜色
outline-offsetCSS3设置或检索对象外的线条轮廓偏移位置的数值
nav-indexCSS3设置或检索对象的导航顺序。
nav-upCSS3设置或检索对象的导航方向。
nav-rightCSS3设置或检索对象的导航方向。
nav-downCSS3设置或检索对象的导航方向。
nav-leftCSS3设置或检索对象的导航方向。
cursorCSS2设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
zoomCSS3设置或检索对象的缩放比例。
box-sizingCSS3设置或检索对象的盒模型组成模式。
resizeCSS3设置或检索对象的区域是否允许用户缩放,调节元素尺寸大小。
ime-modeCSS3设置或检索是否允许用户激活输入中文,韩文,日文等的输入法(IME)状态。
user-selectCSS3设置或检索是否允许用户选中文本。
pointer-eventsCSS3设置或检索在何时成为属性事件的target。

多列

属性版本继承性描述
columnsCSS3设置或检索对象的列数和每列的宽度。复合属性
column-widthCSS3设置或检索对象每列的宽度
column-countCSS3设置或检索对象的列数
column-gapCSS3设置或检索对象的列与列之间的间隙
column-ruleCSS3设置或检索对象的列与列之间的边框。复合属性
column-rule-widthCSS3设置或检索对象的列与列之间的边框厚度。
column-rule-styleCSS3设置或检索对象的列与列之间的边框样式。
column-rule-colorCSS3设置或检索对象的列与列之间的边框颜色。
column-spanCSS3设置或检索对象元素是否横跨所有列。
column-fillCSS3设置或检索对象所有列的高度是否统一。
column-break-beforeCSS3设置或检索对象之前是否断行。
column-break-afterCSS3设置或检索对象之后是否断行。
column-break-insideCSS3设置或检索对象内部是否断行。

伸缩盒

属性版本继承性描述
flexCSS3复合属性。设置或检索伸缩盒对象的子元素如何分配空间。
flex-growCSS3设置或检索弹性盒的扩展比率。
flex-shrinkCSS3设置或检索弹性盒的收缩比率
flex-basisCSS3设置或检索弹性盒伸缩基准值。
flex-flowCSS3复合属性。设置或检索伸缩盒对象的子元素排列方式。
flex-directionCSS3设置或检索伸缩盒对象的子元素在父容器中的位置。
flex-wrapCSS3设置或检索伸缩盒对象的子元素超出父容器时是否换行。
align-contentCSS3设置或检索弹性盒堆叠伸缩行的对齐方式。
align-itemsCSS3设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
align-selfCSS3设置或检索弹性盒子元素自身在侧轴(纵轴)方向上的对齐方式。
justify-contentCSS3设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
orderCSS3设置或检索伸缩盒对象的子元素出現的順序。

变换

属性版本继承性描述
transformCSS3检索或设置对象的变换
transform-originCSS3检索或设置对象中的变换所参照的原点
transform-styleCSS3指定某元素的子元素是否位于三维空间内
perspectiveCSS3指定观察者与「z=0」平面的距离
perspective-originCSS3指定透视点的位置
backface-visibilityCSS3指定元素背面面向用户时是否可见

过渡

属性版本继承性描述
transitionCSS3复合属性。检索或设置对象变换时的过渡效果
transition-propertyCSS3检索或设置对象中的参与过渡的属性
transition-durationCSS3检索或设置对象过渡的持续时间
transition-timing-functionCSS3检索或设置对象中过渡的类型
transition-delayCSS3检索或设置对象延迟过渡的时间

动画

属性版本继承性描述
animationCSS3复合属性。检索或设置对象所应用的动画特效
animation-nameCSS3检索或设置对象所应用的动画名称
animation-durationCSS3检索或设置对象动画的持续时间
animation-timing-functionCSS3检索或设置对象动画的过渡类型
animation-delayCSS3检索或设置对象动画延迟的时间
animation-iteration-countCSS3检索或设置对象动画的循环次数
animation-directionCSS3检索或设置对象动画在循环中是否反向运动
animation-play-stateCSS3检索或设置对象动画的状态
animation-fill-modeCSS3检索或设置对象动画时间之外的状态

打印

属性版本继承性描述
pageCSS3检索或指定显示对象容器时使用的页面类型。
page-break-beforeCSS2检索或设置对象之前出现的页分割符。
page-break-afterCSS2检索或设置对象之后出现的页分割符。
page-break-insideCSS2检索或设置对象容器内部出现的页分割符。

Only IE

属性版本继承性描述
scrollbar-3dlight-colorCSS1检索或设置对象滚动条3d亮色阴影边框(threedlightshadow)的外观颜色。
scrollbar-darkshadow-colorCSS1检索或设置对象滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色。
scrollbar-highlight-colorCSS1检索或设置对象滚动条3d高亮边框(threedhighlight)的外观颜色。
scrollbar-shadow-colorCSS1检索或设置对象滚动条3d阴影边框(threedshadow)的外观颜色。
scrollbar-arrow-colorCSS1检索或设置对象滚动条方向箭头的颜色。当滚动条出现但不可用时,此属性失效。
scrollbar-face-colorCSS1检索或设置对象滚动条3D表面的(threedface)的外观颜色。
scrollbar-track-colorCSS1检索或设置对象滚动条拖动区域的外观颜色。
scrollbar-base-colorCSS1检索或设置对象滚动条基准颜色,其它界面颜色将据此自动调整。
filterCSS1设置或检索对象所应用的滤镜效果。
behaviorCSS1设置或检索对象的DHTML行为。

Only webkit

属性版本继承性描述
-webkit-text-fill-colorCSS3定义文字填充色
-webkit-text-strokeCSS3复合属性。定义文字的描边样式。
-webkit-text-stroke-widthCSS3定义文字描边的厚度
-webkit-text-stroke-colorCSS3定义文字描边的颜色
-webkit-box-reflectCSS3为元素设置倒影
-webkit-tap-highlight-colorCSS3定义元素轻按时高亮
-webkit-user-dragCSS3用以设置一个元素和它的内容是否可以被拖拽
-webkit-overflow-scrollingCSS3指定元素是否使用native-style(滚动回弹效果)来滚动溢出内容

本篇完,还有疑问?留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注