当前位置: 萬仟网 > IT编程>网页制作>CSS > CSS的三大样式你了解多少

CSS的三大样式你了解多少

2022年01月13日 CSS 我要评论
目录css样式行内式内部式外部式多重样式优先级总结css样式行内式又叫:内联样式、行内样式、嵌入式样式<!-- style作为属性直接写在标签后面, style属性可以包含任何 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样式距离标签近就最终显示哪个样式

在这里插入图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注萬仟网的更多内容!

(0)
打赏 微信扫一扫 微信扫一扫

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2022  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com