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

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

news 2025/11/16 16:31:21

文章目录

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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/11/16 15:22:27

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/11/12 2:42:04

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/9/30 14:27:04

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2025/11/7 21:08:07

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/11/16 6:15:06

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2025/11/12 8:19:20

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

编程新知 2025/11/12 20:34:00

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

编程新知 2025/11/13 18:54:09

ubuntu中安装conda的后遗症

缘由: 在编译rk3588的sdk时&#xff0c;遇到编译buildroot失败&#xff0c;提示如下&#xff1a; 提示缺失expect&#xff0c;但是实测相关工具是在的&#xff0c;如下显示&#xff1a; 然后查找借助各个ai工具&#xff0c;重新安装相关的工具&#xff0c;依然无解。 解决&am…...

编程新知 2025/11/13 18:47:47

自定义线程池1.2

自定义线程池 1.2 1. 简介 上次我们实现了 1.1 版本&#xff0c;将线程池中的线程数量交给使用者决定&#xff0c;并且将线程的创建延迟到任务提交的时候&#xff0c;在本文中我们将对这个版本进行如下的优化&#xff1a; 在新建线程时交给线程一个任务。让线程在某种情况下…...

编程新知 2025/9/30 5:11:29