CSS3快速入门：一、三种CSS导入方式

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

三种CSS导入方式

按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为以下三大类：

  • 行内样式表（行内式），又称内联样式
  • 内部样式表（嵌入式）
  • 外部样式表（链接式）

三者之间的优先级：内联样式>内部样式>外部样式

CSS系列文章目录

  1. CSS3快速入门：一、三种CSS导入方式
  2. CSS3快速入门：二、CSS选择器
  3. CSS3快速入门：三、美化网页
  4. CSS3快速入门：四、盒子模型
  5. CSS3快速入门：五、浮动
  6. CSS3快速入门：六、定位

文章目录

1.外部样式表

外部样式表包括<link>链接式和@import导入式两种，之间的优先级遵循就近原则，其特点如下：

  1. css保存在.css文件中
  2. 在HTML中使用<link>标签或@import导入

链接式<link>的特点：

  1. 属于XHTML，无兼容问题
  2. 优先加载CSS文件到页面

导入式@import的特点：

  1. 属于CSS2.1，低版本的浏览器不支持
  2. 先加载HTML结构再加载CSS文件。

2.内部样式表

内部样式表的特点：

  1. 不适用外部css文件
  2. 将css放在HTML中<head>标签的<style>里

3.内联样式（不推荐使用）

内联样式的特点：

  1. 仅影响一个元素
  2. 在HTML元素的style属性中添加

示例源码及网页显示

.html

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>三种CSS导入方式</title>
	<style type="text/css">
		p{
			background: #EE6412;
		}
/*		@import "setbackground.css"*/
	</style>
	<link  type="text/css" rel="stylesheet" href="setbackground.css">
</head>

<body>
	<h1>标题</h1>
	<p style="background: #1FB1DD">这是一个普通的段落。</p>
	<p>这更是一个普通的段落。</p>
</body>
</html>

.css

@charset "utf-8";
/* CSS Document */
h1{
	background: #F4F924;
}
p{
	background: #10E90E;
}

网页
在这里插入图片描述

嵩華想睡觉
关注
  • 9
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
CSS：简述、三种引入方式、CSS选择器、书写格式
平安学习日记
03-08 893
CSS简述 CSS：层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件形式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 简单来说CSS就是静态地美化网页。 CSS的引入 1、行内引入 特点：只能给某个元素对象添加样式 <!--行内样式--> <p style="color: re...
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学习|css三种导入方式、基本选择器、层次选择器、结构伪类选择器、属性选择器、字体样式、文本样式
最新发布
weixin_73149966的博客
06-05 439
css程序都是在style标签中书写打开该网页，可以看到h1标签中的我是标题被渲染成了红色可以在同级目录下创建一个css目录，专门存放css文件，可以和html分开编写然后在html页面中，利用link标签以及css文件地址，将该css文件引入html中，达到上述同样效果也可用下述import方式引入外部的css文件css的优势:1、内容和表现分离2、网页结构表现统一，可以实现复用3、样式十分的丰富4、建议使用独立于html的css文件。
CSS3快速入门：三种CSS导入方式
weixin_43967169的博客
03-29 276
三种CSS导入方式 按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为以下三大类： 行内样式表（行内式） 内部样式表（嵌入式） 外部样式表（链接式） 三者之间的优先级：内联样式>内部样式>外部样式 1.外部样式表 外部样式表包括链接式和@import导入式两种，之间的优先级遵循就近原则，其特点如下： css保存在.css文件中 在HTML中使用标签或@import导入 链接式的特点： 属于XHTML，无兼容问题 优先加载CSS文件到页面 导入式@import的特点： 属于CSS2
css3 引入方式
weixin_49346755的博客
10-01 386
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率！HTML 标签原本被设计为用于定义文档内容，而CSS被定义为如何显示 HTML 标签，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
CSS3样式表的导入方法
wutrg1502的博客
09-19 573
CSS有四种导入样式的方法，下面将一一列举： 1.行内样式 行内样式就是把css样式直接写在HTML标签中 示例：<p style="color:red;">使用css来改变网页的样式</p> 缺点：页面不干净，网页加载体积较大，这种写法也不利于后续维护。 2.内嵌样式 内嵌样式主要是将样式写在<style...
CSS的三种导入方式
weixin_45880263的博客
05-09 299
内部导入 <html> <head> <style> 选择器 </style> </head> <body></body> </html> 外部导入 <html> <head> <link rel="stylesheet" href="XXX.css的相对路径"> </head> <body></body&gt.
CSS零基础入门教程：CSS放入网页的几种方式
01-08
在学习CSS的过程中，理解这四种方式的差异和应用场景至关重要。行内样式适合对个别元素进行特殊处理，嵌入样式用于页面范围的样式设定，外部链接样式用于大型项目以保持代码组织，而导入样式则在需要合并多个CSS文件...
CSS3入门课堂随堂笔记.zip
01-23
本篇笔记将围绕CSS3的基础知识展开，帮助初学者快速掌握这一强大的工具。 ### 1. 选择器增强 CSS3引入了更强大的选择器，如类选择器、ID选择器、伪类和伪元素等。例如，`nth-child()` 和 `nth-of-type()` 用于选择...
前端CSS基础入门一个介绍
11-15
CSS有四种导入方式： 1. 行内样式：直接在HTML元素的`style`属性中写CSS，如`<div style="color: blue;"></div>`。 2. 内部样式表：在`<head>`标签内的`<style>`标签中写CSS。 3. 外部样式表：创建单独的`.css`文件...
mern-redux-tailwind:使用MERN，Redux和Tailwind CSS的快速入门模板
04-08
使用MERN，Redux和快速入门模板 节点中的ES模块 我们在此项目中使用ECMAScript模块。 确保至少具有Node v14.6 +，否则您将需要添加“ --experimental-modules”标志。 另外，导入文件（不是包）时，请确保在末尾...
CookieBuilder:入门套件 HTMLCSSJS
06-02
然后打开一个终端并输入 $ gulpGulp 将在每个 CTRL+S 上编译和缩小 LESS 文件到 css/ 你只需要将你的 less 文件导入到 css/less/style.less // style.less@import " other-file.less "@import " dir/other-file2....
css——css的三种导入方式
万里顾一程的博客
11-05 227
css——css的三种导入方式 行内样式 内部样式 外部样式 三种导入方式的测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--2.内部样式--> <style> h1{ color:green; } &
CSS3学习笔记——HTML网页中引用CSS的三种方式
Etui۹(･༥･´)و的博客
12-26 347
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 第二种方式： -将样
css3新特性及css的引入方式
12-11 140
CSS 引入的方式有哪些? link 和@import 的区别是? 答：内联 内嵌 外链 导入 区别 ：同时加载 前者无兼容性，后者 CSS2.1 以下浏览器不支持 Link 支持使用 javascript 改变样式，后者不可 CSS3 新特性有哪些？ 答：1. 颜色：新增 RGBA，HSLA 模式 2. 文字阴影（text-sh...
在html中引入CSS的方法
weixin_30919919的博客
05-28 125
在html中,引入css的方法主要有行内式、内嵌式、导入式和链接式4种 1。行内式 即在标记的style属性中设定css样式，这种方式本质上没体现出css的优势，因此不推荐使用。 2。嵌入式 在对页面中各种元素的设置集中写在<head>和</head>之间的，对于单个页面来说，这种方式很方便 3。导入式 导入式格式如下： <...
CSS系列之文件引入方式
StayAlive1887的博客
07-28 1537
在index.html需要引用main.css文件，使用link标签引入css文件，link标签的href属性指定css文件的路径，这里使用的是相对路径。 /* 这里的css文件在一个style的文件夹中，名为main.css */将css代码写在标签内，style标签可放在html文档的任意位置，一般放在标签下。color:red;>美味烧烤烤肉
如何引入css
百变鹏仔工作室
02-04 537
以上是一些常见的引入 CSS 的方式，你可以根据实际情况选择适合的方法。记得在使用外部样式表时，要确保 HTML 文件和 CSS 文件的路径正确，并且在 HTML 文件中正确地引用了 CSS 文件。外部样式表（External Style Sheet）：将 CSS 样式保存为一个独立的 CSS 文件（例如 style.css），然后在 HTML 文件中通过。内部样式表（Internal Style Sheet）：将 CSS 样式写在 HTML 文件的。语句在一个 CSS 文件中导入其他 CSS 文件。
CSS-2-CSS的3种导入方式
baidu_38126306的博客
12-05 77
CSS -> CSS的3种导入方式 1. 行内样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--行内样式：在标签元素种，编写一个style属性，编写样式即可--> <h1 style="color:red"&gt
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值