第四天

最新推荐文章于 2023-06-22 15:09:42 发布

一个先令儿

最新推荐文章于 2023-06-22 15:09:42 发布

阅读量104

点赞数

分类专栏：黑马学习文章标签： css

本文链接：https://blog.csdn.net/weixin_51185397/article/details/109105230

版权

黑马学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS复合选择器

1.emmet语法

1.生成HTML标签


1	*N	连续生成 N 个	例如：div*5
2	父>子	生成父子关系结构	例如：ul>li*5
3	兄+弟	生成兄弟关系结构	例如：h1+div*2+h4+p*2
4	.class / #id	生成带 class 或 id 的 div	例如：.red / #app
5	tag.class / tag#id	生成带 class 或 id 的 tag	例如：p.red / span#nav
6	$*N	$ 位置会被连续的数字替换	例如：.demo$*5
7	{内容$}	标签内容	例如：p{段落$}*5

2.生成CSS样式

tac → text-align: center;
ti2em → text-indent: 2em;
lh26px → line-height: 26px;
tdn → text-decoration: none;
w100 → width: 100px;
h200 → height: 200px;

2.CSS复合选择器

1.特点：
对基础选择器进行组合
由两个或多个基础选择器，通过不同方式组合而成的
2.分类：
后代、子代、并集、伪类
1.后代选择器
1.语法格式：

选择器1 选择器2 {样式声明;}

2.后代选择器的选择器之间使用空格分开
3.后代选择器最终选中的元素是子代元素
4.后代选择器中的元素可以是任一一种基础选择器
参考代码：

<!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>
        .adv-selector ul li {
            color: blue;
        }
    </style>
</head>

<body>
    <h3>基础选择器</h3>
    <div>
        <ul>
            <li>标签选择器</li>
            <li>类选择器</li>
            <li>id 选择器</li>
            <li>通配符选择器</li>
        </ul>
    </div>
    <h3>复合选择器</h3>
    <div class="adv-selector">
        <ul>
            <li>后代选择器</li>
            <li>子代选择器</li>
            <li>并集选择器</li>
            <li>伪类选择器</li>
        </ul>
    </div>
</body>

</html>

2.子元素选择器
1.语法规范：

选择器1 > 选择器2 {样式声明;}

2.选择某个元素最近一级的子元素（亲儿子）
3.子代选择器最终选中的元素是子代元素 → 亲儿子
参考代码：


<!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>
        .hot>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="hot">
        <a href="#">大肘子</a>
        <ul>
            <li><a href="#">猪头</a></li>
            <li><a href="#">猪尾巴</a></li>
        </ul>
    </div>
</body>

</html>

3.并集选择器
1.语法格式：

选择器1,
选择器2 {
  样式声明;
}

2.集体声明 —— 选择多组标签，同时设置相同的样式
3.并集选择器的选择器之间使用 , 分开，最后一个选择器不需要逗号
4.并集选择器通常会竖式排列选择器，提高代码的可读性
参考代码：

<!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,
        .pig {
            color: pink;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

4.链接伪类选择器
1.伪类选择器使用单冒号 :，是某种状态下的样式，例如 :hover 表示鼠标指向元素的状态。

2.分类：
a:link 选择所有未被访问的链接
a:visited 选择所有已经被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择激活链接（鼠标按下未抬起的链接
3.参考代码：

a:link {
  color: #333;
  text-decoration: none;
}

a:visited {
  color: orange;
}

a:hover {
  color: skyblue;
}

a:active {
  color: green;
}

注意：书写是有顺序的lvha
4.focus 伪类选择器
1.应用场景：在表单中突出显示当前获得焦点的表单元素，提升用户体验
参考代码：

<!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>
        input {
            width: 450px;
            height: 50px;
            /* background-color: white; */
            background: url(./camera_01.png) no-repeat 420px center;
        }

        input:focus {
            color: blue;
            background: url(./camera_02.png) no-repeat 420px center;
        }
    </style>
</head>

<body>
    <div>
        <input type="text">
    </div>
</body>

</html>

5.交集选择器
交集选择器在项目中使用一般是为了提权(权重问题会在后续的css三大特性中讲解)使用
参考代码：

<style>
/* 选择类名是box的div,中的span设置为绿色 */ 
 /* 选择器1选择器2  既...又.. 的关系  应用场景不多,一般是为了提权使用   紧紧相连*/  
  div.box span {
    color: green;
  }
</style>
<div class="box">
   <span>div1中的span标签</span>
</div>
<div>
	<span>div2中的span标签</span>
</div>
<p class="box">
	<span>p中的span标签</span>
</p>

复合选择器总结

3.元素的显示模式

1.块元素
特点：
1.独占一行
2.可以设置宽度、高度、外边距、边框和内边距
3.宽度默认是父级容器的宽度
4.可以存放其他行内元素和块级元素
2.行内元素
特点：
1.相邻行内元素在一行显示，一行多个
2.给行内元素设置宽高是无效的
3.默认宽度是内容的宽度（被内容撑开）
4.只能容纳文本或其他行内元素
注意：链接不能再放链接
特殊情况的链接可以存放块级元素
3.行内块元素
1.相邻行内元素在一行显示，一行多个（行内元素特点）
2.默认宽度就是本身内容的宽度（行内元素特点）
3.可以设置宽度、高度、外边距、边框和内边距（块级元素特点
目前学习到了三个标签 input td img
元素显示模式总结
在这里插入图片描述

4.显示模式的转换
1.应用场景：
让行内元素具有宽高：把行内元素转换成块元素或者行内块元素
让块元素一行显示：把块元素转换成行内块元素
2.参考代码：

display: block 转换为块元素
display: inline-block 转换为行内块元素
display: inline 转化为行内元素（使用较少

注意：在写 CSS 时，记住把 display 转换显示模式的设置写在第一行
5.单行文字垂直居中
将 line-height 设置为盒子的高度。

4.背景图片

1.语法：

background-image: none | url(url);

2.其中背景颜色默认为transparent 透明的，默认背景是平铺的
3.背景平铺
语法：

background-repeat: no-repeat;|repeat|repeat-x|repeat-y

repeat 默认，水平垂直平铺
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
4.背景位置
语法：

 background-position: left center;等

水平方向：left / right / center
垂直方向：top / bottom / center
参考代码：

h3 {
  /* 1. 设置 h3 基本显示，增加背景颜色辅助调试 */
  width: 118px;
  height: 40px;
  background-color: pink;
  font-size: 14px;
  font-weight: 400;
  line-height: 40px;

  /* 2. 增加背景图片，并设置平铺和位置 */
  background-image: url(./images/icon.png);
  background-repeat: no-repeat;
  background-position: left;

  /* 3. 修改文本缩进 */
  text-indent: 1.5em;
}

5.背景位置-精确单位
第一个值一定是 x / 第二个值一定是 y
参考语法：

  background-position: 40px 60px;

6.背景位置-混合单位
第一个值一定是 x / 第二个值一定是 y，但可以具体数值和单词同时使用
参考语法：

background-position: 40px top;

7.背景固定
可以制作视差滚动效果
两个默认参数：
scroll 默认，背景图像跟随滚动
fixed 背景图像固定
参考代码：

background-attachment: fixed;

8.背景属性复合写法
推荐顺序：
background: color image repeat attachment position
9.背景颜色半透明
background: rgba(0, 0, 0, 0); 其中最后一个0是alpha，取值范围：0 ~ 1
0 完全透明 / 1 完全不透明
参考代码：

background:rgba(red, green, blue, alpha) ;
background:rgba(0, 0, 0, 0.3) ;

一个先令儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四天

CSS复合选择器1.emmet语法1.生成HTML标签1 *N 连续生成 N 个例如：div*52 父>子生成父子关系结构例如：ul>li*53 兄+弟生成兄弟关系结构例如：h1+div*2+h4+p*24 .class / #id 生成带 class 或 id 的 div 例如：.red / #app5 tag.class / tag#id 生成带 class 或 id 的 tag 例如：p.red / span#nav6 $*N $ 位置会被连续的数字替换例如：
复制链接

扫一扫