复合选择器,CSS特性,背景属性,显示模式(HTML)
目录
复合选择器,CSS特性,背景属性,显示模式知识点:
练习一:
练习二:
复合选择器,CSS特性,背景属性,显示模式知识点:
复合选择器:后代选择器 :父选择器 子选择器(中间用空格隔开) eg:对div中的span进行设置,会对后代中的所有span都进行设置 选中所有后代(后代选择器.html)
子代选择器: 父选择器>子选择器 只有儿子的同类选择器会产生变化(子代选择器.html)
并集选择器: (相同的样式) 用逗号,隔开 最后一个没有(并集选择器.html)
交集选择器:标签选择器写在前面 中间没有空格(交集选择器.html)
伪类选择器:选中某个状态
鼠标悬停状态:选择器:hover(鼠标悬停状态.html),任何标签都可以设置鼠标悬停
访问前: :link
访问后 :visited
点击时 :active
CSS属性:子级可以继承父级的文字控制属性 如果标签有自己的样式,不继承父级的样式
层叠性: 相同的选择器:相同的属性会覆盖:后者覆盖前者,不同的属性会叠加
优先级: 选中标签的范围越大,优先级越低 通配符<标签<类选择器<id选择器<<行内样式<!important(提高优先权)
(行内样式<div style="color:purple"></div>) *{color:red !important}
优先级叠加计算原则:(行内样式,id选择器个数,类选择器个数,标签选择器个数)从左向右依次比较个数,同一级个数多的优先级高,如果相同,则向后比较
继承权重最低
Emmet写法:
/*w500+h200+bgc*/
<!--类选择器: p.box .box(div)-->
<!--id选择器: p#box-->
<!--同级别用+ div+p-->>
<!--父子级 div>p -->
<!--多个相同的标签- span*3-->
<!--有内容的标签 div{11}-->
背景属性: 背景色:background-color
背景图:background-image
背景平铺方式:background-repeat
背景图位置:background-position
背景图缩放:background-size
背景图固定:background-attachment
背景图复合属性:background
显示模式: 块级元素 div独占一行,宽度默认父级的100%,可以添加宽高
行内元素:span 一行可以共存多个,尺寸由内容撑开,添加宽高不生效
行内块元素:image:一行可以共存多个,尺寸由内容撑开,宽高生效
转换模式: display 块级:block 行内块:inline-block 行内:inline
练习一:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>热词</title><style>a{width: 200px;height: 80px; background-color: #3064bb;display: block; color: #fff;text-decoration: none;text-align: center;line-height: 80px;font-size: 18px;}a:hover{background-color: #608dd9;}</style>
</head>
<body><a href="#">HTML</a><a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Vue</a><a href="#">React</a></body>
</html>练习二:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>banner效果</title><style>.banner{height: 500px;background-image: url(./bk.png);background-repeat: no-repeat;background-color: #f3f3f4;/* background-size: contain; */background-position: lef bottom;/*文字控制属性*/text-align: right;color: #333;}.banner .ht{height: 100px;font-size: 36px;line-height: 100px;}.banner .txt{font-size: 20px;}.banner a{width: 125px;height: 40px;background-color: #f06b1f;display: inline-block;/*转块无法右对齐*/text-decoration: none;font-size: 20px;color: #fff;text-align: center;line-height: 40px;}</style>
</head>
<body><div class="banner"><p class="ht">让创造产生价值</p><p class="txt">我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p><a href="#">我要报名</a><!--行内标签--></div></body>
</html>