css样式的组成

图片截取自CSS 基础 - 学习 Web 开发 | MDN (mozilla.org)

选择符（selector）
声明(declaration)
- 属性(property)：必须放在大括号{}之中。
- 属性值(property value)：属性值为声明结束，声明结束用分号。
  属性与属性值之间用冒号链接。
  如果一个属性有多个属性值，属性值不分先后，属性值之间用空格分隔开即可。

css样式的分类

分为：内部样式、外部样式和行内样式

一、内部样式

css的内部样式是写在html文件中的，html文件的主要内容位于body标签之内，css部分写在head标签之内与html内容作区分。
在head标签中编写css样式时需要先写style双标签，在style双标签中再写css部分内容。
格式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1{
            color:yellow;
        }
    </style>
</head>

<body>
    <h1>这里有一个内部样式</h1>
</body>
</html>

上方代码即可展示出一行黄色的标题一样式的“这里有一个内部样式”的文字。

css内部样式需注意：

写在html内部的head标签里（更方便区分html部分内容和css部分内容）
css部分内容需要嵌套在style标签中
给html部分的标签修改样式时<>不需要存在，例如：对html文件中的 <p></p> 部分内容添加样式时，书写为 p{property:property value;} 即可。

二、外部样式(推荐使用)

css的外部样式是把html部分和css部分分成两个文件的，在html部分中完成基本内容的写法之后新建一个以.css为后缀名的文件，单独写css样式，方便对照html和css部分内容。
在html文件中使用 link 标签引入css文件样式即可，在新建的css文件中直接书写css样式的内容。
引入 css 的方法如下：
方法一 在html文件的 head 部分书写 link 标签， link 标签是一个单标签，有三个属性

属性	属性值	含义
rel	stylesheet	表示定义关联性为样式表
type	text/css	表明链接的内容的类型为`text/css`，这个属性只有在href设置了之后才能设置，也可以不写该属性
href	`路径`	表示引入的css文件的路径

可以写为 <link rel="stylesheet" href="./index.css"> 表示在html文件中使用的是index.css 文件中书写的css样式。 这个标签只能书写在html文件的head标签中

方法二 在 style 标签中书写 @import url() ，括号中写要引入的css文件的路径，这里的import是导入的意思。

可以写为 <style>@import url(./index.css)</style> 也表示在html文件中使用 index.css 的css样式。

两种方法对比：

link 标签属于XHTML标签； @import 是css提供的一种方式
link 引用的css样式会与html同时加载展示在页面中； @import会在html加载完成之后再进行加载，当网速比较慢的时候，屏幕会出现闪烁（先加载好了html内容展示出来，后加载出css部分再把有css修饰的html内容展示出来）
ink兼容性较好，推荐使用；@import` 只有在IE5以上才能够被识别，且部分浏览器无法识别

三、行内样式

行内样式是直接书写在html标签中的(作为html的属性出现)，可以直接指定该标签所包裹的内容的css样式。
书写格式：style=“property1:property value1;property2:property value2;”

例如：
<h1 style="color:green;">这里有一个内部样式</h1>
可以得到下图结果

样式的优先级

在同时书写行内样式和内部样式的时候得到的结果如下：

上图中，对于“这里有一个行内样式”的标题一标签是同时设置了行内样式和内部样式的，内部样式指定的是文字颜色为黄色，行内样式制定的是文本颜色为绿色，最后展示的结果为文本颜色为绿色。
因此，行内样式的优先级高于内部样式。

以上三个css样式的优先级如下（遵循就近原则）：
行内样式>内部样式>外部样式
具体的对比效果将在后面的案例中持续更新，css样式的学习就到此结束了。