CSS(一)---【CSS简介、导入方式、八种选择器、优先级】
零.前言
本系列适用于零基础小白，亦或是初级前端工程师提升使用。
知识点较为详细，如果追求非常详细，请移步官方网站或搬运网站。
1.CSS简介
CSS全称：“Cascading Style Sheets”，中文名：“层叠样式表”。
用于定义网页样式和布局的样式表语言。
通过CSS可以指定页面中各个元素的颜色、字体、大小、间距、边框等等样式。
如果HTML是一个房子的骨架，那么CSS就是对房子进行精装修！
2.CSS一般语法
CSS通常由选择器（标签、id、class等）、属性、属性值组成。
需要注意的是：“属性对之间需要用分号隔开”、“属性对是以键：值对的形式出现的”。
例如一个<p>标签选择器：
p{background-color: aqua;font-size: 20px;
}一.CSS的三种导入方式
1.1内部样式表
内部样式表将CSS样式放在HTML文档的<head>标签中，并且使用<style></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><style>p{background-color: aqua;font-size: 20px;}</style>
</head>
<body><p>我的颜色是aqua并且字体大小是20像素</p>
</body>
</html>效果如下：
1.2内联样式
内联样式将CSS样式作为属性嵌入到标签中，并且该样式只对嵌入该CSS样式的标签生效，使用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: brown;font-size: larger;">我的颜色是brown并且字体大小是larger</p>
</body>
</html>
效果：
1.3外部样式表
外部样式表在HTML文档外部创建.CSS文件，并且引入.CSS文件来实现样式表。
例如我们在HTML文档目录下，有一个“style.css”文件：
在该css文件中，有如下样式：
那么我们就可以在HTML文档中输入该style.css文件的路径来导入这个样式表：
使用<link>标签的“href”属性来导入：
<!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="./css/style.css">
</head>
<body><h3>我是使用外部样式表来装饰的h3标签~</h3>
</body>
</html>
效果：
1.4三种导入方式的优先级
优先级从高到低为：
“内联样式 > 内部样式表 > 外部样式表”。
当一个标签同时有上述多种样式时，将默认使用最高优先级的样式来装饰自己。
看下面一个例子：
<!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="./css/style.css"><style>h3{color: aqua;}</style>
</head>
<body><h3 style="color: blue;">我是使用最高优先级样式来装饰的h3标签~</h3>
</body>
</html>
最终效果：
可以看到，<h3>标签被内联样式所修饰。
二.8种选择器【重要】
2.0简介
选择器是使用CSS的基础，不会使用选择器就不会使用CSS。
8种选择器：“元素(标签)选择器”、“类选择器”、“ID选择器”、“通用选择器”、“子元素选择器”、“后代(包含)选择器”、“兄弟(并集)选择器”、“伪类选择器”。
选择器常在“内部样式表”、“外部样式表”中使用，内联样式默认就是“ID选择器”。
选择器的格式：
2.1元素(标签)选择器
顾名思义，该选择器会对所有的标签进行一个装饰，例如我们写了一个<p>标签的选择器，那么所有的<p>标签都会被这个选择器所修饰。
用法：
标签名{
属性:属性值;
属性:属性值;
.......
}
<!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{background-color: aqua;font-size: larger;}</style>
</head>
<body><p>这是一个标签选择器示例</p><p>这还是一个标签选择器示例</p>
</body>
</html>
效果：
2.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>/* 类选择器 */.myclass{background-color: black;color: brown;font-size: larger;}</style>
</head>
<body><p class="myclass">这是一个类选择器示例</p><div class="myclass">这还是一个类选择器示例</div>
</body>
</html>
效果：
2.3ID选择器
ID选择器会唯一的修饰某个标签，通过ID来指定。
用法：
PS：一定注意在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>/* ID选择器 */#myp{color: blue;font-size: larger;}</style>
</head>
<body><p id="myp">这是一个ID选择器示例</p><p>这是另一个ID选择器示例,不过我没有被选中</p>
</body>
</html>
效果：
2.4通用选择器
顾名思义，给所有的标签修饰样式，不管有没有ID、class，故也被叫做“全局选择器”。
用法：
PS：只有一个“星号”表示全部！！
*{
属性:属性值;
属性:属性值;
.....
}
<!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>/* 通用选择器 */*{color: blue;font-size: larger;}</style>
</head>
<body><p>这是一个通用选择器的示例</p><p id="myid">这也是一个通用选择器示例</p><p class="myclass">这还是一个通用选择器示例</p>
</body>
</html>效果：
2.5子元素选择器
子元素选择器可以指定修饰某个标签的子元素的样式，对于父标签则不会修饰。
用法:
父元素方式 > 子元素方式{
属性:属性值;
属性:属性值：
....
}
这里的父元素方式和子元素方式不唯一，只要可以搜索到对应的父元素和子元素即可！
即方式可以是：“通过标签搜索”、“通过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>/* 子元素选择器 *//* 父元素使用类名搜索，子元素使用ID搜索 */.father > #son{font-size: larger;color: blue;}</style>
</head>
<body><div class="father">我是子元素,但我没有id<p id="son">我也是子元素,但我有id</p></div>
</body>
</html>效果：
2.6后代选择器
后代选择器也叫“孩子选择器”。
只要是父元素的孩子就可以被修饰，可能有点绕，不过仔细想一下就好了，子元素的子元素不就是父元素的孩子(重孙子)吗？
用法：
父元素方法 后代元素方法{
属性:属性值;
属性:属性值;
.....
}
<!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>/* 后代选择器 */.father .grandson{color: blue;font-size: larger;}</style>
</head>
<body><div class="father"><p class="grandson">我是子代标签哦~</p><div><p class="grandson">我是后代标签哦~</p></div></div>
</body>
</html>
效果：
2.7兄弟(并集)选择器
某个标签下方最近的一个同级标签被修饰。
用法：
兄弟元素A + 兄弟元素B{
属性:属性值;
属性:属性值;
....
}
<!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>/* 兄弟选择器 */h1 + p{color: blue;font-size: larger;}</style>
</head>
<body><h1>我是兄弟A</h1><p>我是兄弟B</p>
</body>
</html>
效果：
2.8伪类选择器【重要但不常用】
在某些特定条件下的元素应用样式(用户交互等)。
例如：鼠标悬停状态、鼠标跟踪等等
不常用，待用到的时候查查百度好了....
用法：
元素 : 伪类方法{
属性:属性值;
属性:属性值;
....
}
<!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:hover{background-color: blue;}p{background-color: brown;}</style>
</head>
<body><p>鼠标悬停到我身上，我会变色哦~</p>
</body>
</html>
效果：
鼠标没有移动到<p>标签时：
移动上去后：
2.9八种选择器的优先级
优先级从高到低：
“ID选择器 > 类选择器 > 后代选择器 > 元素(标签)选择器”
“子代选择器 > 后代选择器”
“伪类选择器可以与其它任何选择器并存”
“元素(标签)选择器，优先级永远最低”
三.其它
关于CSS的属性设置、其它设置，请参考作者的下一篇文章：
相关文章：
CSS(一)---【CSS简介、导入方式、八种选择器、优先级】
零.前言 本系列适用于零基础小白，亦或是初级前端工程师提升使用。 知识点较为详细，如果追求非常详细，请移步官方网站或搬运网站。 1.CSS简介 CSS全称：“Cascading Style Sheets”，中文名：“层叠样式表”…...
智慧公厕解决方案打造更加智能的卫生空间
一、智慧公厕方案概述 智慧公厕方案旨在解决现有公厕存在的诸多问题，包括民众用厕困难、环境卫生状况不佳、管理效率低下等方面。针对民众的需求和管理方面的挑战，智慧公厕提供了一套综合解决方案，包括智能导航、环境监测、资源管理等功能&a…...
美团0316春招笔试题
下面是美团2024-03-16笔试真题，进行了VP，由于未参与评测，故不保证正确性，仅供参考。 第一题 小美点外卖 求和然后减去满减和红包即可。 #include <bits/stdc.h> using namespace std; using LL long long ; int n, t, x,…...
typescript 实现RabbitMQ死信队列和延迟队列 订单10分钟未付归还库存
Manjaro安装RabbitMQ 安装 sudo pacman -S rabbitmq rabbitmqadmin启动管理模块 sudo rabbitmq-plugins enable rabbitmq_managementsudo rabbitmq-server管理界面 http://127.0.0.1:15672/ 默认用户名和密码都是guest。 要使用 rabbitmqctl 命令添加用户并分配权限…...
怎样才能把重建大师的空三导进去CC？
导出空三文件xml两者都是通用的，cc和photoscan都可以兼容。 重建大师是一款专为超大规模实景三维数据生产而设计的集群并行处理软件，输入倾斜照片，激光点云，POS信息及像控点，输出高精度彩色网格模型，可一键…...
命令模式（请求与具体实现解耦）
目录 前言 UML plantuml 类图 实战代码 模板 Command Invoker Receiver Client 前言 命令模式解耦了命令请求者（Invoker）和命令执行者（receiver），使得 Invoker 不再直接引用 receiver，而是依赖于…...
开发一款MMOARPG难度到底有多大
开发一款MMOARPG难度到底有多大 MMORPG游戏开发到底有多难，我们按照过去开发的标准，就比如开发一款传奇，那时候哪会用什么别人的引擎，都是自研，从基础图形API开始。我们不考虑美术和策划，就单指程序&#x…...
RTSP应用：实现视频流的实时推送
在实现实时视频流推送的项目中，RTSP（Real Time Streaming Protocol）协议扮演着核心角色。本文将指导你通过安装FFmpeg软件，下载并编译live555，以及配置ffmpeg进行视频流推送，来实现一个基本的RTSP流媒体服务…...
Java八股文（数据结构）
Java八股文の数据结构 数据结构 数据结构 请解释以下数据结构的概念：链表、栈、队列和树。 链表是一种线性数据结构，由节点组成，每个节点包含了指向下一个节点的指针； 栈是一种后进先出（LIFO）的数据结构&a…...
ActiveMQ Artemis 系列| High Availability 主备模式（消息复制） 版本2.19.1
一、ActiveMQ Artemis 介绍 Apache ActiveMQ Artemis 是一个高性能的开源消息代理，它完全符合 Java Message Service (JMS) 2.0 规范，并支持多种通信协议，包括 AMQP、MQTT、STOMP 和 OpenWire 等。ActiveMQ Artemis 由 Apache Software Foun…...
QGIS插件系列--WhiteBox Tools
WhiteBox Tools（官网机翻）: WhiteboxTools是由圭尔夫大学地貌测量和水文地理信息学研究小组（GHRG）开发的高级地理空间软件包和数据分析平台。该项目始于2017年<>月，并在分析能力方面迅速发展。WhiteboxTools的一…...
SpringMVC设置全局异常处理器
文章目录 背景分析使用ControllerAdvice（RestControllerAdvice）ExceptionHandler实现全局异常全局异常处理-多个处理器匹配顺序存在一个类中存在不同的类中 对于过滤器和拦截器中的异常，有两种思路可以考虑 背景 在项目中我们有需求做一个全…...
Acwing_795前缀和 【一维前缀和】+【模板】二维前缀和
Acwing_795前缀和 【一维前缀和】 题目： 代码： #include <bits/stdc.h> #define int long long #define INF 0X3f3f3f3f #define endl \n using namespace std; const int N 100010; int arr[N];int n,m; int l,r; signed main(){std::ios::s…...
docker 部署 gitlab-ce 16.9.1
文章目录 [toc]拉取 gitlab-ce 镜像创建 gitlab-ce 持久化目录启停脚本配置配置 gitlab-ce编辑 gitlab-ce 配置文件重启 gitlab-ce配置 root 密码 设置中文 gitlab/gitlab-ce(需要科学上网) 拉取 gitlab-ce 镜像 docker pull gitlab/gitlab-ce:16.9.1-ce.0查看镜像是不是有 Vo…...
29.Python从入门到精通—Python3 面向对象继承 多继承 方法重写 类属性与方法
29.从入门到精通：Python3 面向对象继承 多继承 方法重写 类属性与方法 继承多继承方法重写类属性与方法 继承 在面向对象编程中，继承是指通过继承现有类的属性和方法来创建新类的过程。新类称为子类（或派生类），现有类…...
jQuery如何获取元素宽高？
在jQuery中，获取元素的宽和高有多种方法，取决于你是否需要包括边框、内边距或其他额外空间。以下是几种常用的方式： 获取元素内容区域的宽和高（不包括边框和内边距）： var width $(#yourElement).width(); …...
springdata框架对es集成
什么是spring data框架 Spring Data是一个用于简化数据库、非关系型数据库、索引库访问，并支持云服务的开源框架。其主要目标是使得对数据的访问变得方便快捷，并支持 map-reduce框架和云计算数据服务。Spring Data可以极大的简化JPA(Elasticsearch…)的…...
jvm（虚拟机）运行时数据区域介绍
Java虚拟机（JVM）运行时数据区域是Java程序在运行过程中使用的内存区域，它主要包括以下几个部分： 程序计数器（Program Counter Register）： 程序计数器是一块较小的内存区域，是线程私有…...
C++ MFC 只启动一个程序实例 唤醒之前的实例（完整源码）
初级代码游戏的专栏介绍与文章目录-CSDN博客 很多时候我们希望只允许启动一个程序实例，如果再次运行，就唤醒之前的实例。 目录 1 概述 2 相关技术介绍 2.1 互斥对象 2.2 查找窗口 2.3 唤醒窗口 1 概述 技术上并不难，涉及到以下几个技术…...
2024多云管理平台CMP排名看这里！
随着云计算技术的迅猛发展，多云管理平台CMP应运而生。多云管理平台CMP仅能够简化对多个云环境的统一管理，还能提高资源利用效率和降低成本。因此了解多云管理平台CMP品牌是必要的。2024多云管理平台CMP排名看这里！仅供参考哈！ 20…...
Appium+python自动化（十六）- ADB命令
简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...
深度学习习题2
1.如果增加神经网络的宽度，精确度会增加到一个特定阈值后，便开始降低。造成这一现象的可能原因是什么？ A、即使增加卷积核的数量，只有少部分的核会被用作预测 B、当卷积核数量增加时，神经网络的预测能力会降低 C、当卷…...
EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势
一、WebRTC与智能硬件整合趋势 随着物联网和实时通信需求的爆发式增长，WebRTC作为开源实时通信技术，为浏览器与移动应用提供免插件的音视频通信能力，在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能，对实时…...
C++中vector类型的介绍和使用
文章目录 一、vector 类型的简介1.1 基本介绍1.2 常见用法示例1.3 常见成员函数简表 二、vector 数据的插入2.1 push_back() —— 在尾部插入一个元素2.2 emplace_back() —— 在尾部“就地”构造对象2.3 insert() —— 在任意位置插入一个或多个元素2.4 emplace() —— 在任意…...
云原生时代的系统设计：架构转型的战略支点
📝个人主页🌹：一ge科研小菜鸡-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、云原生的崛起：技术趋势与现实需求的交汇 随着企业业务的互联网化、全球化、智能化持续加深，传统的 I…...
scan_mode设计原则
scan_mode设计原则 在进行mtp controller设计时，基本功能设计完成后，需要设计scan_mode设计。 1、在进行scan_mode设计时，需要保证mtp处于standby模式，不会有擦写、编程动作。 2、只需要固定mtp datasheet说明的接口即可…...
数据库管理与高可用-MySQL故障排查与生产环境优化
目录 #1.1MySQL单案例故障排查 1.1.1MySQL常见的故障排查 1.1.2MySQL主从故障排查 #2.1MySQL优化 2.1.1硬件方面的优化 2.1.2进程方面的优化 #3.1MySQL存储引擎 3.1.1 MyISAM存储引擎 3.1.2 InnoDB存储引擎 1.1MySQL单案例故障排查 1.1.1MySQL常见的故障排查 （1&…...