[size=medium]
[b]1.一个标准的HTML文件框架:[/b]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<link rel='stylesheet' type='text/css' href='media/css/blueprint/screen.css'/>
<script type="text/javascript" src="media/js/basic.js"></script>
<script type="text/javascript">
//内嵌式javascript,一般用于测试
</script>
<style type="text/css">
//内嵌式CSS定义, 一般用于测试
</style>
</head>
<body>
</body>
</html>
[b]2.CSS样式的两个元素:[/b]
(1).选择器:确定页面哪些元素需要样式设置.
(2).声明块:实际的格式化命令
标准的一个CSS样式: selector{ declaration block }
[b]3.CSS选择器[/b]
(1).标签选择器,如： p, h1, span ...
(2).类选择器(以'.'号打头), 如: .last, .top ...
(3).ID选择器(以'#'号打头), 如: #last, #footer
(4).派生选择器: h1 strong{color:red;}, li a{} p.intro a{color:red;}
(5).群选择器(用','分隔各个选择器): h1, p, .copy, #banner{color:red;}
(6).a的两个主要伪类: a:visited, a:hover
[b]4.样式的层叠[/b]
如果多个样式应用到同一个页面元素, 定义重叠了,也就是冲突了, 需要决定哪个定义是有效的: 行内样式 > ID选择器 > 类选择器 > 标签选择器
[b]5.Margin, Padding and Border[/b]
1).理解盒模型: 浏览器把所有的html标签元素都当成一个小盒子
2).盒模型图片:
[img]http://linvar.iteye.com/upload/picture/pic/63324/c78aed6e-acc2-3588-b518-590d7ceb33e9.jpg[/img]
3).边距碰撞:
当元素的下边距碰到了另一个元素的上边距时, 浏览器并不是把两个边距相加,而是应用两个边距中较大的那个.
4).负边距去除空格:
css的度量值一般为正值, 但是负边距可能会让你产生许多想象力.
负边距不会在元素之间增加空间, 而是移除空间
5).行内元素和块级元素
行内元素: 如: span, a, img, strong ...
块级元素, 如: p, table, form, h1, div ...
行内元素的top/bottom margin 无法增加值, img除外, 但是padding经测试是可以增加的.
在行内元素和块级元素之间转换:
display: inline; / display:block;
display: none; //隐藏元素
6).计算一个方框的实际宽度和高度
浏览器显示的宽度 ＝ 宽度属性(width) + 左右填充 + 左右边框 + 左右边距
高度类似
7).用Overflow属性控制溢出文本,
如果标签里的内容比样式定义的宽度和高度更大时, IE6会使方框扩大到适合的高度,
但是IE7和其他浏览器则让内容溢出方框,可以使用overflow来控制
visible是默认做法
scroll添加滚动条,但是滚动条一直会出现
auto只在需要时添加滚动条
hidden隐藏任何超出方框的内容
[b]6.表格的边框[/b]
给table应用border属性,只是给表格而不是任何其他单元格画上轮廓.
给单元格td应用border, 在单元格之间会留下一条可视的间隙,这需要做一些工作
<table cellspacing="10px">表示在单元格之间插入10px空间
cellspacing=0时就完全去除这个空间,这时应该使用
table { border-collapse: collapse}
[b]7.关于布局[/b]
CSS布局有两种风格－－绝对定位和浮动
浮动布局主要是使用float属性
克服浮动问题:
1).清除浮动: clear:both;
2).如果一个浮动元素比容器本身更高的话,就会溢出它的包含<div>
解决方法:
a.在包含div的底部添加一个清除元素
在关闭</div>前面<br class="clear" />
br.clear{clear:both}
b.只浮动也包含浮动元素的<div> //不理解
3).处理IE6 bug
a.双边距: 有时会把已经应用到浮动元素上的一个边距尺寸翻倍. 只有当边距与浮动在同一个方向时才会出现这个问题--向左浮动的元素上的一个左边或者向右浮动的元素上的一个右边距. 而且边距翻倍只有当元素的边距碰到它包含块的边沿时才会发生.
解决方法是给浮动元素添加display:inline;(浮动元素始终是块级元素)
b.3px的间隙: IE6在一个浮动的列和一个非浮动的列之间插入一个额外的3px的空间.
如果非浮动的列没有固定宽度或高度, 给这个列加上
* html #mainColumn {height:1px;}
如果非浮动的列有一个固定的宽度或高度
首先消除非浮动的列的左边距
* html #mainColumn {margin-left:0;}
然后設定浮动列的右边距为－3px
* html #sidebar {margin-right: -3px;}
[/size]
[b]1.一个标准的HTML文件框架:[/b]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<link rel='stylesheet' type='text/css' href='media/css/blueprint/screen.css'/>
<script type="text/javascript" src="media/js/basic.js"></script>
<script type="text/javascript">
//内嵌式javascript,一般用于测试
</script>
<style type="text/css">
//内嵌式CSS定义, 一般用于测试
</style>
</head>
<body>
</body>
</html>
[b]2.CSS样式的两个元素:[/b]
(1).选择器:确定页面哪些元素需要样式设置.
(2).声明块:实际的格式化命令
标准的一个CSS样式: selector{ declaration block }
[b]3.CSS选择器[/b]
(1).标签选择器,如： p, h1, span ...
(2).类选择器(以'.'号打头), 如: .last, .top ...
(3).ID选择器(以'#'号打头), 如: #last, #footer
(4).派生选择器: h1 strong{color:red;}, li a{} p.intro a{color:red;}
(5).群选择器(用','分隔各个选择器): h1, p, .copy, #banner{color:red;}
(6).a的两个主要伪类: a:visited, a:hover
[b]4.样式的层叠[/b]
如果多个样式应用到同一个页面元素, 定义重叠了,也就是冲突了, 需要决定哪个定义是有效的: 行内样式 > ID选择器 > 类选择器 > 标签选择器
[b]5.Margin, Padding and Border[/b]
1).理解盒模型: 浏览器把所有的html标签元素都当成一个小盒子
2).盒模型图片:
[img]http://linvar.iteye.com/upload/picture/pic/63324/c78aed6e-acc2-3588-b518-590d7ceb33e9.jpg[/img]
3).边距碰撞:
当元素的下边距碰到了另一个元素的上边距时, 浏览器并不是把两个边距相加,而是应用两个边距中较大的那个.
4).负边距去除空格:
css的度量值一般为正值, 但是负边距可能会让你产生许多想象力.
负边距不会在元素之间增加空间, 而是移除空间
5).行内元素和块级元素
行内元素: 如: span, a, img, strong ...
块级元素, 如: p, table, form, h1, div ...
行内元素的top/bottom margin 无法增加值, img除外, 但是padding经测试是可以增加的.
在行内元素和块级元素之间转换:
display: inline; / display:block;
display: none; //隐藏元素
6).计算一个方框的实际宽度和高度
浏览器显示的宽度 ＝ 宽度属性(width) + 左右填充 + 左右边框 + 左右边距
高度类似
7).用Overflow属性控制溢出文本,
如果标签里的内容比样式定义的宽度和高度更大时, IE6会使方框扩大到适合的高度,
但是IE7和其他浏览器则让内容溢出方框,可以使用overflow来控制
visible是默认做法
scroll添加滚动条,但是滚动条一直会出现
auto只在需要时添加滚动条
hidden隐藏任何超出方框的内容
[b]6.表格的边框[/b]
给table应用border属性,只是给表格而不是任何其他单元格画上轮廓.
给单元格td应用border, 在单元格之间会留下一条可视的间隙,这需要做一些工作
<table cellspacing="10px">表示在单元格之间插入10px空间
cellspacing=0时就完全去除这个空间,这时应该使用
table { border-collapse: collapse}
[b]7.关于布局[/b]
CSS布局有两种风格－－绝对定位和浮动
浮动布局主要是使用float属性
克服浮动问题:
1).清除浮动: clear:both;
2).如果一个浮动元素比容器本身更高的话,就会溢出它的包含<div>
解决方法:
a.在包含div的底部添加一个清除元素
在关闭</div>前面<br class="clear" />
br.clear{clear:both}
b.只浮动也包含浮动元素的<div> //不理解
3).处理IE6 bug
a.双边距: 有时会把已经应用到浮动元素上的一个边距尺寸翻倍. 只有当边距与浮动在同一个方向时才会出现这个问题--向左浮动的元素上的一个左边或者向右浮动的元素上的一个右边距. 而且边距翻倍只有当元素的边距碰到它包含块的边沿时才会发生.
解决方法是给浮动元素添加display:inline;(浮动元素始终是块级元素)
b.3px的间隙: IE6在一个浮动的列和一个非浮动的列之间插入一个额外的3px的空间.
如果非浮动的列没有固定宽度或高度, 给这个列加上
* html #mainColumn {height:1px;}
如果非浮动的列有一个固定的宽度或高度
首先消除非浮动的列的左边距
* html #mainColumn {margin-left:0;}
然后設定浮动列的右边距为－3px
* html #sidebar {margin-right: -3px;}
[/size]
扫一扫
3699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
