css简介
css简介
背景
什么是CSS?
CSS(Cascading Style Sheets) 层叠样式表的简称。CSS语言是一种标记语言，他不需要编译，可以直接由浏览器执行（属于浏览器解释型语言）。在标准网页设计中CSS负责网页内容的表现。
-
样式定义如何显示HTML元素
-
样式通常存储在样式表中
-
将样式添加到HTML4.0中是为了解决内容与表现分离的问题
-
外部样式表可以极大提高工作效率
-
外部样式表通常存储在CSS文件中
-
多个样式定义可以层叠为一个
css和html有什么区别
html是超文本表级语言，可以定义网页的元素；css定义网页元素的样式；js使网页具有动态性。
我的第一个CSS程序
示例一： 内部样式
css代码和html代码可以合二为一，css代码写在 head中style标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个CSS文件</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>一级标题</h1>
</body>
</html>
示例二： 外部样式
css代码剥离出来，在htmlhead中的link标签中链接进去
/*css/style.css */
h1 {
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个CSS文件</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>一级标题</h1>
</body>
</html>
示例三： 行内样式和内部样式比行内样式优先级更高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个CSS文件</title>
<style>
h1 {
color: blue;
}
</style>
<!-- <link rel="stylesheet" href="css/style.css">-->
</head>
<body>
<h1 style="color:red">一级标题</h1>
</body>
</html>
样式四： 外部样式：导入式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个CSS文件</title>
<style>
@import "css/style.css";
</style>
<!-- <link rel="stylesheet" href="css/style.css">-->
</head>
<body>
<h1>一级标题</h1>
</body>
</html>
