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

相关文章

SQL Server配置管理器无法打开的四种解决方法

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一：桌面图标进入方法二：运行窗口进入检查版本号对照表php方法三：查找文件路径方法四：检查 S
阅读更多...
java实现docker镜像上传到harbor仓库的方式

java实现docker镜像上传到harbor仓库的方式

《java实现docker镜像上传到harbor仓库的方式》：本文主要介绍java实现docker镜像上传到harbor仓库的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 前 言2. 编写工具类2.1 引入依赖包2.2 使用当前服务器的docker环境推送镜像2.2
阅读更多...
C++11委托构造函数和继承构造函数的实现

C++11委托构造函数和继承构造函数的实现

《C++11委托构造函数和继承构造函数的实现》C++引入了委托构造函数和继承构造函数这两个重要的特性,本文主要介绍了C++11委托构造函数和继承构造函数的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录引言一、委托构造函数1.1 委托构造函数的定义与作用1.2 委托构造函数的语法1.3 委托构造函
阅读更多...
springboot项目打jar制作成镜像并指定配置文件位置方式

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》：本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文
阅读更多...
Java 继承和多态的作用及好处

Java 继承和多态的作用及好处

《Java继承和多态的作用及好处》文章讲解Java继承与多态的概念、语法及应用,继承通过extends复用父类成员,减少冗余；多态实现方法重写与向上转型,提升灵活性与代码复用性,动态绑定降低圈复杂度... 目录1. 继承1.1 什么是继承1.2 继承的作用和好处1.3 继承的语法1.4 子类访问父类里面的成
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2