目录
1、什么是css?
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，CSS（层叠样式表）用于设置网页的样式及布局——比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画及赋予内容其它装饰性的特征。
2、基本原理
3、语法示例
（1）样式化 HTML 元素
用逗号将不同选择器隔开，即可一次使用多个选择器。
p, li {
color: green;
}
（2）改变元素的默认行为
只要一个 HTML 文档标记正确，即使像我们的例子那么简单，浏览器都会尽全力将其渲染至可读状态。标题默认使用大号粗体；列表旁总有项目符号。这是因为浏览器自带一个包含默认样式的样式表，默认对任何页面有效。没有了它们，所有文本会夹杂在一起变得一团糟，我们只得从头开始规定，好糟糕。话说回来，所有现代浏览器的默认样式都没什么差距。
移除浏览器的默认样式：
li {
list-style-type: none;
}
（3）使用类名
目前为止，我们通过 HTML 元素名规定样式。想用这种方式样式化这一片元素，又想用那种方式样式化那一片元素，可以给 HTML 元素加个类名（class），再选中那个类名，这样就可以了。把 class 属性加到表里面第二个对象：
<ul>
<li>项目一</li>
<li class="special">项目二</li>
<li>项目 <em>三</em></li>
</ul>
**在 CSS 中，要选中这个 special 类，只需在选择器的开头加个西文句点（.）。**在你的 CSS 文档里加上如下代码：
.special {
color: orange;
font-weight: bold;
}
选中每个 special 类的 li 元素：
li.special {
color: orange;
font-weight: bold;
}
选中每个 special 类的 li 元素，并对 还有其它元素起作用
li.special,
span.special {
color: orange;
font-weight: bold;
}
（4）根据元素在文档中的位置确定样式
在我们的文档中有两个 元素 ——一个在段落内，另一个在列表项内。仅选择嵌套在
li em {
color: rebeccapurple;
}
另一些可能想尝试的事情是在HTML文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 + 号 (成为 相邻选择符)
h1 + p {
font-size: 200%;
}
（5）根据状态确定样式
当我们修改一个链接的样式时我们需要定位（针对） （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。你可以使用CSS去定位或者说针对这些不同的状态进行修饰——下面的CSS代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。
a:link {
color: pink;
}
a:visited {
color: green;
}
你可以改变链接被鼠标悬停的时候的样式，例如移除下划线，下面的代码就实现了这个功能。
a:hover {
text-decoration: none;
}
4、如何与HTMl联系
将代码以文件名： index.html 的形式保存下来。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>开始学习CSS</title>
</head>
<body>
<h1>我是一级标题</h1>
<p>这是一个段落文本. 在文本中有一个 <span>span element</span> 并且还有一个 <a href="http://example.com">链接</a>.</p>
<p>这是第二段. 包含了一个 <em>强调</em> 元素.</p>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目 <em>三</em></li>
</ul>
</body>
</html>
让HTML文档能够遵守我们给它的CSS规则。 有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接CSS。
在与之前所说的HTML文档的相同目录创建一个文件，保存并命名为 styles.css 。（看后缀知道此文件就是CSS文件）
为了把 styles.css 和 index.html 联结起来，可以在HTML文档中，语句模块里面加上下面的代码：
h1 {
color: red;
}
保存HTML和CSS文档，刷新浏览器网页，不出意外你将看到网页顶层的大标题变成红色了。如果看到这个现象，我得恭喜你：你已经成功将某些CSS样式运用到HTML上了。
5 、参考
让我们开始CSS的学习之旅：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/%E5%BC%80%E5%A7%8B