①css基础 样式表： 内联式样式表 #使用标签的style属性（行内样式） 嵌入式样式表 #（植入样式） 外联样式表#（链接样式） 输入样式表 #使用@import url(style/test.css) 选择器： html选择器 class 选择器 id 选择器 关联选择器（td.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-p_w_picpath：背景图像 url(source_path) /*设置背景图像时最好设置一种背景色，下载图像时可以先显示背景色*/ background-repeat:背景重复，控制背景平铺 no-repeat repeat-x repeat-y repeat background－p_w_upload:固定背景，不随页面滚动 fixed background-position:背景定位 关键词参数： top将背景图象同前景要素的顶部对齐。 bottom将其同前景要素的底部对齐。 left将其同左边对齐。 right将其同右边对齐。 center将其水平居中（如果使用在另一关键字前面）或垂直居中（如果用在另一关键字后面）。 长度参数，可设置水平和垂直： P { background-position: 70px 10px; background-repeat: repeat-y; background-p_w_picpath: url(background.gif) } 比例值： P { background-position: 75% 50%; background-p_w_picpath: 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:设置元素出现的层次，叠放文字和图像 参数：纯整数，数值越大出现在越上层