兼容解决方案:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
CSS:
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0
;}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:white;}
a:visited{color:white;}
a:hover,a:active,a:focus{color:white;}
透明:
#s{width:100%;height:100%;filter:alpha(opacity=50);
opacity: 0.5; -moz-opacity:0.5;
background-color:#cccccc; position:absolute;z-index:1000;display:none}
ex:1000;display:n
一、CSS、DIV 基本知识
1、6 种定义 CSS 样式表
选择符{样式属性:取值, 取值;样式属性:取值;...}
选择符的选择:
1)类选择符:.red{color:red} .black{color:black} 使用:<p>
2)ID 选择符:#exam{color:blue} 使用:<p id="exam">
3)HTML 标记选择符:body{color:black}
4)包含选择符:table a{font-size:12px} 只对在表格内的链接文字有效
5)组合选择符:p,table{font-size=9pt}
6)伪类及伪对象选择符:
a:link {color: #FF0000; text-decoration: none}
/* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none}
/* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
2、4 种添加 CSS 的方法
(1)链入外部样式表:把样式表单独保存为一个文件,然后在页面中使用<link>标记链接,
而这个<link>标记必须放到页面的<head>区域内。
语法:<link rel="stylesheet" type="text/css" href="样式表文件地址" />
其中:
rel="stylesheet" 是指在页面中使用的是外部样式表;
type="text/css" 是指文件的类
型是样式表文本。
(2)内部样式表:把样式表的内容直接放到页面的<head>中,通过<style>标记插入。
语法:<style type="text/css">
选择符{样式属性:取值;样式属性:取值;...}
</style>
(3)导入外部样式表:在内部样式表的<style>中引用一个外部的样式表文件,导入时必须
放在行首,没有;
语法:<style type="text/css">
@import url(样式表地址)
选择符{样式属性:取值;样式属性:取值;...}
</style>
(4)内嵌样式表:混合在 HTML 标记里使用的
语法:<标记 style="样式属性:取值;...">
3、优先级
(1)ID 选择符 > 类选择符 > HTML 标记选择符
(2)内嵌样式表 > 内部样式表 > 导入外部样式表
链入外部样式表和内部样式表根据定义的先后顺序来评定。
4、CSS 书写规则
(1)如果属性的值是多个单词组成,则必须使用双引号“”括起来。
(2)如果某个属性值有多个选项,用逗号,隔开。
(3)如果对一个选择符指定多个属性,则要使用分号;隔开。
(4)CSS 样式表中的注释语句: /* */
5、无意义标签
(1)div(层)
:要独自占一行,浮动以后可以与别的元素同行。
(2)span:纯无意义。
6、使用 CSS+DIV 的好处
(1)HTML 的体现和内容分离
(2)代码简洁,提高页面浏览速度
(3)提高搜索引擎对网页的索引效率
(4)容易维护和改版
二、CSS 字体(font)属性及颜色(color)属性
1、设置字体:font-family:字体 1, 字体 2...
2、设置字号:font-size:12pt
pt(点)比 px(像素)大很多
3、设置斜体:font-style:italic
4、设置粗体:font-weight:"bold" 可以输入数值(100-900)
,bold 相当于 700
5、设置小型大写字母:font-variant:small-caps
6、字体复合属性:font:"italic small-caps bold 12pt 宋体" 需要按照固定顺序
7、颜色属性设置:color:颜色取值
三、CSS 文本(text)属性
1、下划线:text-decoration:underline
2、单词间隔:word-spacing:数值
3、字符间隔:letter-spacing:数值
4、设置行高:line-height:数值
其中,1、2、3、4 应属于字体(font)
5、文本对齐:text-align:left 或 center 或 right 或 justify(两端对齐)
是对设置样式的标签的子内容起作用。
6、文本缩进:text-indent:数值或百分比
四、CSS 背景(background)属性
(1)背景颜色:background-color:颜色取值
(2)背景图像:background-image:url(1.jpg) 应同时定义一个与背景图像色系相似的背
景色,背景图像与背景色同时设置时,默认优先显示背景图像
(3)背景重复:background-repeat:no-repea" 或 repeat-x 或 repeat-y 或 no-repeat
(4)背景固定:background-attachment:fixed 或 scroll
(5)背景位置:background-position:"50% 50%"
:"left top"
left,center,right | top,center,botto
(6)背景复合属性:background:"url(1.jpg) no-repeat left center"
五、CSS 边框(border)属性
每一大类都包含 4 个属性:
border-top-width、border-bottom-width、border-left-width、border-right-width
border-top-color、border-bottom-color、border-left-color、border-right-color
border-top-style、border-bottom-style、border-left-style、border-right-style
如果某个边统一设置,则有:
border-top、border-bottom、border-left、border-right
如果四个边统一设置某个属性:border-width、border-color、border-style
如果四个边统一设置则有:border(width style color)
1、 边框样式 border-top/borrom/left/right-style:样式值
样式值选项:
(1)none
不显示边框(默认)
(2)dotted 点
(3)dashed 虚线
(4)solid
实线
(5)double 双实线
(6)inset
内陷
(7)outset
外突
(8)groove
边框带有立体感的沟槽
(9)ridge
边框成脊形
2、边框宽度 borderh-top/borrom/left/right-width:宽度
宽度可以是数字也可以是内置选项:thin(小于默认)
,medium(默认)
,thick(大于默
认值)
3、 边框颜色 borde -top/borrom/left/rightr-color:颜色值
注意: (1)使用 border-color/style/width 统一设置四个边的时候:如果指定 1 个值,则四
边都是这个值;如果指定 2 个值,则定义顺序为上下、左右;指定 3 个值,则上、左右、下;
指定 4 个值,则上、右、下、左。
六、CSS 鼠标(cursor)属性
语法:cursor:形状取值 | url(1.jpg)
七、定位属性
1、定位方式::position:absolute(绝对定位) | relative(相对定位)
绝对定位,即区块左上顶点距离上级左上顶点的距离。需要同时使用 left、right、top、
bottom 等属性进行绝对定位。
相对定位,即区块相对于自己现在的位置。对象不可层叠。
2、 位置元素:top | left:长度值 | 百分比
定义对象与它最近的一个父对象顶部、左侧的相对位置。
3、z-index:数字
决定层的覆盖关系,值高的层会覆盖值比较低的层。
4、 设定大小:width | height:长度
分别用于设置层的高度或宽度。一般来说只设置宽度或高度中的一个值,另外一个值则
根据内容自动确定。
5、 显示属性:display:block | inline | none
Block 是以块状显示,在元素后面添加换行符。Inline 值则内联显示,在元素后面删除换
行符,多个元素可以在一行内并列显示。None 关闭指定元素及子元素的显示。
6、 可见属性:visibility:inherit | visible | hidden
这个属性是针对嵌套层的设置,设置在子层里。inherit 时设置子层继承父层可见性。
Visible,永远可见。Hidden 永远隐藏。
7、 层超出范围内容可见性:overflow:visible | hidden | scroll
text-overflow:ellipsis | clip
Visible 可见、hidden 不可见、scroll 为层添加滚动条。
Clip:不显示省略标记(...)
,而是简单的裁切
Ellipsis:当对象文本溢出时显示省略标记(...)
此属性是定义自己的。
八、区块属性
盒子模型:每个 HTML 元素都是一个盒子。
margin
border
padding
content
padding
border
margin
1、边距:
语法:margin-top:数值 | 百分比(相对于上级元素宽度的百分比)
(1) 分别设置 4 个边:margin-top、margin-right、margin-bottom、margin-left
(2) 复合 margin:如果只设一个值,则代表 4 个边;如果设置 4 个值,顺序是上、右、
下、左。
2、 填充:
语法:padding-top: 数值 | 百分比(相对于上级元素宽度的百分比)
(1) 分别设置 4 个边:padding-top、padding-right、padding-bottom、padding-left
(2) 复合 padding:规则同 margin。
3、设置区块漂浮属性
语法:float:left | right
由于浮动框不在文档的普通流中(被漂浮的区块显示级别高)
,所以文档的普通流中的
区块框表现得就像浮动框不存在一样。
3、 清除属性
语法:clear:left | right | both
设置为 left(right)时,区块左侧(右侧)不允许有浮动;both 两边都不允许有
九、列表(list-style)符号
1、 列表符号:
list-style-type:”号值
2、 图像符号:
list-style-image:url(1.jpg)
3、 列表缩进:
list-style-position:outside 或 inside
4、 复合属性:
list-style:值
十、不同浏览器间区别
1、内容居中设置:
IE:在父区块中设置:text-align:center;
FF:在子区块中设置 margin-left:auto 和 margin-right:auto
2、IE 指定的最小高度是 18px(无最小宽度)
,如一个<div>高度在 10px 左右,在火狐中显
示正常,但在 IE 中显示高 18px。解决方法是在样式中加入:overflow:hidden
3、如果设定高后,内容超出范围,IE 可以自动调整高度,火狐不可以,指定多高就是多高。
如果不指定,则都可以自动调整高度。
4、火狐中的列表项,自动添加外边距和内边距,所以在使用列表时要写下面语句:
Margin:0px;
Padding:0px;
List-style-type:none;
5、 IE 块区域显示的宽度是加边框的,火狐是不加边框的。
6、!importantIE 不识别但火狐识别。但要将这个语句写到上面,如:
Width:946px !important;
Width:950px;
7、FF 浮动正常,IE 中区块浮动后仍然在文档流占据空间
十一、技巧:
1、让文字居中,将显示字行的高度和行高设置成一样即可。