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

html 笔记：CSS

news 2026/2/8 6:26:32

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

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/1/31 13:59:37

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2026/1/15 4:39:38

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/31 15:09:31

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2026/1/30 16:09:53

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/31 11:13:53

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2026/1/26 19:10:48

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53