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

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

news 2026/5/18 18:17:23

写在前面

        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

从Halo部署到公网访问：手把手教你用Nginx反代搞定域名、HTTPS与安全配置

从Halo部署到公网访问&#xff1a;Nginx反代全流程实战指南 当你成功在本地服务器上部署了Halo博客系统&#xff0c;看着8080端口的测试页面时&#xff0c;是否思考过如何让它成为真正的互联网站点&#xff1f;本文将带你跨越从本地测试到公网可访问的最后一道鸿沟&#xff0c;…...

编程新知 2026/5/18 17:48:15

基于MCP协议构建AI与MongoDB数据交互的标准化桥梁

1. 项目概述&#xff1a;一个为AI应用注入数据库灵魂的MCP服务器如果你正在开发基于大语言模型&#xff08;LLM&#xff09;的AI应用&#xff0c;比如一个智能客服、一个文档分析助手&#xff0c;或者一个能帮你从海量数据中提炼洞察的智能体&#xff0c;你可能会遇到一个核心痛…...

编程新知 2026/5/18 17:46:09

C++ 列表初始化容器

initializer_list是一个模板类&#xff0c;可能你已经用过它了但不知道而已&#xff0c;比如下面的代码就用了 #include <iostream> #include <vector>int main() {std::vector<int> vc({ 1,2,3,4 }); //这里调用了构造函数&#xff0c;实参为{1,2,3,4}ret…...

编程新知 2026/5/18 17:00:35

纯文本表格终极指南：如何在代码注释和技术文档中优雅展示数据

纯文本表格终极指南&#xff1a;如何在代码注释和技术文档中优雅展示数据 【免费下载链接】plain-text-table 项目地址: https://gitcode.com/gh_mirrors/pl/plain-text-table 在纯文本环境中展示结构化数据一直是个技术难题。无论是代码注释、终端输出、技术问答平台还…...

编程新知 2026/5/18 16:08:08

3分钟学会Charticulator：零代码制作专业数据图表的终极指南

3分钟学会Charticulator&#xff1a;零代码制作专业数据图表的终极指南 【免费下载链接】charticulator Interactive Layout-Aware Construction of Bespoke Charts 项目地址: https://gitcode.com/gh_mirrors/ch/charticulator 还在为制作专业图表而头疼吗&#xff1f;…...

编程新知 2026/5/18 16:03:56

别再被Windows Defender误报了！手把手教你用PowerShell自制证书给EXE签名

别再被Windows Defender误报了&#xff01;手把手教你用PowerShell自制证书给EXE签名 当你在深夜终于完成了一个自研小工具的编译&#xff0c;迫不及待地双击运行时&#xff0c;那个熟悉的红色警告框又弹了出来——"Windows Defender已阻止此程序运行"。作为开发者&…...

编程新知 2026/5/18 15:44:22

051岛屿数量

岛屿数量 题目链接&#xff1a;https://leetcode.cn/problems/number-of-islands/description/?envTypestudy-plan-v2&envIdtop-100-liked 我的解答&#xff1a; public int numIslands(char[][] grid) {int m grid.length, n grid[0].length;int[][] directions new i…...

编程新知 2026/5/18 15:35:53

RV1126 NPU部署ResNet50全流程：从PyTorch训练到嵌入式板端推理

1. 项目概述&#xff1a;从零到一&#xff0c;在RV1126上跑通ResNet50最近在折腾一块EASY-EAI-Nano开发板&#xff0c;核心是瑞芯微的RV1126芯片&#xff0c;这玩意儿带了个NPU&#xff0c;不拿来跑跑AI模型实在说不过去。手头正好有个车辆分类的需求&#xff0c;就想试试经典的…...

编程新知 2026/5/18 14:32:15

LizzieYzy深度解析：专业围棋AI分析平台的实战进阶手册

LizzieYzy深度解析&#xff1a;专业围棋AI分析平台的实战进阶手册 【免费下载链接】lizzieyzy LizzieYzy - GUI for Game of Go 项目地址: https://gitcode.com/gh_mirrors/li/lizzieyzy 在围棋AI技术日新月异的今天&#xff0c;如何将强大的计算能力转化为实用的分析工…...

编程新知 2026/5/18 14:15:41

终极无人机仿真平台XTDrone：从入门到精通的完整指南

终极无人机仿真平台XTDrone&#xff1a;从入门到精通的完整指南 【免费下载链接】XTDrone UAV Simulation Platform based on PX4, ROS and Gazebo 项目地址: https://gitcode.com/gh_mirrors/xt/XTDrone XTDrone是一款基于PX4飞控、ROS机器人操作系统和Gazebo物理引擎的…...

编程新知 2026/5/18 13:49:57