网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
<a href="#">这是div里面的a</a>
<p>
<a href="#">这是div里面的p里面的a</a>
</p>
</div>
```
示例:
注意点:
- 子代之包含:儿子
- 子代选择器中,选择器与选择器之前通过 > 隔开
6.1.3 选择器进阶- 并集选择器
并集选择器:,
**作用:**同时选择多组标签,设置相同的样式
**选择器语法:**选择器1 , 选择器2 {css}
结果:
找到 选择器1 和 选择器2 选中的标签,设置样式
<style>
/* p div span h1 文字颜色是红色 */
/* 选择器1, 选择器2 {} */
p,
div,
span,
h1 {
color: red;
}
</style>
</head>
<body>
<p>ppp</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>
</body>
示例:
注意点:
- 并集选择器中的每组选择器之间通过,分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个,提高代码的可读性
6.1.4 选择器进阶- 交集选择器
交集选择器:紧挨着
**作用:**选中页面中同时满足多个选择器的标签
选择器语法:选择器1选择器2 {css}
结果:
(即又原则) 找到页面中 既 能被选择器1选中, 又 能被选择器2选中的标签,设置样式
<title>Document</title>
<style>
/* 必须是p标签,而且添加了box类 */
p.box {
color: red;
}
</style>
</head>
<body>
<!-- 找到第一个p, 带box类的,设置文字颜色是红色-->
<p class="box">这是p标签:box</p>
<div class="box">这是div标签:box</div>
</body>
示例:
注意点:
- 交集选择器中的选择器之间是紧挨着的,没有东西分隔
- 交集选择器中如果有标签选择器,标签选择器必须写在最前面
6.1.5 选择器进阶- 伪类选择器
伪类选择器: :hover
**作用:**选中鼠标悬停在元素上的状态, 设置样式
选择器语法:选择器:hover {css}
<style>
/* 悬停的时候文字颜色是红色*/
a:hover {
color: red;
background-color: green;
}
</style>
示例:
注意点:
- 伪类选择器选中的元素的某种状态
6.1.6 选择器进阶- Emmet语法
**作用:**通过简写语法、快速生成代码
记忆 示例 效果
标签名 div <div><div>
类选择器 .red <div class="red"></div>
id选择器 #one <div id="one"></div>
交集选择器 p.red#one <p class="red" id="one"></p>
子代选择器 ul>li <ul><li></li></ul>
内部文本 ul>li{我是li的内容} <ul><li>我是li的内容</li></ul>
创建多个 ul>li*3 <ul><li></li><li></li><li></li></ul>
div+同级 div+p <div></div><p></p>
div+父级 div>p <div><p></p></div>
<!-- ul里面有3个li,li里面有文字1,2,3
ul>li{$}*3
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
七、背景相关属性
7.1.1 背景- 背景色
属性名:background-color (bgc)
属性值:
颜色取值:关键字、rgb表示法、rgba表示法、十六进制…
<style>
div {
width: 400px;
height: 400px;
/* background-color: pink; */
background-color: #ccc;
/* 红绿蓝三颜色,a是透明度0-1 */
/* 下面两种写透明度方法都可以 */
/* background-color: rgba(0,0,0,0.5); */
background-color: rgba(0,0,0,.5);
}
</style>
注意点:
- 背景颜色默认值是透明:rgba(0,0,0,0)、transparent是全透明黑色(black)的速记法
- 背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
7.1.2 背景- 背景图片
属性名:background-image(bgi)
**属性值:**background-image: url( ‘图片的路径’ );
<style>
div {
width: 1152px;
height: 720px;
background-color: pink;
background-image: url(./images/1.jpeg);
}
</style>
注意点:
- 背景图片中url中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色, 是不能撑开盒子的
7.1.3 背景- 背景平铺
属性名:background-repeat (bgr)
属性值:
取值 效果
repeat (默认值) 水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿着水平方向 (x轴)平铺
repeat-y 沿着垂直方向 (y轴)平铺
<style>
div {
width: 1152px;
height: 720px;
background-color: pink;
background-image: url(./images/1.jpeg);
background-repeat:repeat; 默认值
/*不平铺: 图片只显示一个 工作中最常用 */
/* background-repeat:no-repeat; */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
}
</style>
7.1.4 背景- 背景位置
背景位置:background-postion (bgp)
**属性值:**background-position:水平方向位置 垂直方向位置;
取坐标系正数: 向右向下移动; 负数向左向上移动
<style>
div {
![img](https://img-blog.csdnimg.cn/img_convert/1c730e555a41157e2b8b144105ba8a3f.png)
![img](https://img-blog.csdnimg.cn/img_convert/90390de26f95da7c93284383e090f7c9.png)
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上C C++开发知识点,真正体系化!**
**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**
**[如果你需要这些资料,可以戳这里获取](https://bbs.csdn.net/topics/618668825)**
下移动; 负数向左向上移动