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

【CSS3】css开篇基础（1）

news 2025/7/5 8:40:32

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。

当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力，一起进步！

加油，一起CHIN UP！💪💪

🔗个人主页：E绵绵的博客
📚所属专栏：

1. JAVA知识点专栏

深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

实战演练，巩固JAVA编程技能

3.c语言知识点专栏

揭示c语言的底层逻辑与高级特性

4.c语言题目练习

挑战自我，提升c语言编程能力

5.Mysql数据库专栏

了解Mysql知识点，提升数据库管理能力

6.html5知识点专栏

学习前端知识，更好的运用它

7. css3知识点专栏

在学习html5的基础上更加熟练运用前端

📘 持续更新中，敬请期待❤️❤️

2. CSS语法

<head><style>选择器{属性名：属性值;属性名：属性值;}</style>
</head>
选择器：要修饰的对象（东西）
属性名：修饰对象的哪一个属性（样式）
属性值：样式的取值

在前端开发中，单引号（'）和双引号（"）在大多数情况下是没有功能上的区别的，它们都可以用来表示字符串，无论是在 HTML 属性、CSS 样式或 JavaScript 中，使用单引号和双引号的效果基本相同

css和html不分大小写，JavaScript 区分大小写。

3.选择器

选择器分为 基础选择器 和 复合选择器 两个大类，我们这里先讲解一下基础选择器

基础选择器是由单个选择器组成的，基础选择器包括 标签选择器、类选择器、id选择器和通配符选择器

标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

作用：
标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签

优点
能快速为页面中同类型的标签统一设置样式

缺点
不能设计差异化样式，只能选择全部的当前标签

<!DOCTYPE html>
<html><head><style>/* 使用标签选择器对 p 标签应用样式 */p {color: blue;font-size: 18px;}</style>
</head><body><p>这是一个段落。</p><p>这是另一个段落。</p></body></html>

类选择器

CSS 中的类选择器用于选取具有特定类名的 HTML 元素。类选择器在 CSS 中使用一个点号（.）后跟类名来定义。

<!DOCTYPE html>
<html><head><style>/* 定义一个类选择器，选取 class 为 .highlight 的元素 */.highlight {background-color: yellow;font-weight: bold;}</style>
</head><body><p class="highlight">这个段落有一个高亮的背景。</p><p>这个段落没有高亮。</p><p class="highlight">这个段落也有高亮。</p></body></html>

一个标签元素可以同时拥有多个类，但必须使用空格分隔：


<!DOCTYPE html>
<html><head><style>.highlight {background-color: yellow;font-weight: bold;}.important {font-size: 30px;}</style>
</head><body><p class="highlight important">这是一个既高亮又重要的段落。</p></body></html>

id 选择器

CSS 中的 ID 选择器用于选取具有特定 id 属性的元素，ID 选择器在 CSS 中使用井号（#）后跟 ID 名称来定义。每个 id 在页面中是唯一的，因此 ID 选择器通常只能应用于单个元素。

在 HTML 中，每个 id 属性值只能在页面中使用一次，但页面中可以有多个不同的 id 值。换句话说，每个元素的 id 必须是独一无二的，但你可以为页面中的不同元素赋予各自不同的 id。

<!DOCTYPE html>
<html><head><style>#header {background-color: lightblue;}#main {font-size: 18px;}#footer {text-align: center;}</style>
</head><body><div id="header">这是头部。</div><div id="main">这是主要内容。</div><div id="footer">这是底部。</div></body></html>

在这个例子中，header、main 和 footer 是不同的 id，它们各自对应一个唯一的元素。你可以在页面中定义任意数量的不同 id，但每个 id 只能用于一个元素。

通配符选择器

通配符选择器（*）是 CSS 中的一种选择器，能够选取页面中的所有元素。它常用于应用一些全局的样式，比如重置页面的默认样式或设置所有元素的通用属性。

<!DOCTYPE html>
<html>
<head><style>/* 通配符选择器将应用于页面中的所有元素 */* {margin: 0;padding: 0;box-sizing: border-box;}</style>
</head>
<body><h1>标题</h1><p>这是一个段落。</p></body>
</html>

在这个例子中，* 选择器会将所有元素标签中的 margin 和 padding 设置为 0，box-sizing 设置为 border-box，从而影响页面中的所有元素。这通常用于重置浏览器的默认样式或进行全局样式调整。

虽然通配符选择器很强大，但它可能会影响性能，尤其是在大型页面上，因为它会选取所有元素。使用时应谨慎，确保只在确实需要的地方使用。所以通常我们对它进行使用的很少

4.CSS 字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。

font-family

font-family 用于设置字体系列。可以为文本指定一种或多种字体，如果浏览器不支持首选字体，会使用后备字体。如果都不支持，则使用通用字体 sans-serif。

1.各种字体之间必须使用英文状态下的逗号隔开

2.一般情况下,如果有空格隔开的多个单词组成的字体,加引号“ ”.

3.尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

4.最常见的几个字体
body{
font-family:"Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}
注意可以使用把英文转换为中文如微软雅黑，但必须对中文加引号“”。

font-size

CSS 使用 font-size 属性定义字体大小。
h1 {font-size: 24px;
}
p {font-size: 14px;
}
px(像素)大小是我们网页的最常用的单位

谷歌浏览器默认的文字大小为16px

不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小

我们可以给 body指定整个页面文字的大小，当然这对标题的字体大小是没影响的，它优先级高于body的字体大小优先级，必须指定对 h标签进行修改才会有所改变。（同样这在文本字体的粗细中同样适用）

font-weight

CSS 使用 font-weight属性设置文本字体的粗细,

常用值：

normal: 默认字体粗细
bold: 粗体
数值 (100 - 900)：例如 font-weight: 700; 是粗体，400 通常是正常字体。
h1 {font-weight: bold;
}
p {font-weight: 300;
}
实际开发时，我们更喜欢用数字表示粗缩。

font-style

font-style 用于设置字体的样式，如斜体或正常字体。

常用值：

normal: 正常字体
italic: 斜体
p {font-style: italic;
}
注意:平时我们很少给文字加斜体，反而要将斜体标签改为不倾斜字体。

字体复合属性

字体属性可以把以上文字样式综合来写,这样可以更节约代码:
body {
font: font-style  font-weiqht font-size/line-height font-family;
}
使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

不需要设置的属性可以省略(取默认值)，但必须保留font-size和 font-family属性，否则font 属性将不起作用

body {font: italic 500  16px/1.5  "Arial", sans-serif; /* 使用字体复合属性 */}

5.CSS 文本属性

CSS 文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

color

color用于设置文本的颜色。

其表示有如下三种形式：

当然我们不用管用哪种形式，在vscode中我们能自己选颜色，比较便捷，如下图，所以无需太在意。

常见的颜色设置代码：

h1 {color: red; /* 使用颜色关键字 */
}

text-align

text-align 属性用于设置元素内文本内容的水平对齐方式。

常用值：

left: 左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐
h3 {text-align: center; /* 设置三级标题文本居中 */
}

text-decoration

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、制除线、上划线等
div {
text-decoration: underline:
}
注意删除线和上划线几乎不用，而下划线和默认很常用。

此外链接都是自带下划线，如果我们想要去掉下划线，就要将链接的decoration修饰为none。
a{
text-decoration: none;
}

text-indent

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
div {
text-indent:10px;
}
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值(负值情况是有但不能用)。
p {
text-indent:2em;
}
em 是一个相对单位，就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小，则会按照默认的1个文字大小

以下就是发生缩进的现象：

line-height

line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。

p{
line-height:26px;
}

当我们设置行间距为26px时，字体大小为16px，行间距代表如下：

那么怎么精准测量好行间距呢？

这是一段文字，我们只要算好上面一行文字的底部到下面一行文字的底部的距离，那就是行间距。

一般情况下，我们都是设置行间距为1.5em，这样比较舒服。

6.css引入方式

在 CSS 中，有三种主要的方式可以将样式引入到 HTML 文档中：行内样式表、内部样式表和外部样式表。下面详细介绍每种引入方式：

内部样式表

内部样式表使用 <style> 标签将 CSS 样式嵌入到 HTML 文档的 <head> 部分。这种方式适合单个页面的样式控制，样式集中在一个地方。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>内部样式表示例</title><style>body {background-color: lightblue;}h1 {color: navy;font-size: 24px;}p {color: darkgreen;font-size: 18px;}</style>
</head>
<body><h1>这是一个标题</h1><p>这是一个段落。</p>
</body>
</html>

优点：

所有样式集中在 HTML 文档中，容易控制和修改单个页面的样式。
可以定义整个页面的样式，不需要每个元素都写内联样式。

缺点：

样式只对当前页面有效，不易复用。
当页面内容变多时，内联样式表可能使 HTML 文件体积过大。

行内样式表

内联样式直接在 HTML 标签的 style 属性中定义，用于为特定的 HTML 元素设置样式。这种方式优先级最高，但通常不建议大量使用，因为它会导致样式分散，维护困难。

<p style="color: red; font-size: 20px;">这是一个红色的大号段落。</p>

优点：

适合快速修改单个元素的样式。
直接在元素内定义样式，优先级高。

缺点：

不利于维护，样式和内容耦合。
不适合大规模的样式控制。

外部样式表

外部样式表将 CSS 写在一个独立的 .css 文件中，通过 <link> 标签将其引入 HTML 文档。这种方式是最常用的，适合多页面网站的样式管理。

<link rel="stylesheet" href="css文件路径">

注意该文件路径应是相对路径。

下面是个例子：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外部样式表示例</title><link rel="stylesheet" href="styles.css"> <!-- 引入外部样式表 -->
</head>
<body><h1>这是一个标题</h1><p>这是一个段落。</p>
</body>
</html>

外部 CSS 文件（styles.css）：
body {background-color: lightblue;
}h1 {color: navy;font-size: 24px;
}p {color: darkgreen;font-size: 18px;
}
我们发现外部css文件中不用style标签。

优点：

样式与 HTML 内容分离，便于维护和复用。
适合多页面网站，多个页面可以共享同一个样式文件。
能减少 HTML 文件的体积，页面加载时会缓存 CSS 文件，提高性能。

缺点：

需要发出额外的 HTTP 请求获取外部 CSS 文件（可以通过浏览器缓存减小影响）。
对于单页应用，可能不如内部样式方便。

三种引入方式比较

【CSS3】css开篇基础（1）

1.❤️❤️前言~🥳🎉🎉🎉 Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的…...

编程日记 2024/10/3 5:38:34

华为杯”第十二届中国研究生数学建模竞赛-D题：单/多列车优化决策问题的研究

目录摘要：一、问题叙述 1.1 研究背景 1.2 要解决的问题二、基本假设、名词约定及符号说明 2.1 模型假设 2.2 名词约定 2.3 符号说明三、问题分析与模型准备 3.1 问题分析 3.2 数据处理 3.3 模型准备 3.3.1 列车运行动力学模型 3.3.2 列车运行耗能模型四、问题一模型建立…...

编程日记 2024/10/3 5:36:32

【Docker】docker的存储

介绍 docker存储主要是涉及到3个方面： 第一个是容器启动时需要的镜像镜像文件都是基于图层存储驱动来实现的，镜像图层都是只读层， 第二个是： 容器读写层， 容器启动后，docker会基于容器镜像的读层&…...

编程日记 2024/10/3 5:32:29

C++游戏开发深度解析

C游戏开发深度解析 C作为一种高效、灵活且功能强大的编程语言，在游戏开发领域扮演着举足轻重的角色。从独立小游戏到大型3A级游戏，C都以其卓越的性能和广泛的适用性成为游戏开发者们的首选。本文将从C游戏开发的基础、优势、引擎、挑战以及未来趋势等多…...

编程日记 2024/10/3 5:30:27

计算机毕业设计基于Python的无人超市管理系统的设计与实现 Python+Django+Vue 前后端分离附源码讲解文档

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点…...

编程日记 2024/10/3 5:29:26

dockercommit 后的镜像没有数据

docker commit 后的镜像没有数据 docker commit load save mysql背景工位机环境迁移MySQL时，使用commit》save》MySQL转移》load》run -p，使用数据库连接工具连接成功后，发现没有MySQL中没有库表等数据。原因分析直接搜，找…...

编程日记 2024/10/3 5:26:23

基于SD卡的基因（DNA）炫酷LED桌面灯

基于SD卡的基因（DNA）炫酷LED桌面灯一、介绍一个已知的问题解决办法二、支持目录材料准备LED灯光文件（我使用的PLA颜色） 三、打印部件和焊接四、拼装打印的DNA散件五、组合DNA螺旋结构六、执行DNA文件七、程序烧录八、总结及成品…...

编程日记 2024/10/3 5:25:22

【算法系列-链表】设计链表

【算法系列-链表】设计链表文章目录【算法系列-链表】设计链表1. 算法分析🛸2. 解题过程🎬2.1 初始化2.1.1 思路分析🎯2.1.2 代码示例🌰 2.2 get(获取第n个节点的值)2.2.1 思路分析🎯2.2.2 代码示例🌰 2.…...

编程日记 2024/10/3 5:23:20

螺狮壳里做道场：老破机搭建的私人数据中心---Centos下Docker学习03(网络及IP规划)

3 网络及IP规划 3.1 容器连接网络初步规划规划所有容器与虚拟机的三张网卡以macvlan的方式进行连接（以后根据应用可以更改），在docker下创建nat、wifi、nei、wai四张网卡，他们和虚拟机及宿主机上NIC的相关连接参数如下表所示&am…...

编程日记 2024/10/3 5:22:19

Zookeeper下载、安装配置

一、基础配置使用zookeeper 需要提前配置安装好zookeeper的环境端口默认的2888端默认的 2888端口‌主要用于Leader和Follower之间的通信。在ZooKeeper集群中，这个端口用于数据同步、服务器初始化以及会话管理等方面的通信。默认的3888 3888端口‌则是在选举L…...

编程日记 2024/10/3 5:21:18

用多线程处理多gpu模型输入的时候写的，感觉复用性会很不错，用以记录和分享 import threading def multithreadhelper(workfn,alldata:list,number:int):# workfn takes only one argument: a example of alldata# data preparationdef chunk_data(data,…...

编程日记 2024/10/3 5:20:17

【数据结构】什么是平衡二叉搜索树(AVL Tree)?

🦄个人主页:修修修也 🎏所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 📌AVL树的概念 📌AVL树的操作 🎏AVL树的插入操作 ↩️右单旋 ↩️↪️右左双旋 ↪️↩️左右双旋 ↪️左单旋 🎏AVL树的删…...

编程日记 2024/10/3 5:17:12

ip的类型有多少种？我想做大数据需要使用哪一种

IP地址主要分为两种类型： IPv4（Internet Protocol version 4）： 由32位二进制数组成，通常以四个十进制数表示（例如：192.168.1.1）。每个十进制数的范围是0到255。IPv4地址的总数量约为…...

编程日记 2024/10/3 5:14:10

位运算(6)_只出现一次的数字 II

个人主页：C忠实粉丝欢迎点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝原创位运算(6)_只出现一次的数字 II 收录于专栏【经典算法练习】本专栏旨在分享学习算法的一点学习笔记，欢迎大家在评论区交流讨论💌 目录 …...

编程日记 2024/10/3 5:11:07

C#的Socket编程细节

目录 Socket中的Accept 步骤1：创建并绑定服务端套接字步骤2：接受连接请求步骤3：与客户端通信步骤4：关闭套接字注意事项 Socket中的Connected 使用Connected属性客户端检查连接状态服务端检查连接状态注意事项 S…...

编程日记 2024/10/3 5:09:04

python三局两胜游戏

分为以下步骤实现这个功能 1、猜拳 2、机器产生数值 3、人去猜数字，定义剪刀石头布 4、控制机器产生，123程序运行的时候可能会出现一点玄学问题，就是，提示n1这一行不符合pep8然后报错，不用管，运行就可以&am…...

编程日记 2024/10/3 5:08:03

java：brew安装rabbitmq以及简单示例

什么是消息队列mq 可以看我之前写的这篇消息队列MQ rabbitmq简介 RabbitMQ是由erlang语言开发，基于AMQP（Advanced Message Queue 高级消息队列协议）协议实现的消息队列，它是一种应用程序之间的通信方法，消息队列在…...

编程日记 2024/10/3 5:03:59

基于单片机跑步机控制系统设计

** 文章目录前言概要功能设计设计思路软件设计效果图程序文章目录前言 💗博主介绍：✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师，一名热衷于单片机技术探索与分享的博主、专注于精通51/STM32/MSP430/AVR等单片机设计主要对…...

编程日记 2024/10/3 5:02:58

【架构】efk日志监控

文章目录一、EFK组件及其功能二、EFK日志监控的工作流程三、EFK日志监控的优势四、EFK日志监控的应用场景推荐阅读 EFK日志监控是一种高效的日志管理解决方案，由Elasticsearch、Fluentd（或Logstash）和Kibana三个开源工具组成。以下是对EFK日…...

编程日记 2024/10/3 5:01:57

亚信安全发布第34期《勒索家族和勒索事件监控报告》

本周态势快速感知本周全球共监测到勒索事件91起，近三周勒索事件数量较为稳定。从整体上看，Ransomhub是影响最严重的勒索家族；Play和ElDorado恶意家族也是两个活动频繁的恶意家族，需要注意防范。本周，土耳其公司巴克皮…...

编程日记 2024/10/3 4:58:54

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。特征提取与优化从复杂的光学数据中自…...

编程新知 2025/7/3 13:24:14

AtCoder 第409场初级竞赛 A~E题解

A Conflict 【题目链接】原题链接：A - Conflict 【考点】枚举【题目大意】找到是否有两人都想要的物品。【解析】遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。【难度】 GESP三级【代码参考】 #i…...

编程新知 2025/6/16 11:04:37

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/6/20 18:06:08

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/7/4 22:05:36

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...

编程新知 2025/6/21 2:06:19

如何在网页里填写 PDF 表格？

有时候，你可能希望用户能在你的网站上填写 PDF 表单。然而，这件事并不简单，因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件，但原生并不支持编辑或填写它们。更糟的是，如果你想收集表单数据&#xff…...

编程新知 2025/7/4 7:26:34

算法笔记2

1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/6/24 6:33:39

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

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

编程新知 2025/6/27 23:02:35

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2025/6/21 11:15:11

链式法则中复合函数的推导路径多变量“信息传递路径”

非常好，我们将之前关于偏导数链式法则中不能“约掉”偏导符号的问题，统一使用二重复合函数： z f ( u ( x , y ) , v ( x , y ) ) \boxed{z f(u(x,y),\ v(x,y))} zf(u(x,y), v(x,y)) 来全面说明。我们会展示其全微分形式（偏导…...

编程新知 2025/7/3 3:17:43