【CSS3】css开篇基础(1)
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绵绵呀✍️✍️。 如果你喜欢这篇文章,请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的…...
华为杯”第十二届中国研究生数学建模竞赛-D题:单/多列车优化决策问题的研究
目录 摘 要: 一、问题叙述 1.1 研究背景 1.2 要解决的问题 二、基本假设、名词约定及符号说明 2.1 模型假设 2.2 名词约定 2.3 符号说明 三、问题分析与模型准备 3.1 问题分析 3.2 数据处理 3.3 模型准备 3.3.1 列车运行动力学模型 3.3.2 列车运行耗能模型 四、问题一模型建立…...
【Docker】docker的存储
介绍 docker存储主要是涉及到3个方面: 第一个是容器启动时需要的镜像 镜像文件都是基于图层存储驱动来实现的,镜像图层都是只读层, 第二个是: 容器读写层, 容器启动后,docker会基于容器镜像的读层&…...
C++游戏开发深度解析
C游戏开发深度解析 C作为一种高效、灵活且功能强大的编程语言,在游戏开发领域扮演着举足轻重的角色。从独立小游戏到大型3A级游戏,C都以其卓越的性能和广泛的适用性成为游戏开发者们的首选。本文将从C游戏开发的基础、优势、引擎、挑战以及未来趋势等多…...
计算机毕业设计 基于Python的无人超市管理系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档
🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…...
dockercommit 后的镜像没有数据
docker commit 后的镜像没有数据 docker commit load save mysql背景 工位机环境迁移MySQL时,使用commit》save》MySQL转移》load》run -p,使用数据库连接工具连接成功后,发现没有MySQL中没有库表等数据。 原因分析 直接搜,找…...
基于SD卡的基因(DNA)炫酷LED桌面灯
基于SD卡的基因(DNA)炫酷LED桌面灯 一、介绍一个已知的问题解决办法 二、支持目录材料准备LED灯光文件(我使用的PLA颜色) 三、 打印部件和焊接四、拼装打印的DNA散件五、组合DNA螺旋结构六、执行DNA文件七、程序烧录八、总结及成品…...
【算法系列-链表】设计链表
【算法系列-链表】设计链表 文章目录 【算法系列-链表】设计链表1. 算法分析🛸2. 解题过程🎬2.1 初始化2.1.1 思路分析🎯2.1.2 代码示例🌰 2.2 get(获取第n个节点的值)2.2.1 思路分析🎯2.2.2 代码示例🌰 2.…...
螺狮壳里做道场:老破机搭建的私人数据中心---Centos下Docker学习03(网络及IP规划)
3 网络及IP规划 3.1 容器连接网络初步规划 规划所有容器与虚拟机的三张网卡以macvlan的方式进行连接(以后根据应用可以更改),在docker下创建nat、wifi、nei、wai四张网卡,他们和虚拟机及宿主机上NIC的相关连接参数如下表所示&am…...
Zookeeper下载、安装配置
一、基础配置 使用zookeeper 需要提前配置安装好zookeeper的环境 端口 默认的2888端 默认的 2888端口主要用于Leader和Follower之间的通信。在ZooKeeper集群中,这个端口用于数据同步、服务器初始化以及会话管理等方面的通信。默认的3888 3888端口则是在选举L…...
【代码记录】多线程示例代码
用多线程处理多gpu模型输入的时候写的,感觉复用性会很不错,用以记录和分享 import threading def multithreadhelper(workfn,alldata:list,number:int):# workfn takes only one argument: a example of alldata# data preparationdef chunk_data(data,…...
【数据结构】什么是平衡二叉搜索树(AVL Tree)?
🦄个人主页:修修修也 🎏所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 📌AVL树的概念 📌AVL树的操作 🎏AVL树的插入操作 ↩️右单旋 ↩️↪️右左双旋 ↪️↩️左右双旋 ↪️左单旋 🎏AVL树的删…...
ip的类型有多少种?我想做大数据需要使用哪一种
IP地址主要分为两种类型: IPv4(Internet Protocol version 4): 由32位二进制数组成,通常以四个十进制数表示(例如:192.168.1.1)。每个十进制数的范围是0到255。IPv4地址的总数量约为…...
位运算(6)_只出现一次的数字 II
个人主页:C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 位运算(6)_只出现一次的数字 II 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记,欢迎大家在评论区交流讨论💌 目录 …...
C#的Socket编程细节
目录 Socket中的Accept 步骤1:创建并绑定服务端套接字 步骤2:接受连接请求 步骤3:与客户端通信 步骤4:关闭套接字 注意事项 Socket中的Connected 使用Connected属性 客户端检查连接状态 服务端检查连接状态 注意事项 S…...
python三局两胜游戏
分为以下步骤实现这个功能 1、猜拳 2、机器产生数值 3、人去猜数字,定义剪刀石头布 4、控制机器产生,123程序运行的时候可能会出现一点玄学问题,就是,提示n1这一行不符合pep8然后报错,不用管,运行就可以&am…...
java:brew安装rabbitmq以及简单示例
什么是消息队列mq 可以看我之前写的这篇 消息队列MQ rabbitmq简介 RabbitMQ是由erlang语言开发,基于AMQP(Advanced Message Queue 高级消息队列协议)协议实现的消息队列,它是一种应用程序之间的通信方法,消息队列在…...
基于单片机跑步机控制系统设计
** 文章目录 前言概要功能设计设计思路 软件设计效果图 程序文章目录 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对…...
【架构】efk日志监控
文章目录 一、EFK组件及其功能二、EFK日志监控的工作流程三、EFK日志监控的优势四、EFK日志监控的应用场景 推荐阅读 EFK日志监控是一种高效的日志管理解决方案,由Elasticsearch、Fluentd(或Logstash)和Kibana三个开源工具组成。以下是对EFK日…...
亚信安全发布第34期《勒索家族和勒索事件监控报告》
本周态势快速感知 本周全球共监测到勒索事件91起,近三周勒索事件数量较为稳定。从整体上看,Ransomhub是影响最严重的勒索家族;Play和ElDorado恶意家族也是两个活动频繁的恶意家族,需要注意防范。本周,土耳其公司巴克皮…...
如何在实际应用中使用回溯算法解决问题?
如何在实际应用中使用回溯算法解决问题? 回溯算法是一种强大的问题解决方法,它通过尝试不同的选择并在遇到不可行的情况时回退,以找到满足特定条件的解决方案。在实际应用中,回溯算法可以用于解决各种复杂的问题。本文将介绍如何在实际应用中使用回溯算法,并通过一些案例…...
9. 正则表达式
编程工具和技术是以一种混乱、进化的方式生存和传播的。获胜的并不总是最好或最杰出的工具,而是那些在合适的利基市场中发挥足够好的功能,或者恰好与另一项成功的技术相结合的工具。 在本章中,我将讨论这样一种工具--正则表达式。正则表达式是…...
初始C++模板
1.泛型编程 1.1什么事泛型编程 在学习C语言时,我们时常会有这样的烦恼: 在针对每一种不同的类型变量进行函数传参或者是运算处理时,我们总是编写不同的函数或者是进行不同的处理,才能达到目的,这时,我们…...
建投数据自主研发相关系统获得欧拉操作系统及华为鲲鹏技术认证书
近日,经欧拉生态创新中心和华为技术有限公司测评,建投数据自主研发的投资项目管理系统、全面风险管理信息系统、商业不动产业务系统,完成了基于欧拉操作系统openEuler 22.03、华为鲲鹏Kunpeng 920(Taisha 200)的兼容性…...
node启动websocket保持后台一直运行
在 Node.js 中启动一个 WebSocket 服务器并使其在后台持续运行,你可以使用几种方法。下面是一种常见的方法,通过创建一个简单的 WebSocket 服务器并使用 node 命令直接运行它,同时确保它在后台运行。 1. 创建 WebSocket 服务器 首先&#x…...
CSS画出三角形的做法
引言: 在网页中,会有三角形的出现,我们脑海里会有很多想法,如何去实现他们,我来提供一种比较好玩的做法。 方法: 我们实现一个三角形,当然可以使用精灵图、或者iconfont的做法,这…...
web开发(1)-基础
这是对b站课程的总结,后续可能会继续更 01 前后端分离介绍_哔哩哔哩_bilibili01 前后端分离介绍是Web应用开发-后端基础-基于Springboot框架的第1集视频,该合集共计29集,视频收藏或关注UP主,及时了解更多相关视频内容。https://w…...
python程序操作Windows系统中的软件如word等(是否可以成功操作待验证)
一、python打开word软件 在 Python 中可以使用python-docx库来操作 Word 文档,但如果你的需求是直接打开 Word 软件,你可以使用os模块和subprocess模块来实现。以下是示例代码: import os import subprocessdef open_word():word_path rC:…...
人工智能发展历程
发展历程 人工智能的发展可以追溯到20世纪30年代,当时数理逻辑的形式化和智能可计算思想开始构建计算与智能的关联概念。1943年,美国神经科学家麦卡洛克和逻辑学家皮茨共同研制成功了世界上首个人工神经网络模型——MP模型,这为现代人工智能…...
Flutter路由
路由作为一种页面切换的能力,非常重要。Flutter 中路由管理有几个重要的点。 Navigator 1.0:Flutter 早期路由系统,侧重于移动端 ,命令式编程风格,使用 Navigator.push() 和 Navigator.pop() 等方法来管理路由栈。 N…...
公司开通网站/企业建站要多少钱
宝鸡文理学院C语言复习试题宝鸡文理学院C语言复习试题宝鸡文理学院试题C语言程序设计2014年7月4 日 (A)全校2013级理工一、单项选择题(每小题2分,220 40分)1. 在C语言中, 下面字符串能用作变量名的是( )。A、ab B、static C、2-and D、a22. 以下叙述中正确的是( )。…...
乐清做网站公司哪家好/一点优化
这几天重读了一遍,倒没什么特别意图,纯粹是放松自己,也顺便记录在案。书由英国作家蕾秋乔伊斯著,黄妙瑜译,译本读起来还是比较舒服的,只不过文中出现两次关于“北京”的词语,感觉挺突兀的&#…...
企业新品做众筹的美国网站/网络营销的职能有哪些
1. XML概述 关于XML的定义有以下几种说法: ① XML是可扩展标记语言(Extensible Markup Language)的缩写。 ② XML是一种类似于HTML的标记语言。 ③ XML是描述数据的,重点描述“数据是什么”。 ④ XML的标记不是在XML中预定义的&a…...
这样自己做网站/电商平台运营方案
配置列表清单 主机名IP地址用途tracker_group1192.168.47.203tracker服务器group1tracker_group2192.168.47.204tracker服务器group2 ngx_cache_purge作用 下载地址 https://github.com/FRiCKLE/ngx_cache_purge 用途 ngx_cache_purge是第三方模块,用于清理nginx内…...
菲律宾做网站/注册城乡规划师报考条件
为提升子公司管理人员的管理能力,读懂财务报告,做到业财融合。12月8日,华通公司邀请中航工业财税专家组专家雷晓维,组织开展子公司高管人员财务报表解读与分析培训。雷晓维中国注册会计师,注册税务师,高级会…...