css基础认知

最新推荐文章于 2024-10-09 09:17:59 发布

翩若惊鸿_

最新推荐文章于 2024-10-09 09:17:59 发布

阅读量163

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/nkhth/article/details/125853240

版权

本文详细介绍了CSS样式的三种引入方式：内部样式表、行内样式表和外部样式表。内部样式表置于HTML的<head>标签中，便于控制当前页面样式，但未完全分离结构和样式。行内样式表直接在标签内设置，简单易用但不推荐大量使用。外部样式表通过<link>标签引用单独的.css文件，适用于大型项目，实现结构和样式的良好分离。

摘要由CSDN通过智能技术生成

一、内部样式表

内部样式表（内嵌样式表）是写到html页面内部，将所有css代码抽取出来，单独放到一个<style>标签中。

示例：

<style>
	div {
		color: red;
		font-size: 12px;
	}
</style>

<style>标签理论上可以放到HTML文档的任何地方，但是一般都会放在文档的<head>标签中。
通过内部样式表的方式，可以方便地控制当前页面中的元素样式设置。
代码结构清晰，但是没有完全实现结构和样式的分离。
一般用于日常练习

二、行内样式表

行内样式表（内联样式表）是在标签内部的style属性中设定css格式，适用于修改简单样式。

示例：

<div style="color: red; font-size: 20px;">任何文本</div>

由于书写繁琐，没有体现结构和样式相分离的思想，不推荐大量使用。

三、外部样式表

实际开发都是使用外部样式表，适用于样式较多的情况。

引入外部样式表分为两步：

新建一个后缀为.css的样式文件，把所有css代码放入此文件中（此时不需要写<style></style>标签）
在HTML页面中，使用<link>标签引入css文件。

示例：

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

属性	作用
rel	定义当前文档与被链接文档之间的关系，这里需要写成stylesheet，表示被链接的文档是一个样式表文件
href	定义所链接的外部样式表的URL，可以是相对路径/绝对路径