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

2024-04-22 07:44
文章标签 02 css 优先级 方式 前端 继承 frontend 四种 引入 选择器 速成 大件

本文主要是介绍前端三大件速成 02 CSS（1）CSS是什么、CSS的四种引入方式、CSS的选择器和优先级、继承，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 一、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等。

这篇关于前端三大件速成 02 CSS（1）CSS是什么、CSS的四种引入方式、CSS的选择器和优先级、继承的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/925182。

相关文章

Linux之systemV共享内存方式

Linux之systemV共享内存方式

《Linux之systemV共享内存方式》：本文主要介绍Linux之systemV共享内存方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、工作原理二、系统调用接口1、申请共享内存（一）key的获取（二）共享内存的申请2、将共享内存段连接到进程地址空间3、将
阅读更多...
Maven中引入 springboot 相关依赖的方式(最新推荐)

Maven中引入 springboot 相关依赖的方式(最新推荐)

《Maven中引入springboot相关依赖的方式(最新推荐)》：本文主要介绍Maven中引入springboot相关依赖的方式(最新推荐),本文给大家介绍的非常详细,对大家的学习或工作具有... 目录Maven中引入 springboot 相关依赖的方式1. 不使用版本管理（不推荐）2、使用版本管理（推
阅读更多...
C#使用StackExchange.Redis实现分布式锁的两种方式介绍

C#使用StackExchange.Redis实现分布式锁的两种方式介绍

《C#使用StackExchange.Redis实现分布式锁的两种方式介绍》分布式锁在集群的架构中发挥着重要的作用,：本文主要介绍C#使用StackExchange.Redis实现分布式锁的... 目录自定义分布式锁获取锁释放锁自动续期StackExchange.Redis分布式锁获取锁释放锁自动续期分布式
阅读更多...
Java对象转换的实现方式汇总

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》：本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射（Manual Mapping）2. Builder模式3. 工具类辅助映
阅读更多...
Spring Boot读取配置文件的五种方式小结

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一：使用 @Value 注解读取配置方式二
阅读更多...
JAVA保证HashMap线程安全的几种方式

JAVA保证HashMap线程安全的几种方式

《JAVA保证HashMap线程安全的几种方式》HashMap是线程不安全的,这意味着如果多个线程并发地访问和修改同一个HashMap实例,可能会导致数据不一致和其他线程安全问题,本文主要介绍了JAV... 目录1. 使用 Collections.synchronizedMap2. 使用 Concurren
阅读更多...
C# foreach 循环中获取索引的实现方式

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》：本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代
阅读更多...
将Java程序打包成EXE文件的实现方式

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》：本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2