什么是CSS
Cascading Style Sheets （层叠样式表）
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
发展史
- CSS1.0
- CSS2.0 Div块+CSS，提出CSS与HTML分离思想，网页内容变得清晰简单 符合SEO
- CSS2.1 浮动，定位（相对定位，绝对定位）
- CSS3.0 圆角，阴影，动画…
简单入门
CSS语法
选择器{
声明;
......
}
CSS三种样式
- 行内样式
html代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color: red">Helloworld</h1>
</body>
</html>
测试样例：
- 内部样式
html代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
h1{
color: brown;
}
</style>
<!--<link rel="stylesheet" href="style.css">-->
<body>
<h1>Helloworld</h1>
</body>
</html>
测试样例:
- 外部样式
html代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<h1>Helloworld</h1>
</body>
</html>
CSS代码
style.css
h1{
color: deepskyblue;
}
测试样例：
如果重复定义，先定义的会被覆盖
拓展 外部样式两种写法
导入式
<style>
@import "css/style.css";
</style>
链接式
<link rel="stylesheet" href="css/style.css">
两种方式的区别
- 1、从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。
- 2、加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。
- 3、兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上 才能识别；而link是 HTML 标签，所以不存在兼容性问题。
- 4、DOM：javascript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。
- 5、link方式的样式权重高于@import的权重。