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

【CSS系列】第一章 · CSS基础

news 2026/2/5 0:22:16

写在前面

        Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

        如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

目录

写在前面

1. CSS简介

1.1 初识CSS

 2. CSS的编写位置

2.1 行内样式

2.2 内部样式

2.3 外部样式

3. 样式表的优先级

3.1 优先级规则

3.2 三种样式表的优缺点

4. CSS语法规范

4.1 CSS语法规范

4.2 CSS代码风格

结语

【其他系列】

【HTML系列】

【Java基础系列】（已更新完）

1. CSS简介

1.1 初识CSS

  • CSS 的全称为：层叠样式表 ( Cascading Style Sheets ) 。
  • CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等。
  • 简单理解： CSS 可以美化 HTML , 让 HTML 更漂亮。
  • 核心思想： HTML 搭建结构， CSS 添加样式，实现了：结构与样式的分离。

 2. CSS的编写位置

2.1 行内样式

  • 写在标签的 style 属性中，（又称：内联样式）。
  • 语法： 
<h1 style="color:red;font-size:60px;">欢迎学习前端</h1>
  • 注意点：
    • style 属性的值不能随便写，写要符合 CSS 语法规范，是 名:值; 的形式。
    • 行内样式表，只能控制当前标签的样式，对其他标签无效。
  • 存在的问题：
    • 书写繁琐、样式不能复用、并且没有体现出：结构与样式分离 的思想，不推荐大量使用，只有对当前元素添加简单样式时，才偶尔使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>位置1_行内样式</title>
</head>
<body><h1 style="color: green;font-size: 80px;">欢迎学习前端1</h1><h2 style="color: green;font-size: 80px;">欢迎学习前端2</h2>
</body>
</html>

2.2 内部样式

  • 写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 <style> 标签中。
  • 语法： 
<style>h1 {color: red;font-size: 40px;}
</style>
  • 注意点：
    • <style> 标签理论上可以放在 HTML 文档的任何地方，但一般都放在 <head> 标签中。
    • 此种写法：样式可以复用、代码结构清晰。
  • 存在的问题：
    • 并没有实现：结构与样式完全分离。
    • 多个 HTML 页面无法复用样式。 
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>位置2_内部样式</title><style>h1{color: green;font-size: 40px;}h2{color: red;font-size: 60px;}p{color: blue;font-size: 80px;}img{width: 200px;}</style>
</head>
<body><h1>欢迎学习前端1</h1><h2>欢迎学习前端2</h2><p>北京欢迎你</p><p>上海欢迎你</p><p>深圳欢迎你</p><p>武汉欢迎你</p><p>西安欢迎你</p><img src="../images/小姐姐.gif" alt="小姐姐">
</body>
</html>

2.3 外部样式

  • 写在单独的 .css 文件中，随后在 HTML 文件中引入使用。

语法：

  • 新建一个扩展名为 .css 的样式文件，把所有 CSS 代码都放入此文件中
h1{color: red;font-size: 40px;
}
  • 在 HTML 文件中引入 .css 文件。 
<link rel="stylesheet" href="./xxx.css">
注意点：
  • <link> 标签要写在 <head> 标签中。
  • <link> 标签属性说明：
    • href ：引入的文档来自于哪里。
    • rel ：( relation ：关系）说明引入的文档与当前文档之间的关系。
  • 外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度 ，实现了结构与样式的完全分离。
  • 实际开发中，几乎都使用外部样式，这是最推荐的使用方式！

3. 样式表的优先级

3.1 优先级规则

  • 优先级规则：行内样式 > 内部样式 = 外部样式
  • 内部样式、外部样式，这二者的优先级相同，且：后面的 会覆盖 前面的（简记：“后来者居上”）。
  • 同一个样式表中，优先级也和编写顺序有关，且：后面的 会覆盖 前面的（简记：“后来者居上”）。

3.2 三种样式表的优缺点

4. CSS语法规范

4.1 CSS语法规范

CSS 语法规范由两部分构成：

  • 选择器：找到要添加样式的元素。
  • 声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为： 属性名: 属性值;
  • 备注1：最后一个声明后的分号理论上能省略，但最好还是写上。
  • 备注2：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上。

注释的写法：

 

/* 给h1元素添加样式 */
h1 {/* 设置文字颜色为红色 */color: red;/* 设置文字大小为40px */font-size: 40px
}

4.2 CSS代码风格

  • 展开风格 —— 开发时推荐，便于维护和调试。 
h1 {color: red;font-size: 40px;
}
  • 紧凑风格 —— 项目上线时推荐，可减小文件体积。
h1{color:red;font-size:40px;}
备注：
  • 项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文件体积，节约网络流量，同时也能让用户打开网页时速度更快。

结语

本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力

相关文章：

【CSS系列】第一章 · CSS基础

写在前面 Hello大家好&#xff0c; 我是【麟-小白】&#xff0c;一位软件工程专业的学生&#xff0c;喜好计算机知识。希望大家能够一起学习进步呀&#xff01;本人是一名在读大学生&#xff0c;专业水平有限&#xff0c;如发现错误或不足之处&#xff0c;请多多指正&#xff0…...

编程日记 2023/5/25 21:53:04

【Java代码审计】表达式注入

1 前置知识 1.1 EL表达式 EL表达式主要功能&#xff1a; 获取数据&#xff1a;可以从JSP四大作用域中获取数据执行运算&#xff1a;执行一些关系运算&#xff0c;逻辑运算&#xff0c;算术运算获取web开发常用对象&#xff1a;通过内置 的11个隐式对象获取想要的数据调用jav…...

编程日记 2023/5/20 16:13:48

Python-GEE遥感云大数据分析、管理与可视化

Python-GEE遥感云大数据分析、管理与可视化近年来遥感技术得到了突飞猛进的发展&#xff0c;航天、航空、临近空间等多遥感平台不断增加&#xff0c;数据的空间、时间、光谱分辨率不断提高&#xff0c;数据量猛增&#xff0c;遥感数据已经越来越具有大数据特征。遥感大数据的出…...

编程日记 2023/5/26 2:49:35

信息学奥赛一本通 1375：骑马修栅栏(fence) | 洛谷 P2731 [USACO3.3]骑马修栅栏 Riding the Fences

【题目链接】 ybt 1375&#xff1a;骑马修栅栏(fence) 洛谷 P2731 [USACO3.3]骑马修栅栏 Riding the Fences 【题目考点】 1. 图论&#xff1a;欧拉回路 欧拉回路存在的条件&#xff1a;图中所有顶点的度都是偶数欧拉路径存在的条件&#xff1a;图中只有两个度为奇数的顶点…...

编程日记 2023/5/20 21:33:25

Spring Boot 应用的打包和发布

1. 创建项目&#xff08;example-fast&#xff09; 基于 Spring Boot 创建一个 WEB 项目 example-fast。 2. 编译打包 2.1 采用 IDEA 集成的 Maven 环境来对 Spring Boot 项目编译打包&#xff0c;可谓是超级 easy 2.2 mvn 命令打包 # mvn clean 清理编译 # install 打包 #…...

编程日记 2023/5/22 6:43:35

linux：iptables (3) 命令行操练（一）

目录 1.命令行手册查缺补漏 2.开始练习,从最陌生的参数练习开启 2.1 --list-rules -S &#xff1a;打印链或所有链中的规则 2.2 --zero -Z 链或所有链中的零计数器 2.3 --policy -P 修改默认链的默认规则 2.4 --new -N 接下来练习添加和删除自定义链 1.命令行手册查缺补…...

编程日记 2023/5/21 17:21:25

synchronized(this) 与synchronized(class) 有啥区别

前言 synchronized(this) 与 synchronized(class) 相同处&#xff1a;均对代码加锁&#xff0c;实现互斥性。synchronized(this) 与 synchronized(class) 区别&#xff1a;作用域不同。 synchronized (this) synchronized(this)使用的是对象锁。this为关键词&#xff0c;表示…...

编程日记 2023/5/23 9:18:14

BOSS直拒、失联招聘，消失的“金三银四”，失业的测试人出路在哪里？

裁员潮涌&#xff0c;经济严冬。最近很多测试人过得并不好&#xff0c;行业缩水对测试岗位影响很直接干脆&#xff0c;究其原因还是测试门槛在IT行业较低&#xff0c;同质化测试人员比较多。但实际上成为一位好测试却有着较高的门槛&#xff0c;一名优秀的测试应当对产品的深层…...

编程日记 2023/5/25 16:52:23

华为OD机试【密室逃生游戏】

密室逃生游戏 题目 小强增在参加《密室逃生》游戏&#xff0c;当前关卡要求找到符合给定 密码 K&#xff08;升序的不重复小写字母组 成&#xff09; 的箱子&#xff0c; 并给出箱子编号&#xff0c;箱子编号为 1~N 。 每个箱子中都有一个 字符串 s &#xff0c;字符串由大写字…...

编程日记 2023/5/23 3:09:27

【Python学习笔记（六）】json解析模块的使用

json解析模块的使用 前言 json 是一种轻量级的数据交换格式&#xff0c;通过对象和数组的组合来表示数据。在 Python3 中可以使用 json 模块来对 json 数据进行编解码。 json 模块 是 Python 标准库模块&#xff0c;无需手动安装&#xff0c;可以直接导入 import json # 导入…...

编程日记 2023/5/21 15:00:03

《Spring系列》第3章 基于注解管理Bean

基于注解方式管理Bean 1.通过注解管理Bean 1) 基础注解 Component Service Controller Repository 2) 基于XML的注解扫描 a> 引入依赖 spring-aop-5.1.5.RELEASE.jarb> 开启组件扫描 最简单的开启注解 <context:component-scan base-package"com.jianan&q…...

编程日记 2023/5/23 11:47:19

【Redis】十大数据类型（下篇）

文章目录redis位图(bitmap) --- 底子还是string基本命令图示setbit key offset value setbit 键 偏移位 只能零或者1getbit key offset 查看获取字符串长度 strlen统计key中包含1的个数 bitcount keybitop 统计两个比特key是否都为1技术落地&#xff1a;打卡签到&#xff0c;频…...

编程日记 2023/5/31 17:42:22

【第十一届“泰迪杯”数据挖掘挑战赛】B题产品订单的数据分析与需求预测“解题思路“”以及“代码分享”

【第十一届泰迪杯B题产品订单的数据分析与需求预测产品订单的数据分析与需求预测 】第一大问代码分享&#xff08;后续更新LSTMinformer多元预测多变量模型&#xff09; PS: 代码全写有注释&#xff0c;通俗易懂&#xff0c;包看懂&#xff01;&#xff01;&#xff01;&…...

编程日记 2023/5/24 0:04:46

Python入门到高级【第一章】

预计更新第一章. Python 简介 Python 简介和历史Python 特点和优势安装 Python 第二章. 变量和数据类型 变量和标识符基本数据类型&#xff1a;数字、字符串、布尔值等字符串操作列表、元组和字典 第三章. 控制语句和函数 分支结构&#xff1a;if/else 语句循环结构&#…...

编程日记 2023/5/24 9:34:30

【泰凌微TLSR8258 zigbee】OTA升级操作方法

目录 程序启动模式多地址启动模式Bootloader 启动模式多地址启动模式 Flash 分布Bootloader 启动模式Flash分布模式OTA升级OTA初始化OTA ServerOTA ClientOTA升级固件生成程序启动模式 在介绍OTA升级操作方法前，我们先介绍一下程序的启动模式，以及不同启动模式的优缺点。 多…...

编程日记 2023/5/24 11:08:13

网络基础设施监控

在过去的几十年里&#xff0c;网络基础设施在规模和功能方面都变得复杂起来。不断增长的业务需求和不断增长的技术能力推动了这种快速增长&#xff0c;监控网络基础设施以确保其最佳性能和最大效率已成为任何希望成为行业领跑者的组织不可或缺的优先事项。 什么是网络基础设施…...

编程日记 2023/5/25 5:52:42

OPNET Modeler 例程——创建一个包交换网络

文章目录一、例程简介二、创建新的包格式三、创建新的链路模型四、创建中心交换节点模型五、创建中心交换节点的进程模型六、创建周边节点模型七、创建周边节点进程模块八、创建网络模型九、收集统计量十、配置并仿真总结一、例程简介 本例程将仿真一个简单的包交换网络&#…...

编程日记 2023/5/23 19:16:32

JSON 基础结构

什么是JSON JSON&#xff0c;说白了就是JavaScript用来处理数据的一种格式&#xff0c;这种格式非常简单易用。 JSON&#xff0c;大部分都是用来处理JavaScript和web服务器端之间的数据交换&#xff0c;把后台web服务器的数据传递到前台&#xff0c;然后使用JavaScript进行处…...

编程日记 2023/5/24 0:52:19

雷达基础知识

雷达频率划分 以下是按照频率和波长划分雷达频段的表格&#xff1a; 波段名称频率范围&#xff08;GHz&#xff09;波长范围&#xff08;cm&#xff09;应用领域VHF0.03 - 0.3100 - 10气象雷达、空管雷达、航空雷达UHF0.3 - 3100 - 10航空雷达、海上雷达、地面雷达、火控雷达…...

编程日记 2023/5/23 18:29:49

【二阶锥规划】考虑气电联合需求响应的气电综合能源配网系统协调优化运行【IEEE33节点】（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/5/23 15:59:05

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

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

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

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/1/31 6:09:20

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2026/2/2 2:19:38

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2025/10/15 8:34:59

用 Rust 重写 Linux 内核模块实战：迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...

编程新知 2025/10/25 19:31:21