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

html 笔记：CSS

news 2025/12/20 0:47:17

1 什么是CSS

  • CSS 指层叠样式表 (Cascading Style Sheets)
    • 样式定义如何显示 HTML 元素
    • 样式通常存储在样式表中

1.1 css的语法格式

1.1.1 选择器种类

  • HTML选择器： 重新定义HTML的某种标签的显示格式
  • id选择器 对于HTML文档中的某个标签，定义它的显示格式
  • class选择器    对于HTML文档中的某类标签，定义它的显示格式

1.1.2 HTML选择器

<!DOCTYPE html>
<html><head><title> HTML选择器的使用</title><style>h1 {color:red;                 font-size:15;                font-family: 微软雅黑;           }</style></head><body><h1> HTML选择器的使用</h1></body>
</html>

1.1.3 ID选择器

前面加#

<!DOCTYPE html>
<html><head><title> HTML选择器的使用</title><style>#CSSID1 {color:blue;                 font-size:35;                font-family: 楷体;           }</style></head><body><h1> 不使用ID选择器</h1><h1 id='CSSID1'> 使用ID选择器</h1></body>
</html>

1.1.4 class选择器

前面加.

<!DOCTYPE html>
<html><head><title> HTML选择器的使用</title><style>.CSSID1 {color:blue;                          }.CSSID2 {                 font-size:15;                font-family: 楷体;           }</style></head><body><h1> 不使用class选择器</h1><h1 class='CSSID1'> 使用一个class选择器</h1><h1 class='CSSID1 CSSID2'> 使用两个class选择器</h1></body>
</html>

 

1.1.5 class选择器与ID选择器的区别（唯一性）

  • 在一个 HTML 文档中，每个 id 的值必须是唯一的。一个元素不能有多个 id，并且在一个页面中每个 id 只能使用一次。
  • class 可以用于多个元素，而且一个元素可以有多个 class。

2 三种不同的样式表

2.1 嵌入样式表

前面1.1.2~1.1.4的内容

2.2 内联样式表

写在body里面

<!DOCTYPE html>
<html><head><title> HTML选择器的使用</title></head><body><h1> 不使用CSS内联样式表</h1><h1 style='color:blue;                 font-size:35;                font-family: 楷体;'> 使用CSS内联样式表</h1></body>
</html>

2.3 外联样式表

首先建立一个外部的css格式的文件（h1.css)，内容和class样式表一致：

<!DOCTYPE html>
<html><head><title> HTML选择器的使用</title><link rel='stylesheet' href='h1.css'></head><body><h1> 不使用class选择器</h1><h1 class='CSSID1'> 使用一个class选择器</h1><h1 class='CSSID1 CSSID2'> 使用两个class选择器</h1></body>
</html>
  • rel 属性的值 "stylesheet" 表示被链接文档是一个样式表，并且它应用于当前的 HTML 文档
  • href指定了被链接文档的位置

相关文章：

html 笔记：CSS

1 什么是CSS CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中 1.1 css的语法格式 1.1.1 选择器种类 HTML选择器&#xff1a; 重新定义HTML的某种标签的显示格式id选择器 对于HTML文档中的某个标签&#xff0c;定义它的显示格式…...

编程日记 2023/10/8 14:14:19

【LeetCode - 每日一题】901. 股票价格跨度（23.10.07）

901. 股票价格跨度 题意 设计一个数据结构返回股票当日价格的跨度&#xff08;必须是当日开始的&#xff09; 解法 暴力 优化 一开始没理解题意&#xff0c;以为是求第 i 天及以前&#xff0c;小于等于 prices[i] 的最大连续子串的长度。后来才发现&#xff0c;这个最大连…...

编程日记 2023/10/8 14:13:18

第二证券：突发！A股T+0？刚刚，紧急回应！

沪深生意所急迫回应 6日&#xff0c;商场传出一个消息&#xff0c;传延伸A股生意时刻和部分票可日内T0一次。一个版本是提早至9点&#xff0c;然后下午延伸至15&#xff1a;30&#xff0c;另一个版本是上午推延至12点&#xff0c;下午延伸至16&#xff1a;00。 7日&#xff0…...

编程日记 2023/10/8 14:12:17

ShardingSphereJDBC5.4.0支持Nacos配置（SpringCloud版）

背景 在ShardingSphere在5.3.0版本之前&#xff0c;我们可以通过依赖shardingsphere-jdbc-core-spring-boot-starter模块&#xff0c;在application.yml文件里配置数据库连接信息。再结合spring-cloud-starter-alibaba-nacos-config&#xff0c;在项目启动时&#xff0c;从Nac…...

编程日记 2023/10/8 14:10:16

基于SSM的学院学生论坛系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用Vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

编程日记 2023/10/8 14:09:15

Unity记录5.4-地图-带种子的柏林噪声

文章首发见博客&#xff1a;https://mwhls.top/4850.html。 无图/格式错误/后续更新请见首发页。 更多更新请到mwhls.top查看 欢迎留言提问或批评建议&#xff0c;私信不回。 汇总&#xff1a;Unity 记录 现在卡在了跨地图洞穴生成&#xff0c;没想到什么好的方法能够像地面一样…...

编程日记 2023/10/8 14:08:14

阅读论文：Label-Free Liver Tumor Segmentation

论文标题&#xff1a;Label-Free Liver Tumor Segmentation 翻译&#xff1a;无标记的肝肿瘤分割 摘要 论文的目的&#xff1a;肿瘤合成&#xff0c;通过使用合成数据来改进医学图像分析和AI在肝脏肿瘤检测方面的性能 我们的主要贡献是合成了一种肿瘤生成器&#xff0c;它提…...

编程日记 2023/10/8 14:07:13

leetcode64 最小路径和

题目 给定一个包含非负整数的 m x n 网格 grid &#xff0c;请找出一条从左上角到右下角的路径&#xff0c;使得路径上的数字总和为最小。 说明&#xff1a;每次只能向下或者向右移动一步。 示例 输入&#xff1a;grid [[1,3,1],[1,5,1],[4,2,1]] 输出&#xff1a;7 解释&a…...

编程日记 2023/10/8 14:06:12

金盘图书馆微信管理后台信息泄露漏洞 复现

金盘图书馆微信管理后台信息泄露漏洞 复现 0x01 前言 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果…...

编程日记 2023/10/8 14:02:07

nginx实现负载均衡（三）

之前说过大部分我们用到的配置都是在http模块中配置的&#xff0c;这里要实现的负载均衡也是一样的&#xff0c;要在http模块中的http全局块中指定&#xff0c;这里我们先给出一个例子 demo #user nobody; worker_processes 1;#error_log logs/error.log; #error_log log…...

编程日记 2023/10/8 14:01:05

Android---深入理解ClassLoader的加载机制

目录 Java 中的 ClassLoader 1. APPClassLoader 系统类加载器 2. ExtClassLoader 扩展类加载器 3. BootstrapClassLoader 启动类加载器 双亲委派模式(Parents Delegation Model) Android 中的 ClassLoader 1. PathClassLoader 2. DexClassLoader 总结 一个完整的 Java…...

编程日记 2023/10/8 14:00:04

超自动化加速落地，助力运营效率和用户体验显著提升｜爱分析报告

RPA、iPaaS、AI、低代码、BPM、流程挖掘等在帮助企业实现自动化的同时&#xff0c;也在构建一座座“自动化烟囱”。自动化工具尚未融为一体&#xff0c;协同价值没有得到释放。Gartner于2019年提出超自动化&#xff08;Hyperautomation&#xff09;概念&#xff0c;主要从技术组…...

编程日记 2023/10/8 13:59:03

Linux posix_spawn和fork的区别

posix_spawn和fork都是用于在Linux中创建新进程的函数&#xff0c;但它们的工作方式有所不同。posix_spawn它的工作方式类似于fork()后跟exec()。 fork&#xff1a;fork函数创建一个新的进程&#xff0c;该进程是调用进程的一个副本。这意味着除了必要的启动资源外&#xff0c;…...

编程日记 2023/10/8 13:53:57

聊聊分布式架构02——Http到Https

目录 HTTP通信协议 请求报文 响应报文 持久连接 状态管理 HTTPS通信协议 安全的HTTPS HTTP到HTTPS的演变 对称加密 非对称加密 混合加密机制 证书机构 SSL到底是什么 HTTPS是身披SSL外壳的HTTP HTTP通信协议 一次HTTP请求的通信流程&#xff1a;客户端浏览器通过…...

编程日记 2023/10/8 13:52:56

1024 画跳动的爱心#程序代码 #编程语言 #计算机

废话不多说 直接开干! 用到库 random time tkinter 快速镜像 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple tkinter 上代码 import random import time from math import sin, cos, pi, log from tkinter import *CANVAS_WIDTH 640 # 画布的宽 CANVAS_HEIGH…...

编程日记 2023/10/8 13:51:55

【排序算法】堆排序详解与实现

一、堆排序的思想 堆排序(Heapsort)是指利用堆积树&#xff08;堆&#xff09;这种数据结构所设计的一种排序算法&#xff0c;它是选择排序的一种。它是通过堆&#xff08;若不清楚什么是堆&#xff0c;可以看我前面的文章&#xff0c;有详细阐述&#xff09;来进行选择数据&am…...

编程日记 2023/10/8 13:50:54

java Spring Boot整合jwt实现token生成

先在 pom.xml 文件中注入依赖 <!-- JWT --> <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt-api</artifactId><version>0.11.2</version> </dependency> <dependency><groupId>io.jsonw…...

编程日记 2023/10/8 13:49:52

如何使用Git和GitHub进行版本控制

如何使用Git和GitHub进行版本控制 版本控制是软件开发过程中的重要组成部分&#xff0c;它允许开发者跟踪和管理代码的变化&#xff0c;以确保团队协作顺畅&#xff0c;并帮助在需要时回溯到以前的代码状态。Git和GitHub是最流行的版本控制工具之一&#xff0c;本文将介绍如何…...

编程日记 2023/10/8 13:48:49

彻底解决 WordPress cURL error 28 错误

cURL 连接超时。 这种情况最普遍&#xff0c;这里的超时并不是完全不可连接&#xff0c;而是因为网络状况或其它原因数据传输缓慢&#xff0c;超过连接的时间限制导致传输中断引起的错误。 不论是何种原因导致连接超时&#xff0c;都可以通过增加超时限制来解决此问题。但 UR…...

编程日记 2023/10/8 13:46:45

LLM项目代码改写

背景&#xff1a; 最近在做代码大语言模型生成项目代码的课题。代码生成现在大部分的工作是在做即时代码生成&#xff0c;这个有点类似代码智能提示&#xff0c;只不过生成的可能是一段片段代码&#xff1b;然而对于整个项目代码的生成做的团队并不多&#xff0c;原因大致如下…...

编程日记 2023/10/8 13:45:44

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/12/15 19:31:01

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/12/18 13:02:44

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2025/12/16 0:29:10

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/12/13 4:20:30

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2025/12/14 4:58:11

系统掌握PyTorch：图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

编程新知 2025/12/16 12:04:34

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...

编程新知 2025/12/4 23:56:14