CSS知识整理(一) 基本介绍和CSS导入方式
目录
一、基本介绍
CSS全称为Cascading Style Sheets,层叠样式表,用来对html进行渲染,让html骨架网页变得具有一定的样式,简单来说,就是让网页变得好看。
CSS的优势:
- 实现内容和表现分离(内容就是html,表现就是CSS)
- 网页结构表现统一,可以实现复用
- 样式丰富
CSS的基本结构为:
标签选择器{
声明1;
声明2;
声明3;
}
标签选择器{}
二、导入方式
css可以单独拿出来作为一个.css文件,也可以直接在html中进行添加,行内样式和内部样式就是在html中直接书写css代码,外部样式是单独编写.css文件,然后再html文件中进行导入
1. 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color: red">我是一级标题</h1>
</body>
</html>
效果如下:
2. 内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h2{
color: orange;
}
</style>
</head>
<body>
<h2>我是二级标题</h2>
</body>
</html>
效果如下:
3. 外部样式
首先我们准备一个style.css文件
/*外部样式*/
h3{
color: blue;
}
- 链接式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部样式链接式-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>我是三级标题</h3>
</body>
</html>
- 导入式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*导入式*/
@import url("style.css");
</style>
</head>
<body>
<h3>我是三级标题</h3>
</body>
</html>
上面的效果均如下:
需要注意的是:对于同一个标签,其css样式的优先级遵守就近原则,也就是:行内>(内部or外部:取决于那个代码距离选择对象比较近)