常见属性说明
本章节介绍 CSS 的最常见，也是最基础属性。
文本
| 格式 | 属性 | 值 |
|---|---|---|
| 对齐方式 | text-align | left (默认) / right / center / justify / inherit |
| 字体 | font-family | 各种字体对应的代号 |
| 斜体样式 | font-style | normal (默认) /italic |
| 字体粗细 | font-weight | 描述值 light / normal / bold，数字 100 - 900 (400 为 normal) |
| 字体大小 | font-size | 像素如 14px，磅如 8pt，字体大小如 1em、0.5rem |
| 行高 | line-height | 像素如 14px，数字如 2(代表 2 倍字高) |
| 字体间距 | letter-spacing | 像素如 14px，百分比如 10%，磅如 8pt，字体大小如 1em、0.5rem |
| 字体装饰 | text-decoration | none (默认) / underline/overline/line-through / blink / inherit |
案例:
p.normal {
font-weight: bold;
font-size: 18px;
line-height: 1.5;
text-align: center;
}颜色
HEX(十六进制)表示方法
#__ __ __(__)前三个空白位置分别代表 R (red)，G (green)，B (blue)，即红、绿、蓝显示三原色。最后一位代表 A (alpha)，即透明度通道。四个位置要统一填写 1 或 2 位十六进制数。提示
例子:
#fff: 3 位，16 色 RGB，灰度为 16，即 RGB 分别只有 16 色(从最淡到最浓为0-f)。#ffff: 4 位，16 色 RGBA。新增的透明度通道只有 16 个级别(0为0%完全透明，f为100%完全不透明)。#ffffff: 6 位是 256 色 RGB，灰度为 256，即 RGB 分别拥有 256 色(从最淡到最浓为00-ff)。#ffffffff: 8 位是 256 色 RGBA。同上新增的透明度通道有 256 个级别(00为0%完全透明，ff为100%完全不透明)。
RGB 与 RGBA 表示方法
格式:
RGB(R,G,B)
RGBA(R,G,B,A)R: 红色值。正整数 | 百分数
G: 绿色值。正整数 | 百分数
B: 蓝色值。正整数 | 百分数
正整数值的取值范围为: 0 - 255。百分数值的取值范围为: 0.0% - 100.0%
A: Alpha 透明度。取值 0~1 之间。
例子:
RGB:
rgb(142 229 238)RGBA:
rgba(142 229 238 0)
配色网站
提示
由于黑色和白色是纯色，直接使用 16 色 HEX 表示方法即可。
即: 黑色 #000，白色 #fff
body,
h1,
p {
background-color: #b0c4de;
}链接
/* 未访问链接*/
a:link {
color: #000000;
background-color: #b2ff99;
}
/*已访问链接 */
a:visited {
color: #00ff00;
background-color: #ffff85;
}
/*鼠标移动到链接上 */
a:hover {
color: #ff00ff;
background-color: #ff704d;
}
/* 鼠标点击时 */
a:active {
color: #0000ff;
background-color: #ff704d;
}以上要注意优先级顺序，因为同样生效的 CSS，后面的优先级更高，例如将 a:link 放在最后，则剩余三个的颜色永远不会生效。
盒模型
提示
您可能需要先查看 盒模型 以理解此部分
margin 和 padding 都可以接受 1 - 4 个参数。其参数默认以 上 侧为起始点，按照顺时针排序，即上右下左。
当 下 / 左 没有指定时，跟随 上 / 右；当 右 也没有指定时，全部跟随 上。
案例:
div {
/** 上 右 下 左 */
margin: 25px 50px 75px 100px;
}
div {
/** 上 右+左(跟随右) 下 */
margin: 25px 50px 75px;
}
div {
/** 上下 右左 */
margin: 25px 50px;
}
div {
/** 上右下左 全部25px */
margin: 25px;
}同时，也支持只对一侧设置，如:
/** 只有左外边距，为3px */
div {
margin-left: 3px;
}提示
padding 与 margin 在格式上完全相同。
背景色
使用 background-color 或 background-image 属性进行设置。
案例:
.red {
background-color: red;
}位置
position 属性规定元素的定位类型。元素的位置通过 left, top, right 以及 bottom 属性进行规定。
可能的值:
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，"left: 20px" 会让元素向右偏移 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中 (忽略 top, bottom, left, right 或者 z-index 声明)。 |
| sticky | 在文档中正常定位，但当向上滚动到达屏幕顶端时，固定在顶部不再随页面上移 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
如果设置为 absolute 或者 fixed 的话，元素将会脱离文档流，也就是正常的文档布局里面不再有它的位置，不会给它留空，完全视它不存在。它会根据最后渲染出的其他元素位置寻找自己的定位。