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

html 笔记：CSS

news 文章来源：https://blog.csdn.net/qq_40206371/article/details/133640601 2025/1/16 1:03:54

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

小谈设计模式（14）—建造者模式

小谈设计模式&#xff08;14&#xff09;—建造者模式 专栏介绍专栏地址专栏介绍 建造者模式角色分类产品&#xff08;Product&#xff09;抽象建造者&#xff08;Builder&#xff09;具体建造者&#xff08;Concrete Builder&#xff09;指挥者&#xff08;Director&#xff0…...

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

【kubernetes】k8s中的选主机制

leader-election选主机制 1 为什么需要leader-election&#xff1f; 在集群中存在某种业务场景&#xff0c;一批相同功能的进程同时运行&#xff0c;但是同一时刻&#xff0c;只能有一个工作&#xff0c;只有当正在工作的进程异常时&#xff0c;才会由另一个进程进行接管。这…...

编程日记 2023/10/8 13:43:42

学生选课系统基础版

第四章java中的集合框架 4.1&#xff1a;java中的集合框架概述 1.java概念与作用 现实中很多事物凑在一起都是集合 如购物车是商品的集合 军队呢 是军人的集合 学校是学生的结合 数学中的集合&#xff1a; 具有共同属性的事物的总体 java中的集合类呢 跟数学的集…...

编程日记 2023/10/8 13:41:39

redis no-appendfsync-on-rewrite

no-appendfsync-on-rewriteyes 当用户请求写入redis的时候&#xff0c;这部分数据只是保存在内存中&#xff0c;主线程并不会马上对此数据进行 aof刷盘&#xff08;而是根据aof刷盘的频率由子线程进行同步&#xff09;&#xff0c;这样子不会阻塞但是会导致数据丢失no-appendfs…...

编程日记 2023/10/8 13:40:38

Spring Cloud Gateway2之路由详解

Spring Cloud Gateway路由 文章目录 1. 前言2. Gateway路由的基本概念3. 三种路由1. 静态路由2. 动态路由1. 利用外部存储2. API动态路由 3. 服务发现路由(自动路由)3.1. 配置方式3.2 自动路由&#xff08;服务发现&#xff09;原理核心源码GatewayDiscoveryClientAutoConfigur…...

编程日记 2023/10/8 13:39:35

阿里云RDS关系型数据库详细介绍_多版本数据库说明

阿里云RDS关系型数据库大全&#xff0c;关系型数据库包括MySQL版、PolarDB、PostgreSQL、SQL Server和MariaDB等&#xff0c;NoSQL数据库如Redis、Tair、Lindorm和MongoDB&#xff0c;阿里云百科分享阿里云RDS关系型数据库大全&#xff1a; 目录 阿里云RDS关系型数据库大全 …...

编程日记 2023/10/8 13:38:31

Vue中的数据绑定

一、v-bind单向数据绑定 单向数据绑定中&#xff0c;数据只能由data流向页面。 v-bind:属性名"data变量" 或简写为 :属性名"data变量" 我们修改data中的iptvalue值&#xff0c;页面input框中的value值改变。 而我们修改input框中的value值&#xff0…...

编程日记 2023/10/8 13:37:30

前后端分离计算机毕设项目之基于SpringBoot的旅游网站的设计与实现《内含源码+文档+部署教程》

博主介绍&#xff1a;✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久&#xff0c;选择我们就是选择放心、选择安心毕业✌ &#x1f345;由于篇幅限制&#xff0c;想要获取完整文章或者源码&#xff0c;或者代做&am…...

编程日记 2023/10/8 13:36:27

[JAVAee]Spring拦截器

适用场景 像是页面的登录验证处理,权限校验,登录日志的处理. 实现步骤 创建⾃定义拦截器,实现 HandlerInterceptor 接⼝的 preHandle&#xff08;执⾏具体⽅法之前的预处理⽅法.将⾃定义拦截器加⼊ WebMvcConfigurer 的 addInterceptors ⽅法中. 下面以登录验证为例,实现拦…...

编程日记 2023/10/8 13:35:26

【nvm】Node Version Manager（NVM）安装配置以及使用（WIN版）

NVM 包管理工具 安装 访问NVM-Windows的GitHub页面&#xff1a;点击nvm-setup.exe。 根据提示进行下一步&#xff0c;文件位置选择自定义位置 验证安装是否成功 nvm version 。如果成功&#xff0c;它将显示NVM的版本号。 使用 nvm list available查看所有的可以被下载…...

编程日记 2023/10/8 13:34:24

个人信息网站建设的心得体会/常见的网络营销工具有哪些

飞机大战 java 源代码 (19页)本资源提供全文预览&#xff0c;点击全文预览即可全文预览,如果喜欢文档就下载吧&#xff0c;查找使用更方便哦&#xff01;14.9 积分package com;import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Image;…...

编程日记 2025/1/16 0:27:22

网站开发策划个人简历/百度搜索引擎的特点

当前&#xff0c;物联网技术正在推动人类社会从“信息化”向“智能化”转变&#xff0c;促进信息科技与产业发生巨大变化。但目前的实际情况来看&#xff0c;物联网的终端设备类型多、数量大&#xff0c;安装运维成本高、工作量大&#xff0c;新业务、新功能扩展靠硬件盒子“堆…...

编程日记 2025/1/15 21:32:20

全球网站域名/关键词排名优化系统

hashMap源码获取元素的位置&#xff1a; static int indexFor(int h, int length) {// assert Integer.bitCount(length) 1 : "length must be a non-zero power of 2";return h & (length-1); } 解释&#xff1a; h:为插入元素的hashcode length:为map的容量…...

编程日记 2025/1/15 14:40:50

php做动态网站/seo搜索引擎优化技术

SQL Server 数据库启动过程&#xff0c;以及启动不起来的各种问题的分析及解决技巧参考文章&#xff1a; &#xff08;1&#xff09;SQL Server 数据库启动过程&#xff0c;以及启动不起来的各种问题的分析及解决技巧 &#xff08;2&#xff09;https://www.cnblogs.com/VicL…...

编程日记 2025/1/15 13:29:41

竞猜网站模板/企业qq多少钱一年

考虑在每个点的出边中删除哪些。如果其出边所指向的点中存在某点能到达另一点&#xff0c;那么显然指向被到达点的边是没有用的。于是拓扑排序逆序处理&#xff0c;按拓扑序枚举出边&#xff0c;bitset维护可达点集合即可。 #include<iostream> #include<cstdio> …...

编程日记 2025/1/15 11:46:49

站点搜索/产品推广文案范文

2019独角兽企业重金招聘Python工程师标准>>> 1. volatile的作用 a.volatile关键字可以简单保持赋值和返回操作的原子性&#xff0c;弱同步。 比如&#xff1a;读取和写入long和double不是原子性的操作&#xff0c;jvm会把64位&#xff08;long和double&#xff09;的…...

编程日记 2025/1/15 8:59:58