CSS学习记录

最新推荐文章于 2023-11-22 11:17:12 发布

一本静哥

最新推荐文章于 2023-11-22 11:17:12 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/m0_51054563/article/details/119253444

版权

CSS

CSS 指的是层叠样式表 (Cascading Stylesheets), 也称级联样式表 ,是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时
外部样式表存储在 CSS 文件中

A. 请勿在属性值和单位之间添加空格
B. 位于

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

行内样式（在 HTML 元素中）7
外部和内部样式表（在 head 部分）
浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

CSS 语法

CSS 规则集（rule-set）由选择器和声明块组成：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WH4mGFoP-1627638864800)(E:\Typora_Copy_Image\1625819578856.png)]

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

##CSS 选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素,分为五类：

###1. 简单选择器（根据名称、id、类来选取元素）

id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。 **注意：**id 名称不能以数字开头。
类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。 p.center表示只有具有 class=“center” 的
元素。
通用选择器（*）选择页面上的所有的 HTML 元素。

所有简单的 CSS 选择器

选择器	例子	例子描述
.class（类选择器）	.intro	选取所有 class=“intro” 的元素。
#id（id选择器）	#firstname	选取 id=“firstname” 的那个元素。
*（通用选择器）	*	选取所有元素。
element（元素选择器）	p	选取所有元素。
element,element,.（分组选择器）	div, p	选取所有元素和所有元素。

###2. 组合器选择器（根据它们之间的特定关系来选取元素）最好对选择器进行分组，以最大程度地缩减代码。如需对选择器进行分组，请用逗号来分隔每个选择器。

###3. - 后代选择器 (空格)，后代选择器匹配属于指定元素后代的所有元素。

 ~~~html
 div p {
   background-color: yellow;
 }
 ~~~

选择

元素内的所有

元素。

子选择器 (>), 子选择器匹配属于指定元素子元素的所有元素。
```
div > p {
  background-color: yellow;
}
```
选择其父元素是

元素的所有
元素。
相邻兄弟选择器 (+)，相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
```
div + p {
  background-color: yellow;
}
```
选择所有紧随

元素之后的
元素。
通用兄弟选择器 (~), 通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
```
div ~ p {
  background-color: yellow;
}
```
选择前面有

元素的每个
元素。

###4. 伪类选择器（根据特定状态选取元素）

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

##伪类

###伪类的语法：

selector:pseudo-class {
  property: value;
}

###伪类与 CSS 类结合使用

####伪类与div结合使用div:hover

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}
</style>
</head>
<body>

<p>请把鼠标移到下面的 div 元素上来改变其背景色：</p>

<div>把鼠标移到我上面</div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j4GOcieI-1627638864804)(…/Typora_Copy_Image/1625825362091.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FcE7YFxn-1627638864805)(…/Typora_Copy_Image/1625825379283.png)]

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>鼠标移到我上面来显示 p 元素
  <p>哈哈！我在这里！</p>
</div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eyORX0Jm-1627638864807)(…/Typora_Copy_Image/1625825431766.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vd5dycrb-1627638864809)(…/Typora_Copy_Image/1625825446457.png)]

####伪类与链接结合使用

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */

a:link {

  color: red;

}


/* visited link */

a:visited {

  color: green;

}


/* mouse over link */

a:hover {

  color: hotpink;

}


/* selected link */

a:active {

  color: blue;

}

</style>
</head>
<body>

<h1>CSS 链接</h1>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>
</body>
</html>

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

简单的工具提示悬停

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

所有 CSS 伪类

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的元素。
:disabled	input:disabled	选择每个被禁用的元素。
:empty	p:empty	选择没有子元素的每个元素。
:enabled	input:enabled	选择每个已启用的元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个元素。
:first-of-type	p:first-of-type	选择作为其父的首个元素的每个元素。
:focus	input:focus	选择获得焦点的元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的元素。
:invalid	input:invalid	选择所有具有无效值的元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个元素的每个元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个元素的每个元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个元素的每个元素。
:only-of-type	p:only-of-type	选择作为其父的唯一元素的每个元素。
:only-child	p:only-child	选择作为其父的唯一子元素的元素。
:optional	input:optional	选择不带 “required” 属性的元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的元素。
:read-write	input:read-write	选择不带 “readonly” 属性的元素。
:required	input:required	选择指定了 “required” 属性的元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的元素。
:visited	a:visited	选择所有已访问的链接。

###4. 伪元素选择器（选取元素的一部分并设置其样式）

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

CSS 伪元素

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

###伪元素的语法：

 ```
 selector::pseudo-element {
   property: value;
 }
 ```

所有 CSS 伪元素

选择器	例子	例子描述
::after	p::after	在每个元素之后插入内容。
::before	p::before	在每个元素之前插入内容。
::first-letter	p::first-letter	选择每个元素的首字母。
::first-line	p::first-line	选择每个元素的首行。
::selection	p::selection	选择用户选择的元素部分。

匹配所有

元素中的首个 元素:p i:first-child

###first-child 伪类

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。匹配首个

元素如：

p:first-child {
  color: blue;
}

匹配所有首个

元素中的所有 元素:p:first-child i

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<p>请把鼠标移到链接上并观察样式的变化：</p>

<p><b><a class="one" href="default.asp" target="_blank">此链接改变颜色</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">此链接改变字体大小</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">此链接改变背景色</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">此链接改变字体族</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">此链接改变文本装饰</a></b></p>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t2XUTd1N-1627638864810)(…/Typora_Copy_Image/1625825814539.png)]

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: yellow;
}
</style>
</head>
<body>

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AFG3ZWzo-1627638864811)(…/Typora_Copy_Image/1625825869325.png)]

###5. 属性选择器（根据属性或属性值来选取元素）

所有 CSS 属性选择器

选择器	例子	例子描述
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]	选择带有包含 “flower” 一词的 title 属性的所有元素。
[attribute\|=value]	[lang\|=en]	选择带有以 “en” 开头的 lang 属性的所有元素。
[attribute^=value]	a[href^=“https”]	选择其 href 属性值以 “https” 开头的每个元素。
[attribute$=value]	a[href$=".pdf"]	选择其 href 属性值以 “.pdf” 结尾的每个元素。
[attribute=value*]	a[href*=“w3school”]	选择其 href 属性值包含子串 “w3school” 的每个元素。

###[attribute] 选择器用于选取带有指定属性的元素。

选择所有带有 target 属性的元素：a[target]

###[attribute=“value”] 选择器用于选取带有指定属性和值的元素。

选取所有带有 target="_blank" 属性的元素：a[target="_blank"]
选取 class 属性以 “top” 开头的所有元素： [class|=“top”]

**注意：**值必须是完整或单独的单词，比如 class=“top” 或者后跟连字符的，比如 class=“top-text”。

###[attribute~=“value”] 选择器选取属性值包含指定词的元素。

选取 title 属性包含 “flower” 单词的所有元素：[title~=“flower”]

###[attribute^=“value”] 选择器用于选取指定属性以指定值开头的元素。

选取 class 属性以 “top” 开头的所有元素：[class^=“top”]

**提示：**值不必是完整单词！

###[attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素。

选取 class 属性以 “test” 结尾的所有元素：[class$=“test”]

**提示：**值不必是完整单词！

###[attribute*=“value”] 选择器选取属性值包含指定词的元素。

下例选取 class 属性包含 “te” 的所有元素：[class*=“te”]

**提示：**值不必是完整单词！

若需为不带 class 或 id 的表单设置样式，属性选择器会很有用： input[type=“text”]将仅选择文本字段；input[type=“button”]

如何添加CSS

有三种插入样式表的方法：

外部 CSS: 外部样式在 HTML 页面部分内的元素中进行定义：
内部 CSS: 内部样式在 HTML 页面的部分内的

CSS颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HcX0q36p-1627638864812)(…/Typora_Copy_Image/1625906756857.png)]

CSS 边框颜色

<h1 style="border:2px solid Tomato;">Hello World</h1>

###rgb(red, green, blue)

每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。
rgb(255, 0, 0) 显示为红色，因为红色设置为最大值（255），其他设置为 0。
要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。
要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。
通常为所有 3 个光源使用相等的值来定义灰色阴影

###RGBA (red, green, blue, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字

###HEX

#rrggbb

其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。#ff0000 显示为红色，因为红色设置为最大值（ff），其他设置为最小值（00）。通常为所有 3 个光源使用相等的值来定义灰色阴影

###HSL

色相、饱和度和亮度,hsla(hue, saturation, lightness)
色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。饱和度（saturation）是一个百分比值，0％表示灰色阴影，而 100％是全色。亮度（lightness）也是百分比，0％是黑色，50％是既不明也不暗，100％是白色。
色相是色轮上的度数（从 0 到 360）：

0（或 360）是红色
120 是绿色
240 是蓝色
饱和度是一个百分比值：100％是全色。
亮度也是一个百分比值：0％是深色（黑色），而 100％是白色。

###hsla(hue, saturation, lightness, alpha)

CSS背景

background-color：指定元素的背景色 |如： background-color: lightblue;
background-image：指定用作元素背景的图像 |如：background-image：url(“paper.gif”);
background-repeat：仅在水平方向重复 : background-repeat: repeat-x;
仅在垂直重复图像: background-repeat: repeat-y;
只显示一次背景图像 :background-repeat: no-repeat;
background-attachment：指定背景图像滚动：background-attachment: fixed;
固定：background-attachment: scroll;
background-position：指定背景图像的位置 |如：background-position: right top;

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

###透明度

不透明度 / 透明度opacity属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明
**注意：**使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。如果您不希望对子元素应用不透明度，

###CSS 背景简写

在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

如：background: #ffffff url(“tree.png”) no-repeat right top; 属性值之一缺失并不要紧，只要按照此顺序设置其他值即可

###所有 CSS 背景属性

属性	描述
background	在一条声明中设置所有背景属性的简写属性。
background-attachment	设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip	规定背景的绘制区域。
background-color	设置元素的背景色。
background-image	设置元素的背景图像。
background-origin	规定在何处放置背景图像。
background-position	设置背景图像的开始位置。
background-repeat	设置背景图像是否及如何重复。
background-size	规定背景图像的尺寸。

##CSS 边框

border-style 属性指定要显示的边框类型。

允许以下值：

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

###CSS 边框宽度

border-width 属性指定四个边框的宽度如：border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px /。 border-width: 5px 20px; / 上边框和下边框为 5px，其他边为 20px */

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：

CSS 边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
transparent

**注释：**如果未设置 border-color，则它将继承元素的颜色。

border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。：border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */（顺时针）

###CSS 边框 - 单独的边

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

上面可以简化为：border-style: dotted solid double dashed;（上虚线右实线下双线左虚线）

border-style: dotted solid double;（上虚线右和左实线下双线）

border-style: dotted solid;（上和下虚线右和左实线）

如果 border-style 属性设置一个值：border-style: dotted;四条边均为虚线

CSS 简写边框属性

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color

可以只为一个边指定所有单个边框属性 :如： border-left: 6px solid red;

###圆角边框

border-radius 属性用于向元素添加圆角边框： border-radius: 8px;值越大角越圆。

所有 CSS 边框属性

属性	描述
border	简写属性，在一条声明中设置所有边框属性。
border-color	简写属性，设置四条边框的颜色。
border-radius	简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style	简写属性，设置四条边框的样式。
border-width	简写属性，设置四条边框的宽度。
border-bottom	简写属性，在一条声明中设置所有下边框属性。
border-bottom-color	设置下边框的颜色。
border-bottom-style	设置下边框的样式。
border-bottom-width	设置下边框的宽度。
border-left	简写属性，在一条声明中设置所有左边框属性。
border-left-color	设置左边框的颜色。
border-left-style	设置左边框的样式。
border-left-width	设置左边框的宽度。
border-right	简写属性，在一条声明中设置所有右边框属性。
border-right-color	设置右边框的颜色。
border-right-style	设置右边框的样式。
border-right-width	设置右边框的宽度。
border-top	简写属性，在一条声明中设置所有上边框属性。
border-top-color	设置上边框的颜色。
border-top-style	设置上边框的样式。
border-top-width	设置上边框的宽度。

CSS 外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

Margin - 单独的边

margin-top：设置元素的上外边距。
margin-right：设置元素的右外边距。
margin-bottom：设置元素的下外边距。
margin-left：设置元素的左外边距。

有外边距属性都可以设置以下值（允许负值）：

auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距

Margin - 简写属性

margin: 25px 50px 75px 100px;
上外边距是 25px
右外边距是 50px
下外边距是 75px
左外边距是 100px

如果 margin 属性设置三个值：margin: 25px 50px 75px;

上外边距是 25px
右和左外边距是 50px
下外边距是 75px

如果 margin 属性设置两个值：margin: 25px 50px;

上和下外边距是 25px
右和左外边距是 50px

如果 margin 属性设置了一个值：margin: 25px;

所有四个外边距都是 25px

###CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

##CSS 内边距

padding 属性用于在任何定义的边界内的元素内容周围生成空间。

padding-top：设置元素的上内边距
padding-right：设置元素的右内边距
padding-bottom：设置元素的下内边距
padding-left：设置元素的左内边距

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距

**提示：**不允许负值。

Padding - 简写属性：padding: 25px 50px 75px 100px;

上内边距是 25px
右内边距是 50px
下内边距是 75px
左内边距是 100px

如果 padding 属性设置了三个值：padding: 25px 50px 75px;

上内边距是 25px
右和左内边距是 50px
下内边距是 75px

如果 padding 属性设置了两个值：padding: 25px 50px;

上和下内边距是 25px
右和左内边距是 50px

如果 padding 属性设置了一个值：padding: 25px;

所有四个内边距都是 25px

width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

##CSS 高度和宽度

height 和 width 属性用于设置元素的高度和宽度。height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

height 和 width 属性可设置如下值：

auto - 默认。浏览器计算高度和宽度。
length - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。
initial - 将高度/宽度设置为默认值。
inherit - 从其父值继承高度/宽度。

max-width 属性用于设置元素的最大宽度。可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。

注释：max-width 属性的值将覆盖 width（宽度）。

CSS 框模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p2d7FR56-1627638864813)(…/Typora_Copy_Image/1625911827498.png)]

对不同部分的说明：

内容 - 框的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的。
边框 - 围绕内边距和内容的边框。
外边距 - 清除边界外的区域。外边距是透明的。

**提示：**背景应用于由内容和内边距、边框组成的区域。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-06eXFyoR-1627638864813)(…/Typora_Copy_Image/1625912158581.png)]

元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

CSS 轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

CSS 拥有如下轮廓属性：

outline-style

###轮廓样式

outline-style 属性指定轮廓的样式，并可设置如下值：
- dotted - 定义点状的轮廓。
- dashed - 定义虚线的轮廓。
- solid - 定义实线的轮廓。
- double - 定义双线的轮廓。
- groove - 定义 3D 凹槽轮廓。
- ridge - 定义 3D 凸槽轮廓。
- inset - 定义 3D 凹边轮廓。
- outset - 定义 3D 凸边轮廓。
- none - 定义无轮廓。
- hidden - 定义隐藏的轮廓。
outline-color

###轮廓颜色

outline-color 属性用于设置轮廓的颜色。

可以通过以下方式设置颜色：
- name - 指定颜色名，比如 “red”
- HEX - 指定十六进制值，比如 “#ff0000”
- RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
- HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
- invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）
outline-width

###轮廓宽度

outline-width 属性指定轮廓的宽度，并可设置如下值之一：
- thin（通常为 1px）
- medium（通常为 3px）
- thick （通常为 5px）
- 特定尺寸（以 px、pt、cm、em 计）
outline-offset

###轮廓偏移

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。如：outline-offset: 25px;
outline

###简写属性

outline 属性是用于设置以下各个轮廓属性的简写属性：
- outline-width
- outline-style（必需）
- outline-color
从上面的列表中，outline 属性可指定一个、两个或三个值。值的顺序无关紧要。

**注意：**轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

##CSS 文本

###文本颜色和背景色

color 属性用于设置文本的颜色，background-color属性用于设置背景色。颜色由以下值指定：

颜色名 - 比如 “red”
十六进制值 - 比如 “#ff0000”
RGB 值 - 比如 “rgb(255,0,0)”

###文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。(left,center,right)

注意：当 text-align 属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）

direction 和 unicode-bidi 属性可用于更改元素的文本方向

vertical-align 属性设置元素的垂直对齐方式有（top,middle,bottom）

###文字装饰

text-decoration 属性用于设置或删除文本装饰。
text-decoration: overline;（在文本上方）
text-decoration: line-through;（穿过文本中间）
text-decoration: underline;（下滑线）建议不要在非链接文本加下划线，因为这经常会使读者感到困惑。
text-decoration: none; 通常用于从链接上删除下划线

###文本转换

text-transform 属性用于指定文本中的大写和小写字母。

text-transform: uppercase; 将所有内容转换为大写字母

text-transform: lowercase; 将所有内容转换为小写字母

text-transform: capitalize; 将每个单词的首字母大写

###文字缩进

text-indent 属性用于指定文本第一行的缩进，如：text-indent: 50px;

###字母间距

letter-spacing 属性用于指定文本中字符之间的间距。如：text-indent: -3px;

###行高

line-height 属性用于指定行之间的间距，如：line-height: 1.8;

###字间距

word-spacing 属性用于指定文本中单词之间的间距。如：word-spacing: 10px;

###空白

white-space 属性指定元素内部空白的处理方式。

如：white-space: nowrap;禁用元素内的文本换行

###文本阴影

text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）， text-shadow: 2px 2px;默认：黑色；向阴影添加颜色（红色）：text-shadow: 2px 2px red;
阴影添加模糊效果（5px）：text-shadow: 2px 2px 5px red;

##CSS 字体

所有 CSS 字体属性

属性	描述
font	简写属性。在一条声明中设置所有字体属性。
font-family	规定文本的字体系列（字体族）。
font-size	规定文本的字体大小。
font-style	规定文本的字体样式。
font-variant	规定是否以小型大写字母的字体显示文本。
font-weight	规定字体的粗细。

font 属性是以下属性的简写属性：

font-style
font-variant
font-weight
font-size/line-height
font-family

注意：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

通用字体族

在 CSS 中，有五个通用字体族：

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。

所有不同的字体名称都属于这五个通用字体系列之一。

通用字体族	字体名称实例
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

使用 font-family 属性规定文本的字体， font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。如：font-family: “Lucida Console”, “Courier New”, monospace;

###字体样式

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

###字体粗细

font-weight 属性指定字体的粗细（normal，bold）

###字体变体

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。
在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。（丑得一批）

###字体大小

font-size 属性设置文本的大小。

绝对尺寸：

将文本设置为指定大小
不允许用户在所有浏览器中更改文本大小（可访问性不佳）
当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

设置相对于周围元素的大小
允许用户在浏览器中更改文本大小

使用百分比和 Em 的组合，默认大小 1em 为 16px ，font-size: 1.875em; /* 30px/16=1.875em */，font-size: 100%;

###响应式字体大小

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（“viewport width”）。这样，文本大小将遵循浏览器窗口的大小。视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。

CSS 图标

向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。将指定的图标类的名称添加到任何行内 HTML 元素（如 或）。

###Font Awesome 图标

如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的部分：

###Bootstrap 图标

如需使用 Bootstrap glyphicons，请在 HTML 页面的部分内添加这行：<link rel="stylesheet"href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>

###Google 图标

如需使用 Google 图标，请在HTML页面的部分中添加以下行：

##CSS 链接

###设置链接样式

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：

a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

如果为多个链接状态设置样式，请遵循如下顺序规则：

a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后
即link or visited hover active

##CSS 列表

所有 CSS 列表属性

属性	描述
list-style	简写属性。在一条声明中设置列表的所有属性。
list-style-image	指定图像作为列表项标记。
list-style-position	规定列表项标记（项目符号）的位置。
list-style-type	规定列表项标记的类型。

###不同的列表项目标记

list-style-type 属性指定列表项标记的类型。

无序：list-style-type: circle;/square
有序：list-style-type: lower-alpha;

###图像作为列表项标记

list-style-image 属性将图像指定为列表项标记

如：list-style-image: url(‘sqpurple.gif’);

###定位列表项标记

list-style-position 属性指定列表项标记（项目符号）的位置。

“list-style-position: outside;” 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。

“list-style-position: inside;” 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本

###删除默认设置

list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在

或
1. 中添加 margin:0 和 padding:0

###列表 - 简写属性

list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性

在使用简写属性时，属性值的顺序为：

list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
list-style-position（指定列表项标记应显示在内容流的内部还是外部）
list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

##CSS 表格

属性	描述
border	简写属性。在一条声明中设置所有边框属性。
border-collapse	规定是否应折叠表格边框。
border-spacing	规定相邻单元格之间的边框的距离。
caption-side	规定表格标题的位置。
empty-cells	规定是否在表格中的空白单元格上显示边框和背景。
table-layout	设置用于表格的布局算法。

###水平分隔线

向和添加 border-bottom 属性，以实现水平分隔线，如： border-bottom: 1px solid #ddd;

###可悬停表格

在元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行
如：tr:hover {background-color: #f5f5f5;}

###条状表格

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color ，如：tr:nth-child(even) {background-color: #f2f2f2;}

###响应式表格

如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条：

在

元素周围添加带有 overflow-x:auto 的容器元素（例如

），以实现响应式效果

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h1>响应式表格</h1>
<p>如果屏幕太小无法显示全部内容，响应表将显示水平滚动条。请调整浏览器窗口的大小以查看效果：</p>
<p>如需创建响应式表格，请用 <strong>overflow-x:auto</strong> 的容器元素（比如 div）包围表格元素：</p>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Bill</td>
      <td>Gates</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Steve</td>
      <td>Jobs</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Elon</td>
      <td>Musk</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>
<table id="customers">
	<tr>
		<th>Company</th>
		<th>Contact</th>
		<th>Address</th>
		<th>City</th>
	</tr>
	<tr>
		<td>Alibaba</td>
		<td>Ma Yun</td>
		<td>No. 699, Wangshang Road, Binjiang District</td>
		<td>Hangzhou</td>
	</tr>
	<tr>
		<td>APPLE</td>
		<td>Tim Cook</td>
		<td>1 Infinite Loop Cupertino, CA 95014</td>
		<td>Cupertino</td>
	</tr>
	<tr>
		<td>BAIDU</td>
		<td>Li YanHong</td>
		<td>Lixiang guoji dasha,No 58, beisihuanxilu</td>
		<td>Beijing</td>
	</tr>
	<tr>
		<td>Canon</td>
		<td>Tsuneji Uchida</td>
		<td>One Canon Plaza Lake Success, NY 11042</td>
		<td>New York</td>
	</tr>
	<tr>
		<td>Google</td>
		<td>Larry Page</td>
		<td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
		<td>Mountain View</td>
	</tr>
	<tr>
		<td>HUAWEI</td>
		<td>Ren Zhengfei</td>
		<td>Putian Huawei Base, Longgang District</td>
		<td>Shenzhen</td>
	</tr>
	<tr>
		<td>Microsoft</td>
		<td>Bill Gates</td>
		<td>15700 NE 39th St Redmond, WA 98052</td>
		<td>Redmond</td>
	</tr>
	<tr>
		<td>Nokia</td>
		<td>Olli-Pekka Kallasvuo</td>
		<td>P.O. Box 226, FIN-00045 Nokia Group</td>
		<td>Helsinki</td>
	</tr>
	<tr>
		<td>SONY</td>
		<td>Kazuo Hirai</td>
		<td>Park Ridge, NJ 07656</td>
		<td>Park Ridge</td>
	</tr>
	<tr>
		<td>Tencent</td>
		<td>Ma Huateng</td>
		<td>Tencent Building, High-tech Park, Nanshan District</td>
		<td>Shenzhen</td>
	</tr>
</table>
</body>
</html>

##CSS 布局

所有 CSS 定位属性

属性	描述
bottom	设置定位框的底部外边距边缘。
clip	剪裁绝对定位的元素。
left	设置定位框的左侧外边距边缘。
position	规定元素的定位类型。
right	设置定位框的右侧外边距边缘。
top	设置定位框的顶部外边距边缘。
z-index	设置元素的堆叠顺序。

display 属性规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

###块级元素（block element）

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。

块级元素的一些例子：

- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>

###行内元素（inline element）

内联元素不从新行开始，仅占用所需的宽度。

这是段落中的行内元素。

行内元素的一些例子：

<span>
<a>
<img>
<em>
<strong>

设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中， display: none; 不会占用任何空间。

visibility:hidden; 也可以隐藏元素。但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局

设置块级元素的 width 将防止其延伸到其容器的边缘。然后，您可以将外边距设置为 auto，以将元素在其容器中水平居中。元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配 。**注意：**当浏览器窗口小于元素的宽度时，上面这个 **** 会发生问题。浏览器会将水平滚动条添加到页面。在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用，这一点很重要

position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

position: static;

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位

position: relative;

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

position: fixed;

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

请注意页面右下角的这个固定元素。这是所用的 CSS

position: absolute;

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

注意：“被定位的”元素是其位置除 static 以外的任何元素。

position: sticky;

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

重叠元素

在对元素进行定位时，它们可以与其他元素重叠。

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。

元素可以设置正或负的堆叠顺序， **注意：**如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。

溢出

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

visible - 默认。溢出没有被剪裁。内容在元素框外渲染,overflow: visible
hidden - 溢出被剪裁，其余内容将不可见,overflow: hidden
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容,overflow: scroll
auto - 与 scroll 类似，但仅在必要时添加滚动条,overflow: auto

**注释：**overflow属性仅适用于具有指定高度的块元素。

###overflow-x 和 overflow-y

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

overflow-x 指定如何处理内容的左/右边缘。
overflow-y 指定如何处理内容的上/下边缘。

###浮动和清除

####浮动

####所有 CSS 浮动属性

属性	描述
box-sizing	定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框。
clear	指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。
float	指定元素应如何浮动。
overflow	指定如果内容溢出元素框会发生什么情况。
overflow-x	指定当溢出元素的内容区域时，如何处理内容的左/右边缘。
overflow-y	指定当溢出元素的内容区域时，如何处理内容的上/下边缘。

CSS float 属性规定元素如何浮动。

'float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

####清除

CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：

none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

####clearfix Hack

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

然后我们可以向包含元素添加 overflow: auto;，来解决此问题

只要您能够控制外边距和内边距（否则您可能会看到滚动条），overflow: auto clearfix 就会很好地工作。但是，新的现代 clearfix hack 技术使用起来更安全，以下代码被应用于多数网站：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.img2 {
  float: right;
}
</style>
</head>
<body>

<p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：</p>

<div>
  <h1>Without Clearfix</h1>
  <img class="img1" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

<p style="clear:right">请为包含元素添加 clearfix hack，以解决此问题：</p>

<div class="clearfix">
  <h1>With Clearfix</h1>
  <img class="img2" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2qRnUdQu-1627638864815)(…/Typora_Copy_Image/1626255774956.png)]

box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。

##导航菜单

###水平导航

有两种创建水平导航栏的方法：使用行内或浮动列表项。

####行内列表项

构建水平导航栏的一种方法:

li {
  display: inline;
}

display: inline; -默认情况下，

元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。

####向当前链接添加 “active” 类，这样用户就知道他/她在哪个页面上

.active {
  background-color: #4CAF50;
}

将 float 与超链接列表一起使用，来创建水平菜单

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;<!--overflow:hidden 被添加到 ul 元素，以防止 li 元素超出列表-->
  background-color: #333;<!--全宽的背景色需要加在ul中-->
}

li {
  float: left;<!--使用 float 使块元素滑动为彼此相邻-->
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;<!--使块元素更美观-->
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;<--!用户就知道他/她在哪个页面上-->
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yotWFndZ-1627638864816)(…/Typora_Copy_Image/1626256386153.png)]

####边框分隔栏

将 border-right 属性添加到

，以创建链接分隔符：
```
/* 为所有列表项添加灰色右边框，最后一项（last-child）除外 */
li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}
```
####固定的导航栏

使导航栏保持在页面的顶部或底部，即使用户滚动页面也是如此

固定在顶部:
```
ul {
  position: fixed;
  top: 0;
  width: 100%;
}
```
固定在底部:
```
ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}
```
####粘性导航栏

为
- 添加 position: sticky;，以创建粘性导航栏。
粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
```
ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
```
注意：必须指定 top、right、bottom 或 left 至少之一，以使粘性定位起作用。

###垂直导航

####用ul和li
```
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
} 

li a {
  display: block;
}
```
- display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。
- 还可以设置
  - 的宽度，并删除的宽度，因为当显示为块元素时，它们将占据可用的全部宽度。
创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色
```
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* 鼠标悬停时改变链接颜色 */
li a:hover {
  background-color: #555;
  color: white;
}
```
向当前链接添加 “active” 类，以使用户知道他/她在哪个页面上
```
.active {
  background-color: #4CAF50;
  color: white;
}
```
###居中链接以及添加边框

把 text-align:center 添加到
或，使链接居中。

将 border 属性添加到

，在导航栏周围添加边框。如果您还希望在导航栏内添加边框，请为所有
元素添加 border-bottom，最后一个元素除外

ul {
  border: 1px solid #555;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}

全高固定垂直导航栏

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* 全高 */
  position: fixed; /* 使它产生粘性，即使在滚动时 */
  overflow: auto; /* 如果侧栏的内容太多，则启用滚动条 */
}

###Web 布局实例

使用 float 属性完成整个 Web 布局也很常见：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.menu {
  width: 25%;
}

.content {
  width: 75%;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 8px;
  background-color: #33b5e5;
  color: #ffffff;
}

.menu li:hover {
  background-color: #0099cc;
}
</style>
</head>
<body>

<div class="header">
  <h1>Shanghai</h1>
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="column content">
    <h1>The City</h1>
    <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
</p>
    <p>You will learn more about web layout and responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pQu7kkxP-1627638864816)(…/Typora_Copy_Image/1626256581963.png)]

###display: inline-block

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。
同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

##对齐元素

###居中对齐元素

要使块元素（例如

）水平居中，请使用 margin: auto;。
设置元素的宽度将防止其延伸到容器的边缘。
然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配
**注意：**如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。

###居中对齐图像

如需居中图像，请将左右外边距设置为 auto，并将其设置为块元素

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

###左和右对齐 - 使用 position

对齐元素的一种方法是使用 position: absolute;
**注意：**绝对定位的元素将从正常流中删除，并可能出现元素重叠。

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

###左和右对齐 - 使用 float

对齐元素的另一种方法是使用 float 属性, **注意：**如果一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器,使用 clearfix hack 来解决此问题。

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

.clearfix {
  overflow: auto;
}

垂直和水平对齐:

###垂直对齐 -——1.使用 padding

有很多方法可以在 CSS 中垂直对齐元素。一个简单的解决方案是使用上下内边距

###垂直对齐 -——2.使用 line-height

另一个技巧是使用其值等于 height 属性值的 line-height 属性，如： line-height: 200px;
height: 200px;

###垂直对齐 —— 3.使用 position 和 transform

 position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

垂直对齐 ——4. 使用 Flexbox

display: flex;
  justify-content: center;
  align-items: center;

###同时垂直和水平对齐

如需同时垂直和水平对齐，请使用 padding 和 text-align: center; |：padding: 70px 0;

下拉菜单

###基础的下拉菜单

创建当用户将鼠标移到元素上时出现的下拉框。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OTDCt3kw-1627638864818)(…/Typora_Copy_Image/1626262329177.png)]

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
  <--!当我们希望将下拉内容放置在下拉按钮的正下方（使用 position:absolute）时，需要使用该类。-->
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h1>可悬停的下拉菜单</h1>

<p>请把鼠标移到文本上，已查看下拉内容。</p>

<div class="dropdown">
  <span>把鼠标移到我上面</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>

</body>
</html>

.dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示（请看下文）。请注意，min-width 设置为 160px。可随时更改此设置。提示：如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％（设置 overflow:auto 可实现在小屏幕上滚动）。

box-shadow 属性，而不是边框，这样下拉菜单看起来像一张“卡片”。

当用户将鼠标移到下拉按钮上时，:hover 选择器用于显示下拉菜单。

下拉式菜单

创建一个下拉菜单，并允许用户从列表中选择一个选项

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yqqYMAmJ-1627638864818)(…/Typora_Copy_Image/1626262341901.png)]

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h1>下拉菜单</h1>

<p>请把鼠标移到按钮上，以打开下拉菜单。</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>

<p><b>Note:</b>我们的测试链接用了 href="#"。真实的网站会用 URL。</p>

</body>
</html>

下拉式图像

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<h1>下拉图片</h1>

<p>请把鼠标移动到图像上，以打开下拉内容。</p>

<div class="dropdown">
  <img src="/i/photo/coffee.jpg" alt="Coffee" width="100">
  <div class="dropdown-content">
  <img src="/i/photo/coffee.jpg" alt="Coffee" width="300" height="200">
  <div class="desc">Coffee</div>
  </div>
</div>

</body>
</html>

下拉式导航

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<h1>导航栏内的下拉菜单</h1>

<p>请悬停到 "Dropdown" 链接上，以查看下拉菜单。</p>

</body>
</html>

表单

###使用 padding 属性在文本字段内添加空间。

box-sizing 属性设置为 border-box，这样可以确保元素的总宽度和高度中包括内边距（填充）和最终的边框。

###使用 :focus 选择器可以在输入字段获得焦点时为其设置样式如：添加光标和背景颜色

input[type=text]:focus {
  background-color: lightblue;
}

如：添加光标和边框

input[type=text]:focus {
  border: 3px solid #555;
}

###带有图标/图像的输入框

如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。还要注意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间：

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ZYlDMXO-1627638864819)(…/Typora_Copy_Image/1626353325224.png)]

###带动画效果的搜索输入框

input[type=text] {
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

使用  width: 100%，以实现全宽按钮

计数器

CSS 计数器属性

属性	描述
content	与 ::before 和 ::after 伪元素一同使用，来插入生成的内容。
counter-increment	递增一个或多个计数器值。
counter-reset	创建或重置一个或多个计数器。

CSS 计数器是由 CSS 保持的“变量”，其值可以通过 CSS 规则递增（以跟踪其使用次数）。

计数器使您可以根据内容在文档中的位置来调整其外观。

如需使用 CSS 计数器，我们将使用以下属性：

counter-reset - 创建或重置计数器, 如需使用 CSS 计数器，必须首先创建它。
counter-increment - 递增计数器值
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

###嵌套计数器

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>


<h1>HTML 教程：</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>

<h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML 教程：</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xR6660de-1627638864820)(…/Typora_Copy_Image/1626354195734.png)]

创建概述列表

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

<ol>
  <li>item</li>
  <li>item</li>
</ol>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S9KMuazE-1627638864821)(…/Typora_Copy_Image/1626354415407.png)]

##网站布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7VNkuXyZ-1627638864822)(…/Typora_Copy_Image/1626357078328.png)]

页眉

页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）。它通常包含徽标（logo）或网站名称。

导航栏

导航栏包含链接列表，以帮助访问者浏览您的网站。

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 网站布局</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* 设置页眉的样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* 设置顶部导航栏的样式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* 创建并排的三个非等列 */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* 清除列之后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 响应式布局 - 创建堆叠而非并排的三列 */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
  <p>请调整浏览器窗口的大小以查看响应效果。</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div class="row">
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
</div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uaHTemLe-1627638864823)(…/Typora_Copy_Image/1626357875368.png)]

提示：如需创建 2 列布局，请将宽度更改为 50％。如需创建 4 列布局，请使用 25％。

###页脚

页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息

响应式网站布局

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* 页眉/Blog 标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}

/* 设置上导航栏的样式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* 创建两个不相等的彼此并排的浮动列 */
/* 左列 */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* 右列 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* 伪图像 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* 为文章添加卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* 清除列之后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* 响应式布局 - 当屏幕的宽度小于 800 像素时，使两列堆叠而不是并排 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* 响应式布局 - 当屏幕的宽度小于 400 像素时，使导航链接堆叠而不是并排 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>My Website</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" style="float:right">Link</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>About Me</h2>
      <div class="fakeimg" style="height:100px;">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    </div>
    <div class="card">
      <h3>Popular Post</h3>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>Some text..</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>

单位

数字和单位之间不能出现空格。但是，如果值为 0，则可以省略单位。

对于某些 CSS 属性，允许使用负的长度。

长度单位有两种类型：绝对单位和相对单位

###绝对长度

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。

单位	描述
cm	厘米
mm	毫米
in	英寸 (1in = 96px = 2.54cm)
px *	像素 (1px = 1/96th of 1in)
pt	点 (1pt = 1/72 of 1in)
pc	派卡 (1pc = 12 pt)

***** 像素（px）是相对于观看设备的。对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。

###相对长度

相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。

单位	描述
em	相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）
ex	相对于当前字体的 x-height(极少使用)
ch	相对于 “0”（零）的宽度
rem	相对于根元素的字体大小（font-size）
vw	相对于视口*宽度的 1%
vh	相对于视口*高度的 1%
vmin	相对于视口*较小尺寸的 1％
vmax	相对于视口*较大尺寸的 1％
%	相对于父元素

**提示：**em 和 rem 单元可用于创建完美的可扩展布局！
***** 视口（Viewport）= 浏览器窗口的尺寸。如果视口为 50 厘米宽，则 1vw = 0.5 厘米。

特异性

如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。

将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。

通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性！

**注意：**这种特异性是 CSS 规则不适用于某些元素的常见原因，尽管您可能会认为应该适用。

###特异性层次

每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：

行内样式 - 行内（内联）样式直接附加到要设置样式的元素。实例：

。

ID - ID 是页面元素的唯一标识符，例如 #navbar。

类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类，例如：:hover、:focus 等。

元素和伪元素 - 此类别包括元素名称和伪元素，比如 h1、div、:before 和 :after。

计算特异性

从 0 开始，为 style 属性添加 1000，为每个 ID 添加 100，为每个属性、类或伪类添加 10，为每个元素名称或伪元素添加 1。具有更高的特异性，所以将被应用。

特异性规则 1：在特异性相同的情况下：最新的规则很重要* - 如果将同一规则两次写入外部样式表，那么样式表中后面的规将更靠近要设置样式的元素，因此会被应用
特异性规则 2：ID 选择器比属性选择器拥有更高的特异性
特异性规则 3：上下文选择器比单一元素选择器更具体 - 嵌入式样式表更靠近要设置样式的元素
特异性规则 4：类选择器会击败任意数量的元素选择器 - 类选择器（诸如 .intro 会击败 h1、p、div 等）

通用选择器以及被继承的值拥有 0——* 的特异性，body * 及类似拥有 0 的特异性。被继承的值的特异性也为 0。

##圆角

CSS border-radius 属性，可以实现任何元素的“圆角”样式，定义元素角的半径。

**提示：**border-radius 属性实际上是以下属性的简写属性：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

border-radius 属性可以接受一到四个值。规则如下：

四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：

三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：

两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：

一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）：

边框图像，border-image

通过使用 CSS border-image 属性，可以设置图像用作围绕元素的边框。

属性允许您指定要使用的图像，而不是包围普通边框。

该属性有三部分：

用作边框的图像
在哪里裁切图像
定义中间部分应重复还是拉伸

border-image 属性接受图像，并将其切成九部分，就像井字游戏板。然后，将拐角放置在拐角处，并根据您的设置重复或拉伸中间部分。

**注意：**为了使 border-image 起作用，该元素还需要设置 border 属性！

border-image 属性实际上是以下属性的简写属性：

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

###CSS 边框图像属性

属性	描述
border-image	用于设置所有 border-image-* 属性的简写属性。
border-image-source	规定用作边框的图像的路径。
border-image-slice	规定如何裁切边框图像。
border-image-width	规定边框图像的宽度。
border-image-outset	规定边框图像区域超出边框盒的量。
border-image-repeat	规定边框图像应重复、圆角、还是拉伸。

多重背景

CSS 高级背景属性

属性	描述
background	用于在一条声明中设置所有背景属性的简写属性。
background-clip	规定背景的绘制区域。
background-image	为一个元素指定一幅或多幅背景图像。
background-origin	规定背景图像的放置位置。
background-size	规定背景图像的大小。

CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

多重背景图像可以使用单独的背景属性:

background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;

或 background 简写属性来指定:background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;

###背景尺寸

CSS background-size 属性允许您指定背景图像的大小。

可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。

contain 关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。
cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。

在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）。

###全尺寸背景图像

html { 
  background: url(/i/photo/tiyugongyuan.jpg) no-repeat center fixed; 
  background-size: cover;
}

Hero Image

可以在

上使用不同的背景属性来创建 Hero Image（带有文本的大图像），并将其放置在您希望的位置上, 这项技术会将使图像响应。

.hero-image {
  background: url(/i/photo/tiyugongyuan.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

background-origin 属性指定背景图像的位置。

该属性接受三个不同的值：

border-box - 背景图片从边框的左上角开始
padding-box -背景图像从内边距边缘的左上角开始（默认）
content-box - 背景图片从内容的左上角开始

background-clip 属性指定背景的绘制区域。

该属性接受三个不同的值：

border-box - 背景绘制到边框的外部边缘（默认）
padding-box - 背景绘制到内边距的外边缘
content-box - 在内容框中绘制背景

##渐变

渐变使您可以显示两种或多种指定颜色之间的平滑过渡。

CSS 定义了两种渐变类型：

线性渐变（向下/向上/向左/向右/对角线）

如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

语法
```
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
```
从上到下（默认）: background-image: linear-gradient(red, yellow);

从左到右:background-image: linear-gradient(to right, red , yellow);

左上角开始（到右下角） :background-image: linear-gradient(to bottom right, red, yellow);

####使用角度:

可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。

语法
```
background-image: linear-gradient(angle, color-stop1, color-stop2);
```
这个角度指定水平线和渐变线之间的角度。如： background-image: linear-gradient(-90deg, red, yellow);

使用多个色标

从上到下：
```
background-image: linear-gradient(red, yellow, green);
```
从左到右（彩虹色）：

background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

使用透明度

使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。如：background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

重复线性渐变

repeating-linear-gradient() 函数用于重复线性渐变,如： background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
径向渐变（由其中心定义）

径向渐变由其中心定义。
如需创建径向渐变，您还必须定义至少两个色标。

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认地，shape 可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。size 为最远角，可接受四个值：

closest-side
farthest-side
closest-corner
farthest-corner(默认)

position 为中心。

####均匀间隔的色标（默认）

background-image: radial-gradient(red, yellow, green);

不同间距的色标

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

####重复径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

 background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

##阴影效果

###文本

可以用 text-shadow 在文本上添加阴影（两个像素参数）

阴影还添加颜色，模糊效果（三个像素参数），

还可以有多个阴影text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

还可以使用 text-shadow 属性在文本周围创建纯边框（无阴影）：

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

###元素

可以用 box-shadow 在元素上添加阴影

只指定水平阴影和垂直阴影： box-shadow: 10px 10px;

为阴影添加颜色： box-shadow: 10px 10px grey;

阴影添加模糊效果： box-shadow: 10px 10px 5px grey;

还可以使用 box-shadow 属性创建纸质卡片效果：

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

##文本效果

CSS 文本效果属性：

属性	描述
text-align-last	指定如何对齐文本的最后一行。可以被裁剪： style=“text-overflow:ellipsis;” 可以将其呈现为省略号（…）：style=“text-overflow:clip;”
text-justify	指定对齐的文本应如何对齐和间隔。
text-overflow	指定应如何向用户呈现未显示的溢出内容。
word-break	指定非 CJK 脚本的换行规则。将连字符打断:word-break: keep-all;在任何字符处中断：word-break: break-all;
word-wrap	允许长单词被打断并换到下一行。word-wrap: break-word;
writing-mode	指定文本行是水平放置（writing-mode: horizontal-tb;）还是垂直放置（writing-mode: vertical-rl;）。

2D 转换

转换（transforms）允许您移动、旋转、缩放和倾斜元素。

通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：

translate() 从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。
rotate() 根据给定的角度顺时针(正deg）或逆时针(负deg)旋转元素。 20 度
scaleX() 增加(大于1）或减少（小于1）元素的宽度
scaleY()增加(大于1）或减少（小于1）元素的高度
scale()增加(大于1）或减少（小于1）元素的大小,宽度的两倍和其原始高度
skewX() 使元素沿 X 轴倾斜给定角度。
skewY() 使元素沿 Y 轴倾斜给定角度。
skew() 使元素沿 X 和 Y 轴倾斜给定角度，如果未指定第二个参数，则值为零。
matrix()把所有 2D 变换方法组合为一个。

可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

##3D 转换

###所有 3D 变换属性：

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

###CSS 3D 转换方法

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

##过渡

过渡允许您在给定的时间内平滑地改变属性值。

如需创建过渡效果，必须明确两件事：

您要添加效果的 CSS 属性
效果的持续时间

**注意：**如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>

<h1>transition 属性</h1>

<p>请把鼠标悬停在下面的 div 元素上，来查看过渡效果：</p>

<div></div>

<p><b>注释：</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>

</body>
</html>

###指定过渡的速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

###延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

###过渡 + 转换(流畅炫酷效果)

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>请把鼠标悬停在下面的 div 元素上：</p>

<div></div>

<p><b>注释：</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>

</body>
</html>

###所有 CSS 过渡属性：

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。

##动画

CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！

当动画结束后，会变回最初的样式。

动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。

###所有 CSS 动画属性：

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

要使动画生效，必须将动画绑定到某个元素。

将 “example” 动画绑定到

元素。动画将持续 4 秒钟，同时将

元素的背景颜色从 “red” 逐渐改为 “yellow”：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>

<div></div>

<p><b>注释：</b>当动画结束后，会变回最初的样式。</p>

</body>
</html>

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

使用关键字 “from” 和 “to”（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。您也可以使用百分比值。通过使用百分比，您可以根据需要添加任意多个样式更改。

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;<!--最开始和最后的颜色-->
  animation-name: example;
  animation-duration: 4s;
}

不仅可改变颜色，还可以改变位置（效果不是闪现而是位移）

###延迟动画

animation-delay 属性规定动画开始的延迟时间。负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

###设置动画应运行多少次

animation-iteration-count 属性指定动画应运行的次数。使用值 “infinite” 使动画永远持续下去!

###反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前

###指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

###目标元素的样式

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

###动画简写属性

animation 属性也可以实现(按顺序）:
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;

工具提示

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* 定位工具提示 */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 157%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h1>Right Tooltip</h1>
<p>请把鼠标移到下方文本上：</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

工具提示位于“可悬停”文本（

）的右侧（left:105%）。另外请注意，top:-5px 用于将其放置在其容器元素的中间。我们使用数字 5 是因为工具提示文本的上下内边距均为 5px。如果增加其内边距，还请您同时增加 top 属性的值，以确保它停留在中间。如果要将工具提示放在左侧，也同样适用。

如果您希望工具提示位于上方或下方，请注意，我们使用了负 60 像素的左外边距属性（margin-left）。这是为了把工具提示与可悬停文本进行居中对齐。该值是工具提示宽度的一半（120/2 = 60）。

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%; 
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

###工具提示箭头

如需创建在工具提示的指定侧面显示的箭头，请在工具提示后添加“空的”内容，并使用伪元素类 ::after 和 content 属性。箭头本身是使用边框创建的。这会使工具提示看起来像气泡。

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

将箭头定位在工具提示内：top: 100% 将箭头放置在工具提示的底部。left: 50% 将使箭头居中。

注意：border-width 属性指定箭头的大小。如果您更改此设置，也请将 margin-left 值更改为相同值。这将使箭头居中。

border-color 用于将内容转换为箭头。我们将上边框设置为黑色，其余设置为透明。如果所有面都是黑色，则最终将得到一个黑色的方形框。

**特别注意：**上面显示的箭头用·border-color: black transparent transparent transparent;
下面显示箭头：border-color: transparent transparent black transparent;
右侧显示箭头border-color: transparent black transparent transparent;
左侧显示箭头：border-color: transparent transparent transparent black;

###淡入的工具提示（动画）

可以将 CSS transition 属性与 opacity 属性一同使用，并在指定的秒数（例子中是 1 秒）内从完全不可见变为 100％可见：

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}

##图像样式

###border-radius 属性创建圆形图像

圆角图像: border-radius: 8px;

圆角图像:border-radius: 50%;

###缩略图图像

border: 1px solid #ddd;

###响应式图像

响应式图像会自动调整以适合屏幕尺寸。

如果您希望根据需要缩小图像，但需要杜绝放大到大于原始尺寸，请添加如下代码：

img {
  max-width: 100%;
  height: auto;
}

###居中图像

如需使图像居中，请将左右外边距设置为 auto 并将其设置为块元素：

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

###图像文本

如何在图像中定位文本,如左上

<div class="topleft">Top Left</div>
.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

###图像滤镜

CSS filter 属性把视觉效果（如模糊和饱和度）添加到元素。

把所有图像的颜色更改为黑白（100％灰色）：

img {
  filter: grayscale(100%);
}

其他样式

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 33%;
  height: auto;
  float: left; 
  max-width: 235px;
}

.blur {filter: blur(4px);}
.brightness {filter: brightness(250%);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}
</style>
</head>

<body>

<p><b>注释：</b>Internet Explorer 或 Edge 12 不支持 filter 属性。</p>

<img src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="/i/photo/tulip.jpg" alt="Pineapple" width="300" height="300">

</body>
</html>

###图像悬停叠加

创建鼠标悬停时的叠加效果

如淡入文本：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h1>淡入文本</h1>

<div class="container">
  <img src="/i/css/avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

如滑入（左）：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h1>滑入（从左）</h1>

<div class="container">
  <img src="/i/css/avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

###翻转图像

img:hover {
  transform: scaleX(-1);
}

##object-fit 属性

object-fit 属性用于规定应如何调整或的大小来适应其容器。

object-fit 属性可接受如下值：

fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
none - 不对替换的内容调整大小。
scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）

##按钮

用 background-color 属性更改按钮的背景色
用 font-size 属性更改按钮的字体大小
用 padding 属性更改按钮的内边距
用 border-radius 属性为按钮添加圆角
用 border 属性为按钮添加彩色边框
用 transition-duration 属性来确定“悬停”效果的速度
用 box-shadow 属性为按钮添加阴影
用 opacity 属性为按钮添加透明度（创建“禁用”外观）。

**提示：**您还可以添加带有 “not-allowed” 值的 cursor 属性，当您将鼠标悬停在按钮上时，该属性会显示 “no parking sign”（禁停标志）：

按钮分组

删除外边距并向每个按钮添加 float:left，来创建按钮组：

带边框的按钮组

 float: left;
 border: 1px solid green;

垂直按钮组

用 display:block 取代 float:left 将按钮上下分组，而不是并排：

按键按下效果

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<body>

<h1>带动画效果的按钮 - 按键效果</h1>

<button class="button">请点击我</button>

</body>
</html>

淡入效果hover {opacity: 1}

##分页实例

###简单的分页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M79qpnNV-1627638864824)(…/Typora_Copy_Image/1627023540985.png)]

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>
</head>
<body>

<h1>简单分页</h1>

<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

</body>
</html>

用 .active 类突出显示当前页面，并在鼠标移到它们上方时使用 :hover 选择器更改每个页面链接的颜色

如果需要圆角的 “active” 和 “hover” 按钮，添加 border-radius 属性

transition 属性添加到页面链接，创建鼠标悬停时的过渡效果 transition: background-color .3s;

使用 border 属性为分页添加边框 border: 1px solid #ddd;

####链接之间的空间

如果不想组合页面链接，请添加 margin 属性 margin: 0 4px; /* 上下外边距为 0，可灵活修改 */

使用 font-size 属性更改分页的大小

####居中的分页

如需居中分页，使用设置了 text-align:center 的容器元素（如

）包围它

####面包屑（breadcrumbs）分页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pvW2DIBd-1627638864825)(…/Typora_Copy_Image/1627024055686.png)]

<!DOCTYPE html>
<html>
<head>
<style>
ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

ul.breadcrumb li a {color: green;}
</style>
</head>
<body>

<h1>面包屑分页</h1>

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>

</body>
</html>

多列

多列布局允许我们轻松定义多列文本 - 就像报纸那样

所有的多列属性：

属性	描述
column-count	规定元素应划分的列数。
column-fill	规定如何填充列。
column-gap	指定列之间的间隙。
column-rule	用于设置所有 column-rule-* 属性的简写属性。如：1px solid lightblue;
column-rule-color	规定列之间规则的颜色。
column-rule-style	规定列之间的规则样式。如：solid;
column-rule-width	规定列之间的规则宽度。单位像素
column-span	规定一个元素应该跨越多少列。
column-width	为列指定建议的最佳宽度。
columns	用于设置 column-width 和 column-count 的简写属性。

##用户界面

所有用户界面属性：

属性	描述
outline-offset	在轮廓和元素的边框边缘之间添加空间。轮廓：outline: 5px dashed blue;
resize	规定元素是否可由用户调整大小。调整元素的宽度horizontal;高度：vertical;两者both;禁用可缩放性resize: none;

**注意：**轮廓与边框不同！与边框不同，轮廓线是在元素边框之外绘制的，并且可能与其他内容重叠。同时，轮廓也不是元素尺寸的一部分：元素的总宽度和高度不受轮廓线宽度的影响。

变量

var() 函数用于插入 CSS 变量的值。

CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。

###var() 函数的语法如下：

var(name, value)

值	描述
name	必需。变量名.变量名称必须以两个破折号（–）开头，且区分大小写！
value	可选。回退值（在未找到变量时使用）。

###var() 如何工作

首先：CSS 变量可以有全局或局部作用域。
全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。
如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。
如：声明两个全局变量（–blue 和 --white） :root { --blue: #1e90ff; --white: #ffffff; }
使用它 background-color: var(–white);
如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

###使用 var() 有如下优势：

使代码更易于阅读（更容易理解）
使修改颜色值更加容易

如需将蓝色和白色改为较柔和的蓝色和白色，您只需要修改两个变量值

覆盖变量

###用局部变量覆盖全局变量

button {
–blue: #0000ff;
}

###添加一个新的局部变量

如果只在一个地方使用一个变量，我们也可以声明一个新的局部变量

button {
–button-blue: #0000ff;
color: var(–button-blue);
}

使用 JavaScript 更改变量

CSS 变量可以访问 DOM，这意味着您可以通过 JavaScript 更改它们。
// 获取根元素
var r = document.querySelector(’:root’);

// 创建获取变量值的函数
function myFunction_get() {
// 获取根的样式（属性和值）
var rs = getComputedStyle®;
// 弹出 --blue 变量的值
alert("The value of --blue is: " + rs.getPropertyValue(’–blue’));
}

// 创建设置变量值的函数
function myFunction_set() {
// 把变量 --blue 的值设置为另一个值（在这里是 “lightblue”）
r.style.setProperty(’–blue’, ‘lightblue’);
}

##在媒体查询中使用变量

媒体查询旨在为不同的设备（显示器、平板电脑、手机等）定义不同的样式规则。

创建一个 @media 规则，内容为“当浏览器的宽度为 450px 或更宽时，将 .container 类的 --fontsize 变量值更改为 50px。”

.container {
  --fontsize: 25px;
}
@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
//还可更改了 @media 规则中 --blue 变量的值
@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
   :root {
    --blue: lightblue;
  }
}

##Box Sizing

CSS box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。

###不指定 CSS box-sizing 属性

默认情况下，元素的宽度和高度是这样计算的：

width + padding + border = 元素的实际宽度
height + padding + border = 元素的实际高度

这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。

###使用 CSS box-sizing 属性

box-sizing 属性允许我们在元素的总宽度和高度中包括内边距和边框。
由于使用 box-sizing: border-box; 的效果如此之好，许多开发人员希望页面上的所有元素都能够以这种方式工作。

下面的代码能够确保以这种更直观的方式调整所有元素的大小。许多浏览器已经在对许多表单元素使用 box-sizing: border-box;

* {
  box-sizing: border-box;
}

Flexbox 布局模块

在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：

块（Block），用于网页中的部分（节）
行内（Inline），用于文本
表，用于二维表数据
定位，用于元素的明确位置
弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

通过将 display 属性设置为 flex，flex 容器将可伸缩 display: flex;

flex 容器属性：

flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目.
- column 值设置垂直堆叠 flex 项目（从上到下）
- column-reverse 值垂直堆叠 flex 项目（但从下到上）
- row 值水平堆叠 flex 项目（从左到右）
- row-reverse 值水平堆叠 flex 项目（但从右到左）
flex-wrap 属性规定是否应该对 flex 项目换行
- wrap 值规定 flex 项目将在必要时进行换行
- nowrap 值规定将不对 flex 项目换行（默认）
- wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行
flex-flow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少，该值必须是数字，默认值是 0。
justify-content 属性用于对齐 flex 项目
- center 值将 flex 项目在容器的中心对齐
- flex-start 值将 flex 项目在容器的开头对齐（默认）
- flex-end 值将 flex 项目在容器的末端对齐
- space-around 值显示行之前、之间和之后带有空格的 flex 项目
- space-between 值显示行之间有空格的 flex 项目
align-items
- align-items 属性用于垂直对齐 flex 项目。
- center 值将 flex 项目在容器中间对齐
- flex-start 值将 flex 项目在容器顶部对齐
- flex-end 值将弹性项目在容器底部对齐
- stretch 值拉伸 flex 项目以填充容器（默认)
- baseline 值使 flex 项目基线对齐
align-content 属性用于对齐弹性线。
- space-between 值显示的弹性线之间有相等的间距
- space-around 值显示弹性线在其之前、之间和之后带有空格
- stretch 值拉伸弹性线以占据剩余空间（默认）
- center 值在容器中间显示弹性线
- flex-start 值在容器开头显示弹性线
- flex-end 值在容器的末尾显示弹性线
flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。该值必须是数字，默认值是 0。
flex-basis 属性规定 flex 项目的初始长度。 style=“flex-basis: 200px”
align-self 属性规定弹性容器内所选项目的对齐方式。

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

###flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

完美的居中

将 justify-content 和 align-items 属性设置为居中，然后 flex 项目将完美居中；

###子元素（项目）

flex 容器的直接子元素会自动成为弹性（flex）项目。

###order 属性

order 属性规定 flex 项目的顺序，order 值必须是数字，默认值是 0。

order 属性可以改变 flex 项目的顺序，用法如：

###使用 Flexbox 的响应式图库

<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* 创建并排的四个等列 */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* 响应式布局 - 创建两列而不是四列布局 */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* 响应式布局 - 创建上下堆叠而不是并排的两列布局 */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>

<!-- Header -->
<div class="header">
  <h1>响应式图像网格</h1>
  <p>请调整浏览器窗口，来查看响应效果。</p>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
	<img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
  </div>
   
  <div class="column">
    <img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
	<img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
  </div>
</div>

</body>
</html>

###使用 Flexbox 的响应式网站

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* 设置 body 元素的样式 */
body {
  font-family: Arial;
  margin: 0;
}

/* 标题 / LOGO */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* 设置顶部导航栏样式 */
.navbar {
  display: flex;
  background-color: #333;
}

/* 设置导航条链接演示 */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* 更改鼠标悬停时的颜色 */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* 列容器 */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* 创建并排的非等列 */
/* 侧栏 / 左侧列 */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* 主列 */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* 伪图像，仅供示例 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* 响应式布局 - 当屏幕小于 700 像素宽时，让两列堆叠而不是并排 */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}
</style>
</head>
<body>

<!-- 注释 -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">请调整浏览器窗口来查看响应效果。</h4>
</div>

<!-- Header -->
<div class="header">
  <h1>我的网站</h1>
  <p>拥有 <b>弹性</b> 布局。</p>
</div>

<!-- 导航栏 -->
<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<!-- 弹性网格（内容） -->
<div class="row">
  <div class="side">
    <h2>关于我</h2>
    <h5>我的照片：</h5>
    <div class="fakeimg" style="height:200px;">图像</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>More Text</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">图像</div><br>
    <div class="fakeimg" style="height:60px;">图像</div><br>
    <div class="fakeimg" style="height:60px;">图像</div>
  </div>
  <div class="main">
    <h2>标题</h2>
    <h5>标题描述，2021 年 1 月 1 日</h5>
    <div class="fakeimg" style="height:200px;">图像</div>
    <p>一些文本..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>标题</h2>
    <h5>标题描述，2021 年 1 月 2 日</h5>
    <div class="fakeimg" style="height:200px;">图像</div>
    <p>一些文本..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>

<!-- Footer -->
<div class="footer">
  <h2>页脚</h2>
</div>

</body>
</html>

##媒体查询

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

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

如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的级联规则。

除非您使用 not 或 only 运算符，否则媒体类型是可选的，且隐含 all 类型。

您还可以针对不同的媒体使用不同的样式表：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 媒体类型

值	描述
all	用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智能手机等等。
speech	用于大声“读出”页面的屏幕阅读器。

媒体查询的简单实例

使用媒体查询的一种方法是在样式表内有一个备用的 CSS 部分。

###背景颜色

在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色会是粉色）：

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

菜单，如果视口的宽度

为 480 像素或更宽，则该菜单会浮动到页面的左侧（如果视口小于 480 像素，则该菜单将位于内容的顶部）：

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

###更改不同设备（实际也可看成是视图大小的变化）的背景色：

/* 将 body 的背景色设置为棕褐色 */
body {
  background-color: tan;
}

/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

菜单的媒体查询

该菜单在不同的屏幕尺寸上会有所不同。

‘[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z5zws5wI-1627638864825)(…/Typora_Copy_Image/1627029301909.png)]’

/* navbar 容器 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar 链接 */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 在宽度为 600 像素或更小的屏幕上，使菜单链接彼此堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

###列的媒体查询

该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZxlGlbw-1627638864826)(…/Typora_Copy_Image/1627029599824.png)]

方法一浮动：

/* 创建彼此相邻浮动的四个相等的列 */
.column {
  float: left;
  width: 25%;
}

/* 在 992p x或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

方法二flex：

/* 弹性盒的容器 */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* 创建四个相等的列 */
.column {
  flex: 25%;
  padding: 20px;
}

/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

###用媒体查询隐藏元素

/* 如果屏幕尺寸为600像素或更小，请隐藏该元素 */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

###用媒体查询改变字体

/* 如果屏幕尺寸超过 600 像素，把 <div> 的字体大小设置为 80 像素 */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

/* 如果屏幕大小为 600px 或更小，把 <div> 的字体大小设置为 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

方向：人像 / 风景

如果方向处于横向模式，则使用浅蓝背景色：

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

###最小宽度到最大宽度

可以使用 @media screen and (max-width: 900px) and (min-width: 600px)

我们使用逗号（类似 OR 运算符）将附加的媒体查询添加到已有媒体查询中

/* 当宽度在 600 像素到 900 像素之间或大于 1100 像素时 - 更改 <div> 的外观 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px)

添加断点制作了一张包含行和列的网页

当屏幕（浏览器窗口）小于 768px 时，每列的宽度应为 100％：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* 针对桌面： */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* 针对手机： */
  [class*="col-"] {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Shanghai</h1>
</div>

<div class="row">
  <div class="col-3 menu">
    <ul>
      <li>交通</li>
      <li>文化</li>
      <li>旅游</li>
      <li>美食</li>
    </ul>
  </div>

  <div class="col-6">
    <h1>欢迎来到上海</h1>
    <p>上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，是中国人口第二多的城市。</p>
  </div>

  <div class="col-3 right">
    <div class="aside">
      <h2>历史</h2>
      <p>最晚在新石器时代，上海地区已经有先民聚居。春秋时代，上海由吴国管辖，战国时代则是楚国领土 ...</p>
      <h2>位置</h2>
      <p>上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接 ...</p>
      <h2>环境</h2>
      <p>上海地处江南水乡，并位于长江入海口，亦不处于主要地震带上，因此如地震、洪水以及地质类灾害鲜有发生 ...</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>请调整浏览器窗口的大小，以查看内容如何响应调整大小。</p>
</div>

</body>
</html>

####另一个断点

您可以添加任意多个断点。

/* 针对手机： */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* 针对平板电脑： */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* 针对桌面： */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

####典型的设备断点

高度和宽度不同的屏幕和设备不计其数，因此很难为每个设备创建精确的断点。为了简单起见，您可以瞄准这五组：

实例

/* 超小型设备（电话，600px 及以下） */
@media only screen and (max-width: 600px) {...} 

/* 小型设备（纵向平板电脑和大型手机，600 像素及以上） */
@media only screen and (min-width: 600px) {...} 

/* 中型设备（横向平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {...} 

/* 大型设备（笔记本电脑/台式机，992px 及以上） */
@media only screen and (min-width: 992px) {...} 

/* 超大型设备（大型笔记本电脑和台式机，1200px 及以上） */
@media only screen and (min-width: 1200px) {...}

##响应式网页设计

如果您使用 CSS 和 HTML 调整大小、隐藏、缩小、放大或移动内容，以使其在任何屏幕上看起来都很好，则称为响应式 Web 设计。

###视口

视口（viewport）是用户在网页上的可见区域,视口随设备而异，在移动电话上会比在计算机屏幕上更小。

###设置视口

HTML5 引入了一种方法，使 Web 设计者可以通过标签来控制视口。
您应该在所有网页中包含以下视口元素：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

它为浏览器提供了关于如何控制页面尺寸和缩放比例的指令。
width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。
当浏览器首次加载页面时，initial-scale=1.0 部分设置初始缩放级别。

###把内容调整到视口的大小

1. 请勿使用较大的固定宽度元素 - 例如，如果图像的宽度大于视口的宽度，则可能导致视口水平滚动。请务必调整此内容以适合视口的宽度。

2. 不要让内容依赖于特定的视口宽度来呈现好的效果 - 由于以 CSS 像素计的屏幕尺寸和宽度在设备之间变化很大，因此内容不应依赖于特定的视口宽度来呈现良好的效果。

3. 使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置较大的 CSS 绝对宽度将导致该元素对于较小设备上的视口太宽。而是应该考虑使用相对宽度值，例如 width: 100%。另外，要小心使用较大的绝对定位值，这可能会导致元素滑落到小型设备的视口之外。

###网格视图

许多网页都基于网格视图（grid-view），这意味着页面被分割为几列。响应式网格视图通常有 12 列，总宽度为 100％，并且在调整浏览器窗口大小时会收缩和伸展。

首先，确保所有 HTML 元素的 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和边框。

* {
  box-sizing: border-box;
}

我们必须计算一列的百分比：100% / 12 列 = 8.33%。然后，我们为 12 列中的每一列创建一个类，即 class=“col-” 和一个数字，该数字定义此节应跨越的列数：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.header {
  border: 1px solid red;
  padding: 15px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {<--!所有这些列应向左浮动，并带有 15px 的内边距-->
  float: left;
  padding: 15px;
  border: 1px solid red;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
</style>
</head>
<body>

<div class="header">
  <h1>Shanghai</h1>
</div>

<div class="row">

<div class="col-3">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div class="col-9">
  <h1>The City</h1>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
</p>
  <p>请调整浏览器窗口的大小，以查看内容如何响应调整大小。</p>
</div>

</div>

</body>
</html>

每行都应被包围在

中。行内的列数总应总计为 12：

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

行内的所有列全部都向左浮动，因此会从页面流中移出，并将放置其他元素，就好像这些列不存在一样。为了防止这种情况，我们会添加清除流的样式：

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

###图像

使用 width 属性

如果 width 属性设置为百分比，且高度设置为 “auto”，则图像将进行响应来放大或缩小：

实例

img {
  width: 100%;
  height: auto;
}

使用 max-width 属性

如果将 max-width 属性设置为 100％，则图像将按需缩小，但绝不会放大到大于其原始大小：

实例

img {
  max-width: 100%;
  height: auto;
}

###背景图像

如果将 background-size 属性设置为 “contain”，则背景图像将缩放，并尝试匹配内容区域。不过图像将保持其长宽比（图像宽度与高度之间的比例关系）
如果将 background-size 属性设置为 “100% 100%”，则背景图像将拉伸以覆盖整个内容区域
如果 background-size 属性设置为 “cover”，则背景图像将缩放以覆盖整个内容区域。请注意，“cover” 值保持长宽比，且可能会裁剪背景图像的某部分

###为不同设备准备不同图像

/* 针对小于 400 像素的宽度： */
body {
  background-image: url('img_smallflower.jpg'); 
}

/* 针对 400 像素或更大的宽度： */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

可以使用媒体查询 min-device-width 而不是 min-width 来检查设备宽度，而不是浏览器宽度。然后，当您调整浏览器窗口的大小时，图像将不会变化

视频

与背景图片一样

实例

video {
  width: 100%;
  height: auto;
}

##HTML5 元素

<picture> 元素的作用类似于 <video> 和 <audio> 元素。我们设置了不同的来源，而匹配优先权的第一个来源是正在使用的来源

实例

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

srcset 属性是必需的，它定义图像的来源。
media 属性是可选的，它接受可在 CSS @media 规则中找到的媒体查询。

##网格布局模块

网格布局模块（CSS Grid Layout Module）提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。网格布局由一个父元素以及一个或多个子元素组成。

display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器。

网格容器的所有直接子元素将自动成为网格项目。

###网格列（Grid Columns）

网格项的垂直线被称为列。

###网隔行（Grid Rows）

网格项的水平线被称为行。

###网格间隙（Grid Gaps）

每列/行之间的间隔称为间隙。

可以通过使用以下属性之一来调整间隙大小：

grid-column-gap 设置列之间的间隙
grid-row-gap 属性设置行之间的间隙
grid-gap 是 grid-row-gap 和 grid-column-gap 属性的简写属性，还可用于将行间隙和列间隙设置为一个值。

###网格行（Grid Lines）

列之间的线称为列线（column lines）。

行之间的线称为行线（row lines）。

当把网格项目放在网格容器中时，请引用行号

网格项目放在列线 1，并在列线 3 结束它：

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

##网格容器

CSS 网格容器 (w3school.com.cn)

网格项目

CSS 网格项目 (w3school.com.cn)

选择器

选择器	例子	例子描述
.class	.intro	选择 class=“intro” 的所有元素。
.class1.class2	.name1.name2	选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2	.name1 .name2	选择作为类名 name1 元素后代的所有类名 name2 元素。
#id	#firstname	选择 id=“firstname” 的元素。
*	*	选择所有元素。
element	p	选择所有元素。
element.class	p.intro	选择 class=“intro” 的所有元素。
element,element	div, p	选择所有元素和所有元素。
element element	div p	选择元素内的所有元素。
element>element	div > p	选择父元素是的所有元素。
element+element	div + p	选择紧跟元素的首个元素。
element1~element2	p ~ ul	选择前面有元素的每个元素。
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 “flower” 的所有元素。
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 “en” 开头的所有元素。
[attribute^=value]	a[href^=“https”]	选择其 src 属性值以 “https” 开头的每个元素。
[attribute$=value]	a[href$=".pdf"]	选择其 src 属性以 “.pdf” 结尾的所有元素。
[attribute=value*]	a[href*=“w3schools”]	选择其 href 属性值中包含 “abc” 子串的每个元素。
:active	a:active	选择活动链接。
::after	p::after	在每个的内容之后插入内容。
::before	p::before	在每个的内容之前插入内容。
:checked	input:checked	选择每个被选中的元素。
:default	input:default	选择默认的元素。
:disabled	input:disabled	选择每个被禁用的元素。
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。
:enabled	input:enabled	选择每个启用的元素。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。
::first-letter	p::first-letter	选择每个元素的首字母。
::first-line	p::first-line	选择每个元素的首行。
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。
:focus	input:focus	选择获得焦点的 input 元素。
:fullscreen	:fullscreen	选择处于全屏模式的元素。
:hover	a:hover	选择鼠标指针位于其上的链接。
:in-range	input:in-range	选择其值在指定范围内的 input 元素。
:indeterminate	input:indeterminate	选择处于不确定状态的 input 元素。
:invalid	input:invalid	选择具有无效值的所有 input 元素。
:lang(language)	p:lang(it)	选择 lang 属性等于 “it”（意大利）的每个元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。
:link	a:link	选择所有未访问过的链接。
:not(selector)	:not§	选择非元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。
:optional	input:optional	选择不带 “required” 属性的 input 元素。
:out-of-range	input:out-of-range	选择值超出指定范围的 input 元素。
::placeholder	input::placeholder	选择已规定 “placeholder” 属性的 input 元素。
:read-only	input:read-only	选择已规定 “readonly” 属性的 input 元素。
:read-write	input:read-write	选择未规定 “readonly” 属性的 input 元素。
:required	input:required	选择已规定 “required” 属性的 input 元素。
:root	:root	选择文档的根元素。
::selection	::selection	选择用户已选取的元素部分。
:target	#news:target	选择当前活动的 #news 元素。
:valid	input:valid	选择带有有效值的所有 input 元素。
:visited	a:visited	选择所有已访问的链接。

函数

函数	描述
attr()	返回所选元素的属性值。
calc()	允许您执行计算来确定 CSS 属性值。
cubic-bezier()	定义三次贝塞尔曲线。
hsl()	使用色相-饱和度-亮度模型（HSL）定义颜色。
hsla()	使用色相-饱和度-亮度-阿尔法模型（HSLA）定义颜色。
linear-gradient()	将线性渐变设置为背景图像。定义至少两种颜色（从上到下）。
radial-gradient()	将径向渐变设置为背景图像。定义至少两种颜色（从中心到边缘）。
repeating-linear-gradient()	重复线性渐变。
repeating-radial-gradient()	重复径向渐变。
rgb()	使用红-绿-蓝模型（RGB）定义颜色。
rgba()	使用红-绿-蓝-阿尔法模型（RGB）定义颜色。
var()	插入自定义属性的值。

补充

require属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。

placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。

datalist 元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。

对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是否符合给定的格式。当输入的内容不符合给定的格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。

对input 元素与 textarea 元素用鼠标选取部分文字时，可以使用SelectionDirection属性来获取文字方向。当用户正向选取文字时，改属性值为"forward",反向选文字时，“backward”。当用户没有选取任何文字时，为：“forward”

一本静哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习记录

CSSCSS 指的是层叠样式表 (Cascading Stylesheets), 也称级联样式表 ,是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时外部样式表存储在 CSS 文件中A. 请勿在属性值和单位之间添加空格B. 位于页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：行内样式（在 HTML 元素中）7外
复制链接

扫一扫