一、什么是 css

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS 是开放网络的核心语言之一，由 W3C 规范进行标准化。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准，CSS3分成多个小模块且正在标准化中。

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

二、css 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是希望设置的样式属性（style attribute）。
每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束，声明组以大括号({})括起来。
为了让CSS可读性更强，你可以每行只描述一个属性。

image.png

p
{
    color:red;
    text-align:center;
}

三、css注释

CSS注释以 "/" 开始, 以 "/" 结束，用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

/*这是个注释*/
p
{
    text-align:center; 
    color:black;
    font-family:arial;
}

四、css的使用

插入样式表的方法有三种:

外部样式表(External style sheet)

内部样式表(Internal style sheet)

内联样式(Inline style)

（一）外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。

在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。

每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部。

外部样式表可以在任何文本编辑器中进行编辑。

文件不能包含任何的 html 标签。

样式表应该以 .css 扩展名进行保存。

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

（二）内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
  <style>
      hr {color:sienna;}
       p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
  </style>
</head>

（三）内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势，请慎用！
当样式仅需要在一个元素上应用一次时。
要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
例如：<p style="color:sienna;margin-left:20px">这是一个段落。</p>

（四）样式优先级
样式表允许以多种方式规定样式信息。样式可以在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：
内联样式 > 内部样式 >外部样式> 浏览器默认样式

<head>
    <!-- 外部样式 -->
    <link rel="stylesheet" type="text/css" href="style.css"/> 
    <style type="text/css">
      /* 内部样式 */
      p{
         color:green;
      }
    </style>
</head>
<body>
    <!-- 内联样式 -->
    <p style="color:red;">测试！</p>
</body>

参考：菜鸟教程