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

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

news 2026/2/10 21:29:20

文章目录

  • 一、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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/8 4:37:29

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2026/2/10 4:40:33

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/2/10 13:23:50

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

编程新知 2026/1/30 2:28:32

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/12/22 12:09:15