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

news2025/1/24 5:34:18

目录

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.coloradmin.cn/o/996178.html

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

相关文章

c语言练习47：模拟实现strncat

c语言练习47：模拟实现strncat

模拟实现strncat 代码&#xff1a; #include<stdio.h> #include<assert.h> char* my_strncat(char* dest, const char* src, size_t num) {assert(dest ! NULL && src ! NULL);char* ret dest;while (num--) {*dest *src;}return ret; } int main() {ch…
阅读更多...
【Linux】进程间通信（匿名管道、命名管道、共享内存等，包含代码示例）

【Linux】进程间通信（匿名管道、命名管道、共享内存等，包含代码示例）

进程间通信 前言正式开始理解进程间通信一些标准管道原理管道演示匿名管道代码演示原理进程池管道大小 命名管道演示代码分配消息例子 systemV共享内存共享内存流程获取key值shm的创建shm的删除关联去关联完整流程演示开始通信 systemV 消息队列基于对共享内存的理解几个概念 前…
阅读更多...
mysql的索引语法

mysql的索引语法

创建索引 CREATE [ UNIQUE | FULLTEXT ] INDEX index_name ON table_name ( index_col_name,... ) ; 普通索引 name字段为姓名字段&#xff0c;该字段的值可能会重复&#xff0c;为该字段创建索引。 CREATE INDEX idx_user_name ON tb_user(name); 唯一索引 phone手机…
阅读更多...
我的网站每个月给我带来了6W美元收入

我的网站每个月给我带来了6W美元收入

2014 年，我开始在东京寻找软件工程工作。 但我不想要任何旧工作。我想要一个——因为没有更好的术语——实际上很好的。 因为我听说过一些关于日本科技行业的可怕事情。过度劳累的故事。低工资。令人畏惧的日本“黑公司”。 但尽管有这些故事，我相信也有优秀的科技公司。于…
阅读更多...
windows各种运行库一次性解决方法

windows各种运行库一次性解决方法

3DM游戏运行库合集离线安装包&#xff08;1G&#xff09; - 『精品软件区』 - 吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cnhttps://www.52pojie.cn/thread-1308401-1-1.html新的电脑系统上,运行一个软件,报缺少.dll,不是少了.net 就是少了 directx,vc runtime,下载…
阅读更多...
黑马头条学习中的一些问题

黑马头条学习中的一些问题

1.在day3&#xff0c;上传图片时候&#xff0c;有一个错误&#xff0c;我完成代码逻辑后&#xff0c;启动进行上传时&#xff0c;发现报错了&#xff0c;报的是空指针异常 开始我认为微服务之间使用threadlocal是无法进行数据共享的&#xff0c;但是我有顺着老师讲的思路走了一…
阅读更多...
Navicat15 /16 已连接数据库密码解密

Navicat15 /16 已连接数据库密码解密

前言 相信你会遇到使用navicat忘记已连接数据密码的问题吧&#xff01;实在是&#xff0c;密码太多容易忘记&#xff01;&#xff01;&#xff01; 感谢大佬as_dmy的文章如何查看navicat已连接数据库密码&#xff0c;然后才有了此文&#xff01; 1.0版本需要手动查看导出的co…
阅读更多...
GET 和 POST请求的区别是什么

GET 和 POST请求的区别是什么

GET和POST是HTTP请求的两种基本方法&#xff0c;要说它们的区别&#xff0c;接触过WEB开发的人都能说出一二。 最直观的区别就是GET把参数包含在URL中&#xff0c;POST通过request body传递参数。 你轻轻松松的给出了一个“标准答案”&#xff1a; GET在浏览器回退时是无害的…
阅读更多...
互联网真实赚钱平台有哪些？分享六大类正规靠谱的线上平台

互联网真实赚钱平台有哪些？分享六大类正规靠谱的线上平台

互联网已经和我们的生活密不可分&#xff0c;我们每天都穿梭在网络的世界里&#xff0c;感受着信息的洪流&#xff0c;但同时也感受到了贫富差距的日益拉大。然而&#xff0c;互联网的蓬勃发展也为我们提供了一个机会——通过在线平台赚取真实的收入。 尽管在这个领域中存在着许…
阅读更多...
QUIC协议连接详解(二)

QUIC协议连接详解(二)

目录 一&#xff1a;RTT解释 二&#xff1a;QUIC 1-RTT连接 三&#xff1a;QUIC 0-RTT连接 一&#xff1a;RTT解释 在介绍QUIC协议的连接之前先科普一下什么是RTT。RTT是Round-Trip Time的英文缩写&#xff0c;翻译过来就是一趟来回的时间即往返时延。时间计算即从发送方发送…
阅读更多...
工作每天都在用的 DNS 协议，你真的了解么？

工作每天都在用的 DNS 协议，你真的了解么？

♥ 前 言 我们经常访问一些网址的时候&#xff0c;浏览器里输入类似于 www.baidu.com 这样的地址&#xff0c;那么在浏览器里输入这个地址---> 百度服务器给我们返回这个百度的页面&#xff0c;中间的过程是什么样的呢&#xff1f; 带着这个问题&#xff0c;我们一起来解…
阅读更多...
答题题库模拟考试流量主小程序源码开发

答题题库模拟考试流量主小程序源码开发

一款专门为练题开发的题库答题考试模拟小程序&#xff0c;适用于多种用户群体&#xff0c;驾照考题、各种职业考试、英语四六级等等。接入流量主功能&#xff0c;运营方可以更灵活的配置收益方式。 小程序核心功能介绍&#xff1a; 1、多题型支持&#xff0c;判断题、单选题…
阅读更多...
记一次Nacos线程数飙升排查

记一次Nacos线程数飙升排查

近日有个项目用到了Nacos做注册中心。运行一段时间发现Nacos服务的线程数达到了1k。这肯定是不正常的。 环境&#xff1a; Nacos-server 2.2.3docker-compose编排部署 nacos:image: "nacos/nacos-server:latest"environment:- JAVA_OPTS-XX:MetaspaceSize128m -XX:…
阅读更多...
PLC-Recorder离线分析软件Ana里为什么不能显示变量的编号？

PLC-Recorder离线分析软件Ana里为什么不能显示变量的编号？

在PLC-Recorder在线软件里&#xff0c;大家可以在曲线上找到变量的编号&#xff08;由通道编号、变量类型、同类型序号组成&#xff09;。这个编号也是各软件识别变量的唯一标识。在变量和PLC很多时&#xff0c;可以方便地找到对应的PLC&#xff0c;如下&#xff1a; 有朋友问&…
阅读更多...
【QGIS】Openstreetmap获取路网数据

【QGIS】Openstreetmap获取路网数据

目录 一、从Openstreetmap获取路网数据 1.1 根据城市名获取对应ID 1.2 根据城市ID获取路网数据 二、下载安装QGIS 2.1 下载QGIS 2.2 安装QGIS 2.3 页面语言设置 三、将获取到的osm文件拖入QGIS 一、从Openstreetmap获取路网数据 在大多数研究中&#xff0c;经常使用到的…
阅读更多...
类欧笔记存档

类欧笔记存档

电子版&#xff1a;https://blog.csdn.net/zhangtingxiqwq/article/details/132718582
阅读更多...
【JavaScript手撕代码】instanceof

【JavaScript手撕代码】instanceof

目录 instanceof手写详解 instanceof 手写 /* * param {Object} obj 需要判断的数据 * param {Object} constructor 这里请注意 * return {Boolean} **/ function myInstanceof(obj, constructor){if (![function, object].includes(typeof obj) || obj null) return falsel…
阅读更多...
第 362 场 LeetCode 周赛题解

第 362 场 LeetCode 周赛题解

A 与车相交的点 数据范围小直接暴力枚举 class Solution { public:int numberOfPoints(vector <vector<int>> &nums) {unordered_set<int> vis;for (auto &p: nums)for (int i p[0]; i < p[1]; i)vis.insert(i);return vis.size();} };B 判断能否…
阅读更多...
操作系统之课后习题——引论

操作系统之课后习题——引论

&#xff08;一&#xff09;简答题 1.在计算机系统上配置OS的目标是什么&#xff1f;作用主要表现在哪几个方面&#xff1f; 答&#xff1a; 在计算机系统上配置OS&#xff0c;主要目标是实现&#xff1a;方便性、有效性、可扩充性和开放性&#xff1b; OS的作用主要表现在以下…
阅读更多...
腾讯云CVM标准型S4服务器性能测评_CPU_网络收发包PPS详解

腾讯云CVM标准型S4服务器性能测评_CPU_网络收发包PPS详解

腾讯云服务器CVM标准型S4性能测评&#xff0c;包括S4云服务器CPU型号、处理器主频、网络收发包PPS、队列数、出入内网带宽能力性能参数说明&#xff0c;标准型 S4 实例是次新一代的标准型实例&#xff0c;CPU采用2.4GHz主频的Intel Xeon Skylake 6148处理器&#xff0c;腾讯云百…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023