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外部:取决于那个代码距离选择对象比较近)