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

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>

四种引入方式的优先级

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

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

前端面试题：使用css生成田字格的四种方法
使用css生成田字格的四种方法 html结构 css基础样式第一种 flex布局第二种绝对定位第三种 css瀑布流第四种 float浮动 html结构 <div class=" ...
CSS清除浮动的四种方法
CSS清除浮动的四种方法第一种:使用div空标签法第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
[Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
css实现圆形的四种方法
CSS在网页上生成一个圆形的四种方法 border-radius SVG clip-path radial-gradient # border-radius 是最简单的应用,并且得到了广泛的支持.该b ...
2、HTML嵌入CSS样式（四种方法）
CSS 样式代码必须保存在.css类型的文本文件中,或者放在网页内 <style> 标签中,或者插在网页标签的 style 属性值中. CSS 样式应用的方法主要包括 4 种:行内样式.内 ...
css清除浮动的四种方法(详细)
浮动带来的影响清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题看下面一段代码 <div class="fater"><div class ...
HTML和CSS隐藏元素的四种方法
第一种:display:none 特点:不占据屏幕空间显示:display:block <!DOCTYPE html> <html lang="en">& ...
CSS实现三角形的四种方法
方法一:使用 border (常见) [解释]不设置宽高,用边框大小控制三角型大小 [分解步骤] 设置一个div不设宽高 [示例] <style>#triangle{width: 0;he ...
修改第三方UI组件库样式的四种方法
前提:当我们要修改vant组件库中Tabbar图标大小的样式(原图标是字体图标,大小由font-size控制). 字体图标字体大小由css变量(--van-tabbar-item-icon-size) ...

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

CSS引入样式的几种方法

1.行内样式

2.嵌入式样式

3.外部样式

4.@import导入的方式

四种引入方式的优先级

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

最新文章

热门文章