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文件样式的计算机语言:包含对字体.颜色.边距. ...
随机推荐
- 【目标检测】Faster R-CNN算法实现
一.前言 继2014年的R-CNN.2015年的Fast R-CNN后,2016年目标检测领域再次迎来Ross Girshick大佬的神作Faster R-CNN,一举解决了目标检测的实时性问题.相较 ...
- JAVA 相关
1. google guava cache 2. presto 3. loadingcache 4. aspect
- JS（循环）
一 for循环 在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件.由循环体及循环的终止条件组成的语句,被 称之为循环语句 1 语法结构 for循环主要用于把某些代码 ...
- Bitmap优化详谈
目录介绍 01.如何计算Bitmap占用内存 1.1 如何计算占用内存 1.2 上面方法计算内存对吗 1.3 一个像素占用多大内存 02.Bitmap常见四种颜色格式 2.1 什么是bitmap 2. ...
- 三维模型3DTile格式轻量化在网络传输中的重要性分析
三维模型3DTile格式轻量化在网络传输中的重要性分析 三维模型3DTile格式轻量化在网络传输中扮演了至关重要的角色.随着数字化和虚拟化技术的发展,越来越多的应用需要通过网络来获取和分享大规模三维地 ...
- Python基于Excel生成矢量图层及属性表信息：ArcPy
本文介绍基于Python中ArcPy模块,读取Excel表格数据并生成带有属性表的矢量要素图层,同时配置该图层的坐标系的方法. 1 任务需求 首先,我们来明确一下本文所需实现的需求. 现有 ...
- MapReduce的基础知识
1.什么是MapReduce Hadoop MapReduce 是一个 分布式计算框架,用于轻松编写分布式应用程序,这些应用程序以可靠,容错的方式并行处理大型硬件集群(数千个节点)上的大量数据(多TB ...
- C＃OpenCvSharp YOLO v3 Demo
效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.D ...
- SQLServer递归触发器在KES中的一次改造分析
文章概要: 某项目将数据从 SQLSERVER 迁移到 KES.其中SQLSERVER中触发器用到了 TRIGGER_NESTLEVEL() 函数,KES并不能直接支持该函数. 起初在分析该问题时想复 ...
- KingbaseES V8R6运维案例之---wal日志解析DDL操作
案例说明: 通过sys_waldump解析DDL操作,获取DDL操作的日志条目具体内容. 适用版本: KingbaseES V8R3/R6 一.DDL事务操作对应的wal日志文件 # 查看当前on ...