前端笔记-day04
文章目录
- 01-后代选择器
- 02-子代选择器
- 03-并集选择器
- 04-交集选择器
- 05-伪类选择器
- 06-拓展-超链接伪类
- 07-CSS特性-继承性
- 08-CSS特性-层叠性
- 09-CSS特性-优先级
- 11-Emmet写法
- 12-背景图
- 13-背景图平铺方式
- 14-背景图位置
- 15-背景图缩放
- 16-背景图固定
- 17-background属性
- 18-显示模式
- 19-显示模式转换
- 20-综合案例-热词
- 21-综合案例-banner效果
01-后代选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 设置div里面的span标签包含的文字颜色 *//* 这叫做后代选择器 */div span{color: aqua;}</style>
</head>
<body><span>span 标签</span><div><span>这是div的儿子 span</span><p><span>这是孙子span</span></p></div>
</body>
</html>
02-子代选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 子代选择器 */div > span{color: aquamarine;}</style>
</head>
<body><div><span>erzi</span><p><span>sunzi</span></p></div>
</body>
</html>
03-并集选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 并集选择器 --><style>div,p,span{color: aqua;}</style>
</head>
<body><div>div</div><p>p</p><span>span</span>
</body>
</html>
04-交集选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 第一个p标签文字颜色是红色 *//* 选择器之前没有任何的符号 */p.box{color: red;}</style>
</head>
<body><p class="box">p标签，使用了类选择器</p><p>p标签</p><div class="box">div标签，使用了类选择器</div></body>
</html>
05-伪类选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 设置鼠标悬停样式 */a:hover{color: aqua;}.box:hover{color: blue;}</style>
</head>
<body><a href="#">a标签，超链接</a><div class="box">div标签</div>
</body>
</html>
06-拓展-超链接伪类
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* a:link{color: red;}a:visited{color: aqua;}a:hover{color: black;}a:active{color: blue;} */a{color: red;}a:hover{color: antiquewhite;}</style>
</head>
<body><a href="#">a标签测试伪类</a>
</body>
</html>
07-CSS特性-继承性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 继承性 --><style>body{font-size: 30px;color: red;font-weight: 700;}</style>
</head>
<body><div>div</div><p>p</p><span>span</span><a href="#">a</a><h1>h1标签</h1>
</body>
</html>
08-CSS特性-层叠性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 相同属性回覆盖，不同属性会叠加 */div{color: green;font-size: 30px;}div{color: red;font-size: 700;}</style>
</head><body><div>div标签</div>
</body>
</html>
09-CSS特性-优先级
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 通配符选择器 */*{color: red;}/* 标签选择器 */div{color: green;}/* 类选择器 */.box{color: blue;}/* id选择器 */#text{color: orange;}/* 行内样式 *//* ！important*/*{color: red!important}</style>
</head>
<body><!-- --><div class="box" id="text" style="color: purple;">div标签</div>
</body>
</html>
11-Emmet写法
Emmet 是一种简化 HTML 和 CSS 编写的工具，它通过简洁的语法提高了编码效率。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: ;height: ;width: ;background-color: ;width: 500px;height: 200px;background-color: #fff;}</style>
</head>
<body><div class="box"></div><p class="boxx"></p><p id="id"></p><div><p></p></div><span></span><span></span><span></span><div>111</div>
</body>
</html>
12-背景图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 400px;height: 400px;background-image: url(./images/1111.jpg);}</style>
</head>
<body><div>divbiaoqian</div>
</body>
</html>
13-背景图平铺方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 400px;height: 400px;background-color: pink;background-image: url(images/20.jpg);background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; */}</style>
</head>
<body><div>div标签</div>
</body>
</html>
14-背景图位置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 400px;height: 400px;background-color: pink;background-image: url(./images/20.jpg);background-repeat: no-repeat;/* 左上角 *//* background-position: 0 0; *//* background-position: left right; *//* background-position: right bottom; *//* 水平：正数向左负数向右 *//* background-position: 50px 0; *//* background-position: -50px 0; *//* 垂直：整数向下 负数向上 *//* background-position: 0 100px; *//* background-position: 0 -100px; *//* background-position: 50px center; *//* background-position: bottom left; *//* 关键字可以只写一个，另一个方向居中 */background-position: bottom;background-position: 50px ;} </style>
</head>
<body><div>divbiaoqian</div>
</body>
</html>
15-背景图缩放
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 400px;height: 400px;background-color: pink;background-image: url(images/20.jpg);background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; *//* background-size: contain; *//* cover完全覆盖 背景图可能显示不全 *//* background-size: cover; *//* 宽度保持一致 */background-size: 100%;}</style>
</head>
<body><div>div标签</div>
</body>
</html>
16-背景图固定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color: pink;background-image: url(images/1111.jpg);background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; */background-position: center top;background-attachment: fixed;}</style>
</head>
<body><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p>
</body>
</html>
17-background属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- background复合属性 --><style>div{width: 400px;height: 400px;/* 颜色 图片路径 平铺方式 背景图位置、背景图缩放*//* background: pink url(./images/20.jpg) no-repeat center bottom/cover; */background: pink url(./images/20.jpg) no-repeat center bottom/contain;}</style>
</head>
<body><div>div标签</div>
</body>
</html>
18-显示模式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 块级元素的特点是独占一行，宽度默认是父级的100% 加宽高生效 */div{width: 100px;height: 100px;}.div1{background-color: red;}.div2{background-color: aqua;}/* 行内元素加宽高不生效 */span{width: 100px;height: 100px;}.span1{background-color: pink;}.span2{background-color: blue;}/* 行内块：一行共存多个；默认尺寸由内容撑开 ；加宽高生效 */img{height: 100px;width: 100px;}</style>
</head>
<body><!-- 块级 --><div class="div1">div标签1</div><div class="div2">div标签2</div><!-- 行内 --><span class="span1">span1</span><span class="span2">span2</span><!-- 行内块 --><img src="./images/20.jpg" alt=""><img src="./images/20.jpg" alt="">
</body>
</html>
19-显示模式转换
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 块级元素的特点是独占一行，宽度默认是父级的100% 加宽高生效 */div{width: 100px;height: 100px;/* display: inline-block; */display: inline;}.div1{background-color: red;}.div2{background-color: aqua;}/* 行内元素加宽高不生效 */span{width: 100px;height: 100px;/* display: block; */display: inline-block;}.span1{background-color: pink;}.span2{background-color: blue;}/* 行内块：一行共存多个；默认尺寸由内容撑开 ；加宽高生效 */img{height: 100px;width: 100px;display: block;}</style>
</head>
<body><!-- 块级 --><div class="div1">div标签1</div><div class="div2">div标签2</div><!-- 行内 --><span class="span1">span1</span><span class="span2">span2</span><!-- 行内块 --><img src="./images/20.jpg" alt=""><img src="./images/20.jpg" alt="">
</body>
</html>
20-综合案例-热词
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{background-color: #3064bb;width: 200px;height: 80px;text-align: center;}div>a{line-height: 80px;font-size: 18px;text-decoration: none;color: white;}div:hover{background-color: #608dd9;}</style>
</head>
<body><!-- 也可以不用在div里面嵌套a标签 直接把a标签通过display变为块级标签 --><div><a href="#">HTML</a></div><div><a href="#">CSS</a></div><div><a href="#">JavaScript</a></div><div><a href="#">Vue</a></div><div><a href="#">React</a></div>
</body>
</html>
21-综合案例-banner效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.banner{height: 500px;background-color: #f3f3f4;background-image: url(./images/20.jpg);background-repeat: no-repeat;background-position: left bottom;/* text—align是对文字属性进行更改，文字属性具有继承性 */text-align: right;color: #333;}.p1{height: 100px;line-height: 100px;font-size: 35px;}.p2{font-size: 20px;}.banner a{background-color:#f06b1f;height: 40px;width: 125px;color: #fff;/* 转行内块无法右对齐，因为已经占了一整行了 */display: inline-block;text-align: center;line-height: 40px;font-size: 20px;}</style>
</head>
<body><div class="banner"><p class="p1">让创造产生价值</p><p class="p2">我们希望小游戏平台可以提供无线的可能，地处江南单纯的拿出你的觉得你节食减肥那段艰难决定</p><a>我要报名</a></div>
</body>
</html>
