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文件样式的计算机语言:包含对字体.颜色.边距. ...
随机推荐
- MYSQL 是如何保证binlog 和redo log同时提交的？
MYSQL 一个事务在提交的时候能够保证binlog和redo log是同时提交的,并且能在宕机恢复后保持binlog 和redo log的一致性. 先来看看什么是redo log 和binlog,以 ...
- Feign调用远程服务时传递Cookie信息
@Configuration public class TtpfFeignConfig { @Bean public RequestInterceptor requestInterceptor(){/ ...
- 详解SSL证书系列(5)SSL证书为什么不能好多年签一次呢
上一篇介绍了详解SSL证书系列(4)免费的SSL证书和收费的证书有什么区别,这一篇我们继续了解一下我们申请的SSL证书为什么不能好多年签一次呢,这样不是更省事吗? SSL证书最多只能签发一年,一年到期 ...
- 记录--iview 使用爬坑
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前段时间公司需要开发一个后台管理系统,时间比较急迫,一两天时间.想一想自己一点一点的搭建起来可能性不太大,就想着有没有现成的可以改一改,就 ...
- KingbaesES数据库查看阻止vacuum的常用语句
KingbaesES数据库中遇到表膨胀,有时碰到vacuum失效的场景.最常见的原因如下. 以下测试基于有关analyze和autovacuum的默认阈值触发条件. 1.autovacuum是否运行, ...
- KingbaseES V8R6 集群运维案例 -- 禁止普通用户su到root
案例说明: 在集群管理中,会使用到root权限(如ip.aring命令等),为安全需要,有的生产环境禁止普通用户su切换到root,本案例测试了禁止普通用户su切换到root对集群管理带来的影响. 集 ...
- Linux系统上安装jdk（CentOS 7 ）
目录 001. 搜索jdk安装包 002. 下载安装jdk1.8 003. 配置环境变量 004. 验证是否配置成功 001. 搜索jdk安装包 yum search java | grep jdk ...
- 【Java面试题】Mybatis
五.MyBatis 40)谈谈 MyBatis Mybatis 是一个半自动化的 ORM 框架,它对 jdbc 的操作数据库的过程进行封装,使得开发者只需要专注于 SQL 语句本身,而不用去关心注册驱 ...
- Scala 不可变列表List
1 package chapter07 2 3 object Test04_List { 4 def main(args: Array[String]): Unit = { 5 // 1. 创建一个L ...
- 实现一个简单的echarts词云图PythonFlask
cloud.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta char ...