CSS入门
一、什么是 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>
参考：菜鸟教程
