CSS引入样式的四种方法及优先级顺序

最新推荐文章于 2024-09-25 00:51:11 发布

置顶洪洪呀

最新推荐文章于 2024-09-25 00:51:11 发布

阅读量7.3k

点赞数 3

分类专栏： css3

本文链接：https://blog.csdn.net/h_hongai/article/details/108527105

版权

css3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS引入样式的几种方法

css可以通过4种方式引入样式表根据不同的需求可以选择不同的引入方式但是它们也有不同的优缺点

行内样式
嵌入式样式
外部样式
@import 导入的方式

1.行内样式

特点 : 通过HTML的style属性实现

<div>
	<ul>
		<li style='margin-top: 10px;'></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

在这里插入图片描述

2.嵌入式样式

特点 : style标签中写css样式在body中引用

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: rgba(0,0,0,.5);
			}
			
			div{
				margin-top: 150px;
			}
			
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述

3.外部样式

特点 : css代码保存在后缀名为.css的文件中然后在html页面中通过link标签引入

<head>
		<meta charset="utf-8">
		<title>小米移动端布局</title>
		<link rel="stylesheet" type="text/css" href="./css/styles.css"/>
</head>

在这里插入图片描述

4.@import导入的方式

特点 : 把@import放在style标签中

这种方式不推荐使用第一因为使用@import导入的css开始不会被加载只有在引用到他的时候浏览器才会下载去加载它这就导致了浏览器无法并行下载所需的样式文件第二如果有多个@import的时候在IE中下载顺序会被打乱 JavaScript无法解析到它网络不好的时候可能会导致浏览器混乱

<style>
	@import url("css/styles.css");
</style>

在这里插入图片描述

四种引入方式的优先级

行内样式 > 内嵌样式 > 外部样式 > 导入样式

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

洪洪呀

关注关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【CSS笔记】CSS三种样式表、CSS样式表优先级、CSS选择器

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。

08-19

824

CSS，全称是：Cascading Style Sheets，层叠样式表，用于修饰HTML页面的。CSS编写的规则分为两部分，分别是：选择器、声明块。声明块，需要使用【{}】大括号包裹，括号里面使用【key: value；】的格式定义属性。选择器，表示需要对哪个HTML标签添加CSS样式，声明块表示要给选择的标签添加什么样式效果。h1 {}

CSS 引入方式和三种特性和属性优先级

weixin_58139900的博客

09-17

1650

目录 CSS介绍，引入 CSS引入（3种方式） 1，行内引入 2，内部嵌入 3，外部链接 CSS优先级 1.css引入方式的优先级 行内引入：内部嵌入: 外部链接选择器优先级: CSS三种特性 CSS介绍，引入 css 层叠样式表 cascading 层叠 style 样式 sheets表标记语言负责样式也就是网页上那些内容的样式 (宽高，位置，字...

1 条评论您还未登录，请先登录后发表或查看评论

CSS样式的4种引入方法

最新发布

qq_74861982的博客

09-25

841

CSS样式的4种引入方法

css的四种引入方法及优先级

潘超博客

07-11

2303

css的四种引入方法的优先级：行内样式>内嵌样式>链接样式>导入样式。一、使用STYLE属性(行内样式)：将STYLE属性直接加在个别的元件标签里 <元件(标签) STYLE=”性质(属性)1: 设定值1; 性质(属性)2: 设定值2; …}例如： <TD STYLE="COLOR:BLUE; font-size:9pt; font-fami...

css样式引入优先级？

07-03

262

css中的优先级讲的有　　1.选择器的优先级。　　2.样式引入的优先级。今天要研究的是样式引入的优先级。网上又很多答案都是如下的，但是真的是这样的吗，让我们来探一探究竟是如何。　　四种样式的优先级别是：行内样式最高、　　　　？优先级？内嵌样式>链接样式>导入样式？在这四种的优先中，行内样式最高（内嵌样式），大家都是认可的。但剩下的3...

CSS（三）：引入样式和优先级

weixin_34417200的博客

08-26

295

CSS的引入样式总共有三种：行内样式（内联样式表）、内部样式表、外部样式表。下面分别来介绍这三种样式。一、行内样式行内样式也叫内联样式，使用style属性引入CSS样式。看下面的示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

CSS的4种引入方式及优先级

小牛牛的博客

02-17

1318

css的四种引入方式1.行内样式最直接最简单的一种，直接对HTML标签使用style=”“，例如：缺点：HTML页面不纯净，文件体积大，不利于蜘蛛爬行，后期维护不方便。2.内嵌样式内嵌样式就是将CSS代码写在之间，并且用进行声明，例如：body,div,a,img,p{margin:0; padding:0;}优缺点：页面使用公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都

CSS样式定义的优先级顺序介绍

09-25

下面我们将深入探讨CSS样式的优先级顺序。首先，我们来看一下基本的优先级顺序： 1. **内联样式**（Inline styles）：这是通过在HTML元素的`style`属性中直接定义的样式，具有最高的优先级。例如，`;">文本`...

CSS控制样式的三种方式(优先级对比验证)

12-09

CSS样式的优先级遵循以下顺序（从低到高）： 1. 浏览器默认样式：这是所有样式的基础，优先级最低。 2. 外部样式表：全局CSS文件中的样式，优先级低于内部样式表和内联样式。 3. 内部样式表：位于HTML文档头部`...

css小知识点：样式引入优先级

M_Estelle的博客

06-23

306

引入方式： 1.行内样式：行内样式也叫内联样式，使用style属性引入CSS样式如： p段落通过行内样式引入CSS样式 2.内联样式表：内部样式表在<head>标签里面使用<style>标签书写CSS代码。如： <head> <meta charset="UTF-8"> <meta name="viewport

CSS样式分类

world_kun的博客

11-30

1631

1, 内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下： <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head> 语法中，style标签一般位于he...

浅析CSS中的4种引入方式及优先级

11-21

第一：CSS的4种引入方式 CSS的4种引入方式是：行内样式、内嵌样式、链接样式、导入样式 1.行内样式最直接最简单的一种，直接对HTML标签使用style=""，例如： 缺点：HTML页面不纯净，文件体积大，不利于蜘蛛爬行，后期维护不方便。 2.内嵌样式内嵌样式就是将CSS代码写在<head></head>之间，并且用<style></style>进行声明，例如： <style type="text/css"> body,div,a,img,p{margin:0; padding:0;} </style> 优缺点：页面使用公

css的三种方法以及优先级说明

baiwei9200的博客

01-14

239

很多人知道css有三种方式，内联式、嵌入式、外部式优先级如下：内联式（style=“XXX”） > 嵌入式（<style></style>） > 外部式（<link href="xxx.css" />）注意：嵌入式 > 外部式，有个前提：嵌入式css样式的位置一定在外部式的后面，也就是说<link href="XXX.c...

CSS样式的三种写法以及优先级

不言尘世

07-13

2066

1 CSS是什么层叠样式表（cascading style sheets） 2 CSS的作用是一种网页渲染技术，对标签特征属性进行渲染 3CSS的三种写法 1内联样式 <body>  This is a paragraph ...

css样式引入优先级

GaoXiR的博客

12-02

232

CSS的三种引入方式：外部样式、内部样式和行内样式

Ahua_Core的博客

03-07

2万+

CSS的三种引入方式：外部样式、内部样式和行内样式外部样式链接式：link标签导入式：@import链接式与导入式的区别内部样式行内样式样式优先级 外部样式即CSS代码保存在外部，HTML文件通过链接式link或者导入式@import引用这个外部样式表。 <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部样式表</title> <!--链接式:推荐

css样式引入的优先级

山文的博客

11-23

1820

css选择器的优先级 1 位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。 2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。 3、第三级的优先属性由<link/>标签所引入的样式表定义。 4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。 5、第五级优先的样式有用户设定。最低级的优先权由浏览器默认。 ...

css 样式引入的优先级

xuezhezhishen的专栏

12-09

284

参考：https://www.cnblogs.com/shengtianlong/archive/2010/08/11/1797667.html http://blog.csdn.net/killcwd/article/details/43702647

HTML引入CSS样式三种方法及优先级