目录
简介
1. css全称: Cascarding Style Sheet 层叠级联样式表。CSS可以美化网页,颜色,字体,边距,高度等。
2. style可以编写css的代码语法,代码格式: 选择器{ 声明1;声明2}, 每一个声明用分号结尾。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!-- 规范 -->
<!-- style下写声明,声明用;隔开 -->
<style>
h1{color:blue;
}
</style>
</head>
<body>
<h1>
我是h1标题
</h1>
</body>
</html>
演示
style分离
新建一个文件style.css,将script里的css style分离。
h1{color:pink;
}
将原来的html改为link链接内容,连接到style.css, <link rel="stylesheet" href="css/style.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!-- 外部引用css style -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>
我是h1标题
</h1>
</body>
</html>
效果
在开发者模式中我们可以看到css style也成功分离了。
css的优势
1. 内容和表现分离
2. 网页结构表现同意,可以实现复用
3. 样式十分丰富