1、什么是CSS

如何学习

  1. CSS是什么
  2. CSS怎么用（快速入门）
  3. CSS选择器（重点 + 难点）
  4. 美化网页（文字，阴影，超链接，列表，渐变）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（特效效果）

1.1、什么是CSS

Cascading Style Sheet层叠级联样式表

CSS ：表现层 –> 美化网页

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

1.2、发展史

CSS1.0

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

CSS2.1 浮动，定位

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

联系格式：

image-20230405214149578

1.3、快速入门

style基本入门

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>

建议使用将CSS代码放入其他文件中！！！

CSS的优势：

  1. 内容和表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式十分丰富
  4. 建议使用独立于html的css文件
  5. 利于SEO，容易被搜索引擎收录！

1.4、CSS的三种导入方式

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
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式表-->
    <style>
        h1{
            color: green;
        }
    </style>

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>


<!--优先级：就近原则-->


<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red;">我是标题</h1>


</body>
</html>

拓展：外部样式的两种写法

  • 链接式：

    html

    1
    2
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

  • 导入式：

    @import 是CSS2.1特有的

    1
    2
    3
    4
    <!--导入式-->
    <style>
        @import url("css/style.css");
    </style>

image-20230422135721318