HTML 网页开发、CSS 基础语法——十.CSS语法
CSS代码书写位置
• CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
1.内联式
① 内联式简介
•内联式，也被习惯叫做行内式。
•书写位置：在 HTML 标签之上的 style 属性中书写 css 样式。
•所有的 css 样式属性总体组成标签的 style 属性的属性值。
<div style="width: 100px;height: 100px; font-size: 14px;">1</div>
② 内联式缺点
a. 内联式必须写在标签上，没有完全脱离HTML标签。
b.css样式代码让标签结构繁重，不利于HTML结构和解读。
c.一个内联式的CSS代码，只能给一个标签使用，如果多个标签有相同的样式，同样的CSS代码徐奥书写多次，增加代码量。
因此，实际工作中不会使用内联式（行内式）编写CSS代码。
2. 内嵌式
① 内嵌式简介
书写位置：在HTML文件中，<head> 标签内部有一个<style> 标签。
<style> 标签书写在<title> 标签后面，所有CSS代码书写在<style> 标签内部。
<style>标签有意标签属性叫做type，属性值是“text/css”。
<style type="text/css">
div {
width:100px;
height:100px;
background-color:pink;
}
</style>
② 内嵌式特点
| 优点 | 缺点 |
|
a.实现了结构和样式的初步分离，css只负责样式，HTML负责结构。 b.多个标签可以利用一段代码设置相同的样式，节省代码量。 |
a.结构和样式并没有完全分离，代码依旧写在HTML吻技安的<style>标签内部。 b.css样式只能给一个HTML文件使用，不能够被多个HTML文件同时利用。 c.在HTML中如果CSS代码太多，会造成文件头重脚轻。 |
3.外联式
<link rel="stylesheet" href="目标文件路径.css" type="text/css">
优点：
a. 实现了HTML和CSS完全分离
b.多个HTML文件可以公用一个CSS文件，便于提取公共CSS，减少代码
4.导入式
•书写位置：在内嵌式样式表 <style> 标签内部，或者在外联式样式表内部，导入其他的外部的 .css 文件。
•导入方式：利用一条 @import url(路径) 语句进行引入。
<style>
@import url(css/01.css);
div {
border-color: #00f
}
</style>
导入式问题：
•导入式样式表的作用与外联式样式表基本相同。
•但是由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有 css 样式的效果，给用户的体验不好。
•实际工作中，较少使用导入式，推荐使用外联式样式表。
注：
•小型案例：可以使用内嵌式 CSS。
•实际工作、大型网站项目：推荐使用外联式 CSS。
习惯代码书写风格
1.CSS 样式格式
展开格式：开发过程使用，代码可读性强，便于调错
<style>
div {
width: 200px;
height:200px;
background-color: skyblue;
margin-bottom: 10px;
}
</style>
2.英文大小写
CSS中的英文可以用大写，也可以用小写。
建议：CSS中的选择器和样式属性名，属性值等都使用小写英文特殊情况除外。
