从CSS进阶开始入门前端Day05

目录

1、选择器进阶

 1.1复合选择器

  1.1.1后代选择器:空格

  1.1.2子代选择器:>

 1.2并集选择器:,

 1.3交集选择器

 1.4hover伪类选择器

 1.5Emmet语法

2、背景相关属性

 2.1背景颜色

 2.2背景图片

 2.3背景平铺

 2.4背景位置

 2.5背景相关属性连写

3、元素显示模式

 3.1块级元素

 3.2行内元素

 3.3行内块元素

 3.4元素显示模式转换

 3.5元素显示模式

4、CSS特性

 4.1继承性

 4.2层叠性


1、选择器进阶

能够理解复合选择器的规则,并使用复合选择器在HTML中选择元素

 1.1复合选择器

  1.1.1后代选择器:空格

        作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素

        选择器语法:选择器1 选择器2 { css }

        结果:

                在选择器1所找到标签的后代(儿子、孙子、重孙子......)中,找到满足选择器2的标签,设置样式

        注:

                后代包括:儿子、孙子、重孙子......

                后代选择器中,选择器与选择器之前通过空格隔开

  1.1.2子代选择器:>

        作用:根据HTML标签的嵌套关系,选择父元素子代中满足条件的元素

        选择器语法:选择器1>选择器2{ css }

        结果:

                在选择器1中所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式

        注:

                子代只包括:儿子

                子代选择器中,选择器与选择器之前通过 > 隔开

<head>
<style>
    /*空格隔开的是后代,儿子,孙子,重孙子*/
    /*div a{
    color:red;
    }*/
    /*只想选中儿子a*/
    /*div的儿子a文字颜色是红色*/
    div>a{
        color:red;
    }
</style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>

 1.2并集选择器:,

        作用:同时选择多组标签,设置相同的样式

        选择器语法:选择器1,选择器2{ css }

        结果:

                找到选择器1和选择器2选中的标签,设置样式

        注:

                并集选择器中的选择器之间通过,分隔

                并集选择器中的每组选择器可以是基础选择器或者复合选择器

                并集选择器中的每组选择器通常一行写一个,提高代码的可读性

 1.3交集选择器

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

        选择器语法:选择器1选择器2{ css }

        结果:

                (既又原则)找到页面中能被选择器1选中,能被选择器2选中的标签,设置样式

        注:

                交集选择器中的选择器之间是紧挨着的,没有东西分隔

                交集选择器中如果有标签选择器,标签选择器必须写在最前面

 1.4hover伪类选择器

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

        选择器语法:选择器:hover{ css }

        注:

                伪类选择器选中的元素的某种状态

 1.5Emmet语法

        作用:通过简写语法,快速生成代码

        语法:

                类似于刚刚学习的选择器的写法

记忆示例效果
标签名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>

2、背景相关属性

        能够使用背景相关属性装饰元素的背景样式

 2.1背景颜色

        属性名:background-color(bgc)

        属性值:

                颜色取值:关键字、rgb表示法、rgba表示法、十六进制......

        注:

                背景颜色默认值是透明:rgba(0,0,0,0)、transparent

                背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色

 2.2背景图片

        属性名:background-image(bgi)

        属性值:background-image:url("图片的规格")

        注:

                背景图片中url中可以省略引号

                背景图片默认是在水平和垂直方向平铺

                背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开盒子的

 2.3背景平铺

        属性名:background-repeat(bgr)

        属性值:

取值效果
repeat(默认值)水平和垂直方向都平铺
no-repeat不平铺
repeat-x沿着水平方向(x轴)平铺
repeat-y沿着垂直方向(y轴)平铺

 2.4背景位置

        属性名:background-position(bgp)

        属性值:background-position:水平方向位置 垂直方向位置;

        方向名词(最多只能表示9个位置):

                水平方向:lef、center、right

                垂直方向:top、center、bottom

        数字+px(坐标):

                坐标系:

                        原点(0,0):盒子的左上角

                        x轴:水平向右

                        y轴:垂直向下

                操作:将图片左上角与坐标点重合即可

        注:

                方法名词取值和坐标取值可以混使用,第一个取值表示水平,第二个取值表示垂直

 2.5背景相关属性连写

        属性名:background(bg)

        属性值:

                单个属性值的合写,取值之间以空格隔开

        书写顺序:

                推荐:background:color image repeat position

        省略问题:

                可以按照需求省略

                特殊情况:在pc端,如果盒子大小和背景图片大小一样,此时可以直接写background:url()

        注:

                如果需要设置单独的样式和连写

                        要么把单独的样式写在连写的下面

                        要么把单独的样式写在连写的上面

2.6img标签和背景图片的区别

        需求:需要在网页中展示一张图片的效果?

                方法一:直接写上img标签即可

                        img标签是一个标签,不设置宽高默认会以原尺寸显示

                方法二:div标签+背景图片

                        需要设置div的宽高,因为背景图片只是装饰的CSS样式,不能撑开div标签

3、元素显示模式

能够认识三种常见的元素显示模式,并通过代码实现不同元素显示模式的转换

 3.1块级元素

        显示特点:

                独占一行(一行只能显示一个)

                宽度默认是父元素的宽度,高度默认由内容撑开

                可以设置宽高

        代表标签:

                div、p、h系列、ul、li、dl、dt、dd、form、heder、nav、footer......

 3.2行内元素

        显示特点:

                一行可以显示多个

                宽度和高度默认由内容撑开

                不可以设置宽高

        代表标签:

                a、spar、b、u、i、s、strong、ins、em、del......

 3.3行内块元素

        显示特点:

                一行可以显示多个

                可以设置宽高

        代表标签:

                input、textarea、button、select......

                特殊情况:img标签有行内块元素特点,但是Chrome调查工具中显示结果是inline

 3.4元素显示模式转换

        改变元素默认的显示特点,让元素符合布局要求

        语法:

属性效果使用频率
display:block转换成块级元素较多
display:inline-block转换成行内块元素较多
display:nline转换成行内元素极少

 3.5元素显示模式

        HTML嵌套规范注意点

        块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等......

                但是:p标签中不要嵌套div、p、h等块级元素

        a标签内部可以嵌套任意元素

                但是:a标签不能嵌套a标签

4、CSS特性

        能够认识CSS的继承层叠特性

 4.1继承性

        特性:子元素有默认继承父元素样式的特点(子承父业)

        可以继承的常见属性(文字控制属性都可以继承

        color

        font-style、font-weight、font-size、font-family

        text-indent、text-align

        line-height

        ......

        注:

                可以通过调试工具判断样式是否可以继承

        继承失效的特殊情况

                如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式

                a标签的color会继承失效

                h系列标签的font-size会继承失效

 4.2层叠性

        特性:

                给同一个标签设置不同的样式—>此时样式会层叠叠加—>会共同作用在标签上

                给同一个标签设置相同的样式—>此时样式会层叠覆盖—>最终写在最后的样式会失效

        注:

                当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值