css 3小时从入门到略通
①css基础
样式表：
内联式样式表 #使用标签的style属性（行内样式）
嵌入式样式表 #（植入样式）
外联样式表#（链接样式）
输入样式表 #使用@import url(style/test.css)
选择器：
html选择器
class 选择器
id 选择器
关联选择器（td.classA）#<td class="classA">
组合选择器（空格隔开）
伪元素选择器：（一个标签的不同状态）
a:link
a:hover
a:visited
布局：
属性：
margin (外边距)
margin-left,margin-right,margin-top,margin-bottom
padding (内边距)
padding-left,padding-right,padding-top,padding-bottom
float (区域漂浮对齐) :right,left,none
clear (清除指定的浮动空间)
none | left | right | both
clear:left;#不允许元素的左边有漂浮元素
示例：
body{
margin:0px;
text-align:center;
background:#ffffcc
}
//清除与浏览器的边距，文本居中，网页背景色设置
#container{
width:800px;
height:1000px;
background:yellow;
margin:auto 0px;
}
//网页主题部分居中，定宽，设置主题背景
#header{
float:left;
width:800px;
height:100px;
margin:auto 0px;
background:red;
clear:both;
}
//头部在container中，为整个网页的头部，左右无其他元素
#logo{
float:left;
width:25px;
height:90px;
background:green;
clear:right;
margin:0px;
}
//logo在header的内部，居左
#banner{
float:right;
width:530px;
height:90px;
marigin:0px;
clear:left;
background:blue;
}
//banner在header中，居右
#menu{
width:800px;
height:35px;
margin:auto 0px;
clear:both;
background:#ff00ff;
}
//menu在container中，横式
.nav{
margin:auto 0px;
width:800px;
height:10px;
float:left;
clear:both;
background:#ffffff;
line-height:10px;
}
//空格条位于container中
#footer{
width:800px;
height:100px;
background:red;
margin:auto 0px;
}
//footer位于网页底部，在container中
#menu ul{
float:left;
list-style:none;
margin:0px;
}
#menu il li{
float:left;
display:block;
line-height:35px;
margin :0px 10px;
}
.menuDiv{
width:1px;
heigt:35px;
background:green;
}
//菜单栏中的竖线分隔符
#menu ul li a:link,#menu ul a:visited{
font-weight:bold;
color:blue;
}
#menu ul li a:hover{
font-weight:800;
color:red;
}
//菜单栏中的链接
样式表的执行顺序：
Inline styles （行内样式）
Embedded styles （植入样式）
Linked styles （链接样式）
Imported styles （输入样式）
Default browser styles（缺省浏览器样式）
浏览器将按照上述顺序执行样式表的指令。
②css文字处理
font-size单位：
point:pt
ems:em
pixels:px
other:cm mm in pc ex
font-size的关键字类型：
xx-small
x-small
small
medium
large
x-large
xx-large
font-size比例尺寸：
300%
font-style:设置斜体
italic(oblique) normal
font-weight:字重
blod
text-transform:字体变形
uppercase 使所有字母大写显示，
lowercase使所有字母小写显示，
capitalize 使每个单词的第1个字母大写显示
none 使所有继承的文字变形参数被忽略，文字将以正常形式显示。
text-decoration:文字修饰
underline 给文字下划线
overline给文字上划线.
line-through给文字划出删除线
blink是你在恶梦中常常看到的－－文字在闪烁
none使得上述效果都不会发生。
font:一次性定义字体属性
③文字定位/段落排版
word-spacing:字间距
单位：
in （英寸）
cm （厘米）
mm （毫米）
pt （点数）
pc （打字机字间距）
em （ems）
ex (x-height)
px （象素）
letter-spacing:字母间距
line-height:设置行距
方法：
数字 （字号乘以数值pt）
长度单位
比例
text-align:段落水平对齐
left
right
center
justify:左右对齐
vertical-align:垂直对齐方式
top将要素顶部同最高的母体要素对齐。
bottom将要素的底部同最低的母体要素对齐。
text-top将要素的顶部同母体要素文字的顶部对齐。
text-bottom将要素的底部同母体要素文字的底部对齐。
baseline将要素的基准线同母体要素的基准线对齐。
middle将要素的中点同母体要素的中点对齐。
sub将要素以下标的形式显示。
super将要素以 上标的形式显示。
text-indent:首行缩进
每一个整块的素或替代要素都包含在样式表生成器称为box的容器之内，box包括：
要素本身
围绕要素的空格填充（padding）
围绕空格填充的边框（border）
围绕边框的边距（空白－margin）
顶边距、底边距、左边距和右边距
这4项属性可以使你控制一个要素的四周的边距。如下：
H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }
顶空格填充，底空格填充，左空格填充和右空格填充
空格填充的作用类似于边距控制，你可以设定一个要素的前后左右的空格填充的尺寸。
H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px }
顶边框宽度，底边框宽度，左边框宽度和右边框宽度
可以控制整个边框的宽度，也可以分别控制每一边的边框宽度：
H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px }
IMG { border-width: 1in }
参数可以使用关键词：
thin
medium
thick
边框颜色
P { border-color: green; border-width: 3px }
border-style:边框样式
solid
double
dotted
dashed
groove
ridge
inset
outset
float：浮动，设置周围文字的围绕方式
clear：清除，清除周围文字的围绕方式
④颜色背景
color:颜色
颜色名称:red
16进制色彩控制:#00ff00
rgb值: rgb(255,255,255)
background-color:背景色
background-image：背景图像
url(source_path)
/*设置背景图像时最好设置一种背景色，下载图像时可以先显示背景色*/
background-repeat:背景重复，控制背景平铺
no-repeat
repeat-x
repeat-y
repeat
background－attachment:固定背景，不随页面滚动
fixed
background-position:背景定位
关键词参数：
top将背景图象同前景要素的顶部对齐。
bottom将其同前景要素的底部对齐。
left将其同左边对齐。
right将其同右边对齐。
center将其水平居中（如果使用在另一关键字前面）或垂直居中（如果用在另一关键字后面）。
长度参数，可设置水平和垂直：
P { background-position: 70px 10px; background-repeat: repeat-y; background-image: url(background.gif) }
比例值：
P { background-position: 75% 50%; background-image: url (background.gif) }
background:可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位
P { background: url(background.gif) #CCFFCC repeat-y top right }
⑤定位和叠放
绝对定位
左边和顶部：
H4 { position: absolute; left: 100px; top: 43px }
/*设置元素相对于浏览器左侧和顶部的距离*/
相对定位
P { position: relative; left: 40px; top: 10px }
/*指定了元素的位置相对于在文件中所分配的位置*/
position还有一个static值，同HTML的位置定位，不能设定特定的值
width:宽度
height:高度
visibility:可视性
visible使要素可以被看见
hidden使要素被隐藏
inherit指它将继承母体要素的可视性设置
/*当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围在一幅被隐藏的图象周围，那么，其显示效果将是文字包围着一块空白区域*/
z-index:设置元素出现的层次，叠放文字和图像
参数：纯整数，数值越大出现在越上层
