CSS的三大样式你了解多少

css样式

行内式

又叫：内联样式、行内样式、嵌入式样式

<!-- style作为属性直接写在标签后面, style属性可以包含任何 css属性 -->
<div style="font-size: 40px; color: #ff0000;">我是div</div>
<div style="font-size: 40px; color: blue;">我是div2号</div>
<p style="font-size: 40px; color: orange;">我是段落</p>

当样式仅需要在一个元素上应用一次时，要使用内联样式
缺点
- 将表现和内容混杂在一起，结构样式没有分离，不利于后期维护
- 样式不能重复使用 ( 推荐不使用 )

内部式

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部样式表</title>
		<!-- 2、在head中间创建一个style标签 -->
		<style type="text/css">
			/* 3、在style标签中，就可以直接书写css代码，进行修饰 */
			p {
				color: red;
				font-size: 30px;
				/* 
                	在书写css的时候，如果没有特殊规定，
                    数值必须带单位(html不必)，px:像素 
                */
			}
			div{
				color: blue;
				font-size: 80px;
			}
		</style>
	</head>
	<body>
		<!-- 1、先创建想要修饰的对象 -->
		<div>css基础学习</div>
		<p>我是段落</p>
	</body>
</html>

当单个文档需要特殊的样式时，使用内部样式表
- 适合案例、短小的页面开发
使用 <style> 标签在文档头部定义内部样式表
<style> 标签放在哪里都可以，不一定要放在 <head> 里面。之所以放在 <head> 里面，是为了让浏览器在加载的时候先加载css，这样的话浏览器就会先心里有数，知道谁要修饰成什么样式，等加载到html之后就可以直接把样式给到相关对象上。
优点：结构样式分离，好维护
缺点：只能在一个页面中使用css样式

外部式

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式表</title>
		<!-- 3、利用<link>标签或者import引入css文件 -->
		<!-- css外部引入方式1(推荐使用) -->
		<!-- 
			rel: relationship; 
				rel属性是必须的, 规定当前文档与被链接文档/资源之间的关系
			stylesheet:样式表
		-->
		<link rel="stylesheet" type="text/css" href="外部样式.css" /> 
		<!-- link的另一种用法，链接标题<title>前面的小图标 -->
		<link rel="icon" href="images/icon.jpg" />
		<!-- css外部引入方式2 -->
		<style type="text/css">
			@import url("demo.css"); /* @import：导入，引入； */
		</style>
	</head>
	<body>
		<!-- 1、先创建想要修饰的对象 -->
		<div>css基础学习外部样式</div>
		<div>css基础学习外部样式</div>
		<p>我是段落</p>
		<p>我是段落</p>
		<!-- 2、新建一个css文件 -->
	</body>
</html>

当样式需要应用于很多页面时，外部样式表将是理想的选择
- 适合整站开发、比较长的页面开发
在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表，浏览器会从css文件中读到样式声明，并根据它来格式文档
优点
- 结构化样式分离，好维护
- 样式重用，可以多个页面使用
<link> 和 import 的区别
- 本质上来看，<link> 是html的标签，而 import 是css提供的一种方式
- 加载顺序上
  - <link> 是当页面 ( body里面的内容 ) 被加载的时候 ( 也就是被浏览者浏览的时候 )，<link> 引入的css会同时被加载
  - import 引入的css会先等页面加载完毕之后再加载，如果用这种加载方式，会在网速比较慢的时候，出现闪烁的效果，影响用户体验
- 兼容性上的区别
  - @import 是css2.1提供的，所以老的浏览器不支持，@import 只有在ie5以上的才能识别
  - <link> 标签无此问题
- 使用dom
  - 当使用javascript控制dom去改变样式的时候，只能用 <link> 标签
  - 因为@import 不是dom可以控制的

多重样式优先级

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多重样式优先级</title>
		<link rel="stylesheet" type="text/css" href="demo.css"/>
		<style type="text/css">
			div{
				color: blue;
			}
			p{
				color: blue;
			}
		</style>  
		<!--
			demo.css里面p标签设置的是红色
			这里<style>距离<p>标签比<link>近，所以显示的是蓝色字体
		-->
	</head>
	<body>
		<div style="font-size: 50px; color: orange;">
			解析规则第一条测试
		</div>
		<p>
			解析规则第二条测试：外部和内部样式表同时使用
		</p>
	</body>
</html>

多重样式优先级
- 同时使用内部、外部、行内样式表修饰同一个标签的时候，优先级最高的是行内样式表，即显示结果是行内样式
- 当外部和内部样式表同时使用的时候，哪个css样式距离标签近就最终显示哪个样式

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注www.887551.com的更多内容!

黄山市民网：https://www.huangshanshimin.com/

目录

css样式

行内式

内部式

外部式

多重样式优先级

总结

相关文章