CSS-2
2022-08-09 本文已影响0人
aofeilin
Xnip2022-08-09_14-28-25.jpg
1.复合选择器
1.后代选择器，儿子，孙子，重孙子。选择器空格隔开就可以
div p {
2.> 只选儿子，子代选择器。
.div2>a
3.并集选择器 ,逗号隔开。
4.交集选择器 直接挨着就可以。p.a p#a
5.hover 伪类选择器 任何元素都可以添加hover 伪类。
鼠标停在上面，hover伪类选择器。
a:hover
div:hover
2.emmet语法
VSCode有一个emmet语法。
<!-- css也是有提示语句的，就是首字母 -->
<!-- div 标签名 -->
<!-- .red 类选择器-->
<!-- #one id选择器-->
<!-- p.red#one 交集选择器 -->
<!-- 子代选择器 p>a ul>li ul>li*3 -->
<!-- 内部内容 ul>li{我是内容}-->
<!-- ul>li{$}*3 $数字 提速的-->
3.背景色 背景图片 背景平铺 背景位置 背景相关属性连写
背景颜色 :background-color:gray;
background-color: rgba(255, 0, 0, 0.3);
背景图片:background-image
如果是小图，默认会平铺
背景图的平铺 ：background-repeat 沿着x轴或者y轴来平铺。
背景位置：
background-position 50px 100px;
center center, left top bottom.
连写：复合属性。
/* background: color image repeat position复合使用 */
background: red url(./img.png) no-repeat right bottom;
img和背景图的区别：
背景图：依赖一个标签来展示的，必须要有宽高。
Img插入图，比较重要的图片，
装饰的用background-image,
4.元素显示模式
标签/元素/标记
块 div p
<!-- 默认是独占一行的 宽度默认是父级的 添加宽高都生效 div p h ul li dl dt dd form header-->
<div>我是块</div>
行内：
<!-- 行显示，行内元素 不换行的都是行内元素，不可以设置宽高，设置了宽高没有生效 尺寸跟内容的大小是一样大的 a span b u i s /strong ins em del-->
行内块
<!-- 行内块 一行可以显示多个，还可以设置宽高且生效 img input textarea button select-->
5.元素显示模式
标签的转换：
display:block 转换为块级元素。使用频率较多。
display:inline-block 转换为行内块元素，使用频率较多
display：转换为行内元素。 使用频率较少
6.标签嵌套
<!-- 标签嵌套 -->
<!-- 父子关系/兄弟关系 尽量避免小的嵌套大的，div嵌套a -->
<!-- p里面也不让包含div或者嵌套h h不能既能段落又是标题 -->
1. p标签不能嵌套p div h标签 2.a标签可以嵌套任何标签，但是a标签不能嵌套a标签。
7.继承性
给父亲加标签，他的所有子标签都会有这个属性。节省代码。
文字的控制属性都可以继承：color font-style font-weight font-size font-family
text-indent
text-align
line-height
<!-- 继承 -->
<!-- 继承出意外的情况
1.继承时候，子类自己有颜色就显示自己的颜色 a标签父类设置了颜色但是a还是显示默认的。
2.子类 h有字号所以不会继承父类的字号。
-->
8.层叠性，
后面的会覆盖前面的。
<!-- 层叠了两个标签的样式
1.给同一个标签设置不同的样式，会共同作用在标签上。
2.给同一个标签设置相同的样式，此时会层叠覆盖，最终会写在最后的样式会生效。
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。谁的优先级高就会生效谁的。
-->
9.demo
截屏2022-08-09 14.50.12.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
display: inline-block;
width: 120px;
height: 58px;
text-decoration: none;
line-height: 50px;
color: black;
}
.textCenter {
text-align: center;
}
.title1 {
background-image: url('./bg1.png');
}
.title1:hover {
background-image: url('./bg5.png');
color: wheat;
}
.title2 {
background-image: url('./bg2.png');
}
.title2:hover {
background-image: url('./bg6.png');
color: wheat;
}
.title3 {
background-image: url('./bg3.png');
}
.title3:hover {
background-image: url('./bg7.png');
color: wheat;
}
.title4 {
background-image: url('./bg4.png');
}
.title4:hover {
background-image: url('./bg8.png');
color: wheat;
}
</style>
</head>
<body>
<div>
<a href="#" class="title1 textCenter">首页</a>
<a href="#" class="title2 textCenter">首页</a>
<a href="#" class="title3 textCenter">首页</a>
<a href="#" class="title4 textCenter">首页</a>
</div>
</body>
</html>
