CSS基础知识---选择器进阶+背景属性+元素显示模式+三大特性

最新推荐文章于 2024-07-19 15:50:46 发布

只昂张327

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量253

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_71171795/article/details/127873920

版权

1、选择器进阶

1.1.1 后代选择器重点

作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素(选中子孙后代)

问题1:后代选择器的语法格式是什么?选择器与选择器之间用什么符号隔开?

答:

选择器1 选择器2{属性:属性值;属性:属性值;}
空格隔开

问题2:后代选择器最终选中的元素是父元素还是子元素?

答:

子元素
后代选择器选中子孙后代

<!-- 1 使用后代选择器 让ul里面的小li字体设置为红色 字体大小18px -->
    <ul>
        <li>我要改变颜色</li>
        <li>我要改变颜色</li>
        <li>我要改变颜色</li>
    </ul>
    <!-- 2 使用后代选择器 让 ol 里面的小li字体设置为粉色 字体大小20px -->
    <ol>
        <li>我要变色并且改变字体大小</li>
        <li>我不变</li>
        <li>我不变</li>
</ol>

1.1.2 子代选择器

作用：根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素(只能选中亲儿子)

问题1:子代选择器的语法格式是什么?选择器与选择器之间用什么符号隔开?

答:

选择器1> 选择器2{属性:属性值;属性:属性值;}
>隔开

问题2:子代选择器最终选中的元素是父元素还是子元素?

答:子代选择器最终选择的是子元素--->亲儿子

<!-- 我是儿子的 a 元素字体设置为红色 字体大小为20px；-->
<div class="nav">
  <a href="">我是儿子</a>
  <p><a href="">我是孙子</a></p>
</div>

1.1.3 并集选择器

作用：同时选择多组标签，设置相同的样式.

问题1:并集选择器的语法格式是什么？元素之间使用什么符号分开？

答:

选择器1,选择器2{属性:属性值;属性:属性值;}
元素之间使用,隔开,最后一个选择器的后面不用加逗号

问题2:并集选择器可以使用基础选择器或者复合选择器吗?

答:

可以.
并集选择器通常一行写一个,提高代码可读性

<!-- 使用并集选择器把代码中的熊大、熊二和小猪一家改为粉色 -->
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
  <li>小猪佩奇</li>
  <li>猪爸爸</li>
  <li>猪妈妈</li>
</ul>

1.1.4 交集选择器

作用：选中页面中同时满足多个选择器的标签

问题1:交集选择器的语法格式是什么？选择器之间需要分隔吗?

答:

选择器1选择器2 { 属性:属性值;属性:属性值;}
不需要分隔.

问题2:交集选择器中如果有标签选择器,标签选择器写在哪里呢?

答:标签选择器必须写在最前面

作用：选中鼠标悬停在元素上的状态，设置样式

E:link        未访问的链接(把没有点击过的(访问过的)链接选出来)
E:visited     已访问的链接(访问过的链接)
E:hover       鼠标经过时的连接
E:active      鼠标按下未弹起时的链接

问题1:伪类选择器的语法格式是什么,他的作用是什么?

答:选择器:hover{属性:属性值;}

问题2:书写:hover的时候有什么注意事项?

答::号的前面与后面都不能用空格

1.1.5 `Emmet`语法

作用：通过简写语法，快速生成代码,提高编码效率

2、背景相关属性

2.1.1 背景颜色

问题1:设置背景颜色使用哪个属性,快捷键是?

答:background-color:背景颜色快捷键:bgc

问题2:背景颜色属性的默认值是什么?

答:transparent(透明色) rgba(0,0,0,0)

问题3:背景颜色属性为rgba格式时第四个值表示什么意思?

答:透明度,默认是0,透明度的区间是0-1

2.1.3 背景图片

应用场景:网页的logo 装饰图片超大背景图精灵图

问题1:设置背景图片使用哪个属性,快捷键是?

答:background-image:背景图片快捷键:bgi

问题2:背景图片属性的属性值格式是什么样的？

答:background-image:url(图片名称)

问题3:背景图片可以撑开盒子吗?

答:背景图片不可以撑开盒子.

问题4:背景图片和背景色的显示层级是?

答:背景图片在上,背景色在下

2.1.4 背景平铺

问题1:设置背景平铺使用哪个属性,快捷键是?

答:background-repeat:背景平铺快捷键:bgr

问题2:在使用背景图片时，默认背景是平铺的吗？

答:默认是平铺的

问题3:背景平铺有哪些属性,有Z轴吗？

答:repeat|no-repeat|repeat-x|repeat-y

2.1.5 背景位置

问题1:设置背景位置使用哪个属性,快捷键是?

答:

background-position:背景位置快捷键:bgp
background-position:水平方向垂直方向

问题2:方位名词分别对应哪些方位?

答:

水平方向:left / right / center
垂直方向:top / bottom / center

问题3:背景位置属性的取值有哪些？

答:

方位名词
精确单位(数字+px[坐标])
混合单位(第一个取值表示水平，第二个取值表示垂直)

2.1.6 背景连写

问题1:背景相关属性连写的属性名是？

答:background

问题2:背景相关属性连写有顺序要求吗？推荐写法是?

答:

没有顺序要求
background:color image repeat position;
各个属性之间使用空格隔开

2.1.7 `img`标签和背景图片的区别

img标签可以撑开盒子,一般展示重要的图片,比背景图要清晰

背景图片不可以撑开盒子.(需要设置盒子的宽高),超大的图片和logo以及精灵图

3、元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如div独占一行，比如一行可以显示个span。

3.1.1 块级元素

问题1:块级元素的display属性的属性值是？

答:display：block

问题2:块级元素有什么特点?

答:

独占一行（一行只能显示一个）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高
可以存放其他行内元素和块级元素文本

问题3:块级元素的代表标签有哪些？

答:div、p、h系列、ul、li、ol、dl

3.1.2 行内元素

问题1:行内元素的display属性的属性值是？

答:display：inline

问题2:行内元素有什么特点?

答:

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
只能容纳文本或其他行内元素

问题3:行内元素的代表标签有哪些？

答:span a em 等

3.1.3 行内快元素

问题1:行内块元素的display属性的属性值是？

答:display：inline-block

问题2:行内块元素的显示特点有哪些？

答:

一行可以显示多个
可以设置宽高

问题3:行内块元素的代表标签有哪些？

答:input button textarea

3.1.4元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求.

三种转换模式代码:

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

案例:

代码块:

html

<div class="nav">
        <a href="#">手机 </a>
        <a href="#">家电</a>
        <a href="#">手机 电话卡</a>
        <a href="#">电视 盒子</a>
        <a href="#">笔记本 平板</a>
        <a href="#">出行 穿戴</a>
        <a href="#">智能 路由器</a>
        <a href="#">健康 儿童</a>
        <a href="#">耳机 音响</a>
        <a href="#">耳机 音响</a>
</div>

css

   /* 1 设置div盒子宽度 高度 背景颜色 */
    .nav {
            width: 234px;
            height: 420px;
            background-color: #555;
        }

        /* 2. 将 a 标签转换为块级元素，设置默认显示属性 */
        .nav a {
            display: block;
            width: 234px;
            height: 42px;
            color: #fff;
            font-size: 14px;
            text-decoration: none;
            text-indent: 2em;
            line-height: 42px;
        }

        /* 2. 设置 a 标签鼠标经过状态 */
        .nav a:hover {
            background-color: #f70;
        }