3.CSS三种基本选择器
三种选择器的优先级：
id选择器 > class选择器 > 标签选择器
1.标签选择器：会选择到页面上所有的该类标签的元素
格式：
标签{}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>标签选择器</title>
6 <style>
7 /*标签选择器，会选择到页面上所有的这个标签的元素*/
8 h1{
9 color: #66fd01;
10 background:#3cbda6;
11 border-radius: 23px;
12 }
13 p{
14 font-size: 23px;
15 }
16 </style>
17 </head>
18 <body>
19 <h1>学习java</h1>
20 <h1>你今天学习了吗？</h1>
21 <p>听网课学习css</p>
22 </body>
23 </html>
2.类选择器：可以多个标签归类，是同一个class,可以复用,可以跨标签
格式:
.class的名称{}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>类选择器</title>
6 /*类选择器的格式
7 .class的名称{}
8 优点：可以多个标签归类，是同一个class,可以复用,可以跨标签
9 */
10 <style>
11 .lm{
12 color: coral;
13 }
14 .lz{
15 color: hotpink;
16 }
17 </style>
18
19 </head>
20 <body>
21 <h1 class="lm">我是标题1</h1>
22 <h1 class="lz">我是标题2</h1>
23 <h1 class="lm">我是标题3</h1>
24 <p class="lz">另一个标签</p>
25 </body>
26 </html>
3.id选择器:id必须保证全局唯一，不遵循就近原则
格式:
#id名称{}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>id选择器</title>
6 /*
7 id选择器：id必须保证全局唯一，不遵循就近原则
8 格式: #id名称{}
9 优先级：
10 id选择器 > class选择器 > 标签选择器
11 */
12 <style>
13 #style1{
14 color: #3cbda6;
15 }
16 #style2{
17 color: hotpink;
18 }
19 .lm{
20 color: blue;
21 }
22 h1{
23 color: crimson;
24 }
25 </style>
26 </head>
27 <body>
28 <h1 id="style1" class="lm">标题1</h1>
29 <h1 id="style2">标题2</h1>
30 <h1>标题3</h1>
31 <h1>标题4</h1>
32 </body>
33 </html>
3.CSS三种基本选择器的更多相关文章
- CSS三种写法的优先级
在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- CSS三种样式
CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- 006 CSS三种引入方式
CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
- css三种引入方式以及其优先级的说法
css 三种引入方式 方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用 分号 : ...
- java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）
1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
- 设置css三种方法的优先级
有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...
- CSS三种插入样式表格式
首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距. ...
随机推荐
- Android TextView设置某段文字可点击
初次进入app,需要有个勾选隐私协议的UI,其中的隐私协议文字点击是可跳转到新页面对隐私协议机型展示 这里选择使用Android自带的SpannedString来设置TextView的文字内容即可设置 ...
- [.NET项目实战] Elsa开源工作流组件应用（一）： Elsa工作流简介
Elsa工作流简介 工作流是什么? 引用维基百科中对工作流的解释: 是对工作流程及其各操作步骤之间业务规则的抽象.概括.描述.工作流建模,即将工作流程中的工作如何前后组织在一起的逻辑和规则在计算机中以 ...
- OSI七层协议和TCP/IP五层协议
OSI七层模型概略: OSI 中的层 功能 TCP/IP协议族 应用层 文件传输,电子邮件,文件服务,虚拟终端 HTTP,SMTP,FTP,DNS 表示层 数据压缩,解压,数据加密 无 会话层 解 ...
- 三维模型3DTile格式轻量化压缩必要性分析
三维模型3DTile格式轻量化压缩必要性分析 理解3DTile格式轻量化压缩的必要性,首先需要理解三维模型的复杂性和数据量.三维模型通常包含大量的顶点.面片和纹理信息,这使得其数据量非常大,尤其对于大 ...
- Java 22正式发布，一文了解全部新特性
就在昨晚,Java 22正式发布!该版本提供了 12 项功能增强,其中包括 7 项预览功能和 1 项孵化器功能.它们涵盖了对 Java 语言.API.性能以及 JDK 中包含的工具的改进. 下面就来一 ...
- C++正则表达式 <regex>
一 简介 概括而言,使用正则表达式处理字符串的流程包括: 用正则表达式定义要匹配的字符串的规则, 然后对目标字符串进行匹配, 最后对匹配到的结果进行操作. C++ 的 regex 库提供了用于表示正则 ...
- [Oracle]细节、经验
[版权声明]未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://blog.csdn.net/m0_69908381/article/details/131054454 出自[进步* ...
- C++常见面试题整理
1. CPP编译链接过程 2. new和malloc区别,delete和free区别 3. 指针和引用 4. 左值引用和右值引用 5. const 6. 函数重载 7. 函数调用栈帧开辟过程 8. i ...
- verilog之不常用语句
verilog之不常用语句 前言 verilog是硬件描述语言,其主要特点是针对硬件逻辑的描述:在FPGA上实现时,常用的语句往往和硬件有直接的关联.比如assign,原理图上的连线,如果不省略,应该 ...
- Generalized Focal Loss：Focal loss魔改以及预测框概率分布，保涨点 | NeurIPS 2020
为了高效地学习准确的预测框及其分布,论文对Focal loss进行拓展,提出了能够优化连续值目标的Generalized Focal loss,包含Quality Focal loss和Distrib ...