书写位置
css的代码按照书写位置区别分为四种书写方式：内联式、内嵌式、外联式、导入式
内联式
内联式，亦被习惯叫做行内式
书写位置：在html标签之上的style属性中书写css样式
所有的css样式属性总体构成标签的style属性的属性值
缺点：
内联式必要书写在标签上，无完全脱离html标签
css样式代码让标签结构繁重，有害于html结构的诠释
内联式的css代码，只能给一个标签运用，倘若多个标签有相同的样式，一样的css代码必须书写多次，增多代码量
因此呢，在咱们实质工作中很少会运用内联式（行内式）编写css代码
内嵌式
书写位置：在html文件中，<head>标签内部有一个<style>标签
<style>标签书写在<title>标签后面，所有css代码书写在<style>标签内部
<style>标签有一个标签属性叫做type,属性值是"text/css"
<style>
p {
font-size: 14px;
}
</style>
优点：
实现了结构和样式的初步分离，css只负责样式，html负责结构
多个标签能够利用一个代码设置相同的样式，节省代码量
缺点：
结构和样式并无完全分离，代码依旧写在html文件的<style>标签内部
css样式只能给一个html文件运用，不可狗被多个html文件同期利用
在html中倘若css代码太多，会导致问文件头重脚轻
外联式
外联式css，亦能够叫做外链式css、外边css
书写位置：在一个单独的扩展名为xx.css的文件中
书写语法：内部代码与内嵌式样式表中<style>标签内部的代码同样的，必须经过选取器去选中标签，添加对应的样式
重视：文件中只需写样式，不必须再写<style>标签
p {
font-size: 14px;
}
外联式引用：
外联式样式表必要引入到html文件中，才可正常进行加载
引入方式：在html中的<head>标签内部运用<link>标签进行引入
<link>标签属性：
<link rel="stylesheet" href="xxx.css">
优点：
实现了html和css完全分离
多个html文件能够公用一个css文件，便于提取公共css，减少代码量
能够实现一个css变化，多个html页面同期变化，减少工作量
一个html文件能够引入多个css文件，能够实现同一个页面中css代码分层
导入式
书写位置：在内嵌式样式表<style>标签内部，或在外联式样式表内部，导入其他的外边的.css文件
导入方式：利用一条@import url(路径)语句进行引入
| 
发表于 2024-6-30 05:06:25
