📘博客主页：程序员葵安
🫶感谢大家点赞👍🏻收藏⭐评论✍🏻
文章目录
一、CSS基础
1.1 CSS定义
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。
1.2 CSS引入方式
-
内部样式表：学习使用
-
CSS 代码写在 style 标签里面
-
-
外部样式表：开发使用
-
CSS 代码写在单独的 CSS 文件中（.css）
-
在 HTML 使用 link 标签引入
-
<link rel="stylesheet" href="./my.css">-
行内样式：配合 JavaScript 使用
-
CSS 写在标签的 style 属性值里
-
<div style="color: red; font-size:20px;">这是 div 标签</div>1.3 选择器
作用：查找标签，设置样式。
标签选择器
标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。
例如：p, h1, div, a, img......
<style>
p {
color: red;
}
</style>类选择器
作用：查找标签，差异化设置标签的显示效果。
步骤：
-
定义类选择器 → .类名
-
使用类选择器 → 标签添加 class="类名"
<style>
/* 定义 类 选择器 */
.red {
color: red;
}
</style>
<!-- 使用 类 选择器 -->
<div class="red">这是 div 标签</div>id选择器
作用：查找标签，差异化设置标签的显示效果。
场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式
步骤：
-
定义 id 选择器 → #id名
-
使用 id 选择器 → 标签添加 id= "id名"
<style>
/* 定义 id 选择器 */
#red {
color: red;
}
</style>
<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>通配符选择器
作用：查找页面所有标签，设置相同样式。
通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
* {
margin: 0;
padding: 0;
}1.4 盒子尺寸和背景色
1.5 文字控制属性
字体大小
-
属性名：font-size
-
属性值：文字尺寸，PC 端网页最常用的单位 px
p {
font-size: 16px;
}字体样式（是否倾斜）
作用：清除文字默认的倾斜效果
属性名：font-style
属性值
-
正常（不倾斜）：normal
-
倾斜：italic
字体粗细
作用：设置字体粗细
属性名：font-weight
属性值
正常：normal
更细：lighter
粗：bold
更粗：bolder
自定义数字（400 = normal， 700 = bold）：1~1000
行高
作用：设置多行文本的间距
属性名：line-height
属性值
-
数字 + px
-
数字（当前标签font-size属性值的倍数）
line-height: 30px;
/* 当前标签字体大小为16px */
line-height: 2;注意：行高=上间距+文本高度+下间距
单行文字垂直居中
垂直居中技巧：行高属性值等于盒子高度属性值
div {
height: 100px;
background-color: skyblue;
/* 注意：只能是单行文字垂直居中 */
line-height: 100px;
}字体族
属性名：font-family
属性值：字体名
font-family: 楷体;文本缩进
属性名：text-indent
属性值：
-
数字 + px
-
数字 + em（推荐：1em = 当前标签的字号大小）
p {
text-indent: 2em;
}文本对齐方式
作用：控制内容水平对齐方式
属性名：text-align
<style>
div {
text-align: center;
}
</style>
<div>
<img src="./images/1.jpg" alt="">
</div>文本修饰线
属性名： text-decoration
color 文字颜色
二、CSS进阶
2.1 复合选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确、更高效的选择目标元素（标签）
后代选择器
后代选择器：选中某元素的后代元素。
选择器写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。
<style>
div span {
color: red;
}
</style>
<span> span 标签</span>
<div>
<span>这是 div 的儿子 span</span >
</div>交集选择器
交集选择器：选中同时满足多个条件的元素。
选择器写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。
<style>
p.box {
color: red;
}
</style>
<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>并集选择器
并集选择器：选中多组标签设置相同的样式。
选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。
<style>
div,
p,
span {
color: red;
}
</style>
<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>伪类选择器
伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。
鼠标悬停状态：选择器:hover { CSS 属性 }
<style>
a:hover {
color: red;
}
.box:hover {
color: green;
}
</style>
<a href="#">a 标签</a>
<div class="box">div 标签</div>超链接伪类
a {
color: red;
}
a:hover {
color: green;
}2.2 CSS特性
CSS特性：化简代码 / 定位问题，并解决问题
-
继承性
-
层叠性
-
优先级
继承性
继承性：子级默认继承父级的文字控制属性。
层叠性
特点：
-
相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
-
不同的属性会叠加：不同的 CSS 属性都生效
优先级
优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
（选中标签的范围越大，优先级越低）
2.3 背景属性
背景图
网页中，使用背景图实现装饰性的图片效果。
-
属性名：background-image（bgi）
-
属性值：url(背景图 URL)
div {
width: 400px;
height: 400px;
background-image: url(./images/1.png);
}平铺方式
属性名：background-repeat（bgr）
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
}背景图位置
属性名：background-position（bgp）
属性值：水平方向位置 垂直方向位置
-
关键字
-
坐标
-
水平：正数向右；负数向左
-
垂直：正数向下；负数向上
-
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-position: center bottom;
background-position: 50px -100px;
background-position: 50px center;
}背景图缩放
作用：设置背景图大小
属性名：background-size（bgz）
常用属性值：
-
关键字
-
cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
-
contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
-
-
百分比：根据盒子尺寸计算图片大小
-
数字 + 单位（例如：px）
div {
width: 500px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-size: cover;
background-size: contain;
}背景图固定
作用：背景不会随着元素的内容滚动。
属性名：background-attachment（bga）
属性值：fixed
body {
background-image: url(./images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}2.4 显示模式
显示模式：标签（元素）的显示方式。
作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。
块级元素
特点：
-
独占一行
-
宽度默认是父级的100%
-
添加宽高属性生效
行内元素
特点：
-
一行可以显示多个
-
设置宽高属性不生效
-
宽高尺寸由内容撑开
行内块元素
特点：
-
一行可以显示多个
-
设置宽高属性生效
-
宽高尺寸也可以由内容撑开
转换显示模式
属性：display
三、CSS高级
3.1 定位
作用：灵活的改变盒子在网页中的位置
实现：
1.定位模式：position
2.边偏移：设置盒子的位置
-
left
-
right
-
top
-
bottom
相对定位
position: relative
特点：
-
不脱标，占用自己原来位置
-
显示模式特点保持不变
-
设置边偏移则相对自己原来位置移动
div {
position: relative;
top: 100px;
left: 200px;
}绝对定位
position: absolute
使用场景：子级绝对定位，父级相对定位（子绝父相）
特点：
-
脱标，不占位
-
显示模式具备行内块特点
-
设置边偏移则相对最近的已经定位的祖先元素改变位置
-
如果祖先元素都未定位，则相对浏览器可视区改变位置
.father {
position: relative;
}
.father span {
position: absolute;
top: 0;
right: 0;
}固定定位
position: fixed
场景：元素的位置在网页滚动时不会改变
特点：
-
脱标，不占位
-
显示模式具备行内块特点
-
设置边偏移相对浏览器窗口改变位置
div {
position: fixed;
top: 0;
right: 0;
width: 500px;
}堆叠层级z-index
默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
属性名：z-index
属性值：整数数字（默认值为0，取值越大，层级越高）
.box1 {
background-color: pink;
/* 取值是整数，默认是0，取值越大显示顺序越靠上 */
z-index: 1;
}
.box2 {
background-color: skyblue;
left: 100px;
top: 100px;
z-index: 2;
}3.2 CSS修饰属性
垂直对齐方式
属性名：vertical-align
过渡
作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition（复合属性）
属性值：过渡的属性 花费时间 (s)
提示：
-
过渡的属性可以是具体的 CSS 属性
-
也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
-
transition 设置给元素本身
img {
width: 200px;
height: 200px;
transition: all 1s;
}
img:hover {
width: 500px;
height: 500px;
}透明度opacity
作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：0 – 1
-
0：完全透明（元素不可见）
-
1：不透明
-
0-1之间小数：半透明
光标类型cursor
作用：鼠标悬停在元素上时指针显示样式
属性名：cursor
扫一扫
560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
