CSS——引入方式

原创 已于 2025-04-24 00:49:38 修改 · 608 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

于 2025-04-16 22:33:47 首次发布

目录

基础认知

1. 体验CSS

CSS的作用

CSS语法规则

2. CSS引入方式

1）内嵌式

2）外联式

3）行内式

3. CSS引入方式小结 

基础认知

CSS（cascading style sheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。简单用房子比喻来说，HTML是毛坯房，CSS就是给房子装修。

1. 体验CSS

CSS的作用

将网页的表现与HTML的结构和内容相分离，CSS通过对页面结构的风格进行控制，进而控制整个网页的风格。

CSS语法规则

  1. 目录结构命名规则:一般命名为style，css。
  2. 样式文件的命名规则:前期放于不同的css文件中，后期将其整合到一个css文件中，一般命名为style.css或css.css。
  3. 选择器的命名规则:必须由小写字母或下划线组成，必须以字母开头，不能纯数字。

2. CSS引入方式

1）内嵌式

定义: CSS写在style标签中，通常约定写在head标签中。

示例:



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内嵌样式</title>
		
		<style type="text/css">
			div{
				color: red;font-size: 30px;
			}
		</style>
		
	</head>
	<body>
		<!--css引入方式：（行内样式时我们用的是style属性，内部样式时我们用的是style标签）-->
		<!--1.行内样式：
			将css代码写在元素开始标签的style属性中
			可以设置多个样式，使用";"隔开-->
			
		<!--2.内部样式-->
			<!--在当前网页head标签中，写上一对style标签，然后在style标签中，使用选择器编写css代码-->
		
		<div>加入睡觉教</div>
		
		
	</body>
</html>

2）外联式

定义: CSS写在一个单独的.css文件中，通过link标签在网页中引入。

步骤:

  1. 新建一个.css文件，如my.css。
  2. 在my.css文件中编写CSS代码，如：在HTML文件的head部分通过link标签引入该CSS文件：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="a.css" />
		<link rel="stylesheet" href="b.css"/>
	</head>
	<body>
		<!--将css代码写在元素开始标签的style属性中
			可以设置多个样式，使用";"隔开-->
		
		<div>加入睡觉教</div>
		
	</body>
</html>

注意: href属性用于指定CSS文件的路径。

3）行内式

定义: CSS写在标签的style属性中。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行内样式</title>
	</head>
	<body>
		<!--css引入方式：-->
	       <!--将css代码写在元素开始标签的style属性中
			可以设置多个样式，使用";"隔开-->
		
		<div style="color: red ;background: greenyellow;font-size: 30px;">加入睡觉教</div>
		
		
	</body>
</html>

注意:行内式写法具有局限性，只能控制单个标签。不推荐使用，未来配合js使用更佳。

3. CSS引入方式小结 

  • 三种引入方式:
    • 内嵌式: 适用于小案例，方便HTML和CSS在一个文件内管理。
    • 外联式: 适用于开发项目，HTML文件放标签，CSS文件放样式，单独管理。
    • 行内式: 实际开发中用到概率低，一般配合js使用。

如何引入和使用CSS文件
DevPulse的博客
09-24 398
内联样式表适用于单个元素的快速样式设置，嵌入式样式表适用于单个HTML文件的样式设置，而外部样式表适用于多个HTML文件共享样式的情况。本文将介绍几种在网页中引入和使用CSS文件的方法，并提供相应的源代码示例。外部样式表是将CSS样式规则写在一个独立的CSS文件中，并在HTML文档中通过标签进行引用的方法。这种方法适用于多个HTML文件共享样式，可以提高代码的可维护性和复用性。内联样式表是一种将CSS样式直接应用于HTML元素的方法。嵌入式样式表是将CSS样式规则写在HTML文档的标签内的。
CSS——scss中动态引入背景图
qq_43201350的博客
02-29 1893
CSS——scss中动态引入背景图
CSS样式引入方式
qq_51194826的博客
06-06 1924
2.引入方式 一般的方式有4种 行内样式 内嵌样式 外链样式 导入样式 2.1行内样式
＜style scoped＞vue中怎么引用css文件
最新发布
zwh1zwh的博客
11-26 345
在 Vue 的中引用 CSS 文件的主要方式是使用@import基本语法路径建议：使用别名或相对路径最佳实践：将通用样式全局导入，组件特有样式局部导入预处理器：配合 SCSS/Less 使用更强大的功能选择合适的方法取决于你的项目结构和具体需求。
CSS引入的三种方式
weixin_59272777的博客
04-24 3750
样式引入方式特点优点缺点适用场景内联样式（Inline Styles）在HTML元素内部使用style属性定义样式直观、快速，无需额外编写CSS代码不利于样式统一管理和复用，增加HTML文档复杂性对单个元素进行临时或快速样式调整，无需多页面复用内部样式表（Internal Stylesheets）在HTML文档的部分使用标签定义样式样式集中管理，HTML文档结构更清晰需在每个页面部分重复编写样式，不利于样式复用和共享。
css的三种引入方式
前端开发,HTML5,css3,JavaScript,node.js,vue
11-19 6413
css的三种引入方式,行内样式就是直接把css样式添加在HTML标签中,作为style样式的属性值 内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，但是我们通常写在head标签里面。 外链式是把css样式写入.css文件内，然后通过link标签链接。
css引入方式
qq_42370150的博客
06-22 626
css引入页面的方式有三种： 1、内联式：通过标签的style属性，在标签上直接写样式。 <div style="width:100px; height:100px; background:red ">......</div> 2、嵌入式：通过style标签，在网页上创建嵌入的样式表。 <style type="text/css"> div...
CSS的引入方式
kathrinalu的博客
10-13 1228
1、行内式：         直接在元素的style属性中，添加CSS样式： Hello World 优点：分散、灵活、方便、直观。 缺点：缺乏整体性和规划性和可重用性。 2、内嵌式（内部样式）： 包含在元素内的CSS样式，可以出现在元素内的任意位置，但是为了规范起见，通常在元素内加入元素，并在内写CSS样式，规则不变： Title
CSS——PostCSS简介
mantou_riji的博客
02-27 3492
PostCSS不是像Sass或Less一样的样式处理器，他没有自定义的语法和语义，它实际上不是一种语言，而是一种CSS语法转换的工具。PostCSS与CSS一起使用，任何有效的CSS都可以由PostCSS处理。PostCSS是CSS语法转换的工具，允许自定义CSS的语法，这些语法可以被插件理解和转换。在 CSS 中查找某些内容（例如，will-change 属性）。更改找到的元素（例如，在 will-change 之前插入 transform: translateZ(0) 作为旧浏览器的填充）。
CSS——CSS基础知识
流楚丶格念的博客
06-26 8410
文章目录CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS样式规则外链案例内链案例 CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生
css的三大引入方式
01-08
css的引入方式 一、 css的引入方式 css的引入方式有三种：内部样式、外部样式和内联样式（行内样式）。下面是对三种引入方式的详细介绍。 （1） 内部样式 语法： 在head标签添加style标签 例如： （2） 外部样式 ...
动态调用css文件——jquery的应用
10-31
标题中的“动态调用css文件——jquery的应用”指的是利用JavaScript库jQuery来实现在网页中动态加载或切换CSS样式表的功能。这种技术对于增强用户体验、实现主题切换或个性化定制有着重要作用。下面将详细介绍这个...
css的引入方式
weixin_38363851的博客
03-19 332
css的引入方式 css为网页添加样式，常见的引入方式有三种 1.标签内部引入 通过style标签设置css样式，比如最基本的设定字体颜色和大小的样式，可以通过这种内联样式引入：<p style=“color:red”;font-size:60px;> style的内部属性为名值对结构。这种方式比较简单，但每次使用时都要写一次，比较不方便。 2.内部样式表 同样是使用style来确定样式，不同于标签内部的引入方式，将style写入head中，基本语法为<style.>【选择器】【声明
CSS三种引入方式：内联、页级、外联
weixin_30888413的博客
07-08 757
1.内联CSS 　　内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。 1 <body> 2 <div style="width: 65px;height: 20px;border: 1px s...
CSS引入方式详解
echo_123qq的博客
07-01 932
CSS有四种主要的引入方式，每种方式都有其适用场景和特点。
网页设计必学：CSS四种样式引入方式及常用样式
云端源想的博客
03-26 4466
在Web开发的世界中，CSS（层叠样式表）是构建视觉吸引力和定义网页布局的不可或缺的工具。掌握如何恰当地引入CSS样式以及理解它们的优先级规则，对于前端开发者来说至关重要。今天，我们就来深入探讨CSS的四种引入方式，以及选择器的优先级之谜，了解常用的CSS样式及使用方法！
CSS的三种引入方式——三种书写CSS的方式
weixin_64294248的博客
07-17 1237
CSS是组成网页的重要部分，一种用于设置网页外观（表现）的文档，CSS不是一种编程语言。CSS（英文全称：Cascading Style Sheets），意为层叠样式表，CSS主要用于美化页面，我们平时所看到的界面效果，大多都离不开CSS样式。
CSS从入门到精通——基础知识CSS样式引入方式
10-01
CSS样式的引入方式主要有行内式（内联样式）、内部样式表（内嵌样式表）、外部样式表（外链式）和导入式，以下是详细介绍： - **行内式（内联样式）**：直接在 HTML 标签的 style 属性中设置样式。例如： ```html <div style="background-color: orange; width: 500px; height: 200px;"> 一个div </div> ``` 这种方式将样式直接应用于特定的 HTML 元素，适用于对单个元素应用独特样式的情况，但如果样式需要在多个元素中复用，会导致代码冗余，不利于维护和管理[^4]。 - **内部样式表（内嵌样式表）**：将样式定义到 HTML 的 `<head>` 元素的子元素 `<style>` 里，使用选择器来定位要设置样式的元素。示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内部样式表示例</title> <style type="text/css"> div { background-color: orange; width: 500px; height: 200px; } </style> </head> <body> <div> 一个div </div> </body> </html> ``` 内部样式表适用于单个 HTML 文件的样式设置，能够将样式与 HTML 结构分离，但如果多个页面需要相同的样式，仍会有代码重复的问题[^4]。 - **外部样式表（外链式）**：使用 `<link>` 标签引入外部的 CSS 文件。`<link>` 标签的 `rel="stylesheet"` 表示引入的是样式表；`type="text/css"` 指定样式类型为 CSS；`href` 属性指定 `.css` 文件的路径（相对路径或绝对路径）。示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外部样式表示例</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div> 一个div </div> </body> </html> ``` 在 `styles.css` 文件中可以编写相应的样式： ```css div { background-color: orange; width: 500px; height: 200px; } ``` 外链式是使用频次最高、最实用的 CSS 样式表引入方式，可以将 HTML 代码与 CSS 代码分离为两个或多个文件，实现结构和表现的完全分离，使网页的前期制作和后期维护都变得十分方便。在加载页面时，`<link>` 标签引用的 CSS 样式表将同时被加载[^2][^3]。 - **导入式**：使用 `@import` 语句在 `<style>` 标签内导入外部 CSS 文件。基本语法如下： ```html <style type="text/css"> @import url("CSS 文件路径"); /*此处还可以存放其他CSS 样式*/ </style> ``` 导入样式表必须在 `style` 标记内开头的位置定义，可以同时导入多个外部样式表，每条语句必须以“;”结束。一般导入外部样式写在最前面，内部样式写在后面。`@import` 必须连续书写，外部样式表的名称在书写时，必须是全称再加上后缀名 `.css`。不过，导入式会在整个网页加载完后再加载 CSS 文件，因此如果网页比较大则会出现先显示无样式的页面，再出现网页的样式的情况，可能造成不好的用户体验[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值