css基础
一、网页的几种表现形式
l 视图层（html层）
l 表现层（css层）
l 行为层（js）
二、表现层（css ：层叠样式表）
1. css作用：
l 对html元素的位置和精确计算像素，外观，字体等等，
2.css特点：
丰富的样式定义
易于使用和修改
多页面使用
可层叠（一个元素可具有多个css样式）
页面压缩（尽量多次复用同样的css，减小css文件体积，提高网页性能）
3. css样式属性写法**：
属性：值；
三、css几种使用方式：
元素设置宽高的时候 块级元素可设，行级元素设置宽高属性是无效的。
1.行内样式
2.内嵌样式
3.外部样式表
四、内嵌样式里面的css选择器
head和body里面都可以进行内嵌
先定位到当前元素，再写css
css 注释 ctrl+shift+/
五、css选择器
1. *匹配器：匹配当前网页里面的所有元素
2. 元素匹配器**：根据当前元素的名称来匹配
3. class类名称匹配器**：根据元素的class属性名称来匹配，用点来匹配 元素种的一部分 （一个元素可能同时具有多个类）
4. id名称匹配器**: 根据当前元素的id属性来匹配（一个元素一个，不重名） 使用#来选择
以上内容先说这些，我们现在做一个文字中嵌入视频的效果
先给大家看一下效果
这只是截取的一个静态效果图
以下部分是html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/set.css">
</head>
<body>
<div class="banner">
<video autoplay muted loop>
<source src="video/潮点网_225531_1080p.mp4">
</video>
<h2>VIDEO</h2>
</div>
</body>
</html>
以下是css原代码
body{
margin: 0;
padding: 0;
}
.banner{
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.banner>video{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.banner>h2{
position: absolute;
width: 100%;
height: 100%;
background: #fff;
text-align: center;
line-height: 100vh;
font-size: 450px;
mix-blend-mode: screen;
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理