1. 什么是CSS
CSS,全称是Cascading Style Sheet 层叠样式表
Word文档多个样式层层叠加,相互之间共同修饰一个文本...这里就是一个层叠样式
CSS里面也是使用各种样式,各种修饰完成对于HTML页面的美化过程。
2.CSS的功能是什么
1. 美化HTML
2. 提高代码的复用性,提高开发效率
3. HTML和CSS样式分离,后期好维护
4. HTML和CSS样式分离,还能降低公司成本,带宽成本
3.CSS的三种引用方式
内联
外联
行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
内联样式
head标签内定义一个style标签,在style标签内都是CSS样式
-->
<style>
/*
.cls选择器 修饰HTML标签属性class为cls的标签
大括号内是CSS样式
*/
.cls {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<!--
外联样式
使用link标签连接外联样式表
rel 声明连接的类型
type text/css 可视化的CSS样式
href 表示CSS样式的地址,该地址可以是一个网络地址
-->
<link rel="stylesheet" type="text/css" href="./css/03-CSS三种引入方式.css">
</head>
<body>
<!--
行内样式表
HTML标签的Style属性
CSS样式是一个键值对形式 width:200px;
属性名:属性值;
-->
<div style="width: 200px; height: 200px; background-color: blue;"></div>
<div class="cls"></div>
<div id="id1"></div>
</body>
</html>
/* 外联样式表,这里使用的ID选择器 */
#id1 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
三种引入方式对比
1. 行内样式表权重最高
2. 外联样式表墙裂推荐,这里可以节约资源,同时提高复用度