【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 文件（可以通过浏览器缓存减小影响）。
  • 对于单页应用，可能不如内部样式方便。

三种引入方式比较 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/1552743.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

通信工程学习：什么是DQDB分布式队列双总线

通信工程学习：什么是DQDB分布式队列双总线

DQDB&#xff1a;分布式队列双总线 DQDB&#xff08;Distributed Queue Dual Bus&#xff09;&#xff0c;即分布式队列双总线&#xff0c;是美国电气电子工程师学会(IEEE)802.6标准中定义的一种城域网(MAN)数据链路层通信协议。该协议主要用于城域网的数据、语音和视频传输&am…
阅读更多...
前端工程化17-邂逅原生的ajax、跨域、JSONP

前端工程化17-邂逅原生的ajax、跨域、JSONP

5、邂逅原生的ajax 5.1、什么是ajax AJAX 全称为Asynchronous Javascript And XML&#xff0c;就是异步的 JS 和 XML。通过AJAX可以在浏览器中向服务器发送异步请求&#xff0c;最大的优势&#xff1a;页面无刷新获取数据。AJAX 不是新的编程语言&#xff0c;而是一种将现有的…
阅读更多...
DC00025【含论文】基于协同过滤推荐算法springboot视频推荐管理系统

DC00025【含论文】基于协同过滤推荐算法springboot视频推荐管理系统

1、项目功能演示 DC00025【含文档】基于springboot短视频推荐管理系统协同过滤算法视频推荐系统javaweb开发程序设计vue 2、项目功能描述 短视频推荐系统分为用户和系统管理员两个角色 2.1 用户角色 1、用户登录、用户注册 2、视频中心&#xff1a;信息查看、视频收藏、点赞、…
阅读更多...
分支和循环(1)

分支和循环(1)

目录 前言 1.什么是语句&#xff1f; 2.分支语句&#xff08;选择语句&#xff09; 2.1 if 语句 2.2if书写格式形式的对比 2.3 if 练习 2.4 switch 语句 2.5 switch 练习 总结 前言 分支合循环首先就是要有良好的代码风格&#xff0c;缩进得当&#xff0c;要不然真的很…
阅读更多...
横排文字、图层蒙版-1(2024年09月30日)

横排文字、图层蒙版-1(2024年09月30日)

2024年09月30日 记录_导读 2024年09月30日 10:13 关键词 优惠券 设计 图层 背景 元素 调整 画笔工具 颜色 大小 位置 复制 移动 添加涂层 多选 显示 PS 元素文件 隐藏 使用规则 Logo 全文摘要 通过在Photoshop中精心操作图层&#xff0c;包括复制、移动和调整设置&#xf…
阅读更多...
结构型模式-适配器-桥接-外观-代理

结构型模式-适配器-桥接-外观-代理

适配器模式 是什么 将一个类的接口转换成客户希望的另外一个接口 解决接口不兼容问题,复用之前的代码 实例 public class PoliceCarAdapter extends CarController { private PoliceSound sound;//定义适配者PoliceSound对象 private PoliceLamp lamp;//定义适配者Polic…
阅读更多...
虚拟机U盘启动

虚拟机U盘启动

二、注意事项 1、正确顺序是先插入U盘启动盘&#xff0c;再打开虚拟机&#xff0c;否则虚拟机无法检测到U盘&#xff1b; 2、如果已经打开虚拟机&#xff0c;则需关闭&#xff0c;插入U盘后重新开启。 3、设置好后如果换另一个U盘进行U盘启动&#xff0c;以下步骤要重新再设置&…
阅读更多...
Python核心知识：pip使用方法大全

Python核心知识：pip使用方法大全

什么是 pip&#xff1f; pip 是 Python 的包管理工具&#xff0c;允许用户安装、升级和管理 Python 的第三方库和依赖。它极大地简化了开发过程&#xff0c;使开发者可以轻松地获取并安装所需的软件包。pip 已成为 Python 项目中最常见的包管理工具&#xff0c;并且自 Python …
阅读更多...
windows C++-UWP 应用中使用 HttpRequest 类

windows C++-UWP 应用中使用 HttpRequest 类

在 UWP 应用中使用 HttpRequest 类 本节演示在 UWP 应用中如何使用 HttpRequest 类。 应用程序会提供一个输入框&#xff0c;该输入框定义了一个 URL 资源、用于执行 GET 和 POST 操作的按钮命令和用于取消当前操作的按钮命令。 使用 HttpRequest 类 1. 在 MainPage.xaml 中…
阅读更多...
8639 折半插入排序

8639 折半插入排序

### 思路 折半插入排序是一种改进的插入排序算法&#xff0c;通过二分查找来确定插入位置&#xff0c;从而减少比较次数。每次插入时&#xff0c;先用二分查找找到插入位置&#xff0c;然后将元素插入到正确的位置。 ### 伪代码 1. 读取输入的待排序关键字个数n。 2. 读取n个待…
阅读更多...
class 030 异或运算的骚操作

class 030 异或运算的骚操作

这篇文章是看了“左程云”老师在b站上的讲解之后写的, 自己感觉已经能理解了, 所以就将整个过程写下来了。 这个是“左程云”老师个人空间的b站的链接, 数据结构与算法讲的很好很好, 希望大家可以多多支持左程云老师, 真心推荐. https://space.bilibili.com/8888480?spm_id_f…
阅读更多...
【CKA】五、网络策略–NetworkPolicy

【CKA】五、网络策略–NetworkPolicy

5、配置网络策略–NetworkPolicy 1. 考题内容&#xff1a; 2. 答题思路&#xff1a; 1、根据题目分析要创建怎样的网络策略 2、按题目要求查看ns corp-net的label 3、编写yaml&#xff0c;其中注意 namespace、label、port 3. 官网地址&#xff1a; https://kubernetes.io/…
阅读更多...
解决connect因父类不明确而报错的问题

解决connect因父类不明确而报错的问题

如图所示&#xff0c;connect函数报错&#xff0c;原因是connect的检查是在编译期完成的&#xff0c;而传入父类则是在运行时&#xff0c;从而引起connect不知道parent是谁而报错。只需加入类型转换即可。 connect(qobject_cast<TableWidget*>(parent), &TableWidg…
阅读更多...
STM32F1+HAL库+FreeTOTS学习15——互斥信号量

STM32F1+HAL库+FreeTOTS学习15——互斥信号量

STM32F1HAL库FreeTOTS学习15——互斥信号量 1. 优先级翻转2. 互斥信号量3. 相关API函数&#xff1b;3.1 互斥信号量创建3.2 获取信号量3.3 释放信号量3.4 删除信号量 4. 操作实验1. 实验内容2. 代码实现3. 运行结果 上期我们介绍了数值信号量。这一期我们来介绍互斥信号量 1. 优…
阅读更多...
【计算机毕业设计】springboot企业客户信息反馈平台

【计算机毕业设计】springboot企业客户信息反馈平台

摘 要 网络的广泛应用给生活带来了十分的便利。所以把企业客户信息反馈管理与现在网络相结合&#xff0c;利用java技术建设企业客户信息反馈平台&#xff0c;实现企业客户信息反馈的信息化。则对于进一步提高企业客户信息反馈管理发展&#xff0c;丰富企业客户信息反馈管理经验…
阅读更多...
官网：视觉是第一记忆，没有记忆点的官网设计是失败的。

官网：视觉是第一记忆，没有记忆点的官网设计是失败的。

官方网站虽然不像之前那么火爆了&#xff0c;但是依然是企业展示品牌形象和吸引用户的重要渠道。仅仅拥有一个官方网站并不足以吸引用户&#xff0c;更重要的是网站的设计是否能够给用户留下深刻的记忆。 当前&#xff0c;用户对于网站的要求也越来越高&#xff0c;他们不仅仅希…
阅读更多...
Arduino UNO R3自学笔记16 之 Arduino的定时器介绍及应用

Arduino UNO R3自学笔记16 之 Arduino的定时器介绍及应用

注意&#xff1a;学习和写作过程中&#xff0c;部分资料搜集于互联网&#xff0c;如有侵权请联系删除。 前言&#xff1a;学习定时器的功能。 1.定时器介绍 定时器也是一种中断&#xff0c;属于软件中断。 它就像一个时钟&#xff0c;可以测量事件的时间间隔。 比如早…
阅读更多...
重置linux后vscode无法再次使用ssh连接

重置linux后vscode无法再次使用ssh连接

如果你使用过vscode ssh远程连接了一个Linux系统&#xff0c;但该系统被重置了&#xff0c;并且关键配置没有改变。再次使用vscode连接时&#xff0c;vscode可能无法连接。 原因&#xff1a;vscode远程连接后会在C:\Users{{你的用户名}}.ssh下的known_hosts和known_hosts.old。…
阅读更多...
停止模式下USART为什么可以唤醒MCU？

停止模式下USART为什么可以唤醒MCU？

在MCU的停止模式下&#xff0c;USART之类的外设时钟是关闭的&#xff0c;但是USART章节有描述到在停止模式下可以用USART来对MCU进行唤醒&#xff1a; 大家是否会好奇在外设的时钟被关闭的情况下&#xff0c;USART怎么能通过接收中断或者唤醒事件对MCU进行唤醒的呢&#xff1…
阅读更多...
2024多模态大模型发展调研

2024多模态大模型发展调研

随着生成式大语言模型应用的日益广泛&#xff0c;其输入输出模态受限的问题日益凸显&#xff0c;成为制约技术进一步发展的瓶颈。为突破这一局限&#xff0c;本文聚焦于研究多模态信息的协同交互策略&#xff0c;旨在探索一种能够统一理解与生成的多模态模型构建方法。在此基础…
阅读更多...
最新文章

Copyright @ 2022~2023