本文最后更新于18 天前，其中的信息可能已经过时，如有错误请发送邮件到qiqin-chang@qq.com
# 基础教程：
CSS 语法：
选择器 { 属性: 值; 属性: 值 …}
一套（属性:值）被称为一个声明
p {
color: red;
text-align: center;
}
CSS 选择器：
元素选择器：
p {text-align: center;color: red;}
id 选择器：
#para1 {text-align: center;color: red;}
类选择器：
.center {text-align: center;color: red;}
通用选择器：
* {text-align: center;color: blue;}
分组选择器：
h1, h2, p {text-align: center;color: red;}
CSS 使用方式：
外部CSS：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部 CSS：
<head>
<style>
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
行内 CSS：
<h1 style="color:blue;text-align:center;">This is a heading</h1>
CSS 注释：
/* 这是一条单行注释 */
CSS 颜色：
颜色属性：
背景颜色：
<h1 style="background-color:DodgerBlue;">China</h1>
文本颜色：
<h1 style="color:Tomato;">China</h1>
边框颜色：
<h1 style="border:2px solid Tomato;">Hello World</h1>
颜色种类：
| 种类 | 使用方式 |
|---|
| RGB 颜色 | rgb(red, green, blue) |
| RGBA 颜色 | rgba(red, green, blue, alpha) |
| HEX 颜色 | #rrggbb |
| HSL 颜色 | hsla(hue, saturation, lightness) |
| HSLA 颜色 | hsla(hue, saturation, lightness, alpha) |
CSS 背景：background
| 属性 | 描述 |
|---|
| background-color | 指定元素的背景色 |
| background-image | 指定用作元素背景的图像（图像默认子在水平和垂直上都重复） |
| background-repeat | 指定背景图像的重复方式 |
| background-attachment | 指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动） |
| background-position | 指定背景图像的位置 |
| background-clip | 规定背景的绘制区域 |
| background-origin | 规定在何处放置背景图像 |
| background-size | 规定背景图像的尺寸 |
实例：
body {
background-color: lightblue; /*设置背景颜色*/
background-image: url("paper.gif"); /*添加背景图片*/
background-repeat: repeat-x; /*水平重复*/
background-repeat: repeat-y; /*垂直重复*/
background-repeat: no-repeat; /*只显示一次图像*/
background-position: right top; /*设置背景图片位置*/
background-attachment: fixed; /*固定背景图像*/
background-attachment: scroll; /*背景图像随页面滚动*/
background: #ffffff url("tree.png") no-repeat right top; /*属性简写*/
}
/*简写顺序
background-color
background-image
background-repeat
background-attachment
background-position
*/
body {
background-clip: padding-box; /*背景被裁剪到内边距框*/
background-clip: border-box; /*背景被裁剪到边框盒 默认*/
background-clip: content-box; /*背景被裁剪到内容框*/
background-origin:padding-box; /*背景图像相对于内边距框来定位 默认*/
background-origin:border-box; /*背景图像相对于边框盒来定位*/
background-origin:content-box; /*背景图像相对于内容框来定位*/
}
CSS 边框：border
边框样式：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-width
| 属性值 | 描述 |
|---|
| 以 px、pt、cm、em 计 | 自定义宽度 |
| thin | 预定义细 |
| medium | 预定义中 |
| thick | 预定义宽 |
边框颜色：border-color
说明：使用CSS颜色为属性就可以
混合边框：
一个值：四条边都为该属性值
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左
属性简写：
p {
border: 5px solid red;
border-left: 6px solid red; /*左边框*/
border-bottom: 6px solid red; /*底边框*/
}
圆角边框: border-radius
p {
border-radius: 5px; /*圆角像素值*/
}
其他属性：
CSS 边距：padding margin
内边距：padding
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /*混合外边距 上 右 下 左*/
}
外边距：margin
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
margin: 25px 50px 75px 100px; /*混合外边距 上 右 下 左*/
}
CSS 高度、宽度：height width
| 属性 | 描述 |
|---|
| height | 设置元素的高度。 |
| width | 设置元素的宽度。 |
| max-height | 设置元素的最大高度。 |
| max-width | 设置元素的最大宽度。 |
| min-height | 设置元素的最小高度。 |
| min-width | 设置元素的最小宽度。 |
div {
height: 200px;
width: 50%;
max-width: 500px; /*设置最大宽度*/
}
CSS 轮廓：outline-style
| 属性 | 描述 |
|---|
| outline-style | 轮廓样式 |
| outline-color | |
| outline-width | 轮廓宽度 |
| outline-offset | |
| outline | |
轮廓样式：
| 轮廓样式 | 描述 |
|---|
| dotted | 定义点状的轮廓 |
| dashed | 定义虚线的轮廓 |
| solid | 定义实线的轮廓 |
| double | 定义双线的轮廓 |
| groove | 定义 3D 凹槽轮廓 |
| ridge | 定义 3D 凸槽轮廓 |
| inset | 定义 3D 凹边轮廓 |
| outset | 定义 3D 凸边轮廓 |
| none | 定义无轮廓 |
| hidden | 定义隐藏的轮廓 |
轮廓宽度：outline-width
轮廓颜色：outline-color
反转颜色：outline-color: invert
轮廓偏移：outline-offset
轮廓简写：
p {
outline-style: dotted;
outline-width: 4px;
outline-color: red;
outline-color: invert /*颜色反转*/
outline: thick ridge pink; /*顺序无所为style属性必须要有*/
outline-offset: 25px; /*轮廓偏移*/
}
CSS 文本：text
文本颜色：color
文本对齐：text-align
| 属性值 | 描述 |
|---|
| center | 居中对齐 |
| left | 左对齐 |
| right | 右对齐 |
| justify | 拉伸每一行直至每行宽度相等且对齐 |
垂直对齐：vertical-align
文本方向：direction unicode-bidi
文字装饰：text-decoration
| 属性值 | 描述 |
|---|
| none | 取消装饰，一般用于取消超链接的下划线 |
| overline | 上划线 |
| line-through | 中划线 |
| underline | 下划线 |
文本转换：text-transform
| 属性值 | 描述 |
|---|
| uppercase | 全转为大写 |
| lowercase | 全转为小写 |
| capitalize | 首字母大写 |
文字间距：
文字缩进：text-indent
字母间距：letter-spacing
行高：line-height
字间距：word-spacing
空白：white-space
文本阴影：text-shadow
body {
/*文本颜色*/
color: blue;
/*文本对齐*/
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
/*文本逆序*/
direction: rtl;
unicode-bidi: bidi-override;
/*文本对齐*/
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
/*文本装饰*/
text-decoration: none;
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
/*文本转换*/
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
/*文字间距*/
/*文字缩进*/
text-indent: 50px;
/*字母间距*/
letter-spacing: -3px;
/*行高*/
line-height: 0.8;
/*字间距*/
word-spacing: -5px;
/*空白 以下用于进制文本换行*/
white-space: nowrap;
/*文本阴影*/
text-shadow: 2px 2px 5px red;
}
其他属性：
CSS 字体：font
字体族：font-family
常见字体族：
- 衬线字体（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-style
| 属性值 | 描述 |
|---|
| normal | 正常 |
| italic | 斜体 |
| oblique | 斜体（支持少） |
字体粗细：font-weight
| 属性值 | 描述 |
|---|
| normal | 正常 |
| lighter | 细 |
| bold | 粗 |
| 900 | 自定义 |
字体变体：font-variant
| 属性值 | 描述 |
|---|
| normal | 正常 |
| small-caps | 小写字母转为大写字母，但转换后的大写字母小于原本的大写字母 |
字体大小：font-size
属性简写：font
说明：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。
p {
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
font-size: 40px;
font: italic small-caps bold 12px/30px Georgia, serif;
}
CSS 列表：list-style-type
列表样式：
无序列表：
ul {
list-style-type: circle; /*圆形*/
list-style-type: square; /*方形*/
list-style-image: url('sqpurple.gif'); /*自定义样式*/
}
有序列表：
ol {
list-style-type: upper-roman; /*罗马排序*/
list-style-type: lower-alpha; /*字母排序*/
}
定位列表项标记：
ul {
list-style-position: outside; /*符号在列表项之外*/
list-style-position: inside; /*符号在列表项内*/
}
删除默认设置：
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
简写属性：
ul {
list-style: square inside url("sqpurple.gif");
}
CSS 表单：
合并表格边框：
table {
border-collapse: collapse;
}