css = 层叠样式表
html表达结构，css表达样式
样式和结构/内容是分离的
1. css 一般有3中书写形式
a. 通过style
<style>
p{style="background-color:red;"}
</style>
b. 通过标签<p style="background-color:red;"></p>
c. 通过单独的css文件链接给html文件
2. 背景样式
style="background-color:red;"
*transparent透明，默认的颜色
*可以使用rgb颜色
a. #FF00FF
b. rgb(255,255,0) or rgba(255,255,0,a) a是阿尔法通道，为0-1之间的浮点数，控制透明度透明度
style="
background-image:url(imagePath); 背景图片
background-repeat:no-repeat; 是否重复(repeat-x在x方向重复)
background-position:conter; 位置（top，left，right，buttom，top right）
background-attachment: scroll/fixed 是否滚动
"
3. 文本样式
style="
color:red; 字符的颜色
text-indent:2em; 首字符缩进 em为当前字体的倍数 也可以用10% 页面的百分比 还有cm、in英寸、mm、px像素等等
padding:2em; 悬挂缩进
line-height:2; 行间距 normal为默认
text-align:left/right; 靠左或靠右对齐 还有 center中间对齐、justify两端对齐
word-spacing:10px; 对于英文有效的空格间距
letter-spacing:10px; 字符之间的间距
text-transform:uppercase/lowercase; 将所有的英文字符转换成大写/小写 capitalize 首字母大写
text-decoration: underline overline line-through; 下划线与上划线中划线
white-space:normal/pre/pre-wrap/no-wrap/pre-line; 默认为normal，不管多少空格只算一个 pre是有多少空格都承认，而且不自动换行卷绕，pre-wrap为承认空格自动卷绕,nowrap是回车也不认。pre-line合并空白保留换行
direction:rtl; 书写方式变成从右到左 支持少数文字，例如阿拉伯文等。
"
4. 字体样式
style="
font-family:serif; serif矢量字体，大部分的英文字体，sans-serif比较平直的字体, monospace 等宽字体 cursive类似于手写的字体 fantasy无法归类的字体。 这些是五个大家族的系列，并不是对于某种字体，例如 hei 为黑体
*可以一次给予多种字体，会按照顺序查询，如果没有就是用第二种，类推，都没有的话会用浏览器默认的字体
font-style:italic/obique 字体倾斜 不同浏览器支持的字体倾斜
font-variant:amall-caps 小的大写字母
font-weight:bold/900 加粗/或者用数值来代替
font-size:1px/1em 最好是用em·不是所有的浏览器都支持绝对值
text-shadow:3px 5px 5px rgba(0,255,0,0.5) 文字的阴影 4个参数 为 x方向 y方向 范围 颜色
例如 style = "text-shadow:0px -1px 0px #000000,0px 1px 3px #606060;color:#606060"
outline-color:red;边框颜色
outline-style:solid/dotted/dashed/double/groove/ridge/inset/outset; 边框线的样式
outline-thin/10 边框粗细
"
4. 列表和表格样式
列表<ul> <li>
<ul style="list-style-type:disc/circle/square">
<li></li>
</ul>
<ul style="list-style-image:url(path)">
<li></li>
</ul>
<ul style="list-style-position:inside/outside">
<li></li>
</ul>
表格<table> <th> <td>
<table style="border:1px solid blue;
border-collapse:collapse/seperate;
caption-side:bottom;
table-layout:automatic/fixed;
">
</table>
<th style="border:1px solid blue;
50px;
height:100px;
vertical-align:top;
text-align:right;
padding:10px;
">
</th>
5. 定位
定位机制一般有3中方式 普通流 浮动流 绝对定位 ,如果不指定的话，都是普通流
<div></div>块状元素
相对定位
重新定位，是不会理会原本的margin。
<p style="position: relative; left: -20px; bottom: -20px"></p>
绝对定位
如果上级div做了定位，那么就会根据上级的定位来计算，如果没有，则根据浏览器的位置来做定位
<p style="position: absolute; left: -20px; bottom: -20px"></p>
浮动地位
<img src="xxx.jpb" width=200 style="float:right/left"></img>
6. 样式选择器
<style>
元素选择器
th,td,p {border: 1px solid blue}
p {background-color:red} 可以同时使用2个样式设置
类选择器 给元素取一个类名 <p class = “important warning” ></p> 既属于important也属于warning类
*.important {color:red}
id选择器 <p id = “important warning”></p>
*#important {color:red}
属性选择器
*[title] {color:red} 有title属性的就应用样式
后代选择器
p em {border: 1px solid blue} p em之间使用空格
p > em {border: 1px solid blue} p em 之间必须是紧挨着的那层才能使用
h1 + p {} 相邻
尾类
a:visited{}
a:link{}
...
</style>