当前位置: 首页 > article >正文

CSS的三大特性

🌟 所属专栏:前端只因变凤凰之路
🐔 作者简介:rchjr——五带信管菜只因一枚
😮 前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~
👉 文章简介:本文介绍CSS的三大特性。知识学习内容来自b站的 @黑马程序员 的视频

🚩1.1 层叠性

相同选择器设置相同的样式,此时一个样式就会覆盖另一个冲突的样式,比如两个div,一个div设置颜色与字体,另一个div设置不一样的颜色。那么就会选择后面的div的颜色和前面div的字体,因为只有颜色冲突了。

原则

样式冲突遵循就近原则,哪个样式设置距离标签更近,就执行哪个样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
            font-size: 14px;
        }

        div {
            color: pink;
        }
    </style>
</head>
<div>层叠性</div>

<body>

</body>

</html>

🚩1.2 继承性

子标签会继承父标签的某些样式如文字的颜色和大小,最主要的就是和文字有关的如text-,font-,line-这些开头的属性,以及color。

常用情况:在body中设置整个页面的文字格式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div>
        <p>
            body已经给我设置好了
        </p>
    </div>
</body>

</html>

行高的继承性

body {
font:12px/1.5 Microsoft Yahei
}

行高可以不跟单位,采用1.5表示字体大小的1.5倍。这样可以让子元素根据自己的文字大小自动调整行高

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            color: pink;
            font: 12px/1.5 Microsoft Yahei;
        }

        div {
            /* 继承了body的行高,这里是14*1.5=21px */
            font-size: 14px;
        }

        p {
            font-size: 16px;
        }
    </style>
</head>
<div>指定了自己的大小,行高继承为14*1.5px</div>
<p>指定了自己大小,行高继承为16*1.5排序</p>
<ul>
    <li>没指定自己大小,行高继承为12*1.5</li>
</ul>

<body>

</body>

</html>

🚩1.3 优先性

当一个元素(标签)指定多个选择器,就会有优先级的问题。如果多个选择器选择了同一个元素,就要根据选择器自身的权重来判断。

选择器

选择器权重

继承或者*

0

元素选择器

1

类选择器,伪类选择器

10

id选择器

100

行内样式

1000

注意

继承的权重是0。例如body中指定的文字颜色,但是只要body中的标签有默认值,都会用标签自己的默认值。

复合选择器的权重

复合选择器中的权重会叠加。例如同时设置li和ul li,则用ul li的样式。又比如有.nav li和ul li,则执行.nav li,因为类选择器的权重更大。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav li {
            color: red;
        }

        .nav .pink {
            color: pink;
            font-weight: 800;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li class="pink">aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</body>

</html>


http://www.kler.cn/a/127.html

相关文章:

  • 无网络时自动切换备用网络环境
  • Linux pget 下载命令详解
  • (长期更新)《零基础入门 ArcGIS(ArcScene) 》实验七----城市三维建模与分析(超超超详细!!!)
  • 【生物信息】如何使用 h5py 读取 HDF5 格式文件中的数据并将其转换为 NumPy 数组
  • 最近在盘gitlab.0.先review了一下docker
  • LangChain速成课程_构建基于OpenAI_LLM的应用
  • 内卷把同事逼成了“扫地僧”,把Git上所有面试题整理成足足24W字Java八股文
  • STM32U5开发(1)----通过 USART1 发送数据
  • 14个你需要知道的实用CSS技巧
  • 《ChatGPT是怎样炼成的》
  • 网络工程师必备知识点
  • 多线程的风险 --- 线程安全
  • 【蓝桥杯嵌入式】ADC模数转换的原理图解析与代码实现(以第十一届省赛为例)——STM32G4
  • 51单片机使用AT24C02
  • 17、江科大stm32视频学习笔记——USART串口协议和USART串口外设
  • 英雄算法学习路线
  • Git代码提交规范
  • C 语言编程 — 线程池设计与实现
  • C++回顾(一)——从C到C++
  • 三体到底是啥?用Python跑一遍就明白了
  • 【python实操】用python写软件弹窗
  • 数据结构与算法基础-学习-15-二叉树之BST的前序遍历、后序遍历、中序遍历的递归和非递归方法实现
  • HashMap原理
  • 【Linux学习】进程间通信——匿名管道 | 命名管道
  • DDOS攻击
  • 【满分】【华为OD机试真题2023 JAVA】最多几个直角三角形