【目录】
一、文字样式
用于控制字体 文本显示的方式
/*字族：STSong作为首选字体, 微软雅黑作为备用字体*/
font-family: "STSong", "微软雅黑";
/*字体大小*/
font-size: 40px;
/*字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/
font-weight: 900;
/*行高: 字体文本默认在行高中垂直居中显示*/
line-height: 200px;
/*字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线) |
inherit 继承父元素的text-decoration属性的值 */
text-decoration: overline;
/*字间距*/
letter-spacing: 2px;
/*词间距*/
word-spacing: 5px;
/*首行缩进：1em相当于一个字的宽度*/
text-indent: 2em;
/*字体颜色 (还有多种颜色设置的方法，详见代码例子)*/
color: red;
/* 文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右) | justify (两端对齐)*/
text-align: center;
【补充】
font-weight用来设置字体的字重（粗细）
| 值 | 描述 |
|---|
| normal |
默认值，标准粗细 |
| bold |
粗体 |
| bolder |
更粗 |
| lighter |
更细 |
| 100~900 |
设置具体粗细，400等同于normal，而700等同于bold |
| inherit |
继承父元素字体的粗细值 |
例子：
<style>
p {
/* !*第一个不生效就用后面的 写多个备用*! */
font-family: "Arial Black","微软雅黑","...";
/* !*字体大小*! */
font-size: 24px;
/* !*bolder lighter 100~900 inherit继承父元素的粗细值*! */
font-weight: inherit;
/* !*直接写颜色英文*! */
color: red;
/* !*颜色编号*! */
color: #ee762e;
/* !*三基色 数字 范围0-255*! */
color: rgb(128,23,45);
/* !*第四个参数是颜色的透明度 范围是0-1*! */
color: rgba(23, 128, 91, 0.9);
/*当你想要一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能
微信公众号:软件管家...
*/
}
</style>
二、背景样式
/*背景图片：url函数可以链接网络或本地图片*/
background-image: url('https://www.baidu.com/favicon.ico');
/*平铺:repeat-x(x轴平铺) | repeat-y(y轴平铺) | repeat(双轴平铺) | no-repeat*/(不平铺)
background-repeat: no-repeat;
/*x轴背景图片位置偏移：正值往右偏移，负值往左偏移*/
background-position-x: 10px;
/*y轴背景图片位置偏移：正值往下偏移，负值往上偏移*/
background-position-y: 10px;
/* !*第一个左 第二个上*! */
background-position:center center;
/* 锁定图片为背景地图，不可滑动 */
background-attachment: fixed;
三、显示样式——由display 控制
display:none;
<!-- HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 -->
display:block;
<div style="display: block;"></div>
<span style="display: block;"></span>
<i style="display: block;"></i>
<!--
1. 任意标签的display样式值均可以设置为block，那么该标签就会以block方式来显示
2. block方式显示的标签，默认会换行
3. block方式显示的标签，支持所有的css样式
4. block方式显示的标签，可以嵌套所有显示方式的标签
注：标题标签和段落标签虽然也是block显示类标签，但不建议嵌套block显示类标签
-->
display:inline;
<div style="display: inline;"></div>
<span style="display: inline;"></span>
<i style="display: inline;"></i>
<!--
1. 任意标签的display样式值均可以设置为inline，那么该标签就会以inline方式来显示
2. inline方式显示的标签，默认不会换行
3. inline方式显示的标签，不支持所有css样式(如：不支持手动设置该标签的宽高)
4. inline方式显示的标签，建议只用来嵌套所有inline显示方式的标签
-->
display:inline-block;
<div style="display: inline-block;"></div>
<span style="display: inline-block;"></span>
<i style="display: inline-block;"></i>
<!--
1. 任意标签的display样式值均可以设置为inline-block，那么该标签就会以inline-block方式来显示
2. inline-block方式显示的标签，具有inline特性，默认不换行
3. inline-block方式显示的标签，也具备block特征，支持所有css样式
4. inline-block方式显示的标签，不建议嵌套任意显示方式的标签
-->
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
四、边框
边框属性：
-
border-width
-
border-style
-
border-color
边框样式：
| 值 | 描述 |
|---|
| none |
无边框。 |
| dotted |
点状虚线边框。 |
| dashed |
矩形虚线边框。 |
| solid |
实线边框。
|
<style>
p {
background-color: red;
border-width: 5px;
border-style: solid;
border-color: green;
}
div {
# 单独为 某一边框设置样式
/*border-left- 5px;*/
/*border-left-color: red;*/
/*border-left-style: dotted;*/
/*border-right- 10px;*/
/*border-right-color: greenyellow;*/
/*border-right-style: solid;*/
/*border-top- 15px;*/
/*border-top-color: deeppink;*/
/*border-top-style: dashed;*/
/*border-bottom- 10px;*/
/*border-bottom-color: tomato;*/
/*border-bottom-style: solid;*/
border: 3px solid red; /*简写形式，三者位置可以随意写*/
}
#d1 {
background-color: greenyellow;
height: 400px;
width: 400px;
border-radius: 50%; /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
}
</style>
参考阅读：
https://www.cnblogs.com/Dominic-Ji/p/10474769.html