Web：CSS概述

1. CSS简介

css是层叠样式表(Cascading Style Sheets)的缩写
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰
所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的
而css就可以分别为网页的各个层次设置样式
总之，css用来设置网页中元素的样式

2. CSS编写位置

2.1 内联样式

使用css修改元素的样式的第一种方式是，内联样式，也叫行内样式

特点：

在标签内部通过style属性来设置元素的样式

缺点：

使用内联样式，只能对一个标签生效
希望影响到多个元素时必须在每个元素中复制一遍
当样式需要发生改变时，每个样式都需要改变

注意：开发中绝不推荐使用内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 第一种方式：内联样式(行内样式) -->
    <!-- 字体颜色设置为红色，像素设置为60px -->
    <p style="color:red; font: size 60px;">今天天气真不错</p>
</body>
</html>

2.2 内部样式表

使用css修改元素的样式的第二种方式是，内部样式表

特点：

将样式编写到head的style标签中，通过css的选择器选中元素并为其设置各种样式
可以同时为多个标签设置样式，修改时只需修改一处
注意：style标签中的语法为css语法，不再是html语法

缺点：

内部样式只能对一个网页其作用，其内容不能跨网页复用

注意：开发中不经常使用内部样式表，但为了方便举例，文章中多使用这一方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            /* 设置p标签的颜色为绿色，大小为60px */
            color:green;
            font: size 60px;;
        }
    </style>
</head>
<body>
</body>
</html>

2.3 外部样式表

使用css修改元素的样式的第三种方式是，外部样式表

特点：

可以将css样式编写到一个外部css文件中，然后通过head的link标签引入外部的css文件
这代表着该样式可以在不同页面间进行复用
这种方式可以使用浏览器的缓存机制，加快网页的加载速度

注意：开发中推荐使用这种方式

/*该文件命名为style01.css*/
p{
    color:red;
    font: size 70px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用link标签，填入css文件地址 -->
    <link rel="stylesheet" href="style01.css">
</head>
<body>
    <p>今天天气真不错！</p>
</body>
</html>

3. CSS语法形式

css的基本语法有：选择器和声明块

选择器：

通过选择器可以选中页面中的指定元素，比如p的作用就是选中页面中的所有p

p{}

声明块：

通过声明块来指定为元素设置的样式
声明块由一个个声明组成
声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以' : '连接，以' ; '结尾

color:red;
font: size 70px;