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

相关文章

Docker镜像修改hosts及dockerfile修改hosts文件的实现方式

Docker镜像修改hosts及dockerfile修改hosts文件的实现方式

《Docker镜像修改hosts及dockerfile修改hosts文件的实现方式》：本文主要介绍Docker镜像修改hosts及dockerfile修改hosts文件的实现方式,具有很好的参考价... 目录docker镜像修改hosts及dockerfile修改hosts文件准备 dockerfile 文
阅读更多...
Linux中的计划任务(crontab)使用方式

Linux中的计划任务(crontab)使用方式

《Linux中的计划任务(crontab)使用方式》：本文主要介绍Linux中的计划任务(crontab)使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、前言1、linux的起源与发展2、什么是计划任务（crontab）二、crontab基础1、cro
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...
Win11安装PostgreSQL数据库的两种方式详细步骤

Win11安装PostgreSQL数据库的两种方式详细步骤

《Win11安装PostgreSQL数据库的两种方式详细步骤》PostgreSQL是备受业界青睐的关系型数据库,尤其是在地理空间和移动领域,：本文主要介绍Win11安装PostgreSQL数据库的... 目录一、exe文件安装 （推荐）下载安装包1. 选择操作系统2. 跳转到EDB（PostgreSQL 的
阅读更多...
前端高级CSS用法示例详解

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交
阅读更多...
Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2