CSS基础

发表于 更新于 分类于 Disqus： 本文字数： 397 阅读时长 ≈ 1 分钟

一、初识CSS

1.1 CSS是什么

CSS：Cascading Style Sheet 层叠级联样式表

CSS作用：表现（美化网页）

    字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动……

CSS的优势：

    1、内容和表现分离

    2、网页结构表现统一，可以实现服用

    3、样式十分的丰富

    4、建议使用独立于html的css文件

    5、利用SEO，容易被搜索引擎收录！

1.2 CSS发展史

    CSS1.0

    CSS2.0    DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

    CSS2.1    浮动，定位

    CSS3.0    圆角，阴影，动画……    浏览器兼容性

1.3 CSS的三种导入方式

1.3.1 内部样式：

在<head> 中 用<style> 可以编写css的代码，每一个声明最好使用分号结尾，语法如下：

选择器{
    声明1;
    声明2;
    声明3;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <!--规范,<style> 可以编写css的代码,每一个声明 最好使用分号结尾
    语法:
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
 
</head>
<body>
 
<h1>我是标题</h1>
 
</body>
</html>
1.3.2 外部样式（推荐使用）：

两种写法：

①链接式（推荐）：在html文件的<head>中，用 <link> 引用css文件

<link rel="stylesheet" href="css/style.css">
注：css文件夹与此 html 在同一个文件夹里

index.html ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <!--引用css文件-->
    <link rel="stylesheet" href="css/style.css">
 
</head>
<body>
 
<h1>我是标题</h1>
 
</body>
</html>

css/style.css ：

1
2
3
h1 {
     color:red;
}

②导入式：在html中， 在<head> 的 <style> 中使用 @import

1
2
3
<style> 
    @import url("css/style.css"); 
</style>