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文件样式的计算机语言:包含对字体.颜色.边距. ...
随机推荐
- C++学习笔记之进阶编程
目录 进阶编程 STL(Standard Template Library) 容器(container) 仿函数(functor) 算法(algorithm) transform 查找 全排列 迭代器 ...
- QT 使用QPixmap自定义光标 缩放图像模糊问题
QT中定义光标可以使用 Qt::CursorShape 预定义 的光标,也可以使用 QBitmap 和 QPixmap 自己绘制光标.QBitmap 只有黑白2色,QPixmap可以绘制彩色光标.使用 ...
- RTMP录屏直播屏幕数据获取与MediaCodec编码
目录 前言 RTMP直播实现流程 视频采集--MediaProjection 编码--MediaCodec 音频采集--AudioRecord RTMP音频包数据 RTMP视频数据 前言 本文介绍的是 ...
- 专访虚拟人科技：如何利用 3DCAT 实时云渲染打造元宇宙空间
自古以来,人们对理想世界的探索从未停止,而最近元宇宙的热潮加速了这一步伐,带来了许多新的应用.作为元宇宙的关键入口,虚拟现实(VR)将成为连接虚拟和现实的桥梁.苹果发布的VISION PRO头戴设备将 ...
- View事件机制分析
目录介绍 01.Android中事件分发顺序 1.1 事件分发的对象是谁 1.2 事件分发的本质 1.3 事件在哪些对象间进行传递 1.4 事件分发过程涉及方法 1.5 Android中事件分发顺序 ...
- Redis数据库安装与使用总结
Redis语句总结 一.基本概念 Redis 全称: Remote Dictionary Server(远程字典服务器)的缩写,以字典结构存储数据,并允许其他应用通过TCP协议读写字典中的内容. 使用 ...
- 恶意软件开发（五）Linux shellcoding
什么是shellcode? Shellcode通常指的是一段用于攻击的机器码(二进制代码),可以被注入到目标计算机中并在其中执行.Shellcode 的目的是利用目标系统的漏洞或弱点,以获取系统控制权 ...
- Jest快速使用指南
1. 引言 写了几个函数,怎么知道写得对不对呢? 可以通过测试函数,当然开发中测试的意义不只是这个 Jest是常用的JavaScript测试框架 官网为:Jest · Delightful JavaS ...
- uni-app开发经验分享二十二： uni-app大转盘思路解析
最近在研究uni-app,制作了一个很有意思的集合项目demo,这里给大家分享下大转盘的前端设计思路 需求案例:大转盘抽奖 线上demo查看: 案例效果: 制作思路: 前端大转盘使用css3动画来做, ...
- 如何使用 JavaScript 导入和导出 Excel
前言 在现代的Web应用开发中,与Excel文件的导入和导出成为了一项常见而重要的任务.无论是数据交换.报告生成还是数据分析,与Excel文件的交互都扮演着至关重要的角色.本文小编将为大家介绍如何在熟 ...