一.选择器：
1. id选择器
通过
<style>
Td{
Color:red;
}
Or(特定的ID制作样式)
#td1{
Color:green;
}
</style>
<p>nihao<p>
<p id=”p1”>wohao<p>
2. 类选择器
<style>
.red{
Color:red;
}
Or(指定某个标签的class样式)
Tr.red{
Color:red;
}
</style>
<p class:”red”>nihao<p>
<tr class:”red”>
</tr>
二：常用CSS属性
1.1 背景颜色与背景图片
背景颜色：Background-color；
背景图片设置：background-image:url(“”)；
背景图片的重复：background-repeat
repeat; 水平垂直方向都重复 ；
repeat-x; 只有水平方向重复 ；
repeat-y; 只有垂直方向重复 ；
no-repeat; 无重复；
背景平铺：background-size: contain;
1.2文本文字的修饰(删除线、下划线、字符间距等)
上划线：h1 {text-decoration: overline}
删除线：h2 {text-decoration: line-through}
下划线：h3 {text-decoration: underline}
闪亮：h4 {text-decoration:blink}
无效果：.a {text-decoration: none}
行间距：
.p{
line-height:200%;
}
字符间距:.
p{
letter-spacing:2;
}
首行缩进： text-indent:50;
大小写：
uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写
空白格：
p.n {white-space:normal}
p.p {white-space:pre}
normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
nowrap 一直不换行，直到使用br
1.3 字体设置
字体大小：
font-size:30px;
p.big{
font-size:30px;
}
字体风格：
font-style:
normal 标准字体
alic 斜体
字体粗细：
属性 font-weight
normal 标准粗细
bold 粗一点
设置字库
font-family: 黑体
p.f4{
font-family:黑体;
}
声明在一起：font:italic bold 30px "Times New Roman";
顺序依次为：1.风格(normal italic) 2.粗细(normal bold) 3.尺寸 4.字库
1.4 鼠标样式
鼠标样式：cursor:crosshair;具体样式可百度，效果为鼠标移动至的样式效果。
1.5 表格样式
属性:table-layout
automatic; 单元格的大小由td的内容宽度决定
fixed; 单元格的大小由td上设置的宽度决定
1.6 边框、内外边距(border,padding,margin)
1.6.1 边框(border)
*. 样式属性：border-style
solid: 实线
dotted:点状
dashed:虚线
ouble:双线
.solid{
border-style:solid;
}
*. 颜色属性：border-color
值：red,#ff0000,rgb(255,0,0)
*. 宽度属性：border-width
值：数字
*. 一起使用
属性：border
值：颜色 风格 宽度
border:1px dotted LightSkyBlue;
*. 只有一个方向显示边框：
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
1.6.2 内外边框padding、margin
内边距：padding
外边距：margin
深刻理解这张图就会使用内外边距的使用了：
例如：一个宽500的DIV里有一个文字，想设置他距离左边100。应该这样：将原来的DIV宽度-100。然后padding-left：100.即可实现效果。
Padding: 指的是元素里的内容与边框之间的距离
Margin：指的是元素边框和元素边框之间的距离
1.7 超链接的样式
超链接状态有4种
link - 初始状态，从未被访问过
visited - 已访问过
hover - 停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
此属性也可以放在DIV等标签中使用，div:hover{background-color:red}鼠标放在div上背景颜色显示红色效果。
1.8 隐藏display与visibility
使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”
1.9 引用CSS文件与优先级
引用css文件：
<link rel="stylesheet" type="text/css" href="css/style.css">
优先级：
如果样式上增加了!important，则优先级最高，甚至高于style属性
color:green !important;
三. 布局 摆放位置与位置调换
3.1 绝对定位与相对定位随意调换DIV位置 position
①绝对定位：position: absolute;通过指定left,top绝对定位一个元素，参照物是上一个定位的元素（使用了position的），如果没有，则就是body了。
<p style="position: absolute; left:0px;top: 50px;z-index: 2;"> 1111111111<p/>
②如果绝对定位的父容器div，并没有定位。 所以它的”最近的一个定位了的父容器” 即body
③通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。
重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用
z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。
④绝对定位的位置是基于最近的一个定位了的父容器，会把原来应该在的坑删除，重新定位到设置的位置。
⑤相对位置：position: relative;相对于这个DIV本身应该在的位置做出移动。
⑥<div style="position: relative; left:50px;top: 50px;bottom:2px;">
与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离
3.2 浮动 float
①浮动：float:left、float:right;左浮动与右浮动
②右浮动：浮动后，原来的“坑”就让出来了。
并且是在原来的高度的基础上，向右浮动。跑到同一高度最右边
③左浮动：向左浮动后，会把“坑”让出来，这个时候下面的文字就会过来试图占这个坑，但是，发现 “浮动的文字”并没有走，结果，就只好排在它后面了
④DIV不换行：
<div style="float: left;"><pre>菜单一 </pre></div>
......
也可以通过设置成内联块实现不换行：display:inline
3.3 Display显示方式介绍：
display:none; 使得被选择的元素隐藏，并且不占用原来的位置
display:block; 表示设置为块级元素
块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效
Span是内联元素，设置span为display：block后，span也会自动换行，并且宽高会生效。
display:inline; 表示内联元素
内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定
可以将div设置成inline，之后div就不会换行，高宽也不会生效了。
内联-块级 inline-block
内联是不换行，但是不能指定大小
块级时能指定大小，但是会换行
有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到了。
将div设置成：display:inline-block.并设置高宽，这样既能在同一列，又能设置宽度了。
.
3.4 上下左右侧居中等乱七八糟篇
①居中：align:center or text-align:center
②一直贴在DIV的最下方：
外部div使用相对位置，内部div使用绝对位置，bottom为0；则贴在了外div的最下面。
截图好像发布不出来，尴尬....
大家前端设计的都比我美。哈哈