前端三大件速成 02 CSS（1）CSS是什么、CSS的四种引入方式、CSS的选择器和优先级、继承

news2024/12/24 10:02:24

文章目录

  • 一、CSS是什么
  • 二、CSS的四种引入方式
    • 1、行内式
    • 2、嵌入式
    • 3、链接式（推荐）
    • 4、导入式
  • 三、CSS的选择器
    • 1、基本选择器
    • 2、组合选择器
    • 3、属性选择器
    • 4、伪类
  • 四、选择器的优先级
    • 1、选择器的权值
    • 2、附加说明
  • 五、继承

一、CSS是什么

CSS为层叠样式表，用来控制网页数据的表现。
CSS主要做两件事：
  ①找到要操作的标签
  ②操作标签对象

二、CSS的四种引入方式

1、行内式

<div style="color: red;background-color: beige">hello</div>

2、嵌入式

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
            background-color: beige;
        }
    </style>
</head>
<body>
    <div>hello</div>
</body>
</html>

3、链接式（推荐）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <link href="css1.css" rel="stylesheet">
</head>
<body>
    <div>hello</div>
</body>
</html>

<!--css1.css内容:-->
<!--div{-->
<!--            color: gold;-->
<!--            font-size: 20px;-->
<!--    }-->

4、导入式

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        @import "css1.css";
    </style>
</head>
<body>
    <div>hello</div>
</body>
</html>

<!--css1.css内容:-->
<!--div{-->
<!--            color: gold;-->
<!--            font-size: 20px;-->
<!--    }-->

三、CSS的选择器

1、基本选择器

① * 通用选择器，匹配任何元素
格式： *{}

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <div>hello<p>world</p></div>
    <p>锄禾日当午</p>
</body>
</html>

②标签选择器
格式： 标签名{}

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>
    <div>hello<p>world</p></div>
    <p>锄禾日当午</p>
</body>
</html>

在这里插入图片描述
③ id选择器
格式： #id{}
id不能重复

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        #divp{
            color: red;
        }
    </style>
</head>
<body>
    <div>hello<p id="divp">world</p></div>
    <p>锄禾日当午</p>
</body>
</html>

④class（类）选择器
格式： .class{}
class可以重复

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        .divp {
            color: red;
        }
    </style>
</head>
<body>
    <div>hello<p class="divp">world</p></div>
    <p class="divp">锄禾日当午</p>
</body>
</html>

2、组合选择器

①选择某标签下的某类

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        p.divp {
            color: red;
        }
        /*选择p标签下的divp类*/
    </style>
</head>
<body>
    <div>hello<p class="divp">world</p></div>
    <div class="divp">锄禾日当午</div>
</body>
</html>

②多元素选择器
格式： 元素之间用逗号分隔

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        p.divp,#d1{
            color: red;
        }
        /*选择p标签下的divp类，和id为d1的标签*/
    </style>
</head>
<body>
    <div>hello<p class="divp">world</p></div>
    <div class="divp">锄禾日当午</div>
    <div id="d1">汗滴禾下锄</div>
</body>
</html>

③后代选择器
格式： 父代 后代{} （空格分隔）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 .P{
            color: red;
        }
        /*选中类div1后代中类为P的标签*/
    </style>
</head>
<body>
    <div class="div1">
        <div>
            <a href="">a</a>
            <p class="P">ppp</p>
            <div>div3</div>
        </div>

        <p>p ele</p>
        <div class="div2">div2</div>
    </div>
</body>
</html>

④子代选择器
格式：父代>子代{}
注：和后代选择器的区别在于，只从子代中查找
⑤毗邻选择器
格式：选择器1+选择器2{}，选中选择器2

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        .ddd+div{
            color: red;
        }
    </style>
</head>
<body>
    <div>before</div>
    <div class="ddd">me</div>
    <div>after1</div>
    <div>after2</div>
</body>
</html>

在这里插入图片描述

3、属性选择器

① [属性]{}
匹配所有具有该属性的元素，不考虑它的值。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        [crtao]{
            color: red;
        }
    </style>
</head>
<body>

    <div crtao="nice">me1</div>
    <div crtao="good">me2</div>
    <div>me3</div>
</body>
</html>

② [属性=属性值]{}
匹配所有该属性等于该属性值的元素

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        [crtao="good"]{
            color: red;
        }
    </style>
</head>
<body>

    <div crtao="nice">me1</div>
    <div crtao="good">me2</div>
    <div>me3</div>
</body>
</html>

③ [属性~=属性值]{}
匹配所有属性具有多个空格分隔的值，其中一个等于该指定值的元素

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        [crtao~="nice"]{
            color: red;
        }
        /*me1、me2变红*/
        /*如果改为[crtao="nice"]，则只有me1变红*/
    </style>
</head>
<body>

    <div crtao="nice">me1</div>
    <div crtao="good nice">me2</div>
    <div>me3</div>
</body>
</html>

④ [属性^=属性值]{}
匹配属性值以指定值开头的元素

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        [crtao^="ni"]{
            color: red;
        }
        /*me1变红*/
    </style>
</head>
<body>

    <div crtao="nice">me1</div>
    <div crtao="good nice">me2</div>
    <div>me3</div>
</body>
</html>

④ [属性$=属性值]{}
匹配属性值以指定值结尾的元素

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        [crtao$="ce"]{
            color: red;
        }
        /*me1、me2变红*/
    </style>
</head>
<body>

    <div crtao="nice">me1</div>
    <div crtao="good nice">me2</div>
    <div>me3</div>
</body>
</html>

⑤[属性=属性值]{}*
匹配属性值中包含指定值的每个元素

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        [crtao*="c"]{
            color: red;
        }
        /*me1、me2变红*/
    </style>
</head>
<body>

    <div crtao="nice">me1</div>
    <div crtao="good nice">me2</div>
    <div>me3</div>
</body>
</html>

4、伪类

格式： 标签:伪类名称{}
anchor伪类：专用于控制链接的显示效果
① a:link{} 未访问的链接
② a:visited{} 已访问的链接
③ a:hover{} 鼠标移动到链接上悬浮
④ a:active{} 选定的链接

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: red;
        }

        a:visited {
            color: blue;
        }
        a:hover {
            color: green;
        }
        a:active {
            color: yellow;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">hello-world</a>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
        }
        .top, .bottom{

            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }


        .box:hover .bottom{
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="box">
         <div class="top"></div>
         <div class="bottom"></div>

    </div>
</body>
</html>

before after伪类
格式，例：
p:before 在每个p元素之前插入内容
p:after 在每个p元素之后插入内容

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        .add:before{
            content: "你好";
            color: red;
        }
        .add:after{
            content: "欢迎";
            color: green;
        }
    </style>
</head>
<body>
    <div class="add">hello</div>
</body>
</html>

在这里插入图片描述

四、选择器的优先级

1、选择器的权值

内联样式，例<div id=“div11” style=“color: red;”>hello</div>，权值：1,0,0,0
ID选择器，例： #ID{}，权值： 0,1,0,0
class选择器，例： .class，权值：0,0,1,0
标签选择器，权值：0,0,0,1

2、附加说明

①比较权值时，是按位相加，再从左到右逐个比较。
②有 !important 申明的规则高于一切

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        #id1{color: red;}
        .div1{color: green!important;}
    </style>
</head>
<body>
    <div class="div1" id="id1">优先级</div>
</body>
</html>

③如果 !important 声明冲突，则比较优先级
④优先级权值一样，则后面出现的优先
⑤由继承而得到的样式，它低于一切其他规则

五、继承

①继承是CSS的一个主要特征。继承的意思是一个元素的一些属性，也应用于它的子元素。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>
    <div>hello<p>world</p></div>
</body>
</html>

在这里插入图片描述
②继承来的样式优先级最低。
③有一些属性不能被继承，例如：border、margin、padding、background等。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1613357.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

伪分布Hadoop下安装Hive

伪分布Hadoop下安装Hive

一、下载并安装Mysql &#xff08;1&#xff09;下载mysql安装包&#xff08;mysql-8.0.26-1.el7.x86_64.rpm-bundle.tar&#xff09; 下载官网&#xff1a;MySQL :: Download MySQL Community Server (Archived Versions)https://downloads.mysql.com/archives/community/ &…
阅读更多...
在centos系统中使用boost库

在centos系统中使用boost库

打开MobaXterm软件 下载 boost_1_85_0.tar.gz tar -zxvf boost_1_85_0.tar.gz解压缩成boost_1_85_0文件夹 双击arrayDemo.cpp 在里面可以编写代码 arrayDemo.cpp #include <boost/timer/timer.hpp> #include <boost/array.hpp> #include <cmath> #inc…
阅读更多...
Linux 系统systemd（pid=1）占用80端口导致web程序无法启动

Linux 系统systemd（pid=1）占用80端口导致web程序无法启动

背景 linux系统内安装了例如nginx的网站程序&#xff0c;但是无法正常启动&#xff0c;netstat 查看下 80端口被 systemd 占用。 处理方法 注意务必组好快照备份后再操作。 做好备份后将/usr/lib/systemd/system 内http相关的配置文件重命名后重启主机恢复正常。 重启后正常 sy…
阅读更多...
51、图论-岛屿数量

51、图论-岛屿数量

思路&#xff1a; 该问题要求在一个由 1&#xff08;表示陆地&#xff09;和 0&#xff08;表示水&#xff09;组成的二维网格中&#xff0c;计算岛屿的数量。岛屿被水包围&#xff0c;并且通过水平或垂直连接相邻的陆地可以形成。这个问题的核心是识别并计数网格中相连的陆地…
阅读更多...
网盘——文件操作之界面设计

网盘——文件操作之界面设计

关于网盘实现部分&#xff0c;文件操作包含三个部分&#xff1a;界面设计、文件夹操作、常规文件操作。本文主要讲解界面设计&#xff0c;后续文章后讲解后两部分。 1、界面设计 最终的界面如下 1.1、创建类&#xff0c;并添加头文件 #include <QListWidget> #include…
阅读更多...
spring boot3单模块项目工程搭建-上（个人开发模板）

spring boot3单模块项目工程搭建-上（个人开发模板）

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《spring boot实战》 &#x1f30a;山高路远&#xff0c;行路漫漫&#xff0c;终有归途 目录 写在前面 上文衔接 常规目录创建 common目录 exception.handle目录 result.handle目录 controller目录 service…
阅读更多...
探索NDWI：归一化水体指数的意义与应用

探索NDWI：归一化水体指数的意义与应用

随着遥感技术的不断发展&#xff0c;NDWI&#xff08;Normalized Difference Water Index&#xff0c;归一化水体指数&#xff09;作为一种重要的植被指数&#xff0c;被广泛应用于水资源管理、湿地监测和环境保护等领域。本文将介绍NDWI的意义、计算方法以及在不同领域的应用。…
阅读更多...
什么是0-day漏洞，怎么防护0-day漏洞攻击

什么是0-day漏洞，怎么防护0-day漏洞攻击

随着信息技术的快速发展&#xff0c;网络安全问题日益凸显&#xff0c;其中0day漏洞攻击作为一种高级威胁手段&#xff0c;给企业和个人用户带来了极大的风险。下面德迅云安全就对0day漏洞攻击进行简单讲解下&#xff0c;并分享相应的一些安全措施&#xff0c;以期提高网络安全…
阅读更多...
设计模式-创建型-抽象工厂模式-Abstract Factory

设计模式-创建型-抽象工厂模式-Abstract Factory

UML类图 工厂接口类 public interface ProductFactory {Phone phoneProduct();//生产手机Router routerProduct();//生产路由器 } 小米工厂实现类 public class XiaomiFactoryImpl implements ProductFactory {Overridepublic Phone phoneProduct() {return new XiaomiPhone…
阅读更多...
【Interconnection Networks 互连网络】Flattened Butterfly 扁平蝶形拓扑

【Interconnection Networks 互连网络】Flattened Butterfly 扁平蝶形拓扑

Flattened Butterfly 扁平蝶形拓扑 1. 传统蝶形网络 Butterfly Topology2. 扁平蝶形拓扑 Flattened Butterfly3.On-Chip Flattened Butterfly 扁平蝶形拓扑应用于片上网络 Flattened Butterfly 扁平蝶形拓扑 扁平蝶形拓扑是一种经济高效的拓扑&#xff0c;适用于高基数路由器…
阅读更多...
向量数据库的崛起：如何改变数据存储与机器学习的未来

向量数据库的崛起：如何改变数据存储与机器学习的未来

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
基于 Spring Boot 博客系统开发（一）

基于 Spring Boot 博客系统开发（一）

基于 Spring Boot 博客系统开发&#xff08;一&#xff09; 本系统是简易的个人博客系统开发&#xff0c;为了更加熟练地掌握SprIng Boot 框架及相关技术的使用。&#x1f913;&#x1f913;&#x1f913; 本系统开发所需的环境及相关软件 操作系统&#xff1a;Windows Java…
阅读更多...
20240330-1-词嵌入模型w2v+tf-idf

20240330-1-词嵌入模型w2v+tf-idf

Word2Vector 1.什么是词嵌入模型&#xff1f; 把词映射为实数域向量的技术也叫词嵌⼊ 2.介绍一下Word2Vec 谷歌2013年提出的Word2Vec是目前最常用的词嵌入模型之一。Word2Vec实际是一种浅层的神经网络模型&#xff0c;它有两种网络结构&#xff0c;分别是连续词袋&#xff…
阅读更多...
iOS 全平台矢量动画库：体积小巧、功能丰富 | 开源日报 No.227

iOS 全平台矢量动画库：体积小巧、功能丰富 | 开源日报 No.227

airbnb/lottie-ios Stars: 24k License: NOASSERTION lottie-ios 是一个用于在 iOS 平台上本地渲染 After Effects 矢量动画的库。 该项目主要功能、关键特性、核心优势包括&#xff1a; 跨平台支持&#xff1a;可在 iOS, macOS, tvOS, visionOS, Android 和 Web 上使用实时渲…
阅读更多...
NewStarCTF 2023 web

NewStarCTF 2023 web

目录 week1 泄漏的秘密 Begin of Upload Begin of HTTP ErrorFlask Begin of PHP R!C!E! EasyLogin week2 游戏高手 include 0。0 ez_sql Unserialize&#xff1f; Upload again! R!!C!!E!! week3 Include &#x1f350; medium_sql POP Gadget GenShin wee…
阅读更多...
jvm调优的命令和工具总结与分析

jvm调优的命令和工具总结与分析

目录 1 前置启动程序 2 Jmap查看内存信息 2.1 jmap ‐histo查看历史实例信息 2.2 jmap ‐heap查看堆信息&#xff1a; 2.3 jmap ‐dump导出堆内存信息 2 Jstack查找死锁 2.1 用jstack加进程id查找死锁 2.2 还可以用jvisualvm自动检测死锁 3 Jinfo查看参数配置值 3.1 …
阅读更多...
Hadoop1X，Hadoop2X和hadoop3X有很大的区别么？

Hadoop1X，Hadoop2X和hadoop3X有很大的区别么？

Hadoop的演进从Hadoop 1到Hadoop 3主要是为了提供更高的效率、更好的资源管理、更高的可靠性以及对更多数据处理方式的支持。下面是Hadoop 1, Hadoop 2, 和 Hadoop 3之间的主要区别和演进的原因&#xff1a; Hadoop 1 特点&#xff1a; 主要包括两大核心组件&#xff1a;HDFS&a…
阅读更多...
kettle从入门到精通 第五十三课 ETL之kettle MQTT/RabbitMQ consumer实战

kettle从入门到精通 第五十三课 ETL之kettle MQTT/RabbitMQ consumer实战

1、上一节课我们学习了MQTT producer 生产者步骤&#xff0c;MQTT consumer消费者步骤。该步骤可以从支持MRQTT协议的中间件获取数据&#xff0c;该步骤和kafka consumer 一样可以处理实时数据交互&#xff0c;如下图所示&#xff1a; 2、双击步骤打开MQTT consumer 配置窗口&a…
阅读更多...
sso-oauth2单点登录功能笔记

sso-oauth2单点登录功能笔记

场景&#xff1a;最近公司2个系统需要做单点登录&#xff0c;A系统作为服务器&#xff0c;认证方式是sso-oauth2方式&#xff0c;B系统作为客户端&#xff0c;token方式是ta-token&#xff0c;先来张sso-oauth2认证方式的图 前置准备工作 第一步&#xff1a;要确认谁是服务提…
阅读更多...
Python 全栈安全（一）

Python 全栈安全（一）

原文&#xff1a;annas-archive.org/md5/712ab41a4ed6036d0e8214d788514d6b 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 前言 序言 多年前&#xff0c;我在亚马逊搜索了一本基于 Python 的应用程序安全书。我以为会有多本书可供选择。已经有了很多其他主题的 Pyt…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023