1、css概述
主要的使用场景就是美化网页，布局页面
（1）html的局限性
它只关注内容的语义，只能做一些简单的样式，并且非常的臃肿和繁琐
（2）css对网页美化的作用
css是层叠样式表的简称，它和html是一样的，都是一种标记语言，css主要用于设置html页面的文本内容（字体、大小、对齐方式等）图片的外形（宽度、高度、边框样式、边距等）以及版面的布局和外观显示样式。css可以美化html使得页面更加漂亮，页面的布局更加简单。
（3）html与css
html主要做结构，显示元素内容，css美化html，布局网页。因此，html专注结构呈现，css做样式，即结构与样式相分离
2、css语法规范
（1）代码
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: red;
font-size: 20px;
}
</style>
</head>
<body bgcolor="aquamarine">
<h2>静夜思</h2>
<p>
床前明月光，疑似地上霜
</p>
<p>
举头望明月，低头思故乡，
</p>
</body>
</html>（2）测试
在style标签中，p被称为选择器，用于指定css的html标签，花括号内部是对该对象设置的具体样式
属性和属性的值，以键值对的形式出现
属性和属性的值以冒号隔开
每一个键值对以分号相隔开
3、选择器
就是根据不同的需求，把不同的标点选出来。
（1）标签选择器
标签选择器是指用标签名称作为选择器，按照标签名称分类，为页面中某一标签制定统一的样式。优点是能够快速地为页面同类型的标签，统一设置样式。但是标签选择器不能满足差异化样式，只能同时设置同一类型的标签
代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: red;
font-size: 20px;
}
div{
color:black;
font-size: 25px;
}
</style>
</head>
<body bgcolor="aquamarine">
<h2>静夜思</h2>
<p>
床前明月光，
</p>
<p>
疑似地上霜，
</p>
<div>
举头望明月，
</div>
<div>
低头思故乡，
</div>
</body>
</html>测试：
标签选择器，是根据标签的不同来对样式进行设置的
（2）类选择器
标签选择器不能实现差异化的设置，但是类选择器可以，它可以单独选一个或者几个标签
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.myclass1{
color: red;
font-size: 20px;
}
.myclass2{
color:black;
font-size: 25px;
}
</style>
</head>
<body bgcolor="aquamarine">
<h2>静夜思</h2>
<p class="myclass1">
床前明月光，
</p>
<p class="myclass2">
疑似地上霜
</p>
<div class="myclass1">
举头望明月，
</div>
<div class="myclass2">
低头思故乡
</div>
</body>
</html>测试：
在使用类选择器之后，即使是相同的标签，也可以实现不同的样式。如果说标签选择器是为了区别不同的标签的话，那么类选择器，则可以进一步对众多的同一种标签进行区分
类命名规则：
头：header
内容：content
尾：footer
导航：nav
侧栏：column
菜单：menu
类选择器实现盒子模型：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.red{
width: 50px;
height: 20px;
background-color: red;
}
.yeloow{
width: 50px;
height: 40px;
background-color: yellow;
}
</style>
</head>
<body bgcolor="aquamarine">
<h2>类选择器实现盒子模型</h2>
<div class="red"></div>
<div class="yeloow"></div>
<div class="red"></div>
</body>
</html>
在同一种标签中，通过class的不同实现不同的布局
类选择器的多类名：一个标签的class属性有多个值
可以把一些标签元素相同的元素放到一个类里面：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.myclass1{
width: 250px;
height: 60px;
background-color: blanchedalmond;
}
.myclass2{
width: 250px;
height: 60px;
background-color:red;
}
</style>
</head>
<body>
<h2>类选择器实现盒子模型</h2>
<div class="myclass1">
床前明月光，疑是地上霜.
</div>
<div class="myclass2">
举头望明月，低头思故乡，
</div>
</body>
</html>在这个案例中，两句话显示的区域的大小是相同的，可以把他们抽取出来，重新创建一个新的class
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.myclass1{
background-color: blanchedalmond;
}
.myclass2{
background-color:red;
}
.area{
width: 250px;
height: 60px;
}
</style>
</head>
<body>
<h2>类选择器实现盒子模型</h2>
<div class="myclass1 area">
床前明月光，疑是地上霜.
</div>
<div class="myclass2 area">
举头望明月，低头思故乡，
</div>
</body>
</html>这样的话可以节省css代码，统一修改也非常方便
（3）id选择器
ID选择器和类选择器的使用方法基本相同，但是定义方式不同，最大的区别就是ID选择器只能使用一次
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#color{
color: red;
}
</style>
</head>
<body>
<div id="color">
床前明月光，疑是地上霜.
</div>
</body>
</html>
（4）通配符选择器
*：修改所有标签的样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div id="color">
床前明月光，疑是地上霜.
</div>
<p>
举头望明月，低头思故乡.
</p>
</body>
</html>
来源：oschina
链接：https://my.oschina.net/u/4406280/blog/4314428