1、css简介
css是层叠样式表，主要用来设置网页的样式，排版，布局、美化页面
2、css规则
css语句都是由两个部分组成，选择器和一条或者多条声明css样式的声明语句构成；然后每一条声明都是由属性和值构成，属性是你希望设置哪一个样式，值是属性的值，每一个属性都有一个值，属性和值之间用冒号分开
3、css颜色值
1、使用英文单词red,green,blue等等
2、使用16进制的颜色值：#fff
3、使用rgb值：当使用rgb百分比的时候，即使当值为0，也要写百分比符号。其他情况下，不用写，
p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); }
4、css样式表创建
1、外部样式表：当一个样式需要应用到很多页面时，外部样式表就是一个理想的选择，通过link标签的href属性引入。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
2、内部样式表：当某一个页面需要特殊的样式时，内部样式表就是一个理想的选择，在head标签内部使用style标签定义内部样式表
3、内联样式：由于内联样式将内容和表现混合了在一起，结构和表现没有分离，故慎用这种方式。使用内敛样式，要在相应的标签里面写上style属性。<p style="color:sienna;margin-left:20px">这是一个段落。</p>
5、css背景
1、background-color:设置元素的背景颜色，属性值有三个。
2、background-image：设置背景图片，属性值有三个。
3、background-repeat设置背景图像是否及如何重复。
4、background-attachment背景图像是否固定或者随着页面的其余部分滚动。
5、background-position设置背景图像的起始位置。
6、background简写属性，作用是将背景属性设置在一个声明中。
body {background:#ffffff url('img_tree.png') no-repeat right top;}
6、css Text文本
1、color设置文本颜色
2、direction设置文本方向。
3、letter-spacing设置字符间距
4、line-height设置行高
5、text-align对齐元素中的文本
6、text-decoration向文本添加修饰
7、text-indent缩进元素中文本的首行
8、text-shadow设置文本阴影，text-shadow: h-shadow v-shadow blur color;
9、text-transform 属性控制文本的大小写。
10、vertical-align属性设置一个元素的垂直对齐。
11、white-space属性指定元素内的空白怎样处理。
12、word-spacing属性增加或减少字与字之间的空白。
7、css Fonts字体
1、font-family指定文本的字体系列
2、font-size属性设置字体大小。
3、font-style属性指定文本的字体样式。
4、font-weight 属性设置文本的粗细
5、font 简写属性在一个声明中设置所有字体属性。可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
8、css链接（link）
9、css列表样式（ul）
1、list-style-image 属性使用图像来替换列表项的标记。
2、list-style-position属性指示如何相对于对象的内容绘制列表项标记。
3、list-style-type 属性设置列表项标记的类型。
4、list-style 简写属性在一个声明中设置所有的列表属性。可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image.
可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
10、css Table表格
1、指定CSS表格边框，使用border属性。表格有双边框。这是因为表和th/ td元素有独立的边界。为了显示一个表的单个边框，使用 border-collapse属性。
2、border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
11、css盒子模型
1、所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
12、css Border边框
13、css 轮廓（outline）属性
1、轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
2、outline-color属性指定轮廓颜色。
3、outline-style属性指定outline的样式。
4、outline-width指定轮廓的宽度。
5、outline简写属性在一个声明中设置所有的轮廓属性。可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width。如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。
14、CSS Margin(外边距)
1、CSS Margin(外边距)属性定义元素周围的空间。CSS Margin属性接受任何长度单位、百分数值甚至负值。margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的。margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
15、CSS Padding（填充）
1、CSS Padding（填充）属性定义元素边框与元素内容之间的空间。
16、CSS 尺寸 (Dimension)
1、CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
2、height属性设置元素的高度。
3、max-height 属性设置元素的最大高度。注意：max-height属性不包括填充，边框，或页边距！
4、max-width属性设置元素的最大宽度。
5、min-height 属性设置元素的最低高度。
6、min-width属性设置元素的最小宽度。
17、CSS Display(显示) 与 Visibility（可见性）
1、CSS display 属性和 visibility属性都可以用来隐藏某个元素，但是这两个属性有不同的定义。display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
2、隐藏元素 - display:none或visibility:hidden。隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
18、CSS Positioning(定位)
1、CSS position 属性，允许您将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
2、Static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
3、Fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
4、Relative 定位
相对定位元素的定位是相对其正常位置。
5、Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
19、CSS overflow 属性
1、overflow属性指定如果内容溢出一个元素的框，会发生什么。
20、CSS z-index 属性
1、z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
