CSS简介以及常用的三种引入方式

最新推荐文章于 2024-06-05 16:49:46 发布
最新推荐文章于 2024-06-05 16:49:46 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56930747/article/details/124330220
版权

CSS CSS的全称是层叠样式表（Cascading Style Sheets）。它是一种用来体现HTML或XML等文件样式的计算机语言。CSS不仅能静态地修饰网页，还能配合各种脚本语言动态地对网页各元素进行格式化。

CSS的优点

CSS的三种引入方式

CSS的优点

（1）节省时间 ：可以编写一次CSS，然后在多个HTML页面中通过外部引入多次重复使用

（2）大大缩减页面代码，提高页面加载速度，缩减带宽成本 ：通过使用CSS，就不需要每次都编写HTML标记属性，只需要编写一个标记的CSS规则，并将其应用于该标记的所有实例，因此代码大大减少也就意味着下载时间短。

（3）易于维护 ：如果要进行全局更改，则只需更改样式，所有网页中的所有元素都将会自动更新。

（4）多设备兼容性 ：样式表允许针对多种不同类型的设备进行优化内容。

（5）结构清晰，更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价。

CSS的三种引入方式

1. 行内式

<!-- 行内式 -->
<!-- 只影响该元素 -->
<p style="属性1:值1;属性2:值2;..."></p>

2. 内嵌式（内部样式）

该方式是在HTML的页面中添加一个style标签，在该标签内书写css代码。

<!-- 内嵌式 -->
<!-- 影响该页面元素 -->
<style type="text/css">
	p {
		vertical-align: ;
    }
</style>

3. 导入式（外部样式）

书写单独的css文件，后缀名为.css。

/* myStyle.css文件 */
p {
	vertical-align: ;
}

在html文件的head标签内使用link标签导入外部的css文件。

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入式 在页面装载前装载css -->
		<!-- 影响该页面元素 -->
		<link rel="stylesheet" type="text/css" href="css文件名.css"/>
</head>

三种方式的优先级 ： 行内式>内嵌式>导入式

大雾肆起
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在HTML文档中嵌入CSS的三种常用方式
09-28
在HTML文档中，为了实现页面的美观和布局，我们通常会使用CSS（Cascading Style Sheets）来控制样式。有三种主要方式将CSS融入HTML文档...在实际应用中，根据项目规模和需求，灵活选择合适的CSS引入方式是非常重要的。
CSS（概念、三种导入方式、三种基本选择器、三种高级选择器、字体\文本\超链接伪类\阴影\列表\背景\渐变、盒子模型、浮动、定位、z-index）
qq_40243295的博客
03-20 684
一、CSS的简单介绍 如何学习 CSS是什么 CSS怎么使用（快速入门） CSS选择器（重点+难点） 美化网页（文字、阴影、超链接、列表、渐变...） 盒子模型 浮动 定位 网页动画（特效效果） 1.1 什么是CSS? CSS,全称为Cascading Style Sheets，为层叠样式表。CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元.
CSS概述、引入css的三种方式
uzi2200的博客
08-18 299
什么是CSS CSS: (Cascading Style sheets) 层叠样式表，用于修饰、美化网页的一门语言。 使用css设置样式，可以将设置样式的css代码和展示数据的html代码进行分离，并且可以实现代码的服用。增强网页的展示能力。 总结：css就是用于美化、渲染网页的一门技术 在HTML中引入CSS 这种是通过标签上的style属性为当前标签设置样式，代码示例 <!-- 1.通过标签上的style属性给div设置样式 边框:2px solid red 字体大小:26
CSS学习|css三种导入方式、基本选择器、层次选择器、结构伪类选择器、属性选择器、字体样式、文本样式
最新发布
weixin_73149966的博客
06-05 435
css程序都是在style标签中书写打开该网页，可以看到h1标签中的我是标题被渲染成了红色可以在同级目录下创建一个css目录，专门存放css文件，可以和html分开编写然后在html页面中，利用link标签以及css文件地址，将该css文件引入html中，达到上述同样效果也可用下述import方式引入外部的css文件css的优势:1、内容和表现分离2、网页结构表现统一，可以实现复用3、样式十分的丰富4、建议使用独立于html的css文件。
CSS（引入方式、选择器）基础知识
weixin_72553821的博客
07-14 253
全面的CSS、引入方式、选择器的基础知识
css的三种引入方式
前端开发,HTML5,css3,JavaScript,node.js,vue
11-19 5928
css的三种引入方式,行内样式就是直接把css样式添加在HTML标签中,作为style样式的属性值 内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，但是我们通常写在head标签里面。 外链式是把css样式写入.css文件内，然后通过link标签链接。
CSS 引入的三种方式
传说哈哈哈
03-05 1万+
1. CSS 的三种样式表 2. 内部样式表 3. 行内样式表 4. 外部样式表 🔥 5.CSS 引入方式总结
Vue cli 引入第三方JS和CSS的常用方法分享
10-18
总结来说，Vue CLI 提供了多种方式来引入第三方 JS 和 CSS，选择哪种方法主要取决于库的使用范围和性能考虑。在实际开发中，根据项目需求灵活运用这两种方法，可以有效提高项目的可维护性和性能。
网页引入css样式的几种方法
09-25
网页引入CSS样式是构建网页外观的关键步骤，有多种方法可以实现这一目标，下面将详细介绍内联式、嵌入式、外链式以及导入式四种方式。 1. 内联式样式表： 内联式样式是将CSS直接写在HTML元素的`style`属性中，例如...
20个CSS/CSS3常用样式汇总
09-25
下面将详细解释提供的20个常用CSS样式，以及它们在实际应用中的作用。 1. `white-space: nowrap;`：此属性用于强制文本在一行内显示，不换行，常用于使长字符串或标签内的内容保持在同一行。 2. `text-overflow: ...
CSS样式的三种引入方式及优先级
qq_42108331的博客
05-26 3061
CSS样式的三种引入方式及优先级
【CSS】CSS 总结 ① ( CSS 引入方式 | CSS 选择器 | 基础选择器 | 复合选择器 ) ★
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-06 1068
一、CSS 引入方式 1、CSS 的 3 种引入方式 ( 内联 | 内嵌 | 外链 ) 二、CSS 选择器 1、CSS 基础选择器 2、CSS 复合选择器 后代选择器 子元素选择器 交集选择器 并集选择器 链接伪类选择器
CSS的三种引入方式
Marukooo的博客
10-19 4034
CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。
CSS样式加载顺序和覆盖顺序
weixin_44013783的博客
10-25 330
很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差，下面用示例为大家详细的介绍下，感兴趣的朋友不要错过 { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { border: solid 2 #AE0; } 　　查找一些教材中（w3schools等）...
css的三大引入方式
qq_39121245的博客
02-23 5313
css的三大引入方式（内部样式、外部样式和内联样式）及其权重
CSS三：CSS的三种引入方式
weixin_33836874的博客
07-18 1609
CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。 一、行内样式 使用style属性引入CSS样式。 示例：&lt;h1 style="color:red;"&gt;style属性的应用&lt;/h1&gt;&lt;p  style="font-size:14px;color:green;"&gt;直接在HTML标签中设置的样式&lt;/p&gt;实际在写页面时不提倡使用，在测试的时候可...
CSS的三种引入方式：外部样式、内部样式和行内样式
热门推荐
Ahua_Core的博客
03-07 2万+
CSS的三种引入方式：外部样式、内部样式和行内样式外部样式链接式：link标签导入式：@import链接式与导入式的区别内部样式行内样式样式优先级 外部样式 即CSS代码保存在外部，HTML文件通过链接式link或者 导入式@import引用这个外部样式表。 <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部样式表</title> <!--链接式:推荐
前端----css 的引入方式
qq_42755734的博客
12-25 767
优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。优点：在同一个页面内部便于复用和维护。缺点：在多个页面之间的可重用性不够高。直接在标签的 style 属性中添加 css 样式。将css代码写在一个单独的.css文件中，在。缺点：缺乏可重用性。标签直接引入该文件到页面中。标签中编写css代码。
引入css的三种方法
06-01
好的，下面是三种引入CSS的方法： 1. 在HTML文件中使用<style>标签引入CSS代码 在HTML文件的<head>标签中使用<style>标签，将CSS代码写在这个标签中。 例如： ```html <!DOCTYPE html> <html> <head> <title>My Website</title> <style> /* CSS代码 */ body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1 { color: #333; text-align: center; } </style> </head> <body> <h1>Welcome to my website</h1> <p>This is a paragraph.</p> </body> </html> ``` 2. 在HTML文件中使用<link>标签引入外部CSS文件 在HTML文件的<head>标签中使用<link>标签，将外部CSS文件的路径写在href属性中。 例如： ```html <!DOCTYPE html> <html> <head> <title>My Website</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Welcome to my website</h1> <p>This is a paragraph.</p> </body> </html> ``` 在这个例子中，CSS代码被保存在名为“style.css”的文件中。 3. 在HTML标签中使用style属性引入CSS样式 在HTML标签中使用style属性，为特定的HTML元素添加CSS样式。 例如： ```html <!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <h1 style="color: #333; text-align: center;">Welcome to my website</h1> <p style="background-color: #f2f2f2; font-family: Arial, sans-serif;">This is a paragraph.</p> </body> </html> ``` 这种方法不太常用，因为如果需要应用相同的样式到多个元素上，就需要在每个元素中复制相同的style属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值