CSS样式表
使用CSS样式的方式
HTML <!DOCTYPE>声明标签（H5声明标签）
（1）内链样式表：<body style="background-color:green; margin:0; padding:0"></body>
（2）嵌入式样式表：<style type="text/css"></style>（需要将样式放在<head></head>）
（3）引入式样式表：<link rel="StyleSheet" type="text/css" href="style.css">（需要将样式放在<head></head>）
定义样式表
HTML标记定义<p>...</p>
p{属性：属性值； 属性1：属性值1} 一个选择器可以控制若干个样式属性，他们之间需要用英语的“;”隔开，最后一个可以不加;
Class定义<p class="p">...</p>
class定义是以"."开始 如.p{属性：属性值； 属性1：属性值1}
ID定义<p id="p">...</p>
ID定义是“#”开始的，如#p{属性：属性值；属性1：属性值1}
优先级问题
（1）ID>Class>HTML
（2）同级时选择离元素最近的一个，如
#p{color:red}
#p{color:#f60} 执行颜色为#f60
组合选择器（同时控制多个元素）
如，h1,h2,h3{font-size:14px; color:red; } 选择器组合可以使用 “,” 隔开
伪元素选择器
（1）a:link 正常连接的样式
（2）a:hover 鼠标放上去的样式
（3）a:active 选择链接时的样式
（4）a:visited 已经访问过的链接的样式
常见属性
颜色属性
（1）color：green （2） color：#ff6600 （3）color：rgb（255,255,255） （4）color：rgb
字体属性
（1）字体大小：font-size
（2）自定义字体：font-family
（3）字体加粗：font-weight （normal、bold、bolder、lighter）
（4）字体样式：font-style （normal、small-caps、inherit（继承））
（5）小型大写字母显示文本：font-variant （normal、small-caps、inherit（继承））
背景属性
（1）背景颜色：background-color
（2）背景图片：background-image:url（图片路径）
（3）背景重复：background-repeat（repeat、repeat-x、repeat-y、no-repeat）
（4）背景位置（横向：left、center、right；纵向：top、center、bottom）
（5）简写方式：background：背景颜色 url（图像）重复 位置
文本属性
（1）横向排列：text-align（left、center、right）
（2）文本行高：line-height
（3）首行缩进：text-indent
（4）字符间距：letter-spacing（normal、length、inherit（继承））
（5）单词间距：word-spacing
（6）文本方向：direction（ltr从左到右/rtl从右到左）
（7）文本大小写：text-transform
边框属性
（1）边框风格：border-style
单独定义某一方向的边框样式：border- bottom-style（下边边框样式）、border- top-style（上边边框样式）、border-left-style（左边边框样式）、border- right-style（右边边框样式）
边框风格样式的属性值：none（无边框）、solid（直线边框）、dashed（虚线边框）、dotted（点状边框）、double（双线边框）、groove（凸槽边框）、ridge（垄状边框）、inset （inset边框）、outside（outside边框）、inherit（继承）
（2）边框宽度：border-width
单独风格：border- bottom-width（下边边框宽度）、border- top-width（上边边框宽度）、border-left-width（左边边框宽度）、border- right-width（右边边框宽度）
边框宽度的属性值：thin（细边框）、medium（中等边框）、thick（粗边框）、px（固定值的边框）、inherit（继承）
（3）边框颜色border-color
单独风格：border- bottom-color（下边边框颜色）、border- top-color（上边边框颜色）、border-left-color（左边边框颜色）、border- right-color（右边边框颜色）
属性值：red、green等颜色值的名称、RGB（rgb（255,255,0））、RGBA（rgba（255,255,0,0.1））、#ff0/#ff0000十六位进制、inherit（继承）
属性值的四种情况：一个值：border-color：（上、下、左、右）、两个值：border-color：（上下（左右）、三个值：border-color：（上）（左、右）（下）、四个值：border-color：（上）（下）（左）（右）
列表属性
（1）标记的类型：list-style-type
none（无标记）、disc（默认。标记是实心圆）、circle（标记是空心圆）、square（标记是实心方块）、decimal-leading-zero（0开头的数字标记）、lower-roman（小写罗马数字）、upper-roman（大写罗马字母）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）
（2）标记的位置：list-style-position
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside默认值，保持标记位于文本的左侧。列表项目标记放置在文本意外，且环绕文本不根据标记对齐。
inherit规定应该从父元素继承list-style-position属性的值。
（3）设置图像列表标记：list-style-image
URL 图像的路径
none 默认，无图形被显示
inherit 规定应该从父元素继承list-style-image属性的值
（4）简写方式
list-style:square inside url("image.jpg")
DIV+CSS布局
div和span
DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式。二者的区别在于，span是内联元素，div是块级元素。
盒模型
margin盒子外边距
padding盒子内边距
border盒子边框宽度
width盒子宽度
height盒子高度
布局相关的属性
（1）position定位方式：relative（正常定位）、absolute（根据父元素进行定位）、fixed（根据浏览器窗口进行定位）、static（没有定位）、inherit（继承）
（2）定位（离页面顶点的距离）：left（左）、right（右）、top（上）、bottom（下）
（3）z-index（层覆盖先后顺序）
（4）display显示属性：none（层不显示）、block（块状显示，在元素后面换行，显示下一个块元素）、inline（内联显示，多个块可以显示在一行内）
（5）float浮动属性：left左浮动、right右浮动
（6）clear清除浮动：both
（7）overflow溢出处理：hidden（隐藏超出层大小的内容）、scroll（无论内容是否超出层大小都添加滚动条）、auto（超出时自动添加滚动条）
