首页 前端知识 入门CSS(二)

入门CSS(二)

2024-05-03 18:05:06 前端知识 前端哥 466 960 我要收藏

复合选择器

定义:由 两个或多个基础选择器 ,通过不同的方式组合而成。 作用: 更准确、更高效 的选择目标元素(标签)。

后代选择器

后代选择器:选中某元素的后代元素。

选择器写法:父选择器 子选择器{CSS属性},父子选择器之间用空格隔开。

<style>
    div p{
        font-size: 50px;
    }
</style>

<div>
    <p>我是P</p>
</div>

子代选择器

子代选择器:选择某个元素的元素(最近的子元素)。

选择器写法:父选择器>子选择器{CSS属性},父子选择器用 > 隔开。

<style>
    div>p{
        color: red;
        font-size: 50px;
    }
</style>

<div>
    <p>我是P</p>
</div>

并集选择器

并集选择器:选中多组标签设置相同样式。

选择器写法:选择器1,选择器2,选择器3{CSS属性},选择器之间用隔开。

<style>
    p,h1{
        color: red;
        font-size: 50px;
    }
</style>

<div>
    <h1>我是h1</h1>
    <p>我是P</p>
</div>

交集选择器

交集选择器:选中同时满足多个条件的元素。

选择器写法: 选择器1选择器2{CSS属性},选择器之间连写,没有任何符号。

<style>
    p.box {
        color: blue;
        font-size: 50px;
    }
</style>

<div>
    <p class="box">我是P</p>
</div>

伪类选择器

伪类选择器:伪类表示元素状态,选中元素时的某个状态设置样式

鼠标悬停状态:选择器:hover{CSS属性}。

<style>
    a:hover {
        color: red;
    }
.box:hover {
        color: green;
    }
</style>

<a href="#">a 标签</a>
<div class="box">div 标签</div>

超链接一共有个状态

注:如果要同时设置多个状态需要按上面表格的顺序来写。

CSS特性

继承性

继承性:子级默认继承父级的文字控制属性。

注意:如果标签有默认文字样式会继承失败。 例如:a 标签的颜色、标题的字体大小。

层叠性

特点:

  • 相同的属性会覆盖:后面的CSS属性会覆盖前面的CSS属性。
  • 不同的属性会叠加:不同的CSS属性都生效
<style>
    div {
        color: red;
        font-weight: 700;
    }
    div {
        color: green;
        font-size: 30px;
    }
</style>

<div>div 标签</div>

注意: 选择器类型相同则遵循层叠性 ,否则按选择器 优先级 判断。

优先级

优先级:也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。

<style>
    div {
        color: red;
    }
    .box {
        color: green;
    }
</style>

<div class="box">div 标签</div>

规则:选择器优先级高的先生效。

公式:通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important 选中标签的范围越大,优先级越低 优先级叠加规则:

叠加计算:如果是复合选择器则需要权重叠加计算。 

公式:(每一级之间 不存在进位 规则:
  • 从左向右依次比较选个数,同一级个数的优先级,如果个数相同,则向后比较。
  • !important 权重最高。
  • 继承权重最低。

Emmet写法 

Emmet写法:代码的简写方式,输入缩写 VS Code 会自动生成对应的代码。

  • HTML

  • CSS

背景属性

背景图

网页中,使用背景图实现装饰性的图片效果。

属性名:background-image

属性值:url(背景图URL)

div {
    width: 400px;
    height: 400px;
    background-image: url(./images/1.png);
}

提示:背景图默认有平铺(复制)效果。

背景图平铺方式

属性名:background-repeat

属性值:

div {
    width: 400px;
    height: 400px;
    background-image: url(./images/1.png);
    background-repeat: no-repeat;
}

背景图位置

属性名:background-position

属性值:水平方向位置 垂直方向位置

  • 关键字

  • 坐标(数字+px,正负都可以)

水平:正数向右,负数向左。

垂直:正数向下,负数向上。

div {
    width: 400px;
    height: 400px;
    background-color: pink;
    background-image: url(./images/1.png);
    background-repeat: no-repeat;
    background-position: 20px 50px;
}

提示:
  • 关键字取值方式写法,可以颠倒取值顺序
  • 可以只写个关键字,另一个方向默认为居中;数字只写个值表示水平方向,垂直方向为居中。

背景图缩放

作用:设置背景图大小

属性名:background-size

常用属性值:
  • 关键字

      cover:等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。

      

      contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白。

     

  • 百分比:根据盒子尺寸计算图片大小
  • 数字 + 单位(例如:px)

提示:工作中,图片比例与盒子比例相同,使用 cover 或 contain 缩放背景图效果相同。

背景图固定

作用:背景图片不会随着元素的内容滚动。

属性名:background-attachment

属性值:fixed

背景复合属性

属性名:background

属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值,不区分顺序)。

div {
    width: 400px;
    height: 400px;
    background: pink url(./images/1.png) no-repeat right center/cover;
}

显示模式

显示模式:标签(元素)的显示方式。

作用:布局网页的时候,根据标签的显示模式选择合适的标签摆放内容。

块级元素:

  • 独占一行
  • 宽度默认是父级的100%。
  • 添加宽高属性生效

行内元素:

  • 一行可以显示多个
  • 设置宽高不生效
  • 宽高尺寸由内容撑开。

行内块元素:

  • 一行可以显示多个
  • 设置宽高生效
  • 宽高尺寸可以由内容撑开。

转换显示模式

属性名:display

属性值:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6772.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!