29-CSS
30-CSS引入方式
-
内部样式
CSS 代码写在style标签里面
-
外部样式
<link rel="stylesheet" href="./my.css">
-
行内样式
<div style="color:green; font-size:30px;">这是div 标签 </div>
31-选择器-标签和类
-
标签选择器
标签选择器都是以标签名作为选择器，选中同名标签设置相同的格式
<style>p{color:red;} </style> <body><p>这是叔叔叔叔</p><p>hhhhhhha哈哈哈哈</p> </body> -
类选择器
定义类选择器- > .类名
使用类选择器 -> 标签添加 class="类名"
<style>.red{color:red;} </style> <body><p class="red">111111</p><p>222222</p><div class="red">div标签</div> </body>
一个类选择器可以给多个标签使用
32-ID 和通配符
id 选择器：
-
定义id 选择器 ： #id名
-
定义 id 选择器 ： 标签添加 id="id名"
<style>#red{color:red;} </style> <body><div id="red">div标签</div> </body>
通配符选择器
作用：查找页面所有标签，设置相同的格式
通配符选择器：* 不需要调用，浏览器自动查找页面所有的标签，设置相同的格式
*{
color:red;
}
33-画盒子
<style>.red{width:100px;height:100px;background-color:brown;}
</style>
<body><div class="red">div1</div>
</body>
34-文字控制属性
写一个字体倾斜的代码
<style>em{font-style:normal;}div{font-style:italic;}
</style>
<body><em>em标签</em><div>div 标签</div>
</body>
行高
<style>p{font-size: 20px;line-height: 2;//如果行高为数字，那么表示的是倍数}
</style>
只能是当行文字才能实现
36-字体族
font-family :楷体
37-font属性
38-文本缩进
<style>p{text-indent : 2em;font-size: 30px;}
</style>
文本对齐
<style>h1{text-align :center;}
</style>
居中的是文字内容，不是标签
水平对齐方式-图片
<style>div{text-align-center;}
</style>
<body><div><img src="" slt=""></div>
</body>
修饰线
44-复合选择器
由两个或者多个基础选择器组成，通过不同的方式组合而成。
后代选择器：选中某元素的后代元素
选择器写法：父选择器，子选择器，赋值选择器之间用空格隔开
<style>div span{color:red;}
</style>
<body><span>span标签</span><div><span>这是div 的儿子</span><p><span>这是div的孙子</span></p></div>
</body>
<style>div > span{color:red;}
</style>
<body><span>span标签</span><div><span>这是div 的儿子</span><p><span>这是div的孙子</span></p></div>
</body>
这样就只会输出儿子的标签了。这个也就是子代选择器
并集选择器
并集选择器：选中多组标签设置相同的格式
选择器写法：选择器1，选择器2.。。
交集选择器
选中同时满足多个条件的元素
<style>div.box{color:red;}
</style>
<body><span>span标签</span><div class="box">这里这段文字输出</div>
</body>
45-伪类选择器
伪类表示元素状态，选中元素的某个状态设置样式
鼠标悬停状态：选择器 hover(css属性)
<style>a:hover{color:red;}.box:hover{color:green;}
</style>
<body><a href="#">a 标签，超链接</a><div class="box">div 标签</div>
</body>
选中范围越大，优先级越低
通配符选择器 《 标签选择器 〈 类选择器 《 id选择器 < 行内样式
! important 权重最高
从左向右一次比较选的个数，同一级个数多的优先级高，如果个数相同，则向后比较
！important 权重 最高
47-emment 写法
48-背景
默认是平铺的，会显示多张照片
不平铺，只会显示一张且原像素大小
背景图缩放
-
cover 等比例缩放背景图片以完全覆盖背景区
div{
background-repeat : no-repeat;
background-image:url(./images/1.png);
background-size:contain;
如果宽高根盒子尺寸相等停止播放，可能导致盒子有空白
background-size:cover;
background-size:100%;
}
背景图固定
background-attachment: fixed;
50-显示模式
-
独占一行，宽高属性生效，默认宽度是父级的100%，是块级的显示特点 一般是用div
-
一行共存多个，宽高属性不生效，宽高由内容撑开，是行内模式的特点. 一般是用span
-
一行共存多个，宽高属性生效，宽高默认由内容撑开是行内块的显示模式特点 一般是用img
转换显示模式
<style>div{width:100px;height:100px;display:inline-block;display: inline;}
</style>
<body><div class="div1">div1111</div><div class="div2">div2222</div><span class="span1">span11111</span><span class="span2">span1</span><img src="./images./1.png" alt=""><img src="./images./1.png" alt="">
</body>
记住这几个特性
.banner{
• height: 500px;
• background-color: url(./images/bk.png)
• background-repeat: no-repeat;
• background-position: left bottom;
}
banner轮播图
真的很不戳
54-结构伪类选择器
伪元素选择器
快捷输出“w100 + h100 + bgc
57-盒子模型
<style>div{width: 200px;height: 200px;background-color:pink;padding:20px;border:10x solidmargin:50px;}
</style>
盒子模型-边框线
Solid : 实现
Dashed: 虚线
Dotted: 点线
padding ： 10px 20px 40px 80px
上右下左
margin: 0 auto; 也是可以的，会自动调整
盒子模型-元素溢出
div {width: 200px;height: 200px;background-color: pink;
/* 测试不同 overflow 属性 */overflow: auto; /* 当前设置 */
}
<style>
.father {width: 300px;height: 300px;background-color: pink;border-top: 1px solid #000;overflow: hidden; /* 添加 overflow 解决问题 */
}
.son {width: 100px;height: 100px;background-color: orange;margin-top: 50px;
}
</style>
<div class="father"><div class="son">son</div>
</div>
或者是这样的写法
66-圆角属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圆角矩形</title><style>div {margin: 50px auto;width: 200px;height: 200px;background-color: orange;border-radius: 20px;}</style>
</head>
<body><div></div>
</body>
</html>
左上角，右上角，右下角，左下角
border-radios:50%;
71-浮动
浮动后的盒子有什么特点：* 顶对齐 * 具备行内块功能 * 脱标
很久之前，我们做过小米官网的实现。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flex 布局</title><style>/* 父容器 */.product {display: flex; /* 使用 Flex 布局 */justify-content: space-between; /* 子元素之间均匀分布 */align-items: flex-start; /* 子元素顶部对齐 */flex-wrap: wrap; /* 自动换行 */width: 100%; /* 父容器宽度 */background-color: brown;height: auto; /* 高度根据内容自适应 */}
/* 左侧内容 */.left {width: 200px; /* 固定宽度 */height: auto; /* 高度根据内容自适应 */background-color: lightblue;}
/* 右侧内容 */.right {display: flex; /* 使用 Flex 布局 */flex-wrap: wrap; /* 自动换行 */gap: 14px; /* 子元素间距 */width: calc(100% - 220px); /* 右侧内容宽度，减去左侧宽度及间距 */}
/* 每个子元素 */.right li {list-style: none; /* 去掉列表样式 */width: calc(25% - 14px); /* 每行 4 个，减去间距 */height: 300px;background-color: orange;}
/* 右侧最后一行的边距调整 */.right li:nth-child(4n) {margin-right: 0; /* 每行最后一个子元素清除右边距 */}</style>
</head>
<body><div class="product"><div class="left">左侧内容</div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>
</body>
</html>
如果您希望为 .product 容器中的 .left 元素设置样式，应该使用 .product .left 或 .product > .left，而不是 .product.left。
清除浮动
场景：浮动元素会脱标，父级没有高度，子级无法撑开父级高度
flex
display:flex;
第一，先是要有容器，我们称之为弹性容器
第二就是要有弹性盒子，一般是沿着主轴方向排列
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flex 布局居中</title><style>.box {display: flex;flex-direction: column; /* 主轴为垂直方向 */justify-content: center; /* 垂直方向居中 */align-items: center; /* 水平方向居中 */width: 150px;height: 120px;background-color: pink;}
img {width: 32px;height: 32px;}</style>
</head>
<body><div class="box"><img src="https://via.placeholder.com/32" alt="图标"><p>文字内容</p></div>
</body>
</html>
明确每一个地方是怎么变化的，这里自己练习一下
对应79集
堆叠顺序
z-index: 1;
定位
子级绝对定位，父级相对定位
resolute absolute
transform : translate(-50%,50%);
Position :fixed; 表示固定
CSS精灵
vertical-align
过渡属性
transition: all is;
img:hover{
width:200px;
height:100px;
}
透明度
Opacity:0.5;
CSS大体上就是这样。
