【JavaEE】_CSS引入方式与选择器

目录

1. 基本语法格式

2. 引入方式

2.1 内部样式

2.2 内联样式

2.3 外部样式

3. 基础选择器

3.1 标签选择器

3.2 类选择器

3.3 ID选择器

4. 复合选择器

4.1 后代选择器

4.2 子选择器

4.3 并集选择器

4.4 伪类选择器

1. 基本语法格式

选择器+若干属性声明

2. 引入方式

2.1 内部样式

使用style标签，直接把CSS写到HTML文件中：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{/* {}中编写CSS属性，可以写一个或多个每个属性都是一个键值对，键和值之间用:分割，键值对之间用;分割每个键值对既可独占一行，也可不独占一行*/color:green;font-size: 30px;}</style>
</head>
<body><p>这是一个段落</p>
</body>
</html>

注：style标签可以编写在代码的任何位置：head标签中可以，body标签中也可；

2.2 内联样式

使用style属性，针对指定的元素设置样式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><p style="color:green; font-size: 40px;">这是一个段落</p><p>这是另一个段落</p>
</body>
</html>

注：（1）不需要写选择器，直接写属性键值对，此时只对当前元素生效；

（2）内联样式的优先级高于外部样式的优先级：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color:red;}</style>
</head>
<body><p style="color:green; font-size: 40px;">这是一个段落</p><p>这是另一个段落</p>
</body>
</html>

2.3 外部样式

外部样式就是把CSS代码单独作为一个CSS文件，再通过link属性，令HTML引入该CSS文件：

（1）在当前html文件所在文件夹下创建css文件，名为：STYLE.css：

p{color:blue;font-size: 25px;
}

（2）在code2.html文件中引用CSS文件并运行如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="STYLE.css">
</head>
<body><p>这是一个段落</p><p>这是另一个段落</p>
</body>
</html>

根据目录打开文件：

注：外部样式是在实际开发中最常见的编写CSS的方式，这种方式可以有效实现HTML和CSS分离开来，相互不影响。（为演示简单方便，教学中多采用内部样式）

3. 基础选择器

3.1 标签选择器

在大括号前写标签名字，表示选中当前页面中所有的指定标签；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color:goldenrod;font-size: 25px;}</style>
</head>
<body><p>这是第一个段落</p><div>这是一个div</div><p>这是第二个段落</p>
</body>
</html>

根据目录打开文件：

所有的p标签都被设置了

3.2 类选择器

可以创建CSS类，手动指定哪些元素应用这个类：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><style>/* 定义一个CSS类，类名为.one */.one{color:brown;}.two{color:darkgreen;}.three{color:cornflowerblue;}.four{font-size: 25px;}</style><div class="one">这是第一个div</div><div class="two">这是第二个div</div><div class="one">这是第三个div</div><div class="three four">这是第四个div</div>
</body>
</html>

注：（1）此处的类与面向对象的类无关，CSS的类是一组属性的集合，方便其他地方引用；

（2）在CSS中，定义类名必须以.开头，但在body对应段落中引用类时不需要再加.；

（3）一个类可以被一个元素引用，也可以被多个元素引用；

        一个元素可以引用一个类，也可以引用多个类；

（4）CSS全称为Cascading Style Sheets，即：层叠样式表，即一个元素可以被应用多组样式的，这些样式就像层层叠加一样，在网页中打开DOM资源管理器选中第四个div查看样式：

即第四个div最终效果是由font-size和color两个属性叠加起来的综合效果；

3.3 ID选择器

HTML页面中的每个元素都可以设置一个唯一的id，作为元素的身份标识：给元素安排id后，就可以通过id来选中对应元素：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#firstDiv{color:brown;}</style>
</head>
<body><div id="firstDiv">这是一个div</div><div id="secondDiv">这是另一个div</div>
</body>
</html>

注：（1）同一个页面中元素的id必须是唯一的，跨页面可以存在重名的id；

（2）对于类选择器，允许令多个元素应用同一个类的；

        对于ID选择器，则只能针对唯一的元素生效；

4. 复合选择器

以上三选择器均属于简单的基础选择器，除此之外，CSS还支持一些更复杂的复合选择器，即组合基础选择器；

4.1 后代选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><style>ul li{color:brown;}.one li{color:forestgreen;}</style><ol class="one"><li>aaa</li><li>bbb</li><li>ccc</li></ol><ol><li>aaa</li><li>bbb</li><li>ccc</li></ol><ul><li>aaa</li><li>bbb</li><li>ccc</li></ul>
</body>
</html>

根据目录打开文件： 

 

注：（1）写法含义为：先去页面中查询所有的ul，再在这些ul中查询所有的li，此时页面中ol中的li是不会被选中的；

（2）li只要是ul的后代即可，不只是子元素，孙代元素亦可；

（3）后代选择器可以将多个简单基础选择器进行组合，可以是标签、类、id选择器的任意组合；

4.2 子选择器

子选择器也是将多个基础选择器进行组合，但子选择器只找匹配的子元素，不找孙代元素，针对性更强：

格式为：选择器1>选择器2{

属性...

}

比如：基于以下body内代码：

    <div class="one"><!-- 链接1元素是one的子元素 --><a href="#">链接1</a><!-- p标签是one的子元素 --><p><!-- 链接2是one的孙子元素 --><a href="#">链接2</a></p></div>

分别使用后代选择器表示法（空格）与子选择器表示法（>）：

（1）后代选择器：

    <style>.one a{color:red;}</style>

根据目录打开文件：

子元素与孙代元素均被选择器选中，变为红色；

（2）子选择器：

    <style>.one>a{color:red;}</style>

子元素被选中，变为红色；

孙代元素没有被选中，仍旧为默认色；

4.3 并集选择器

语法格式为：

选择器1, 选择器2{

属性...

}

含义为：既针对选择器1生效，又对选择器2生效，即多组选择器应用了同样的样式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.two{font-size: 25px;}.three{font-size: 25px;}</style>
</head>
<body><div class="one"><a href="#" class="two">链接1</a><p><a href="#" class="three">链接2</a></p></div>
</body>
</html>

对于以上代码，将two类与three类中的内容字体均设置为25px，可以使用并集选择器实现：

    <style>.two, .three{font-size: 25px;}</style>

 运行结果如下：

4.4 伪类选择器

伪类选择器是复合选择器的一种特殊用法。之前的选择器是选中某个元素，但伪类选择器选中某个元素的某个特定状态；

（1）:hover 鼠标悬停时的状态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one:hover{color:red;font-size: 40px;/* 表示鼠标悬停在内容上时，字体变红且字体变为40像素*/}</style>
</head>
<body><div class="one">这是一个div</div>
</body>
</html>

运行后页面如下：

鼠标未悬停在字体上时：

鼠标悬停在字体上时：

（2）:active 鼠标按下时的状态

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/74736.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【数据结构】AVL树的插入与验证

【数据结构】AVL树的插入与验证

文章目录 一、基本概念1.发展背景2.性质 二、实现原理①插入操作1.平衡因子1.1平衡因子的更新1.1.1树的高度变化1.1.2树的高度不变 2. 旋转2.1左旋2.2右旋2.3右左双旋2.4 左右双旋 ②验证1.求二叉树高度2. 判断是否为AVL树 源码总结 一、基本概念 1.发展背景 普通的二叉搜索树…
阅读更多...
el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)

el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)

el-form表单动态校验 el-form常规校验方式: // 结构部分 <el-form ref"form" :model"form" :rules"rules"><el-form-item label"活动名称: " prop"name" required><el-input v-model"form.name" /…
阅读更多...
2023 最新 Git 分布式版本控制系统介绍和下载安装使用教程

2023 最新 Git 分布式版本控制系统介绍和下载安装使用教程

Git 基本概述 Git 是一个开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或大或小的项目。 集中式和分布式的区别&#xff1f; 最常见的集中式版本控制系统是SVN&#xff0c;版本库是集中放在中央处理器中的&#xff0c;而干活的时候&#xff0c;用的都是自己电…
阅读更多...
第15章_瑞萨MCU零基础入门系列教程之Common I2C总线模块

第15章_瑞萨MCU零基础入门系列教程之Common I2C总线模块

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…
阅读更多...
postman和node.js的使用

postman和node.js的使用

一 nodejs下载 下载链接&#xff1a; nodejs官网&#xff1a; https://nodejs.org/zh-cn/download 我使用的windows .msi安装方式&#xff0c;双击一直下一步就行 当前安装完成后的版本&#xff1a;1.下载 2.安装步骤 下载完成后&#xff0c;双击安装包&#xff0c;开始安装&…
阅读更多...
win10自带wifi共享功能

win10自带wifi共享功能

1、按下【wini】组合键打开windows设置&#xff0c;点击【网络和internet】&#xff1b; 2、按照下图&#xff0c;打开个移动热点&#xff0c;设置名称、密码。
阅读更多...
appium+jenkins实例构建

appium+jenkins实例构建

自动化测试平台 Jenkins简介 是一个开源软件项目&#xff0c;是基于java开发的一种持续集成工具&#xff0c;用于监控持续重复的工作&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件的持续集成变成可能。 前面我们已经开完测试脚本&#xff0c;也使用bat 批处…
阅读更多...
hadoop伪分布模式配置

hadoop伪分布模式配置

1、修改/usr/local/hadoop/etc/hadoop/core-site.xml和/usr/local/hadoop/etc/hadoop/hdfs-site.xml文件 core-site.xml内容 <configuration><property><name>hadoop.tmp.dir</name><value>file:/usr/local/hadoop/tmp</value><descr…
阅读更多...
OpenCV（三十三）：计算轮廓面积与轮廓长度

OpenCV（三十三）：计算轮廓面积与轮廓长度

1.介绍轮廓面积与轮廓长度 轮廓面积&#xff08;Contour Area&#xff09;是指轮廓所包围的区域的总面积。通常情况下&#xff0c;轮廓面积的单位是像素的平方。 轮廓长度&#xff08;Contour Length&#xff09;又称周长&#xff08;Perimeter&#xff09;&#xff0c;表示轮廓…
阅读更多...
C++this指针

C++this指针

本文旨在讲解C中this关键字&#xff0c;以及其相关作用&#xff01; 定义 this 是 C 中的一个关键字&#xff0c;也是一个 const 指针&#xff0c;它指向当前对象&#xff0c;通过它可以访问当前对象的所有成员。 this的介绍 下面来看一下关于this这个关键字的实例&#xff0…
阅读更多...
个人能做股票期权吗？个人期权交易开户条件新规

个人能做股票期权吗？个人期权交易开户条件新规

个人投资者是可以交易股票期权的&#xff0c;不过期权交易通常需要投资者具备一定的投资经验和风险承受能力&#xff0c;因为期权交易涉及较高的风险和复杂性&#xff0c;下文为大家介绍个人能做股票期权吗&#xff1f;个人期权交易开户条件新规的内容。本文来自&#xff1a;期…
阅读更多...
新版edge浏览器读取谷歌浏览器上的历史记录

新版edge浏览器读取谷歌浏览器上的历史记录

上一篇&#xff1a;(3条消息) 新版edge浏览器读取谷歌浏览器上的历史记录_learningbilibili的博客-CSDN博客https://blog.csdn.net/learningbilibili/article/details/123662218 关于上次的读取历史记录的问题是现在的edge浏览器最近的版本更新后出现了每次启动时从 Google Chr…
阅读更多...
堆相关例子-最大线段重合问题

堆相关例子-最大线段重合问题

问题描述 给定很多线段&#xff0c;每个线段都有两个数[start, end]&#xff0c; 表示线段开始位置和结束位置&#xff0c;左右都是闭区间 规定&#xff1a; 1&#xff09;线段的开始和结束位置一定都是整数值 2&#xff09;线段重合区域的长度必须>1 返回线段最多重合…
阅读更多...
【计算机网络】TCP传输控制协议——三次握手

【计算机网络】TCP传输控制协议——三次握手

文章目录 握手的流程常考考点 握手的流程 一开始&#xff0c;客户端和服务端都处于CLOSE状态&#xff0c;先是服务端监听某个端口&#xff0c;处于LISTEN状态。然后客户端主动发起连接SYN&#xff0c;之后处于SYN-SEND状态。服务端收到发起的连接&#xff0c;返回SYN&#xff0…
阅读更多...
Vue中数据可视化关系图展示与关系图分析

Vue中数据可视化关系图展示与关系图分析

Vue中数据可视化关系图展示与关系图分析 数据可视化是现代Web应用程序的重要组成部分之一&#xff0c;它可以帮助我们以图形的方式呈现和分析复杂的数据关系。Vue.js是一个流行的JavaScript框架&#xff0c;它提供了强大的工具来构建数据可视化应用。本文将介绍如何使用Vue.js…
阅读更多...
系统架构设计专业技能 · 计算机组成与结构

系统架构设计专业技能 · 计算机组成与结构

现在的一切都是为将来的梦想编织翅膀&#xff0c;让梦想在现实中展翅高飞。 Now everything is for the future of dream weaving wings, let the dream fly in reality. 点击进入系列文章目录 系统架构设计高级技能 计算机组成与结构 一、计算机结构1.1 CPU 组成1.2 冯诺依曼…
阅读更多...
云备份——服务端客户端联合测试

云备份——服务端客户端联合测试

一&#xff0c;准备工作 服务端清空备份文件信息、备份文件夹、压缩文件夹 客户端清空备份文件夹 二&#xff0c;开始测试 服务端配置文件 先启动服务端和客户端 向客户端指定文件夹放入稍微大点的文件&#xff0c;方便后续测试断点重传 2.1 上传功能测试 客户端自动上传成功…
阅读更多...
算法-88.合并两个有序数组-⭐

算法-88.合并两个有序数组-⭐

给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff1a;最终&#xff0c;合并后数组…
阅读更多...
js中添加屏蔽F12 审查元素、屏蔽开发者工具、屏蔽右键菜单、屏蔽剪切、屏蔽选中操作

js中添加屏蔽F12 审查元素、屏蔽开发者工具、屏蔽右键菜单、屏蔽剪切、屏蔽选中操作

在看某个网站时&#xff0c;看到一段话想复制一下&#xff0c;结果复制不了。想打开F12看看元素进行复制&#xff0c;也不行&#xff0c;没有反应。最后通过打开开发者工具看看&#xff0c;结果一打开就跳到about:blank。 看到这操作一脸懵逼&#xff0c;小样的&#xff0c;还有…
阅读更多...
【100天精通Python】Day59：Python 数据分析_Pandas高级功能-多层索引创建访问切片和重塑操作，pandas自定义函数和映射功能

【100天精通Python】Day59：Python 数据分析_Pandas高级功能-多层索引创建访问切片和重塑操作，pandas自定义函数和映射功能

目录 1 多层索引&#xff08;MultiIndex&#xff09; 1.1 创建多层索引 1.1.1 从元组创建多层索引 1.1.2 使用 set_index() 方法创建多层索引 1.2 访问多层索引数据 1.3 多层索引的层次切片 1.4 多层索引的重塑 2 自定义函数和映射 2.1 使用 apply() 方法进行自定义函…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023