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

css格式和样式选择器-学习记录

news 2026/4/8 18:51:26

文章目录

  • 一、css代码代码格式
    • 1、内联格式（不推荐）
    • 2、内部格式（不推荐）
    • 3、外部格式 （推荐）
  • 二、css样式选择器
    • 1、类型选择器
    • 2、类选择器（推荐）
    • 3、id选择器
  • 三、样式表的组合
    • 1、Multiple Selectors
    • 2、Hierachy Selectors

一、css代码代码格式

1、内联格式（不推荐）

写在html文件中，没有单独提取出来，没有做到结构和样式的分离;
每一个标签元素都有自己的css格式,每个标签元素中都有撰写自己的style属性，不利于复用；
例子：

<h1 style="color:red;">
文本内容
</h1>

2、内部格式（不推荐）

仍是写在html文件中，结构和样式没有做到完全分离，但就内联格式来说，相对较好；
将写在标签中的style属性提取出来，单独作为标签，标签书写的位置是不固定的，在head标签和body标签中均可；
例子：

<html><head><style>.bod{color:red;}</style></head><body></body>
</html>

3、外部格式 （推荐）

单独编写css文件以存储样式，结构（html）与样式完全分离，利于样式的复用，不同的html文件可以指定同一个css文件来控制样式。
如果三种选择器混在一起使用，则很难分辨html文件中每个元素的样式，所以一般只使用类选择器。
例子：
style.css文件内容：

.box {color:red;
}

html文件内容：

<html><head><link rel="stylesheet" href="style.css"></head><body></body>
</html>

通过link标签的书写内容就做到了html文件和css文件的关联，之后在html中就可以使用css的样式

二、css样式选择器

使用外部格式书写css代码实例

1、类型选择器

标签名字+大括号{}，大括号内书写样式

h1{color:red;
}

2、类选择器（推荐）

先写一个点’.'，然后写上类名+大括号{}，大括号内书写样式内容
前文内部格式和外部格式的代码例子中的css样式选择器就是类选择器

.box{color:green;
}

3、id选择器

先写一个’#'，然后写上id名字+大括号{}，大括号中书写样式内容

#id{color:green;
}

样式会存在冲突的情况，所以存在样式选择器的优先级：id选择器>类选择器>类型选择器

<h1 class="box",id="id">
</h1>

例如在这里，存在三种不同的样式选择器：类型选择器、类选择器、id选择器，样式就会优先选中id选择器，因为id选择器优先级最高；缺少id选择器，只使用了类选择器和类型选择器，则就会优先选中类选择器。

三、样式表的组合

前文提到的三种样式表的组合

1、Multiple Selectors

例子：

h1.container{color:red;
}

标签必须同时满足两个选择器的选择，既是标签h1，其类名又要是container

2、Hierachy Selectors

例子：

h1 .container{color:red;
}

（标签选择器和类选择器中有一个空格）
在h1标签中的有个标签的类名是类选择器指定的名字，则修改这个标签的样式
外层是类型选择器，内层是类选择器

至此，结束。

相关文章：

css格式和样式选择器-学习记录

文章目录 一、css代码代码格式1、内联格式&#xff08;不推荐&#xff09;2、内部格式&#xff08;不推荐&#xff09;3、外部格式 &#xff08;推荐&#xff09; 二、css样式选择器1、类型选择器2、类选择器&#xff08;推荐&#xff09;3、id选择器 三、样式表的组合1、Multi…...

编程日记 2023/11/13 11:56:26

【Python】Matplotlib-多张图像的显示

一&#xff0c;情景描述 大家在写论文或者实验报告的时候&#xff0c;经常会放多张图片或数据图像在一起形成对比。比如&#xff0c;我现在有一张经过椒盐噪声处理的图像&#xff0c;现在进行三种滤波&#xff0c;分别是均值&#xff0c;高斯&#xff0c;中值滤波&#xff0c;…...

编程日记 2023/11/13 11:54:24

数据库 关系数据理论

问题 数据冗余更新异常插入异常删除异常 一个好的模式应当不会发生插入异常、删除异常和更新异常&#xff0c;数据冗余应尽可能少 数据依赖 定义&#xff1a;一个关系内部属性与属性之间的一种约束关系&#xff08;该约束关系是通过属性间值的相等与否体现出来数据间相关联…...

编程日记 2023/11/13 11:53:24

网易数帆：云原生向左，低代码向右

网易数帆&#xff0c;前身是网易杭州研究院于2016年孵化的网易云&#xff0c;历经7载探索与沉淀&#xff0c;如今已进化成为覆盖云原生、低代码、大数据和人工智能四大技术赛道的数智化服务提供商&#xff0c;服务于金融、央国企、能源、制造等领域300余家头部企业。 近日&…...

编程日记 2023/11/13 11:50:21

上线亚马逊出口美国审核CPC认证标准内容解析

儿童玩具产品、母婴产品出口美国都需要CPC认证证书和CPSIA报告进行过关清关。 一、什么是CPC认证&#xff1f; CPC认证是Children’sProduct Certificate的英文简称&#xff0c;CPC证书就类似于国内的质检报告&#xff0c;在通过相关检测&#xff0c;出具报告后同时可出具的一…...

编程日记 2023/11/13 11:49:20

SharePoint 的 Web Parts 是什么

Web Parts 可以说是微软 SharePoint 的基础组件。 根据微软自己的描述&#xff0c;Web Parts 是 SharePoint 对内容进行构建的基础&#xff0c;可以想想成一块一块的砖块。 我们需要使用这些砖块来完成一个页面的构建。 我们可以利用 Web Parts 在 SharePoint 中添加文本&am…...

编程日记 2023/11/13 11:47:17

异星工场入门笔记-02-一个重要地学习方法

编程学习地整个过程&#xff0c;最重要的工具就是电脑&#xff0c;其中有一个重点就是可以无成本的重复测试&#xff0c;这大大降低了难度&#xff0c;节约了时间。真正难以学习的不是技术本身&#xff0c;而是材料成本和时间成本&#xff0c;降低这两个因素平地起高楼根本不是…...

编程日记 2023/11/13 11:46:16

pyqt5学习-01 UI界面创建以及生成python代码

前提 环境搭建 打开designer 选择创建主窗体&#xff0c;拖入一个按钮 保存主窗体UI文件为firstMainWin.ui 将UI文件转化为python文件 # 可以把E:\Python\envs\pyqt5stu\Scripts\pyuic5.exe添加到环境变量中 E:\Python\envs\pyqt5stu\Scripts\pyuic5.exe -o firstMainWin.…...

编程日记 2023/11/13 11:45:16

大数据技术与原理实验报告（MapReduce 初级编程实践）

MapReduce 初级编程实践 验环境&#xff1a; 操作系统&#xff1a;Linux&#xff08;建议Ubuntu16.04&#xff09;&#xff1b; Hadoop版本&#xff1a;3.2.2&#xff1b; &#xff08;一&#xff09;编程实现文件合并和去重操作 对于两个输入文件&#xff0c;即文件 A 和…...

编程日记 2023/11/13 11:44:15

Redis 5大数据类型命令解读

目录 Redis key的命令 1、redis字符串&#xff08;String&#xff09; 2、redis列表(List) 3、redis哈希表(Hash) 4、redis集合(Set) 5、redis有序集合(ZSet) Redis 命令网站&#xff1a;redis中文文档 Redis key的命令 命令说明示例keys *查看当前库所有的keykeys *…...

编程日记 2023/11/13 11:43:13

数据可视化新秀 DataEase 可否替代 Tableau？

每年数以千计的企业在数据可视化工具中选择 Tableau&#xff0c;但是你知道还有一款强大的工具DataEase&#xff0c;可能会成为你的更佳选择吗&#xff1f;下面是 Tableau 与 DataEase 的功能对比&#xff1a; 1 功能对比 Tableau DataEase 安装包支持平台 Windows MacOS Li…...

编程日记 2023/11/13 11:40:10

Java源码分析（三）ArrayList

ArrayList是我们经常用到的一个集合类。数组在创建时就要给一个明确的大小&#xff0c;而ArrayList的长度是可以动态调整的&#xff0c;因此&#xff0c;也叫动态数组。那么本篇我们一起学习下ArrayList的源码。 一、创建ArrayList 首先&#xff0c;我们从创建ArrayList开始。…...

编程日记 2023/11/13 11:39:09

冒泡排序

贵阳这个地方的天气变化好大呀&#xff0c;前两天晒大太阳&#xff0c;今天就冷的脚抖&#xff0c;简直不要太冷&#xff0c;但是不管怎么样&#xff0c;还是要学习的哟&#xff01; 冬天来了&#xff0c;春天确实还有一点远&#xff01; 好了&#xff0c;话不多说&#xff0c;…...

编程日记 2023/11/13 11:38:08

docker基于debian11基础环境安装libreoffice

首先下载指定版本的libreoffice&#xff0c;注意debian11下需要选择Linux (64-bit) (deb) 官方下载地址&#xff1a;https://www.libreoffice.org/download/download-libreoffice/?typedeb-x86_64&version7.6.2&langzh-CN 将文件上传到服务器并解压缩备用&#xff0c…...

编程日记 2023/11/13 11:37:07

Intel Devkit Call for Paper Challenge - Advanced Award

...

编程日记 2023/11/13 11:36:06

【正点原子STM32连载】 第五十章 FATFS实验 摘自【正点原子】APM32F407最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子stm32f103战舰开发板V4 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html## 第五…...

编程日记 2023/11/13 11:34:03

12. 机器学习——评价指标

机器学习面试题汇总与解析——评价指标 本章讲解知识点 什么是评价指标？机器学习本专栏适合于Python已经入门的学生或人士，有一定的编程基础。本专栏适合于算法工程师、机器学习、图像处理求职的学生或人士。本专栏针对面试题答案进行了优化，尽量做到好记、言简意赅。这才是…...

编程日记 2023/11/13 11:33:01

代码随想录算法训练营第23期day45|70. 爬楼梯 （进阶）、322. 零钱兑换、279.完全平方数

目录 一、&#xff08;leetcode 70&#xff09;爬楼梯 二、&#xff08;leetcode 322&#xff09;零钱兑换 三、&#xff08;leetcode 279&#xff09;完全平方数 一、&#xff08;leetcode 70&#xff09;爬楼梯 力扣题目链接​​​​​​ 状态&#xff1a;查看思路后AC 除…...

编程日记 2023/11/13 11:32:00

uniapp公共css

/* 弹性布局 */ .flex{display: flex; } .a-c{align-items: center; } .a-s{align-items: flex-start; } .a-e{align-items: flex-end; } .j-c{justify-content: center; } .j-sb{justify-content: space-between; } .j-s{justify-content: flex-start; } .j-e{justify-content…...

编程日记 2023/11/13 11:28:58

C语言—i++、++i、条件运算符、goto语句、注释

i和i #include <stdio.h> int main() {int i5,j;j i;printf("i%d,j%d\n", i, j);i 5;j i;printf("i%d,j%d\n", i, j);system("pause");return 0;}i6,j6 i6,j5 请按任意键继续. . .条件运算符 goto语句 #include <stdio.h> int …...

编程日记 2023/11/13 11:27:57

PostgreSQL 数据误删 止损操作

一、核心原理&#xff1a;为什么数据能恢复&#xff1f;​ 在 PostgreSQL 中&#xff0c;执行 DELETE 操作后&#xff0c;数据并不会立即从磁盘上物理擦除。PostgreSQL 使用多版本并发控制&#xff08;MVCC&#xff09;机制&#xff0c;删除操作仅仅是给数据行打上了一个“已删…...

编程新知 2026/4/8 18:22:39

为什么92%的.NET团队在AI推理上卡在.NET 6/7？揭秘.NET 11新增AOT+TensorRT绑定+动态图编译三大硬核能力（附架构图对比表）

第一章&#xff1a;.NET 11 AI模型推理加速架构全景概览 .NET 11 将原生 AI 推理能力深度集成至运行时与 SDK 层&#xff0c;构建起端到端的高性能、跨平台模型执行栈。该架构摒弃传统“模型导出外部引擎调用”的松耦合模式&#xff0c;转而采用统一张量抽象&#xff08; Tenso…...

编程新知 2026/4/8 17:05:07

ArcGIS Pro实战：5分钟搞定气象站点TXT坐标转面状Shapefile（附Python脚本）

ArcGIS Pro气象数据处理实战&#xff1a;从TXT坐标到面状Shapefile的高效转换 在地理信息系统(GIS)工作中&#xff0c;气象站点数据的处理是常见但容易出错的环节。许多气象数据以TXT格式存储&#xff0c;包含站点坐标和边界信息&#xff0c;而将这些数据转换为GIS可用的面状Sh…...

编程新知 2026/4/8 16:56:52

OmAgent性能优化技巧：10个方法提升你的AI代理运行效率

OmAgent性能优化技巧&#xff1a;10个方法提升你的AI代理运行效率 【免费下载链接】OmAgent [EMNLP-2024] Build multimodal language agents for fast prototype and production 项目地址: https://gitcode.com/gh_mirrors/om/OmAgent OmAgent是一个用于构建多模态语言…...

编程新知 2026/4/8 16:33:38

多个自媒体账号如何高效管理：AI+工具+方法

你可曾有过这般情形&#xff1f;早晨才刚给公众号弄好稿子&#xff0c;到了中午就得登录知乎去发布问答&#xff0c;下午还得切换到百家号去瞧瞧是否被收录&#xff0c;到了晚上又忽然想起小红书还没更新……忙得那是手忙脚乱的&#xff0c;自己都不晓得哪个账号今天都发了些&a…...

编程新知 2026/4/8 16:27:36

Redis命令处理机制源码探究霉

一、项目背景与核心价值 1. 解决的核心痛点 Navicat的数据库连接密码并非明文存储&#xff0c;而是通过AES算法加密后写入.ncx格式的XML配置文件中。一旦用户忘记密码&#xff0c;常规方式只能重新配置连接&#xff0c;效率极低。本项目只作为学习研究使用&#xff0c;不做其他…...

编程新知 2026/4/8 15:44:40

HOJ实战：从零部署到功能扩展的完整开发指南

1. 环境准备与基础部署 在CentOS系统上部署HOJ在线判题系统&#xff0c;宝塔面板是最便捷的选择。我实测过多次&#xff0c;用宝塔可以省去80%的配置时间。首先确保你的服务器满足最低配置要求&#xff1a;2核CPU、4GB内存、50GB硬盘空间。这个配置足够支撑中小规模的在线判题…...

编程新知 2026/4/8 13:46:25

WebP图片处理全攻略：如何让Java的Thumbnails支持最新图片格式（含SPI机制解析）

WebP图片处理全攻略&#xff1a;Java生态下的高效解决方案与SPI机制深度解析 WebP作为Google推出的新一代图片格式&#xff0c;凭借其卓越的压缩效率和动画支持能力&#xff0c;正在逐步改变互联网图像存储与传输的格局。根据最新行业统计&#xff0c;采用WebP格式的网站平均可…...

编程新知 2026/4/8 12:20:24

QMC音乐格式全能解码：解放你的数字音乐收藏

QMC音乐格式全能解码&#xff1a;解放你的数字音乐收藏 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#xff0c;默认转换结果存储…...

编程新知 2026/4/8 12:04:04

如何永久保存网络小说？这款开源工具让你的阅读体验不再受限于平台

如何永久保存网络小说&#xff1f;这款开源工具让你的阅读体验不再受限于平台 【免费下载链接】fanqienovel-downloader 下载番茄小说 项目地址: https://gitcode.com/gh_mirrors/fa/fanqienovel-downloader 核心痛点分析&#xff1a;数字阅读时代的内容失控危机 识别阅…...

编程新知 2026/4/8 11:57:58