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{ 50px; height: 20px; background-color: red; } .yeloow{ 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{ 250px; height: 60px; background-color: blanchedalmond; } .myclass2{ 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{ 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>