body body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }
p { font-size: 14px; }
font-weight用来设置字体的字重（粗细）。
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
当你想要一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能
text-align 属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
p { text-align: center; /*居中*/ text-align: right; text-align: left; text-align: justify; /*两端对齐*/ }
text-decoration 属性用来给文字添加特殊效果。
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
p { text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: none; }
需要注意的是text-decoration: none这个属性
看似没用，主要是因为超链接a标签如果不设置的话是自带下划线的，而那些网站一般是不带这个的
所以要用none来清除一下
a { text-decoration: none; /*主要用于给a标签去掉自带的下划线 需要掌握*/ }
文章开头都需要空两格，这是从小学开始语文老师就强调的，这里是这样实现的
p { text-indent: 32px; }
/*背景颜色*/ background-color: red; /*背景图片*/ background-image: url(‘1.jpg‘); /* 背景重复 repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 */ background-repeat: no-repeat; /*背景位置*/ background-position: left top; /*background-position: 200px 200px;*/
上面的css代码每一句都要background-属性：值
这样很冗余，可以直接一句简写成background：值1 值2...系统会自动匹配值对应的属性的
background:#336699 url(‘1.png‘) no-repeat left top;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #d1 { height: 500px; background-color: red; } #d2 { height: 500px; background-color: green; } #d3 { height: 500px; background-image: url("222.png"); background-attachment: fixed; } #d4 { height: 500px; background-color: aqua; } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div> </body> </html>
边框属性
i1 { border-width: 2px; border-style: solid; border-color: red; }
可以和上面background简写方式一样，省略掉后面的属性
#i1 { border: 2px solid red; }
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
原文：https://www.cnblogs.com/heirenxilou/p/12883259.html