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

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

news 文章来源：https://blog.csdn.net/qq_34025246/article/details/129902907 2025/5/18 16:11:10

写在前面

        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

qt 编译器 调试器

电脑版本&#xff1a;win10 64位 qt版本&#xff1a;based on Qt 5.14.0&#xff08;msvc 2017&#xff0c; 32位&#xff09; Qt Creator 4.11.0 qt安装包&#xff1a;qt-opensource-windows-x86-5.9.9.exe 安装过程一路next&#xff0c;安装完成后&#xff0c;默认使用的…...

编程日记 2023/5/26 6:08:48

低代码平台助力AIGC：让人工智能技术更加普及和高效

今年人工智能的风是吹了一波又一波&#xff0c;从ChatGPT到文心一言&#xff0c;短短四个多月的时间&#xff0c;GPT完成了从3.0、3.5到4.0的推新发布&#xff0c;一步步刷新了民众对于目前人工智能技术发展的认知底线&#xff0c;让人们直观地感受到了人工智能技术的蓬勃发展。…...

编程日记 2023/5/24 4:03:08

Qt中Model/View结构

Qt中Model/View结构 Model/View框架的核心思想是模型&#xff08;数据&#xff09;与视图&#xff08;显示&#xff09;相分离&#xff0c;模型对外提供标准接口存取数据&#xff0c;不关心数据如何显示&#xff0c;视图自定义数据的显示方式&#xff0c;不关心数据如何组织存…...

编程日记 2023/5/24 19:03:56

中纬ZOOM35全站仪参数和使用说明书

免棱镜测程采用全新EDM&#xff0c;明显提升测距功能。极细可见激光免棱镜测程最高可达1000m&#xff0c;同等测程下无棱镜精度较高。 绝对编码度盘中纬静态条码式码盘测角&#xff0c;开机无需初始化&#xff0c;利用同样技术的徕卡全站仪&#xff0c;测角精度可高达0.5&#…...

编程日记 2023/5/24 18:13:49

【Note5】网络，并发/IO，内存，linux/vi命令，正则，Hash，iNode，文件查找与读取，linux启动/构建

文章目录1.局域网&#xff1a;CSMA/CD2.互联网&#xff1a;ARP&#xff0c;DHCP&#xff0c;NAT3.TCP协议&#xff1a;telnet&#xff0c;tcpdump&#xff0c;syn/accept队列4.HTTPS协议&#xff1a;摘要&#xff08;sha、md5、crc&#xff09;。win对文件进行MD5校验用自带的c…...

编程日记 2023/5/23 20:55:09

华为MRS_HADOOP集群 beeline使用操作

背景 由于项目测试需要&#xff0c;计划在华为hadoop集群hive上创建大量表&#xff0c;并且每表植入10w数据&#xff0c;之前分享过如何快速构造hive大表&#xff0c;感兴趣的可以去找一下。本次是想要快速构造多表并载入一些数据。 因为之前同事在构造相关测试数据时由于创建…...

编程日记 2023/5/25 2:01:42

PCB模块化设计10——PCI-E高速PCB布局布线设计规范

目录PCB模块化设计10——PCI-E高速PCB布局布线设计规范1、PCI-E管脚定义2、PCI-E叠层和参考平面3、 PCB设计指南1、阻抗要求2、线宽线距3、长度匹配4、走线弯曲角度5、测试点、过孔、焊盘6、AC去耦电容放置方法7、金手指和连接器的注意事项8、其他的注意事项PCB模块化设计10——…...

编程日记 2023/5/28 21:48:33

Java简介

Java简介 Java是一种面向对象的编程语言&#xff0c;由Sun Microsystems于1995年发布。Java设计的初衷是为了开发可移植、高性能的应用程序。Java代码可以在不同的操作系统上运行&#xff0c;包括Windows、Linux、Mac等。 Java是一种广泛使用的编程语言&#xff0c;用于开发各…...

编程日记 2023/5/25 21:54:31

python框架有哪些，常用的python框架代码

Python的应用已经相当广泛了&#xff0c;可以做很多事情&#xff0c;而 Python本身就是一个应用程序&#xff0c;我们也可以说 Python是一个高级语言。由于 Python有很多包&#xff0c;所以我们不能把所有的 Python包都了解一下&#xff0c;也不能把所有的包都读一遍&#xff0…...

编程日记 2023/5/26 9:28:27

jsp设计简单的购物车应用案例

代码解释 <%request.setCharacterEncoding("UTF-8");if (request.getParameter("c1")!null)session.setAttribute("s1",request.getParameter("c1"));if (request.getParameter("c2")!null)session.setAttribute("…...

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