一、css语言是配合html语言进行网页布局设计及美化的一门语言。
二、css语言有从书写的位置上分类有三种，内联，内嵌，外部。
1.内联：即写在标签里面，可以看做是style属性，在style中对此标签进行美化。
例如：
<!--内联--> <div style="100px;height:100px;background-color: red;"> </div> <div style="100px;height:100px;background-color: blue;"> </div>
效果为：
2.内嵌：即写在head里面，格式为<style type="text/css">，然后使用选择器进行选择后，设置格式。
作为最常用的书写方式，更加直观，容易修改。
举例：
<style type="text/css"></style>
3.外联：单独做一个css文件，命名好之后，<link rel="stylesheet" type="text/css" href="0809.css"/>
大型网页常用，独立性强，修改起来比较麻烦。
二、选择器
选择器顾名思义就是在css语言在外联或者内嵌时，对所要定义的标签进行选择。
常见的选择器有class和id，以及他们的并列使用。
1.class 用.进行选择，对多个标签分配相同的class可以进行多个的同时定义。
例如：
<style type="text/css"> .conmmon{ width: 100px; height: 100px; background-color: olive; color: yellow; } </style> <div class="conmmon"> 我是第一个 </div> <div class="conmmon"> 我是第二个 </div> <div class="conmmon"> 我是第三个 </div>
效果为：
2,id，当时用id时，需注意每个元素的id必须是唯一的，选择时使用#
举例：
<style type="text/css"> #third{ width: 100px; height: 100px; background-color: green; } </style> <div id="third"> </div>
效果为
3.复合使用时，使用的三种情况
①逗号：并列 div,span
②空格：后代 #list li
③大于号：子元素选择器 div>p div中所有p标签
4.属性选择器，即同种属性的标签进行统一设置，不常用。
5.a标签的四个伪类
①a:link {color:#FF0000;} /* 未访问的链接
②a:visited {color:#00FF00;} /* 已访问的链接 */
③a:hover {color:#FF00FF;} /* 鼠标划过链接,其他元素也有此方法，而且可以找到子元素 */
④a:active {color:#0000FF;} /* 已选中的链接 */
三、样式
样式是css语言的最主要用途。
1.元素的大小
width宽度，height高度，单位是px，span设置无效
2.元素的背景
background-color 背景色
background-image 背景图片 url()选择图片位置
background-repeat 背景平铺方式 不重叠平铺是no-repeat
background-size 背景尺寸 单位时px，也可以用%直接缩放
background-position 背景位置 center为中间
3.元素的字体
font-family 字体样式
font-size 字体大小 12px 14px
font-style:italic; italic倾斜
font-weight：粗细
text-decoration:线类，如下划线underline，上划线overline，删除线line-through，去除线none（专门为a标签准备的属性，可以用来去掉<a></a>超链接的下划线）
color：字体颜色
4.对齐方式：
text-align ：水平对齐方式，对于标签中的文字进行水平方面的处理，比如center居中等等。
line-height：行高用于竖直方向的位置处理，常见的比如，middle为竖直方向的居中。
text-indent：常用于p标签的首行缩进。
5.边框和边界
margin为外边距
padding为内边距
border为边框，后面跟着px，solid和dashed分别代表实线跟虚线，后面一加颜色。
注，如果把border认为是一个元素的外包装，那margin可以理解为外包装外面的保护套，而pading是在包装内的保护套，一样还占用空间。
6.显示与隐藏
display可以设置一整个元素的显示和隐藏，隐藏后的元素不占空间，并且不起作用。取值为none
7.针对有序列表和无序列表可以隐藏前面的标志和序号，使用的是list-style，赋值为none时，可以去掉列表前的序号或者标志。
使用list-style-image可以将前面的序号变成图片。
8.格式与布局
1.点式布局：
不常用的布局方式，优点是准确定位，但是需要计算。
使用属性为position，方式有，fixed，absolute，relative。
①fixed 即相对于浏览器的边框进行定位，可以理解为一种针对浏览器的绝对定位，
②absolute绝对定位，相对于浏览器、具有绝对定位的上级元素，进行定位。
③relative相对定位，相对于自己原来应该出现的位置，进行定位。
使用点式布局方式后，还需要配合使用，top，left，right，bottom对位置进行确定，单位时px。
z-index，是分层，元素进行了上述点式布局，设置层数进行罗列控制，同层之间相互影响，不同层之间z-index的取值越大，优先级越高。
2.流式控制：
最常用的布局方式，优点是操作简单，缺点是不具备分层，需要清流。
属性为float和clear
①float属性时，为漂流，即脱离文档流，在父元素下进行漂浮，位置需要配合margin。分为向左漂和向右漂，left和right。
②clear属性，为清流，取值有both，left，right。分别是清除所有流，清除左边的流，清除右边流。因为元素浮起来之后，即在一个文档流了，所以清流的作用在于不互相影响。