四类样式表
内联式
- 也被称为行内式
- 书写位置：在html标签之上的style属性中书写css样式。
- 所有的css样式属性总体组成标签的style属性的属性值。
- 内联式缺点：
- 1.内联式必须写在标签上，没有完全脱离HTML标签
- 2.css样式代码让标签结构繁重，不利于HTML结构的解读
- 3.一个内联式的css代码，只能给一个标签使用，如果多个标签有相同的样式，同样的css代码需要书写多次，增加代码量。
<p style="font-size: 30px;">这是一段文字</p>
内嵌式
- 书写位置：在HTML文件中，<head>标签内部有一个<style>标签。<style>标签书写在<title>标签后面，所有css代码书写在<style>标签内部。
- <style>标签有一个标签属性叫做type，属性值是"text/css",HTML5可省略该属性
- 优点：
- 1.实现了结构和样式的初步分离，css只负责样式，html负责结构。
- 2.多个标签可以利用一段代码设置，相同的样式，节省代码质量。
- 缺点:
- 1.结构和样式并没有完全分离，代码依旧书写在HTML文件的<style>标签内部。
- 2.css样式只能给一个HTML文件使用，不能被多个HTML文件同时利用。
- 3.在HTML中如果css代码太多，会造成文件头重脚轻。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
p,div {
font-size: 30px;
}
</style>
</head>
<body>
<p>这是一段文字</p>
<div>这是一个div</div>
</body>
</html>
外联式
- 也叫做外链式或外部CSS。
- 书写位置:在一个单独的扩展名为.css的文件中。
- 书写语法:内部代码与内嵌式样式表中<style>标签内部的代码是一样的。需要通过选择器去选中标签，添加对应样式。
- 外链式引用:在<head>标签内部使用<link>标签进行引入。
- rel属性:属性值stylesheet，表示引入的外部文件与HTML之间的关系，样式表
- href属性:属性值是css文件路径，hypertext reference，超文本引用
- type属性:属性值"text/css"，表示加载时按照纯文本形式加载，HTML5中可省略该属性。
- 优点：
- 1.实现了HTML和CSS完全分离。
- 2.多个HTML文件可以引用同一个的CSS文件，便于提取公共css，减少代码量。
- 3.可以实现一次更改，多个HTML页面变化。
- 4.一个HTML文件可引入多个CSS文件，实现同一个页面中css代码分层。
<link rel="stylesheet" href="./css/04_02.css">
导入式
- 书写位置:在内嵌样式<style>标签内部，或者在外链式样式表内部，导入其他的外部的.css文件。
- 导入方式:利用一条@import utl(路径) 语句进行引入
- 缺点:
- 1.导入式样式表的作用与外联式样式表基本相同
- 2.由于导入式在浏览器中加载时，会在HTML结构加载完毕后进行编译，如果网速比较慢时，会导致网页出现没有css样式的效果
<style>
@import url(./css/04.css);
</style>
扫一扫
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
