目录
reset样式表
```css
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
font-weight: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{
display: block;
}
ol, ul, li{
list-style: none;
}
blockquote, q{
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
content: '';
content: none;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
/* custom */
a{
color: #7e8c8d;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
::-webkit-scrollbar{
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track-piece{
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical{
height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal{
width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
html, body{
width: 100%;
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
}
body{
line-height: 1;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html{
overflow-y: scroll;
}
/*清除浮动*/
.clearfix:before,
.clearfix:after{
content: " ";
display: inline-block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1;
}
/*隐藏*/
.dn{
display: none;
}
```
css语法
CSS 规则集（rule-set）由选择器和声明块组成：
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。
实例
在此例中，所有 <p> 元素都将居中对齐，并带有红色文本颜色：
p {
color: red;
text-align: center;
}例子解释
-
p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：<p>）。
-
color 是属性，red 是属性值
-
text-align 是属性，center 是属性值
css选择器
CSS 元素选择器
元素选择器根据元素名称来选择 HTML 元素。
实例
在这里，页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色：
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
</body>
</html>CSS id 选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
实例
这条 CSS 规则将应用于 id="para1" 的 HTML 元素：
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
</body>
</html>CSS 类选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
一个类可以配多个class
实例
在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：
.center {
text-align: center;
color: red;
}您还可以指定只有特定的 HTML 元素会受类的影响。
实例
在这个例子中，只有具有 class="center" 的 <p> 元素会居中对齐：
p.center {
text-align: center;
color: red;
}CSS 通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
实例
下面的 CSS 规则会影响页面上的每个 HTML 元素：
* {
text-align: center;
color: blue;
}CSS 分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
请看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}最好对选择器进行分组，以最大程度地缩减代码。
如需对选择器进行分组，请用逗号来分隔每个选择器。
实例
在这个例子中，我们对上述代码中的选择器进行分组：
h1, h2, p {
text-align: center;
color: red;
}伪类选择器
伪类：不存在的类
如：第一个元素，被点击的元素，鼠标移动的元素
伪类一般情况下都是使用：开头
：first-child 第一个
:last-child 最后一
:nth-child 选中第n个
first-of-child 不同类型元素中排序
:not() 否定伪类
将符合条件的元素从选择器中去除
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
将第一个li设置成红色
*/
/*
伪类：不存在的类
如：第一个元素，被点击的元素，鼠标移动的元素
伪类一般情况下都是使用：开头
：first-child 第一个
:last-child 最后一个
:nth-child 选中第n个
first-of-child 不同类型元素中排序
:not() 否定伪类
将符合条件的元素从选择器中去除
*/
ul > li.first{
color: red;
}
ul > li:not(:last-child){
font-size: 40px;
}
</style>
</head>
<body>
<ul>
<li class="first">第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>伪元素
伪元素
表示一些特殊的并不真实存在的元素（特殊的位置）
伪元素使用：：开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 表示元素的开始
::after 表示元素的最后
before和after必须结合属性使用
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 伪元素
表示一些特殊的并不真实存在的元素（特殊的位置）
伪元素使用：：开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 表示元素的开始
::after 表示元素的最后
before和after必须结合属性使用*/
p::first-letter{
font-size: 30px;
}
p::first-line{
background-color: yellow;
}
p::selection{
color: tomato;
}
div::after{
content: '】';
}
div::before{
content: '【';
}
</style>
</head>
<body>
<div>情书</div>
<p>
也许是命运，也许是神迹。<br/>
今生我们可以穿越人海相遇.<br/>
能够在相同的时空中共同存在.<br/>
甚至能感受到你的心跳和呼吸。<br/>
过去，未来，都是你。<br/>
即便不能在一起，<br/>
也还是默默的喜欢着你。
</p>
</body>
</html>
选择器的权重
样式冲突
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的元素值，就产生了样式冲突
权重（优先级）
当发生冲突时，应用那个样式应由选择器的权重决定
选择器的权重设置
-
内联样式 1，0，0，0
-
id选择器 0，1，0，0
-
类和伪类选择器 0，0，1，0
-
元素选择器 0，0，0，1
-
通配选择器 0，0，0，0
-
继承的样式 没有优先级
比较优先级时
需要将所有选择器的优先级进行相加运算，最后的优先级越高，先执行
选择器的累加不会超过其最大的数量级。类选择器再高也不会超过id选择器
如果优先级计算后相同，此时优先使用靠下的样式(被覆盖了)
可以在某一个样式的后边添加!important，则此时该样式成为最高优先级
css使用
三种使用css的方法
有三种插入样式表的方法：
-
外部 CSS
-
内部 CSS
-
行内 CSS
外部 CSS
通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！
每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。
实例
外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。
外部 .css 文件不应包含任何 HTML 标签。
"mystyle.css" 是这样的：
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}注意：请勿在属性值和单位之间添加空格（例如 margin-left: 20 px;）。正确的写法是：margin-left: 20px;
内部 CSS
如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。
内部样式是在 head 部分的 <style> 元素中进行定义。
实例
内部样式在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>行内 CSS
行内样式（也称内联样式）可用于为单个元素应用唯一的样式。
如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
实例
行内样式在相关元素的 "style" 属性中定义：
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>提示：行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起）。请谨慎使用此方法。
多个样式表
如果在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。
假设某个外部样式表为 <h1> 元素设定的如下样式：
h1 {
color: navy;
}
然后，假设某个内部样式表也为 <h1> 元素设置了如下样式：
h1 {
color: orange;
}
实例
如果内部样式是在链接到外部样式表之后定义的，则 <h1> 元素将是橙色：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>实例
不过，如果在链接到外部样式表之前定义了内部样式，则 <h1> 元素将是深蓝色：
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>层叠顺序
当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？
页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：
-
行内样式（在 HTML 元素中）
-
外部和内部样式表（在 head 部分）
-
浏览器默认样式
因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。
css注释
位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束：
实例
/* 这是一条单行注释 */
p {
color: red;
}
可以在代码中的任何位置添加注释：
实例
p {
color: red; /* 把文本设置为红色 */
}
注释能横跨多行：
实例
/* 这是
一条多行的
注释 */
p {
color: red;
}
HTML 和 CSS 注释
从 HTML 教程中，您学习到可以使用 <!--...--> 语法在 HTML 源代码中添加注释。
在下面的例子中，我们结合使用了 HTML 和 CSS 注释：
实例
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* 将文字颜色设置为红色 */
}
</style>
</head>
<body>
<h2>My Heading</h2>
<!-- 这些段落将是红色的 -->
<p>Hello World!</p>
<p>这段文本由 CSS 设置样式。</p>
<p>CSS 注释不会在输出中显示。</p>
</body>
</html>css颜色
属性名:rgb，颜色名等等
css背景色
style="background-color:+颜色名
实例
<h1 style="background-color:DodgerBlue;">China</h1> <p style="background-color:Tomato;">China is a great country!</p>
CSS 文本颜色
您可以设置文本的颜色：
style="color:+颜色名
实例
<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>CSS 边框颜色
style="border:边框粗细px solid+颜色值
边框粗细：1，2，3，4...
实例
<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
CSS 颜色值
在 CSS 中，还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色：
实例
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>css背景
CSS 背景属性用于定义元素的背景效果。
CSS 背景属性：
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
CSS background-color
background-color 属性指定元素的背景色。
实例
页面的背景色设置如下：
body {
background-color: lightblue;
}
通过 CSS，颜色通常由以下方式指定：
-
有效的颜色名称 - 比如 "red"
-
十六进制值 - 比如 "#ff0000"
-
RGB 值 - 比如 "rgb(255,0,0)"
其他元素
您可以为任何 HTML 元素设置背景颜色：
实例
在这里，<h1>、<p> 和 <div> 元素将拥有不同的背景色：
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}不透明度 / 透明度
opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
实例
div {
background-color: green;
opacity: 0.3;
}
注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。
使用 RGBA 的透明度
如果您不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：
100% opacity
60% opacity
30% opacity
10% opacity
RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
提示：您可在我们的 CSS 颜色 一章中学到有关 RGBA 颜色的更多知识。
实例
div {
background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}
css背景图像
background-image 属性指定用作元素背景的图像。
默认情况下，图像会重复，以覆盖整个元素。
实例
页面的背景图像可以像这样设置：
body {
background-image: url("paper.gif");
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/paper.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>此页面以图像为背景！</p>
</body>
</html>实例
本例展示了文本和背景图像的错误组合。文字难以阅读：
body {
background-image: url("bgdesert.jpg");
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/css/bgdesert.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>在此背景图片上阅读这段文本并不容易。</p>
</body>
</html>注意：使用背景图像时，请使用不会干扰文本的图像。
还可以为特定元素设置背景图像，例如 <p> 元素：
实例
p {
background-image: url("paper.gif");
}
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-image: url("/i/paper.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>本段以一幅图像作为背景！</p>
</body>
</html>css背景重复
CSS background-repeat
默认情况下，background-image 属性在水平和垂直方向上都重复图像。
某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：
实例
body {
background-image: url("gradient_bg.png");
}
源代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/css/gradient_bg.png");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>奇怪的背景图片...</p>
</body>
</html>如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：
实例
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
源代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/css/gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>在这里，背景图像仅在水平方向上重复！</p>
</body>
</html>提示：如需垂直重复图像，请设置 background-repeat: repeat-y;
CSS background-repeat: no-repeat
background-repeat 属性还可指定只显示一次背景图像：
实例
背景图像仅显示一次：
body {
background-image: url("tree.png");
background-repeat: no-repeat;
}
源代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/photo/tree.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3School 背景图像实例。</p>
<p>这幅背景图像仅显示一次，但它会打扰读者！</p>
</body>
</html>在上例中，背景图像与文本放置在同一位置。我们想要更改图像的位置，以免图像过多干扰文本。
CSS background-position
background-position 属性用于指定背景图像的位置。
实例
把背景图片放在右上角：
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
源代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/photo/tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3School 不重复并设置位置的背景实例。</p>
<p>现在，背景图像仅显示一次，并且位置与文本分开。</p>
<p>在此例中，我们还在右侧添加了外边距，因此背景图片将永远不会干扰文本。</p>
</body>
</html>css背景附着
CSS background-attachment
background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：
实例
指定应该固定背景图像：
background-attachment: fixed;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/photo/tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>background-attachment 属性</h1>
<p>background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分滚动）。</p>
<p><b>提示：</b>如果看不到任何滚动条，请尝试调整浏览器窗口的大小。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
</body>
</html>
实例
指定背景图像应随页面的其余部分一起滚动：
background-attachment: scroll;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/photo/tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>background-attachment 属性</h1>
<p>background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分滚动）。</p>
<p><b>提示：</b>如果看不到任何滚动条，请尝试调整浏览器窗口的大小。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
<p>背景图像滚动。请尝试向下滚动页面。</p>
</body>
</html>css背景简写
CSS background - 简写属性
如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。
而不是这样写：
body {
background-color: #ffffff;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
实例
使用简写属性在一条声明中设置背景属性：
body {
background: #ffffff url("tree.png") no-repeat right top;
}
在使用简写属性时，属性值的顺序为：
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。
css边框
CSS 边框属性
CSS border 属性允许您指定元素边框的样式、宽度和颜色。
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 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
实例
演示不同的边框样式：
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}注意：除非设置了 border-style 属性，否则其他 CSS 边框属性（将在下一章中详细讲解）都不会有任何作用！
CSS 边框宽度
CSS 边框宽度
border-width 属性指定四个边框的宽度。
可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
p.five {
border-style: double;
border-width: 15px;
}
p.six {
border-style: double;
border-width: thick;
}
</style>
</head>
<body>
<h1>border-width 属性</h1>
<p>此属性规定四条边框的宽度：</p>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p class="four">一些文本。</p>
<p class="five">一些文本。</p>
<p class="six">一些文本。</p>
<p><b>注释：</b>border-color 属性单独使用时不起作用。请首先使用 border-style 属性设置样式。</p>
</body>
</html>演示不同的边框宽度：
特定边的宽度
border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：
实例
p.one {
border-style: solid;
border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}CSS 边框颜色
border-color 属性用于设置四个边框的颜色。
可以通过以下方式设置颜色：
-
name - 指定颜色名，比如 "red"
-
HEX - 指定十六进制值，比如 "#ff0000"
-
RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
-
HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
-
transparent
注释：如果未设置 border-color，则它将继承元素的颜色。
演示不同的边框颜色：
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}特定边框的颜色
border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
实例
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
</style>
</head>
<body>
<h1>border-color 属性</h1>
<p>border-color 属性可接受一到四个值（依次对应上、右、下、左边框）：</p>
<p class="one">多色的实线边框</p>
</body>
</html>css边框各边
在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）：
实例
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}它的工作原理是这样的：
如果 border-style 属性设置四个值：
border-style: dotted solid double dashed;
-
上边框是虚线
-
右边框是实线
-
下边框是双线
-
左边框是虚线
如果 border-style 属性设置三个值：
border-style: dotted solid double;
-
上边框是虚线
-
右和左边框是实线
-
下边框是双线
如果 border-style 属性设置两个值：
border-style: dotted solid;
-
上和下边框是虚线
-
右和左边框是实线
如果 border-style 属性设置一个值：
border-style: dotted;
-
四条边均为虚线
实例
/* 四个值 */
p {
border-style: dotted solid double dashed;
}
/* 三个值 */
p {
border-style: dotted solid double;
}
/* 两个值 */
p {
border-style: dotted solid;
}
/* 一个值 */
p {
border-style: dotted;
}上例中使用的是 border-style 属性。但 border-width 和 border-color 也同样适用。
CSS 简写边框属性
border 属性是以下各个边框属性的简写属性：
-
border-width -
border-style（必需） -
border-color
实例
p {
border: 5px solid red;
}
还可以只为一个边指定所有单个边框属性：
左边框
p {
border-left: 6px solid red;
background-color: lightgrey;
}
下边框
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}css圆角边框
CSS 圆角边框
border-radius 属性用于向元素添加圆角边框：
p {
border: 2px solid red;
border-radius: 5px;
}
CSS 外边距
CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。
通过 CSS，您可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。
Margin - 单独的边
CSS 拥有用于为元素的每一侧指定外边距的属性：
-
margin-top
-
margin-right
-
margin-bottom
-
margin-left
所有外边距属性都可以设置以下值：
-
auto - 浏览器来计算外边距
-
length - 以 px、pt、cm 等单位指定外边距
-
% - 指定以包含元素宽度的百分比计的外边距
-
inherit - 指定应从父元素继承外边距
提示：允许负值。
实例
为 <p> 元素的所有四个边设置不同的外边距：
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin - 简写属性
为了缩减代码，可以在一个属性中指定所有外边距属性。
margin 属性是以下各外边距属性的简写属性：
-
margin-top
-
margin-right
-
margin-bottom
-
margin-left
工作原理是这样的：
如果 margin 属性有四个值：
-
margin: 25px 50px 75px 100px;
-
-
上外边距是 25px
-
右外边距是 50px
-
下外边距是 75px
-
左外边距是 100px
-
实例
margin 简写属性设置四个值：
p {
margin: 25px 50px 75px 100px;
}
如果 margin 属性设置三个值：
-
margin: 25px 50px 75px;
-
-
上外边距是 25px
-
右和左外边距是 50px
-
下外边距是 75px
-
实例
使用已设置三个值的 margin 简写属性：
p {
margin: 25px 50px 75px;
}
如果 margin 属性设置两个值：
-
margin: 25px 50px;
-
-
上和下外边距是 25px
-
右和左外边距是 50px
-
实例
使用设置了两个值的 margin 简写属性：
p {
margin: 25px 50px;
}
如果 margin 属性设置了一个值：
-
margin: 25px;
-
-
所有四个外边距都是 25px
-
实例
使用设置一个值的 margin 简写属性：
p {
margin: 25px;
}
auto 值
您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。
然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。
实例
使用 margin: auto：
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
inherit 值
本例使 <p class="ex1"> 元素的左外边距继承自父元素（<div>）：
实例
使用 inherit 值：
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}CSS 内边距
CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。
通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。
Padding - 单独的边
CSS 拥有用于为元素的每一侧指定内边距的属性：
-
padding-top
-
padding-right
-
padding-bottom
-
padding-left
所有内边距属性都可以设置以下值：
-
length - 以 px、pt、cm 等单位指定内边距
-
% - 指定以包含元素宽度的百分比计的内边距
-
inherit - 指定应从父元素继承内边距
提示：不允许负值。
实例
为 <div> 元素的所有四个边设置不同的内边距：
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - 简写属性
为了缩减代码，可以在一个属性中指定所有内边距属性。
padding 属性是以下各内边距属性的简写属性：
-
padding-top
-
padding-right
-
padding-bottom
-
padding-left
工作原理是这样的：
如果 padding 属性有四个值：
-
padding: 25px 50px 75px 100px;
-
-
上内边距是 25px
-
右内边距是 50px
-
下内边距是 75px
-
左内边距是 100px
-
实例
使用设置了四个值的 padding 简写属性：
div {
padding: 25px 50px 75px 100px;
}
如果 padding 属性设置了三个值：
padding: 25px 50px 75px;
上内边距是 25px
右和左内边距是 50px
下内边距是 75px
实例
使用设置了三个值的 padding 简写属性：
div {
padding: 25px 50px 75px;
}
如果 padding 属性设置了两个值：
padding: 25px 50px;
上和下内边距是 25px
右和左内边距是 50px
实例
使用设置了两个值的 padding 简写属性：
div {
padding: 25px 50px;
}
如果 padding 属性设置了一个值：
padding: 25px;
所有四个内边距都是 25px
实例
使用设置了一个值的 padding 简写属性：
div {
padding: 25px;
}内边距和元素宽度
CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。
因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。
实例
在这里，<div> 元素的宽度为 300px。但是，<div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px）：
div {
width: 300px;
padding: 25px;
}
若要将宽度保持为 300px，无论填充量如何，那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。
实例
使用 box-sizing 属性将宽度保持为 300px，无论填充量如何：
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
CSS 设置高度和宽度
height 和 width 属性用于设置元素的高度和宽度。
height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。
CSS 高度和宽度值
height 和 width 属性可设置如下值：
-
auto - 默认。浏览器计算高度和宽度。
-
length - 以 px、cm 等定义高度/宽度。
-
% - 以包含块的百分比定义高度/宽度。
-
initial - 将高度/宽度设置为默认值。
-
inherit - 从其父值继承高度/宽度。
CSS 高度和宽度实例
此元素的高度为 200 像素，宽度为 50％
实例
设置 <div> 元素的高度和宽度：
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
此元素的高度为 100 像素，宽度为 500 像素。
实例
设置另一个 <div> 元素的高度和宽度：
div {
height: 100px;
width: 500px;
background-color: powderblue;
}注意：请记住，height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！
设置 max-width
max-width 属性用于设置元素的最大宽度。
可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。
当浏览器窗口小于元素的宽度（500px）时，会发生之前那个 <div> 的问题。然后，浏览器会将水平滚动条添加到页面。
在这种情况下，使用 max-width 能够改善浏览器对小窗口的处理。
提示：将浏览器窗口拖动到小于500px的宽度，以查看两个 div 之间的区别！
此元素的高度为 100 像素，最大宽度为 500 像素。
此元素的高度为 100 像素，最大宽度为 500 像素。
注释：max-width 属性的值将覆盖 width（宽度）。
实例
这个 <div> 元素的高度为 100 像素，最大宽度为 500 像素：
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
盒模型
==css将页面中的所有元素都设置为一个个矩形
-
内容 - 框的内容，其中显示文本和图像。
-
内边距 - 清除内容周围的区域。内边距是透明的。
-
边框 - 围绕内边距和内容的边框。
-
外边距 - 清除边界外的区域。外边距是透明的。
实例
演示框模型：
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h1>演示</h1>
<p>CSS 盒模型（框模型）实质上是一个包装每个 HTML 元素的盒子。它包括：边框、内边距（填充）、外边距以及实际的内容。</p>
<div>此文本是盒子里的内容。我们添加了 50px 的内边距，20px 的外边距和 15px 的绿色边框。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。</div>
</body>
</html>
overflow
visible.默认值，子元素会从父元素中溢出
hidden。溢出内容将会被裁剪不会显示
scroll。生成两个滚动条，通过滚动条来查看完整内容
auto。根据需要生成滚动条
元素的宽度和高度
为了在所有浏览器中正确设置元素的宽度和高度，您需要了解框模型如何工作。
重要提示：使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。
计算如下：
320px(宽度) + 20px（左+右内边距） + 10px（左+右边框） + 0px（左+右外边距） = 350px
元素的总宽度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度应该这样计算：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
css轮廓
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。
CSS 拥有如下轮廓属性：
-
outline-style
-
outline-color
-
outline-width
-
outline-offset
-
outline
注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。
CSS 轮廓样式
outline-style 属性指定轮廓的样式，并可设置如下值：
-
dotted - 定义点状的轮廓。
-
dashed - 定义虚线的轮廓。
-
solid - 定义实线的轮廓。
-
double - 定义双线的轮廓。
-
groove - 定义 3D 凹槽轮廓。
-
ridge - 定义 3D 凸槽轮廓。
-
inset - 定义 3D 凹边轮廓。
-
outset - 定义 3D 凸边轮廓。
-
none - 定义无轮廓。
-
hidden - 定义隐藏的轮廓。
下例展示了不同的 outline-style 值：
实例
演示不同的轮廓样式：
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}注意：除非设置了 outline-style 属性，否则其他轮廓属性（在下一章中将详细介绍）都不会有任何作用！
css轮廓宽度
outline-width 属性指定轮廓的宽度，并可设置如下值之一：
-
thin（通常为 1px）
-
medium（通常为 3px）
-
thick （通常为 5px）
-
特定尺寸（以 px、pt、cm、em 计）
实例
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}
p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}CSS 轮廓颜色
outline-color 属性用于设置轮廓的颜色。
可以通过以下方式设置颜色：
-
name - 指定颜色名，比如 "red"
-
HEX - 指定十六进制值，比如 "#ff0000"
-
RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
-
HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
-
invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）
实例
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}反转颜色
实例
p.ex1 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}CSS Outline - 简写属性
outline 属性是用于设置以下各个轮廓属性的简写属性：
-
outline-width
-
outline-style（必需）
-
outline-color
从上面的列表中，outline 属性可指定一个、两个或三个值。值的顺序无关紧要。
下例展示了用简写的 outline 属性指定的一些轮廓：
实例
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}CSS 轮廓偏移
outline-offset属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
下例指定边框边缘外 25px 的轮廓：
实例
p {
margin: 50px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 25px;
}下例显示元素与其轮廓之间的空间是透明的：
实例
p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 25px;
}css文本
文本颜色
color 属性用于设置文本的颜色。颜色由以下值指定：
-
颜色名 - 比如 "red"
-
十六进制值 - 比如 "#ff0000"
-
RGB 值 - 比如 "rgb(255,0,0)"
页面的默认文本颜色是在 body 选择器中定义的。
实例
body {
color: blue;
}
h1 {
color: green;
}提示：对于 W3C compliant CSS：如果您定义了 color 属性，则还必须定义 background-color 属性。
文本颜色和背景色
在本例中，我们定义了 background-color 属性和 color 属性：
实例
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}CSS 文本对齐
文本对齐
text-align 属性用于设置文本的水平对齐方式。
文本可以左对齐或右对齐，或居中对齐。
下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：
实例
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：
实例
div {
text-align: justify;
}
文本方向
direction 和 unicode-bidi 属性可用于更改元素的文本方向：
实例
p {
direction: rtl;
unicode-bidi: bidi-override;
}
垂直对齐
vertical-align 属性设置元素的垂直对齐方式。
本例演示如何设置文本中图像的垂直对齐方式：
实例
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}css文字装饰
文字装饰
text-decoration 属性用于设置或删除文本装饰。
text-decoration: none; 通常用于从链接上删除下划线：
实例
a {
text-decoration: none;
}
其他 text-decoration 值用于装饰文本：
实例
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}文本转换
text-transform 属性用于指定文本中的大写和小写字母。
它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：
实例
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>THIS IS SOME TEXT. this is some text. This Is Some Text.
css文字间距
文字缩进
text-indent 属性用于指定文本第一行的缩进：
实例
p {
text-indent: 50px;
}
字母间距
letter-spacing 属性用于指定文本中字符之间的间距。
下例演示如何增加或减少字符之间的间距：
实例
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
行高
line-height 属性用于指定行之间的间距：
实例
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
字间距
word-spacing 属性用于指定文本中单词之间的间距。
下例演示如何增加或减少单词之间的间距：
实例
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
空白
white-space 属性指定元素内部空白的处理方式。
此例演示如何禁用元素内的文本换行：
实例
p {
white-space: nowrap;
}css文字阴影
text-shadow 属性为文本添加阴影。
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：
实例
h1 {
text-shadow: 2px 2px;
}
实例
添加红色：
h1 {
text-shadow: 2px 2px red;
}
向阴影添加模糊效果（5px）：
实例
h1 {
text-shadow: 2px 2px 5px red;
}css字体
通用字体族
在 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 |
CSS font-family 属性
在 CSS 中，我们使用 font-family 属性规定文本的字体。
font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。
注释：如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。
实例
为三个段落规定不同的字体：
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}css字体样式
字体样式
font-style 属性主要用于指定斜体文本。
此属性可设置三个值：
-
normal - 文字正常显示
-
italic - 文本以斜体显示
-
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
实例
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}字体粗细
font-weight 属性指定字体的粗细：
实例
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>字体变体
font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。
在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。
实例
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">My name is Bill Gates.</p>
<p class="small">My name is Bill Gates.</p>
</body>
</html>字体大小
font-size 属性设置文本的大小。
在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。
请始终使用正确的 HTML 标签，例如 <h1> - <h6> 用于标题，而 <p> 仅用于段落。
font-size 值可以是绝对或相对大小。
绝对尺寸：
-
将文本设置为指定大小
-
不允许用户在所有浏览器中更改文本大小（可访问性不佳）
-
当输出的物理尺寸已知时，绝对尺寸很有用
相对尺寸：
-
设置相对于周围元素的大小
-
允许用户在浏览器中更改文本大小
注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。
以像素设置字体大小
使用像素设置文本大小可以完全控制文本大小：
实例
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}用 em 设置字体大小
为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。
W3C 建议使用 em 尺寸单位。
1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。
可以使用这个公式从像素到 em 来计算大小：pixels/16=em。
实例
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}在上例中，em 单位的文本大小与上一个例子中的像素大小相同。但是，若使用 em 尺寸，则可以在所有浏览器中调整文本大小。
不幸的是，旧版本的 Internet Explorer 仍然存在问题。放大文本时它比应该大的尺寸更大，缩小文本时会更小。
使用百分比和 Em 的组合
实例
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}我们的代码目前运行良好！它在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小！
响应式字体大小
可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（"viewport width"）。
这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放：
实例
<h1 style="font-size:10vw">Hello World</h1>
视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。
css简写字体属性
字体属性
为了缩短代码，也可以在一个属性中指定所有单个字体属性。
font 属性是以下属性的简写属性：
-
font-style
-
font-variant
-
font-weight
-
font-size/line-height
-
font-family
实例
使用简写声明设置一些字体属性：
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}注意：**font-size** 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
