下面是小凰凰的简介，看下吧！
💗人生态度：珍惜时间，渴望学习，热爱音乐，把握命运，享受生活
💗学习技能：网络 -> 云计算运维 -> python全栈( 当前正在学习中)
💗您的点赞、收藏、关注是对博主创作的最大鼓励，在此谢过！
有相关技能问题可以写在下方评论区，我们一起学习，一起进步。
后期会不断更新python全栈学习笔记，秉着质量博文为原则，写好每一篇博文。
文章目录
一、块级标签样式
设置块级标签的长宽属性：
<head>
<style>
#d1 {
background-color: red; # 背景样式会学
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="d1">
hello world!
</div>
</body>
常用行内、块级标签请见：https://blog.csdn.net/weixin_44571270/article/details/106857012
二、文字样式
1、用于控制字体、文本显示的方式
（1）字体属性
/*字族：STSong作为首选字体, 微软雅黑作为备用字体*/
font-family: "STSong", "微软雅黑";
/*字体大小 通常14-16比较好*/
font-size: 40px;
/*也可以加数字：字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/
font-weight: bolder; /* 详细用法见下图 bolder要求掌握！*/
/*字体颜色 (还有多种颜色设置的方法，需要掌握，详见实战演练)*/
color: red;
font-weight用来设置字体的字重（粗细）：
（2）文本格式控制
/*行高: 其实也就是指定行的高度，
比如下面这个是一行的大小
--------
--------
指定更大的高度：
--------
--------
*/
line-height: 200px;
/* 文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右) | justify (两端对齐) */
text-align: center;
/*字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消a标签的自带的下划线) |
inherit 继承父元素的text-decoration属性的值 */
text-decoration: none; /* none使用较多*/
/*字间距*/
letter-spacing: 2px; /* 指定字的间隔，英文中单词的字母的间隔*/
/*词间距*/
word-spacing: 5px; /* 对中文无用，指定单词间隔大小*/
/*首行缩进：1em相当于一个字的宽度*/
text-indent: 2em;
2、实战演练
<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轴背景图片位置偏移：正值往x轴正半轴偏移，负值往x轴负半轴偏移 */
background-position-x: 10px;
/* y轴背景图片位置偏移：正值往y轴正半轴偏移，负值往y轴负半轴偏移 */
background-position-y: 10px;
/* 第一个参数为x轴坐标位置 第二个参数为y轴坐标位置 */
background-position:center center; /* 块级标签区域的x轴方向上居中，块级标签区域的y轴方向上居中 */
/* 由于这么多重复的前缀background，因此我们可以进行简写*/
background: url("123.png") blue no-repeat center center
/* 注意：
1. 每个属性的位置可以不一样，但一个属性里的多个需要连在一起写（例如：center center）
2. 参数个数不做限制，不加就采用默认配置
*/
下面这个参数我需要单独拿出来说明，因为它不容易理解！
/* 锁定图片为背景地图，不可滑动 */
background-attachment: fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
background-color: red;
height: 500px;
}
#d2 {
background-color: green;
height: 500px;
}
#d3 {
background: url("123.jpg") fixed; /* 这里我采用简写 */
height: 500px;
}
#d4 {
background-color: pink;
height: 500px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
效果展示：
四、显示样式
display属性其实就是实现行内标签和块级标签的特点互换！
1、display:none
<!-- 隐藏标签不展示到前端页面并且原来的位置也不再占有，但是还存在于文档上。一般用于配合JavaScript代码使用。 -->
2、display:block
<span style="display: block;"></span>
<i style="display: block;"></i>
<!--
1. 将标签设置为块级标签的特点
2. block方式显示的标签，默认会换行
3. block方式显示的标签，支持所有的css样式
4. block方式显示的标签，可以嵌套所有显示方式的标签
注：标题标签和段落标签虽然也是block显示类标签，但不建议嵌套block显示类标签
-->
3、display:inline
<div style="display: inline;"></div>
<p style="display: inline;"></p>
<!--
1. 将标签设置为行内标签的特点
2. inline方式显示的标签，默认不会换行
3. inline方式显示的标签，不支持所有css样式(如：不支持手动设置该标签的宽高)
4. inline方式显示的标签，建议只用来嵌套所有inline显示方式的标签
-->
4、display:inline-block
<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方式显示的标签，不建议嵌套任意显示方式的标签
-->
5、display:none与visibility:hidden的区别
# 不论是行内标签还是块级标签下都有一个visibility属性，也可以实现隐藏！
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
五、边框
边框属性：
- border-width 边框的粗细
- border-style 边框的风格
- border-color 边框的颜色
border-style的属性值有：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: red;
height: 200px;
width: 200px;
/*border-width: 5px;*/
/*border-style: solid;*/
/*border-color: green;*/
border: 2px solid green;
/* 和background一样，具有简写形式，三者位置可以随意写 */
}
div {
border-left-width: 5px;
border-left-color: red;
border-left-style: dotted;
border-right-width: 10px;
border-right-color: black;
border-right-style: solid;
border-top-width: 15px;
border-top-color: deeppink;
border-top-style: dashed;
border-bottom-width: 20px;
border-bottom-color: tomato;
border-bottom-style: solid;
}
#d1 {
background-color: greenyellow;
height: 400px;
width: 400px;
border-radius: 50%; /* 直接写50%即可 长宽一样就是圆 不一样就是椭圆 */
}
</style>
</head>
<body>
<div id="d1"></div>
<p></p>
</body>
效果展示：
2858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
