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

html 笔记：CSS

news 2026/2/8 11:22:48

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

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

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

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

编程新知 2026/2/4 16:15:43

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2026/2/1 20:49:03

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2026/2/5 4:17:42

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/2/4 17:51:19

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2026/2/8 4:08:40

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2026/2/7 11:01:56

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2026/1/31 12:27:36

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

编程新知 2026/1/24 4:10:44