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

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

news 2026/1/2 7:46:40

文章目录

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

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/12/30 9:45:33

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/11/9 1:27:18

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/12/22 12:07:54

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/12/28 22:06:35

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/12/12 4:55:21

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44