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

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

news 2025/7/8 2:33:15

写在前面

        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-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/7/7 2:54:30

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/6/26 0:06:54

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2025/7/8 1:12:18

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2025/7/5 16:03:22

select、poll、epoll 与 Reactor 模式

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

编程新知 2025/7/6 19:09:54

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/7/4 2:55:01

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/7/7 16:35:25

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2025/7/6 18:53:48

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

编程新知 2025/7/6 3:29:42

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术点解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术点解析 第一轮&#xff1a;基础概念问题 请解释Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; 程序员JY回答&#xff1a;Spring框架的核心容器是IoC容器&#xff08;控制反转…...

编程新知 2025/7/4 20:43:12