什么是CSS:
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
如何学习CSS:
学习CSS的重点:CSS选择器(重点+难点)
CSS发展史
快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范,<style>可以编写CSS代码,每一个声明最好是以分号结尾
语法:
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
运行结果:
推荐HTML与CSS相分离(结构与样式相分离)。<link rel="stylesheet" href="../css/01.css">
01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范,<style>可以编写CSS代码,每一个声明最好是以分号结尾
语法:
选择器{
声明1;
声明2;
声明3;
}
-->
<link rel="stylesheet" href="../css/01.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
01.css
h1 {
color: orange;
}
CSS的优势
- 结构与样式相分离。
- 网页结构表现统一,可以实现复用。
- 样式十分丰富。
- 建议独立于html的css的文件
- 利用SEO,容易被搜索引擎收录。(Vue不容易被搜索引擎收录)
导入CSS的3种方式
- 行内样式
- 内部样式
- 外部样式
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--2.内部样式-->
<style>
h1 {
color: red;
}
</style>
<!--3.外部样式-->
<link rel="stylesheet" href="../css/01.css">
</head>
<body>
<!--1.行内式-->
<h1 style="color: orange"></h1>
</body>
</html>
优先级: 就近原则