前端三大件速成 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。

相关文章

SpringBoot中@Value注入静态变量方式

SpringBoot中@Value注入静态变量方式

《SpringBoot中@Value注入静态变量方式》SpringBoot中静态变量无法直接用@Value注入,需通过setter方法,@Value(${})从属性文件获取值,@Value(#{})用... 目录项目场景解决方案注解说明1、@Value("${}")使用示例2、@Value("#{}"php
阅读更多...
SpringBoot分段处理List集合多线程批量插入数据方式

SpringBoot分段处理List集合多线程批量插入数据方式

《SpringBoot分段处理List集合多线程批量插入数据方式》文章介绍如何处理大数据量List批量插入数据库的优化方案：通过拆分List并分配独立线程处理,结合Spring线程池与异步方法提升效率... 目录项目场景解决方案1.实体类2.Mapper3.spring容器注入线程池bejsan对象4.创建
阅读更多...
Vue和React受控组件的区别小结

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一：直接修改事件参数写法二：通过ref引用 DOMVu
阅读更多...
Java实现将HTML文件与字符串转换为图片

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现：html 转图片完整代码场景 1：转换本地 HTML 文件为图片场景 2：转换 H
阅读更多...
C#使用Spire.Doc for .NET实现HTML转Word的高效方案

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1
阅读更多...
Vue3绑定props默认值问题

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1：使用 defineProps 定义 Props步骤2：设置默认值总结前言使用T
阅读更多...
HTTP 与 SpringBoot 参数提交与接收协议方式

HTTP 与 SpringBoot 参数提交与接收协议方式

《HTTP与SpringBoot参数提交与接收协议方式》HTTP参数提交方式包括URL查询、表单、JSON/XML、路径变量、头部、Cookie、GraphQL、WebSocket和SSE,依据... 目录HTTP 协议支持多种参数提交方式，主要取决于请求方法(Method)和内容类型(Content-Ty
阅读更多...
使用shardingsphere实现mysql数据库分片方式

使用shardingsphere实现mysql数据库分片方式

《使用shardingsphere实现mysql数据库分片方式》本文介绍如何使用ShardingSphere-JDBC在SpringBoot中实现MySQL水平分库,涵盖分片策略、路由算法及零侵入配置... 目录一、ShardingSphere 简介1.1 对比1.2 核心概念1.3 Sharding-Sp
阅读更多...
Spring创建Bean的八种主要方式详解

Spring创建Bean的八种主要方式详解

《Spring创建Bean的八种主要方式详解》Spring（尤其是SpringBoot）提供了多种方式来让容器创建和管理Bean,@Component、@Configuration+@Bean、@En... 目录引言一、Spring 创建 Bean 的 8 种主要方式1. @Component 及其衍生注解
阅读更多...
python中的显式声明类型参数使用方式

python中的显式声明类型参数使用方式

《python中的显式声明类型参数使用方式》文章探讨了Python3.10+版本中类型注解的使用,指出FastAPI官方示例强调显式声明参数类型,通过|操作符替代Union/Optional,可提升代... 目录背景python函数显式声明的类型汇总基本类型集合类型Optional and Union(py
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2