详细教程网址：
https://www.w3school.com.cn/css/index.asp
CSS即级联样式表（层叠样式表）。
简单语法如下：
[选择器] {
[属性]:[值];
...
}CSS选择器
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
1、元素选择器：直接根据元素名称选择元素。
p {
text-align: center;
color: red;
}2、id选择器：根据元素的id属性选择元素。
#para1 {
text-align: center;
color: red;
}3、类选择器：根据元素的类属性选择元素。
.center {
text-align: center;
color: red;
}注意：可在类名前加元素名称（如p.center）指定特定元素受此类影响。此外，根据元素可以定义多个类的性质可知，也可指定特定元素同时受多个类的影响。
4、通用选择器：使用*选择页面上所有的元素。
* {
text-align: center;
color: blue;
}5、分组选择器：同时选择多个元素。
h1, h2, p {
text-align: center;
color: red;
}添加CSS
三种插入样式表的方法：
1、外部CSS：通过link标签链接到外部样式表，适用于：样式需要被应用到很多页面时。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>2、内部CSS：通过style标签定义内部样式表，适用于：单个文件需要特别样式时。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>3、内联CSS：通过标签的style属性定义CSS属性，适用于：个别元素需要特别样式时。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>注意：样式冲突时，读取优先级从高到低如下：
- 行内样式（在 HTML 元素中）。
- 外部和内部样式表（在 head 部分）。
- 浏览器默认样式。
第二优先级（外部和内部样式表）冲突时，使用最后读取的样式表中的值。
CSS注释： /* 注释内容 */
CSS背景
CSS常用背景属性：
1、background-color：指定元素的背景色。
可将值设置为指定颜色名、十六进制值或rgb值（如rgb(255,0,0)）。
2、background-image：指定用作元素背景的图像。
示例：
body {
background-image: url("paper.gif");
}默认情况图像会重复直到覆盖整个元素。
3、background-repeat：设置背景重复方式。
示例（指定图像仅在水平方向上重复）：
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}水平方向重复值：repeat-x
设置图像不重复，只显示一次的值：no-repeat
4、background-attachment：指定背景图像应该滚动还是固定的（不会随页面的其余部分一起滚动）。
固定-值：fixed
滚动-值：scroll
5、background-position：指定背景图像的位置。
6、background-clip 规定背景的绘制区域。
7、background-color 设置元素的背景色。
8、background-origin 规定在何处放置背景图像。
9、background-size 规定背景图像的尺寸。
CSS边框
CSS常用边框属性：
1、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：定义隐藏边框
也可以设置不同的四个边的类型，设置方式：
- 一个值：设置四个边框宽度。
- 两个值：左值设置上下边框，右值设置左右边框。
- 四个值：从左到右依次为上、右、下、左。
2、border-width：指定四个边框的宽度。
可将值设置为特定大小（px、cm计）或三个预定值（thin、medium 或 thick）。
设置方式：
- 一个值：设置四个边框宽度。
- 两个值：左值设置上下边框，右值设置左右边框。
- 四个值：从左到右依次为上、右、下、左。
3、border-color：设置四个边框的颜色。
可将值设置为指定颜色名、十六进制值或rgb值（如rgb(255,0,0)）。
设置方式同边框宽度（border-width）设置。
4、设置单独的边
以下一些属性用于设置单独边：
border-top border-right border-bottom border-left
5、border-radius：设置圆角边框。（值范围：0-12px）
CSS外边距
CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间，也就是设置外边距。
外边距也拥有单独的边的属性：
margin-topmargin-rightmargin-bottommargin-left
外边距属性的值有：
- auto - 浏览器来计算外边距
- length - 以 px、pt、cm 等单位指定外边距
- % - 指定以包含元素宽度的百分比计的外边距
- inherit - 指定应从父元素继承外边距
注意：允许负值。
外边距合并图解示意
一般情况：
当一个元素包含在另一个元素中：
一个空元素，它有外边距，但是没有边框或填充：
外边框合并也具有叠加性，如果上图的外边框又遇到另一个元素的外边框：
CSS内边距
CSS padding 属性用于在任何定义的边框之外，为元素周围创建空间，也就是设置外边距。
外边距也拥有单独的边的属性：
padding-toppadding-rightpadding-bottompadding-left
外边距属性的值有：
- length - 以 px、pt、cm 等单位指定内边距
- % - 指定以包含元素宽度的百分比计的内边距
- inherit - 指定应从父元素继承内边距
注意：不允许负值。
box-sizing 属性
该属性使元素保持宽度（自身宽度+边框+内边距），无论填充量如何。
示例：（使用 box-sizing 属性将宽度保持为 300px，无论填充量如何）
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}CSS元素宽高
height 和 width 属性用于设置元素的高度和宽度（内容区域，即自身宽度）。
属性的值有：
auto- 默认。浏览器计算高度和宽度。length- 以 px、cm 等定义高度/宽度。%- 以包含块的百分比定义高度/宽度。initial- 将高度/宽度设置为默认值。inherit- 从其父值继承高度/宽度。
max-width属性：设置元素的最大宽度。（当窗口宽度小于该最大宽度时浏览器会自动调节大小，而不是生成滚动条）
CSS框模型
CSS框模型示意图：
注意：CSS背景应用于由内容和内边距、边框组成的区域。
CSS轮廓
CSS常用轮廓属性：
1、outline-style：指定轮廓的样式。
常用轮廓类型值：
dotted- 定义点状的轮廓。dashed- 定义虚线的轮廓。solid- 定义实线的轮廓。double- 定义双线的轮廓。groove- 定义 3D 凹槽轮廓。ridge- 定义 3D 凸槽轮廓。inset- 定义 3D 凹边轮廓。outset- 定义 3D 凸边轮廓。none- 定义无轮廓。hidden- 定义隐藏的轮廓。
2、outline-width：指定轮廓的宽度 。
可将值设置为特定大小（px、cm计）或三个预定值（thin、medium 或 thick）。
3、outline-color：设置轮廓的颜色。
可将值设置为指定颜色名、十六进制值或rgb值（如rgb(255,0,0)）。
4、outline-offset：在元素的轮廓与边框之间添加空间。
可将值设置为 特定大小（px、cm计）。
CSS文本
CSS常用文本属性：
1、color：设置文本的颜色。
可将值设置为指定颜色名、十六进制值或rgb值（如rgb(255,0,0)）。
2、text-align：设置文本的水平对齐方式。
可设置值为center、left、right、justify（拉伸每一行，以使每一行具有相等的宽度）。
3、vertical-align：设置元素的垂直对齐方式。
可设置值为top、middle、bottom。
4、text-decoration：用于设置或删除文本装饰。
常用值为：
删除文本装饰操作：
1、none：用于从链接上删除下划线。
设置文本装饰操作：
1、overline：上划线。
2、line-through：删除线。
3、underline：下划线。
5、text-transform：用于指定文本中的大写和小写字母。
可设置值为uppercase（转换大写），lowercase（转换小写）、capitalize（首字母大写）。
6、text-indent：用于指定文本第一行的缩进。（值为px、cm计量单位）
7、letter-spacing：用于指定文本中字符之间的间距。（值为px、cm计量单位）
8、line-height：用于指定行之间的间距。（值为px、cm计量单位或比例）
9、word-spacing：用于指定文本中单词之间的间距。（值为px、cm计量单位）
10、white-space：指定元素内部空白的处理方式。
可设置方式（值）：
- nowrap：禁用元素内的文本换行。
11、text-shadow：为文本添加阴影。
示例：
h1 {
text-shadow: 2px 2px 5px red;
}该属性值从左到右含义为：水平阴影、垂直阴影、阴影颜色、模糊效果。
CSS字体
CSS常用文本属性：
1、font-family：规定文本的字体。
注意：如果设置多个字体，则浏览器从左到右选择，直到有该浏览器兼容的字体为止。（因此，为确保浏览器兼容性，尽量设置多个字体以备用。）
2、font-style：主要用于指定斜体文本。
常用值为：
- normal - 文字正常显示
- italic - 文本以斜体显示
- oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
3、font-weight：指定字体的粗细。
4、font-variant：指定是否以 small-caps 字体（小型大写字母）显示文本。
5、font-size：设置文本的大小。
可将值设置为特定大小（px、cm、vw计）或百分比。
注意：vw （全称viewport width-视口宽度）单位设置文本大小是一种响应式字体大小设置，文本大小将遵循浏览器窗口的大小。
CSS元素显示模式（块级、行内、行内块）
CSS元素显示模式有如下三种，分别有如下特点：
1、块级：
可以设置宽度高度，默认为容器的100%；
该元素内可以包含任何元素。
2、行内：
不可以设置宽度高度，默认宽度为本身内容的宽度；
该元素内可以包含其他行内元素和文本。
3、行内块：
本质是行内元素，但可以设置宽度高度，默认宽度为本身内容的宽度。
元素显示模式也可以通过设置属性display进行转换：
属性相应的值：
1、block：转换块级元素。
2、inline：转换行内元素。
3、inline-block：转换行内块元素。
CSS元素的显示与隐藏
CSS有如下属性设置元素显示隐藏：
1、display：设置一个元素应如何显示。
属性值有：
- none：隐藏对象。
- block：除了转换块级元素之外，还能显示元素。
注意：display隐藏元素后，不再占有原来的位置。
2、visibility：用于指定一个元素应可见还是隐藏。
属性值有：
- visible：元素可视。
- hidden：元素隐藏。
注意：visibility 隐藏元素后，继续占有原来的位置。
3、overflow：用于溢出内容显示隐藏。
属性值有：
- visible：不剪切内容也不添加滚动条。
- hidden：不显示超出对象尺寸的内容，超出的部分隐藏掉。
- scroll：不管超出内容与否，总是显示滚动条。
- auto：超出自动显示滚动条，不超出不显示滚动条。
CSS属性书写规范
属性书写建议遵循如下顺序：
1、布局定位属性：display / position / float / clear / visibility / overflow
2、自身属性：width / height / margin / padding / border / backgroud
3、文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / backgroud:linear-gradient ...
扫一扫
785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
