目录
一.CSS(Cascading Style Sheets) 层叠样式表
一.CSS(Cascading Style Sheets) 层叠样式表
CSS (层叠样式表)是一种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
二.标签
1.注释
/* 注释内容 */
2.三种书写样式
（1）内部样式
使用sytle标签，直接把CSS写到html文件中的
此时的style标签可以放到任何位置，常放到head标签里。需要放在style里
<style>
/*write your code*/
</style>例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内联样式 两种都行 通常用这种 -->
<style>
p{
color:red;
}
</style>
</head>
<body>
<!-- 内部样式 -->
<style>
p{
color:red;
}
</style>
</body>
</html>（2）内联样式
使用sytle属性，针对指定的元素设置样式。(此时不需要写选择器，直接写属性键值对)，这个样式只针对当前元素生效，通常放到body标签里。
<body>
<p style="color: red; font-size: 40px">
这是针对当前p标签里的内容的修饰
</p>
</body>
（3）外部样式
把CSS代码单独作为一个 .css 文件，再通过 link 标签，让 html 引入该 css 文件。实际开发过程中，以这种为主。
<link herf="xxx.css">
3.CSS选择器
（1）标签选择器
样式:
<p>我是p标签里的内容</p>
<div>我是div标签里的内容</div>
<style>
p { /* 表示对于所有p标签里的内容生效 也可以是div h1 h2.... */
color:red;
font-size: 40px;
}
</style>
<style>
div {
color:blue;
font-size: 40px;
}
</style>
（2）类选择器
定义类，需要使用.开头
引用这个类的时候，通过 class 属性 = "类名" 即可，不需要带点。
一个类，可以被一个元素引用，也可以被多个元素引用
一个元素可以引用一个类，也可以引用多个类
样式：
<style>
.one { /* 此处定义了一个CSS类,名字叫做one */
color: red;
font-size: 40px;
}
.two {
color: aqua;
font-size: 40px;
}
.three {
color: blue;
font-size: 40px;
}
</style>
<div class="one">
这是one类的div
</div>
<div class="two">
这是two类的div
</div>
<div class="three">
这是three类的div
</div>
（3）ID选择器
html页面中的每个元素，都是可以设置成一个唯一的ID的，作为元素的身份标识。
当元素有了ID之后，就可以通过ID来选中对应的元素了。
类选择器是可以让多个元素应用到同一个类的。
而ID选择器，则只能针对唯一的元素生效，且一个页面里的，只能有唯一的ID。
定义ID，需要使用#开头
引用这个id的时候，通过 id = "id名" 即可，不需要带#。
<body>
<style>
/* ID 选择器*/
#one {
color: chartreuse;
font-size: 40px;
}
#two {
color: blueviolet;
font-size: 40px;
}
#three {
color: darkorange;
font-size: 40px;
}
</style>
<div id="one">
这是id="one"的div标签
</div>
<div id="two">
这是id="two"的div标签
</div>
<div id="three">
这是id="three"的div标签
</div>
</body>
复合选择器
（5）后代选择器
就是把多个简单的基础选择器组合一下（可以是标签，类，id，选择器的任意组合）
例如，li只要是ul的后代即可，包含后代的后代。
（6）子选择器
也是把多个简单的基础选择器组合一下（可以是标签，类，id，选择器的任意组合）
与后代选择器不同的是，子选择器只是匹配子元素，而不匹配子元素的子元素。
选择器1>选择器2 { 注意大于号
属性...
}
（7）并集选择器
即针对多组选择器使用同样的样式
选择器1，选择器2 {
属性....
}
（8）伪类选择器 (复合选择器的特殊用法)
前面的选择器是选中某个元素。
伪类选择器是选中某个元素的某个特定状态。
如： hover 鼠标悬停时的状态
active 鼠标按下时的状态
录制_2023_09_23_17_39_04_643
4.CSS常用属性
包括大小，位置，颜色，形状，边距，边框，特殊滤镜，过渡效果，动画等等。
1.字体属性
（1） 设置字体家族 font-family："微软雅黑"; 当前使用哪种字体来显示如（微软雅黑，宋体，黑体，华文行楷...)
<body>
<style>
.one {
font-size: 40px;
font-family: "微软雅黑";
}
.two {
font-size: 40px;
font-family: "宋体";
}
.three {
font-size: 40px;
font-family: "黑体";
}
.four {
font-size: 40px;
font-family: "华文行楷";
}
</style>
<div class="one">这是一个div标签</div>
<div class="two">这是一个div标签</div>
<div class="three">这是一个div标签</div>
<div class="four">这是一个div标签</div>
</body>
（2） 设置字体大小 font-size: 40px; 40px即40像素。
（3）设置字体粗细 font-weight: bolder; 使用单词和数字都可以设置。
（4）设置文字倾斜 font-sytle: italic; 取消文字倾斜 font-style: normal;
2.文本属性
2.1 颜色
RGB
color: rgb(0,0,0); 0-255
或者用十六进制表示
color: #ff0000； ff对应一个十六进制数字 00对应一个 00对应一个。
2.2文本对齐
text-align: center; /* 居中 */
text-align: left; /* 居左 */
text-align: right; /* 居右 */
2.3文本装饰
text-decoration: overline; /* 上划线 */
text-decoration: underline; /* 下划线 */
text-decoration: line-through; /* 删除线 */
特别的：text-decoration: none; /*无任何线*/
这个对于a标签有一个作用：可以删除a标签自带的下划线
2.4文本缩进
text-indent: 2em;
2表示倍数关系 向右缩进两个字体位置 。 也可以为负数，-2则表示向左缩进两个字体位置
2.5行高
line-height: 60px;
行高 = 文字高度 + 行间距
2.6背景颜色
background-color: blue:
2.7背景图片
background-image: url(xxxx.png); //默认平铺
若不想平铺的话再添加 background-repeat: no-repeat;
还有 background-position: center / bottom / left / right; /* 背景图的位置 特可以使用坐标位置 即像素*/
背景图片居中 background-position: center center;
2.8背景尺寸
background-size: contain; /* 让图片再规定的范围区域内都展示出来 */
background-size: cover; /* 铺满区域 不同于上述所说的铺满*/
3.圆角矩阵
border-radius: 20px; /*甚至可以展示成圆形*/
4. 元素的显示模式
display
display: block; 块级元素
display: inline; 行内元素
块级元素和和行内元素的区别
1. 快居元素会独占一行，行内元素不会独占一行。
2. 块级元素高度，宽度，内外边距都可以设置的，行内元素高度，宽度，行高无效，外边距有效，内边距有时候有效，有时候无效。
3.块级元素默认是和父元素一样宽，行内元素默认宽度是和里面的内容一样宽。
一般如果需要的话，都是把行内元素转成块级元素。
5. CSS盒子模型
5.1 边框
border属性，直接设置了四个方向 还可以：
border-left
border-right
border-top
border-bottom
设置边框要设置三个方面
1.边框的粗细 10px
2.边框的颜色 英文单词或者rgb(0,0,0)
3.边框的风格(实线solid，虚线dashed....) 更多可以去看 mdn文档
例如:
border: 5px black solid; /* 设置边框的粗细，颜色及风格*/
box-sizing: border-box; /* 边框向内伸展 */
5.2内边距
padding 是设置内容和边框之间的距离
padding: 10px; 表示四个方向都是 10px 边距
padding: 10px 20px; 上下边距是 10px ， 左右边距是 20px 。
padding: 10px 20px 30px 40px; 上右下左顺序的边距
5.3外边距
margin 设置的是元素和元素之间的距离
margin: 10px; 表示四个方向都是 10px 边距
margin: 10px 20px; 上下边距是 10px ， 左右边距是 20px 。
margin: 10px 20px 30px 40px; 上右下左顺序的边距
margin 特殊用法： 把 margin-left 和 margin-right 置成 auto (让浏览器自动进行调节) 这样该元素就可以在父元素内部居中放置 。
即边框相当于一个房子的墙的厚度， 内边距相当于房子内的某一个物体如床与墙的距离， 外边距相当于房子与房子之间的距离。
6.弹性布局
用来实现页面布局的，控制某个指定元素放到某个指定位置上。
目的是了解决 “水平方向排列问题” 。
第一步 开启弹性布局 display: flex; 父类标签中设置 给药水平排列的元素的父元素，设置flex。
第二步 设置这些元素的水平排列方式
即再在父类标签中添加一行
justfiy-content: flex-start; 位置居左
justfiy-content: flex-end; 位置居右
justfiy-content: center; 位置居中
justfiy-content: space-around; 被空格环绕,两边有空格
justfiy-content: space-between; 被空格环绕,两边无空格
第三步 设置元素垂直方向排列方式
也是在父类标签中添加一行
align-items: flex-end; 子元素紧贴下方
align-items: center; 垂直方向居中
4357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
