css基本语法及css样式表

css基本语法：

css的语法主要由两个部分构成：

选择器
选择器对应的一个或多个样式声明

选择器就是指定将要被设置样式的html元素，声明部分需要用大括号包裹起来，每个样式声明包含一个css样式属性以及该属性对应的值，两者以冒号分割；不同样式声明之间使用分号来进行隔开。

在网页中插入css样式表：

内联样式（Inline Style)

内联样式就是将css样式直接在元素中进行设置，靠的是全局属性style，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <p style="color:red; font-size:20px">万物皆虚，万事皆允</p>
        <p>万物皆<span style="border: 2px black dashed; padding: 5px">虚</span>，万事皆<span style="border: 2px black dashed; padding: 5px">允</span></p>
        <p>万物皆虚，万事皆允</p>
    </body>
</html>

内部样式表（Internal Style Sheet)

内部样式表就是使用一个style元素，在文档的头部进行统一定义

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            h1 {
                color: red;
            }
            p {
                color: green; font-size: 20px;
            }
        </style>
    </head>
    <body>
        <h1>万物皆虚，万事皆允</h1>
        <p>万物皆虚，万事皆允</p>
        <p>万物皆虚，万事皆允</p>
    </body>
</html>

外部样式表（External Style Sheet）

外部样式表就是将css部分的内容保存为单独的文件，惯例是以.css为后缀名的扩展名，当需要引用到样式的时候，使用link元素将其链接起来。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>万物皆虚，万事皆允</h1>
        <p>万物皆虚，万事皆允</p>
        <p>万物皆虚，万事皆允</p>
    </body>
</html>

相对应的style.css文件：

```

h1 {
color: red;
}
p {
color: green; font-size: 20px;
}
```

css的注意事项：

css没有限制空格的使用
通常情况下，css对字母大小写是不敏感的，但class和id除外。
内联样式>内部样式表>外部样式表，这三者是按这样的优先级差异来实现的。