当前位置：首页 > news >正文

CSS—引入方式、选择器、复合选择器、文字控制属性、CSS特性

news 来源：原创 2025/9/12 18:54:22

CSS

1.引入方式

2.选择器

3.复合选择器

4.文字控制属性

5.CSS特性

CSS

层叠样式表，是一种样式表语言，用来描述HTML文档的呈现

书写时一般按照顺序：盒子模型属性—>文字样式—>圆角、阴影等修饰属性

1.引入方式

引入方式	方法	特点
行内引入	直接写在标签的style属性内	一般配合JavaScript使用，难以维护
内部引入	在html代码中style标签下定义选择器	只对当前的网页有效，难以维护
链接方式	在html代码中head标签内使用link标签引入	CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。先加载css，再显示HTML
导入方式	在html代码中style标签内使用@import引入	先显示HTML，再加载css。CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入。

优先级：

【行内引入>链接方式和style标签谁在下面，谁的优先级高>内部引入>导入方式】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>notes</title><style>/* css的内部引用，在style标签内引用 *//* 定义类选择器 */.red {color: red;line-height: 20px;height: 20px;}.size {size: 20px;}/* 定义id选择器 */#blue {color: blue;font-size: 20px;line-height: 40px;}/* 通配符选择器 */* {color: pink;}/* 盒子模型 */.box {background-color: peru;/* 添加内减属性，避免撑大盒子 */box-sizing: border-box;width: 100px;height: 60px;padding: 10px 20px;border-top: 5px solid #000;border-right: 2px solid #000;/* 版心居中，必须设置好盒子宽度 */margin: 0 auto;border-radius: 50%;}.box1 {background-color: yellow;line-height: 100px;/* 透明度设置 */opacity: 0.5;}.box1:hover {background-color: aqua;}</style>
</head>
<body><h1>h1</h1><!-- 类选择器的使用 --><strong><h2 class="red size">h2</h2></strong><p class="red">p 类选择器根据类名来选择前面以”.”来标志<span>子级1</span><span>子级2</span></p><br><hr><div id="blue">div要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器.HTML页面中的元素就是通过CSS选择器进行控制的。类选择器根据类名来选择</div><br><div class="box"></div><span class="box1">行内元素</span><br><span>span</span><br><div>la &nbsp;&nbsp;la  </div><!-- css的外部引用，用link标签引入 --><link rel="stylesheet" href=""><!-- css的行内引用, 直接写在标签的style属性内,配合JavaScript使用 --><div style="color: blue; font-size: 20px;">div标签css行内引用</div></body>
</html>

2.选择器

选择器	特点
标签选择器	使用标签名作为选择器，选中同名标签设置相同的样式
类选择器	查找标签，差异化设置标签的显示效果，一个类选择器可以定义多个标签，一个标签允许加多个class属性。多个类属性可用`-`隔开，如：`news-td`。
id选择器	查找标签，差异化设置标签的显示效果，一般与JS配合使用，很少使用CSS样式。同一个id选择器在一个页面只能使用一次。
通配符选择器	查找页面所有标签，设置相同样式，注意不需要调用，浏览器自动查找页面所有标签，设置相同的格式。在制作网页的初期，清除标签默认样式，便于后续个性化设置。
结构伪类选择器	根据元素的结构关系，差异化设置标签属性。`:nth-child(公式)`可以根据公式选择对应标签的属性
伪元素选择器	创建虚拟元素，用来摆放装饰性内容

:nth-child(公式)可以根据公式选择对应标签的属性

3.复合选择器

css选择器总结大全：CSS 选择器参考手册

包括孙子，重孙子等级别

建议逗号隔开后换行，书写格式更规范

任何标签都可以设置鼠标悬停状态

4.文字控制属性

描述	属性
字体大小	font-size
字体粗细	font-weight
字体倾斜	font-style
行高	line-height
字体族	font-family
字体复合属性	font
文本缩进	text-indent
文本对齐	text-align
修饰线	text-decoration
颜色	color

字体大小：

PC端网页最常用的是像素px，且必须要带单位，谷歌默认字体是16像素
```
p {font-size:30px;
}
```
字体粗细：

行高=文本高度+上间距+下间距

注意：添加单位px表示行高，不加单位表示当前标签属性值的倍数！

5.CSS特性

继承性

一般将文字属性设置在body标签里，继承给子集，如果要单独设置其中某标签性质，则使用类选择器。

a标签不能继承字体颜色color

h标签不能继承font-weight

b.strong不能继承font-weight

i,em不能继承font-style

注意，如果标签自己有样式，则生效自己单独的样式，不继承，比如标题标签有自己的文字属性，超链接等

层叠性

相同的属性会覆盖，后面的CSS属性覆盖前面的CSS属性。

不同的属性会叠加，不同的CSS属性都生效。

优先级

当一个标签使用了多种选择器时，基于不同选择器的匹配方式。选择器优先级高的样式生效。

通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important

【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】

CSS—引入方式、选择器、复合选择器、文字控制属性、CSS特性

目录 CSS 1.引入方式 2.选择器 3.复合选择器 4.文字控制属性 5.CSS特性 CSS 层叠样式表，是一种样式表语言，用来描述HTML文档的呈现书写时一般按照顺序：盒子模型属性—>文字样式—>圆角、阴影等修饰属性 1.引入方式引入方式方…...

编程日记 2025/9/12 18:54:22

Spring 源码硬核解析系列专题（十）：Spring Data JPA 的 ORM 源码解析

在前几期中，我们从 Spring 核心到 Spring Boot、Spring Cloud、Spring Security 和 Spring Batch，逐步揭示了 Spring 生态的多样性。在企业级开发中，数据访问是不可或缺的部分，而 Spring Data JPA 通过简化 JPA（Java Persistence API）操作，成为主流的 ORM 框架。本篇将深…...

编程日记 2025/9/9 11:31:29

爬虫和逆向教程-专栏介绍和目录

文章目录一、爬虫基础和进阶二、App数据采集三、爬虫项目四、爬虫面试本专栏为爬虫初学者和进阶开发者量身定制的爬虫和逆向学习园地。为你提供全面而深入的爬虫和逆向技术指导，从入门到精通，从基础理论到高级实战，助你在数据的海洋中畅游&…...

编程日记 2025/9/12 18:48:05

Lua | 每日一练 (4)

💢欢迎来到张胤尘的技术站 💥技术如江河，汇聚众志成。代码似星辰，照亮行征程。开源精神长，传承永不忘。携手共前行，未来更辉煌💥 文章目录 Lua | 每日一练 (4)题目参考答案线程和协程调度方式上…...

编程日记 2025/9/12 18:49:25

【折线图 Line】——1

🌟 解锁数据可视化的魔法钥匙 —— pyecharts实战指南 🌟 在这个数据为王的时代，每一次点击、每一次交易、每一份报告背后都隐藏着无尽的故事与洞察。但你是否曾苦恼于如何将这些冰冷的数据转化为直观、吸引人的视觉盛宴？ 🔥 欢迎来到《pyecharts图形绘制大师班》 �…...

编程日记 2025/9/8 5:39:38

大白话前端性能优化，常见方法有哪些？

大白话前端性能优化，常见方法有哪些？ 咱来唠唠前端性能优化，其实就是想办法让网页打开得更快、用起来更流畅，就跟给汽车做保养让它跑得更顺溜一样。下面详细说说常见的优化方法： 压缩代码 CSS 压缩：CSS …...

编程日记 2025/9/10 0:26:18

IP属地是通过卫星定位的吗？如何保护用户隐私

在数字时代，网络空间成为了人们日常生活不可或缺的一部分。随着社交媒体、在线服务等平台的兴起，用户IP属地信息的重要性日益凸显。然而，关于IP属地是如何确定的，尤其是是否通过卫星定位这一问题，却常常引发公众的疑问…...

编程日记 2025/9/7 22:07:19

Vue3+Node/Express支付宝沙箱支付与确认支付

Vue3Node/Express支付宝沙箱支付与确认支付支付宝沙箱配置进入沙箱选择自定义密钥密钥工具下载生成密钥格式转换自定义密钥设置Express安装依赖项目目录创建alipay.js请求（打开支付）代码router/pay.jsapp.js 前端代码前端封装接口前端调用实现支付查…...

编程日记 2025/9/12 18:01:49

什么是大语言模型

大语言模型（Large Language Model，LLM）是一种基于深度学习技术的人工智能模型，旨在理解和生成人类语言。以下是大语言模型的详细介绍： 一、基本概念大语言模型通常包含数百亿甚至数千亿个参数，通过在海量…...

编程日记 2025/9/12 9:54:17

本地部署Embedding模型API服务的实战教程

大家好，我是herosunly。985院校硕士毕业，现担任算法研究员一职，热衷于大模型算法的研究与应用。曾担任百度千帆大模型比赛、BPAA算法大赛评委，编写微软OpenAI考试认证指导手册。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。授权多项发明专利。对机器学…...

编程日记 2025/9/10 1:53:19

项目下载地址 http://rpmfind.net/linux/rpm2html/search.php?queryprotobuf(x86-64) Postgis Index of /postgis/source/ proj4 Index of /proj/ geos Index of /geos/ libxml2 ftp://xmlsoft.org/libxml2/ Index of /sources Json-c Releases json-c/json-c G…...

编程日记 2025/9/8 4:57:23

FFmpeg-chapter3-读取视频流（原理篇）

ffmpeg网站：About FFmpeg 1 库介绍 （1）libavutil是一个包含简化编程函数的库，包括随机数生成器、数据结构、数学例程、核心多媒体实用程序等等。 （2）libavcodec是一个包含音频/视频编解码器的解码器和编…...

编程日记 2025/8/27 14:00:31

入门基础项目（SpringBoot+Vue）

文章目录 1. css布局相关2. JS3. Vue 脚手架搭建4. ElementUI4.1 引入ElementUI4.2 首页4.2.1 整体框架4.2.2 Aside-logo4.2.3 Aside-菜单4.2.4 Header-左侧4.2.5 Header-右侧4.2.6 iconfont 自定义图标4.2.7 完整代码 4.3 封装前后端交互工具 axios4.3.1 安装 axios4.3.2 /src…...

编程日记 2025/9/5 5:42:26

C#调用CANoeCLRAdapter.dll文章（二）

一、引言在上一篇指南中，我们介绍了如何通过C#调用CANoeCLRAdapter.dll实现基础功能，包括COM接口操作、DLL导入和PANL面板集成。本文将进一步探讨高级功能开发，涵盖事件驱动编程、CAPL脚本双向通信以及异步任务处理，帮助开发者构…...

编程日记 2025/9/11 23:03:09

ai大模型自动化测试-TensorFlow Testing 测试模型实例

AI大模型自动化测试是确保模型质量、可靠性和性能的关键环节，以下将从测试流程、测试内容、测试工具及测试挑战与应对几个方面进行详细介绍：测试流程测试计划制定确定测试目标：明确要测试的AI大模型的具体功能、性能、安全性等方面的目标，例如评估模型在特定任务上的准…...

编程日记 2025/9/9 14:22:11

QT——c++界面编程库

非界面编程 QT编译的时候，依赖于 .pro 配置文件： SOURCES: 所有需要参与编译的 .cpp 源文件 HEADERS:所有需要参与编译的.h 头文件 QT：所有需要参与编译的 QT函数库 .pro文件一旦修改，注意需要键盘按 ctrls 才能加载最新的配置文…...

编程日记 2025/9/4 1:03:53

postman--接口测试工具安装和使用教程

postman–接口测试工具 postman是一款支持http协议的接口调试与测试工具，其主要特点就是功能强大，使用简单且易用性好。无论是开发人员进行接口调试，还是测试人员做接口测试，postman都是我们的首选工具之一。下面先通过一张…...

编程日记 2025/9/10 6:34:27

如何用python画一棵分形树

这个代码会生成一个彩色的分形树图案，可以通过调整draw_tree函数中的参数来改变树的形状和大小 import turtle import random# 递归函数绘制分形树 def draw_tree(branch_len, t):if branch_len > 5:t.color(random.choice(colors))t.pensize(branch_len / 10)t…...

编程日记 2025/9/9 3:25:33

【leetcode】二分查找专题

文章目录 1.二分查找1.题目2.解题思路3. 解题代码 2.在排序数组中查找元素的第一个和最后一个位置1.题目2.算法原理3. 代码 3.x的平方根1.题目2.代码 4.搜索插入位置1.题目2.解题思路3.解题代码 5.山脉数组的索引1.题目2.解题思路3. 代码 6.寻找峰值1.题目2.解题思路3.代码 7. …...

编程日记 2025/9/10 6:46:01

深度学习笔记17-马铃薯病害识别（VGG-16复现）

目录一、前期准备 1. 设置GPU 2. 导入数据二、手动搭建VGG-16模型 1. 搭建模型三、训练模型 1. 编写训练函数 3. 编写测试函数 4. 正式训练四、结果可视化 1. Loss与Accuracy图 2. 指定图片进行预测 3. 模型评估前言 🍨 本文为🔗365天深度学习训…...

编程日记 2025/9/9 11:31:15

【LeetCode】131.分割回文串

目录题目描述输入输出示例及数据范围思路C 实现题目描述这道题目来自 LeetCode 131. 分割回文串。题目描述如下： 给你一个字符串 s，请你将 s 分割成一些子串，使每个子串都是回文串。返回 s 所有可能的分割方案。输入输出示例及数据…...

编程日记 2025/9/11 1:00:17

【AIGC系列】5：视频生成模型数据处理和预训练流程介绍（Sora、MovieGen、HunyuanVideo）

AIGC系列博文： 【AIGC系列】1：自编码器（AutoEncoder, AE） 【AIGC系列】2：DALLE 2模型介绍（内含扩散模型介绍） 【AIGC系列】3：Stable Diffusion模型原理介绍【AIGC系列】4&#xff1…...

编程日记 2025/9/7 18:26:44

基于C++“简单且有效”的“数据库连接池”

前言数据库连接池在开发中应该是很常用的一个组件，他可以很好的节省连接数据库的时间开销；本文基使用C实现了一个简单的数据库连接池，代码量只有400行左右，但是压力测试效果很好；欢迎收藏关注，本人将会…...

编程日记 2025/9/9 2:34:20

vulnhub靶场【kioptrix-4】靶机

前言靶机：kioptrix-4，IP地址为192.168.1.75，后期IP地址为192.168.10.8 攻击：kali，IP地址为192.168.1.16，后期IP地址为192.168.10.6 都采用VMware虚拟机，网卡为桥接模式这里的靶机&#xf…...

编程日记 2025/9/7 20:38:04

科普：ROC AUC与PR AUC

在评价二分类模型性能时，有许多评价指标，其中，有一对是用面积AUC（Area Under the Curve）做评价的：ROC AUC与PR AUC 本文我们对ROC AUC与PR AUC进行多维度对比分析： 一、定义与核心原理维度RO…...

编程日记 2025/9/8 18:03:01

服务器IPMI用户名、密码批量检查

背景大规模服务器部署的时候，少不了较多的网管和监测平台，这些平台会去监控服务器的性能、硬件等指标参数，为了便于管理和控制，则需要给服务器IPMI带外管理添加较多的用户，这就需要对较多的服务器检查所对应的IPMI用…...

编程日记 2025/9/11 0:31:53

51单片机中reg52.h与regx52.h在进行位操作时的不同

reg52.h中不能使用例如 P2_0;这样的定义而只能使用 P2^0;这样的定义但是都不可以对位进行直接赋值操作； 而 regx52.h中可以使用 P2_0和P2^0；但是只有使用下划线的才可以对位进行赋值操作例如P2_0 1; 但不可以是P2^0 1; 在 C 语言中，…...

编程日记 2025/9/12 4:25:46

Apollo Cyber 学习笔记

目录 0 Introduction What Why Advantage 1 Example 2 Concept 3 Flow Chart 4 Module 4.1 Transport 4.1.1 Share Memory 4.1.1.1 Segment 4.1.1.1.1 State 4.1.1.1.2 Block 4.1.1.1.3 Common 4.1.1.2 Notifier 4.1.1.2.1 ConditionNotifier 4.1.1.2.2 Multi…...

编程日记 2025/9/8 9:38:10

【Electron入门】进程环境和隔离

目录一、主进程和渲染进程 1、主进程（main） 2、渲染进程（renderer） 二、预加载脚本三、沙盒化为单个进程禁用沙盒全局启用沙盒四、环境访问权限控制：contextIsolation和nodeIntegration 1、contextIsola…...

编程日记 2025/8/26 11:54:01

拉链表介绍

拉链表是处理缓慢变化维（SCD） 的一种常用方法，特别适用于需要保留历史记录的场景。以下是拉链表的详细说明及实现方法： 1. 什么是拉链表？ 拉链表是一种用于记录维度数据历史变化的表结构，通过开始时间 …...

编程日记 2025/9/9 9:55:55

Spring Boot 日志配置与常见问题解析（详解）

目录 Spring Boot 日志配置与常见问题解析引言什么是日志？日志的重要性日志使用打印日志日志框架介绍日志格式的说明⽇志级别日志级别的分类日志级别的使用 Spring Boot 日志配置1. 设置日志级别和格式2. 配置日志收集器3. 查看和分析日志4.日志的持久化5.设置日志…...

编程日记 2025/9/6 19:57:07

-bash: lsof: command not found

一、问题说明执行如下命令时报错： # lsof |grep deleted > deleted_file -bash: lsof: command not found二、处理方法 # yum -y install lsof安装完成后可成功执行上面的命令。...

编程日记 2025/9/11 15:28:48

PC 端连接安卓手机恢复各类数据：安装、操作步骤与实用指南

软件介绍这款用于恢复安卓手机数据的软件，虽运行在 PC 端，却专为安卓手机数据恢复打造，使用时得用数据线把手机和电脑连接起来。它的功能相当强大，能帮你找回安卓手机里已删除的短信、联系人、通话记录、文档，还有照…...

编程日记 2025/9/11 19:03:43

ES、OAS、ERP、电子政务、企业信息化（高软35）

系列文章目录 ES、OAS、ERP、电子政务、企业信息化文章目录系列文章目录前言一、专家系统（ES）二、办公自动化系统（OAS）三、企业资源规划（ERP）四、典型信息系统架构模型1.政府信息化和电子政务2.企业信息…...

编程日记 2025/9/3 8:52:15

android智能指针android::sp使用介绍

android::sp 是 Android 中的智能指针（Smart Pointer）的实现，用于管理对象的生命周期，避免手动管理内存泄漏等问题。它是 Android libutils 库中重要的一部分，常用于管理继承自 android::RefBase 的对象。与标准库中…...

编程日记 2025/9/4 17:30:48

DeepSeek05-大模型WebUI

一、说明： 将DeepSeek部署到前台Web界面的方法主要有以下几种推荐方案，涵盖开源工具、第三方客户端及特定场景适配方案： Open WebUIChatbox AICherry StudioSillyTavern 二、Open WebUI 安装配置教程特点：Open WebUI 是一个开…...

编程日记 2025/9/12 9:15:34

自然语言处理NLP入门 -- 第八节OpenAI GPT 在 NLP 任务中的应用

在前面的学习中，我们已经了解了如何使用一些经典的方法和模型来处理自然语言任务，如文本分类、命名实体识别等。但当我们需要更强的语言生成能力时，往往会求助于更先进的预训练语言模型。OpenAI 旗下的 GPT 系列模型（如 GPT-3、GP…...

编程日记 2025/9/9 3:54:41

FFmpeg av_read_frame 和iOS系统提供的 AVAudioRecorder 实现音频录制的区别

1. 第一种方式：使用 FFmpeg 的 av_read_frame 特点底层实现：基于 FFmpeg，这是一个强大的多媒体处理库，直接操作音频流。灵活性：非常灵活，可以处理多种音频格式、编解码器和输入设备。复杂性：需要手动管理音频流、数据包（AVPacket）、内存释放等，代码复杂度较高。跨平…...

编程日记 2025/9/11 6:58:40

【区块链】深入理解区块链中的 Gas 机制

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈｜ 炫酷HTML | JavaScript基础 💫个人格言: "如无必要，勿增实体" 文章目录深入理解区块链中的 Gas 机制一、Gas 的基本概念1.1 为什么需要 Gas&#xff1f…...

编程日记 2025/9/10 21:07:48

2020 年英语（一）考研真题笔记（更新中）

Section I Use of English（完型填空） 原题 Directions：Read the following text. Choose the best word (s) for each numbered blank and mark A, B, C or D on the ANSWER SHEET. (10 points) Even if families are less likely to si…...

编程日记 2025/9/10 9:51:12

mamba_ssm和causal-conv1d详细安装教程

1.前言 Mamba是近年来在深度学习领域出现的一种新型结构，特别是在处理长序列数据方面表现优异。在本文中，我将介绍如何在 Linux 系统上安装并配置 mamba_ssm 虚拟环境。由于官方指定mamba_ssm适用于 PyTorch 版本高于 1.12 且 CUDA 版本大于 11.6 的环境…...

编程日记 2025/9/11 1:25:41

leetcode-442.数组中重复的数据

leetcode-442.数组中重复的数据文章目录 leetcode-442.数组中重复的数据1.题目描述：数组中重复的数据2.第一次代码提交：(不符合仅使用常量额外空间)3.最终代码提交：只使用常数额外空间、时间复杂度为 O(n) 的做法，即“标记法” 1…...

编程日记 2025/9/11 13:22:55

UniApp 按钮组件 open-type 属性详解：功能、场景与平台差异

文章目录引言一、open-type 基础概念1.1 核心作用1.2 通用使用模板二、主流 open-type 值详解2.1 contact - 客服会话功能说明平台支持代码示例 2.2 share - 内容转发功能说明平台支持注意事项 2.3 getUserInfo - 获取用户信息功能说明平台支持代码示例 2.4 getPhoneNumber -…...

编程日记 2025/9/10 1:41:21

Android13修改多媒体默认音量

干就完了! 设置音量为最大音量,修改如下: /framework/base/media/java/android/media/AudioSystem.java/** hide */public static int[] DEFAULT_STREAM_VOLUME new int[] {4, // STREAM_VOICE_CALL7, // STREAM_SYSTEM5, // STREAM_RING-5, // STREAM_MUSIC15, // STREAM…...

编程日记 2025/9/8 21:19:38

【银河麒麟高级服务器操作系统】服务器测试业务耗时问题分析及处理全流程分享

更多银河麒麟操作系统产品及技术讨论，欢迎加入银河麒麟操作系统官方论坛 https://forum.kylinos.cn 了解更多银河麒麟操作系统全新产品，请点击访问麒麟软件产品专区：https://product.kylinos.cn 开发者专区：https://developer…...

编程日记 2025/8/26 11:52:01

HTTP 请求时传递多部分表单数据

HTTP 请求时传递多部分表单数据（multipart/form-data） --data-raw $------demo11111\r\nContent-Disposition: form-data; name"Filedata"; filename"截屏2025-02-27 15.45.46.png"\r\nContent-Type: image/png\r\n\r\n\r\n------d…...

编程日记 2025/9/8 12:44:13

【Python环境】配置极简描述

241220 241220 241220 Python环境配置下载Python 稳定版本：Stable Releases【3.12.3】下载地址：Python Releases for Windows | Python.org. 配环境注意勾上Add Python 3.x to PATH，然后点“Install Now”即可完成安装。配置完成&…...

编程日记 2025/9/4 17:57:34

1. HTTP 数据请求

相关资源： 图片素材📎图片素材.zip 接口文档 1. HTTP 数据请求什么是HTTP数据请求： (鸿蒙)应用软件可以通过(鸿蒙)系统内置的 http 模块和 Axios，通过 HTTP 协议和服务器进行通讯学习核心Http请求技术: Http模块 - 属于鸿…...

编程日记 2025/9/9 11:55:01

基于深度学习+NLP豆瓣电影数据爬虫可视化推荐系统

博主介绍：资深开发工程师，从事互联网行业多年，熟悉各种主流语言，精通java、python、php、爬虫、web开发，已经做了多年的设计程序开发，开发过上千套设计程序，没有什么华丽的语言，只有…...

编程日记 2025/9/9 19:07:35

CSS

1.引入方式

2.选择器

3.复合选择器

4.文字控制属性

5.CSS特性

相关文章：