DIV教程之不成不知的css十年夜密技
你可能会说，好多英文看不懂，不过我告诉你，很抱歉那三个英文你必须记住，而且是最重要的三个，你可以把这么个盒子看成一个DIV，而所有标签都带有这三个属性。[*]
[*]
1.css字体简写划定规矩
当利用css界说字体时你大概会如许做：
font-size:1em;
line-height:1.5em;
font-weight:bold;
font-style:italic;
font-variant:small-caps;
font-family:verdana,serif;
现实上你能够简写这些属性：
font:1em/1.5embolditalicsmall-capsverdana,serif
如今很多多少了吧，不外有一点要注重：利用这一简写体例你最少要指定font-size和font-family属性，其他的属性（如font-weight,font-style,font-varient）如未指定将主动利用默许值。
2.同时利用两个class
一般我们只为属性指定一个class,但这其实不即是你只能指定一个，实践上，你想指定几就能够指定几，比方：
<pclass="textside">...</p>
经由过程同时利用两个class（利用空格而不是逗号支解）,这个段落将同时使用两个class中制订的划定规矩。假如二者中有任何划定规矩堆叠，那末后一个将取得实践的优先使用。
3.css中边框（border)的默许值
当编写一条边框的划定规矩时，你一般会指定色彩、宽度和款式（任何按次都可）。比方：border:3pxsolid#000（3像素宽的玄色实线边框），实在这个例子中独一必要指定的值只是款式。假设你指定款式为实线（solid),那末其他的值将利用默许值：默许的宽度为中等（相称于3到4像素）；默许的色彩为边框里的笔墨色彩。假如这恰是你想要的效果，你完整能够不在css里指定。
4.!important会被IE疏忽
在css中，一般最初指定的划定规矩会取得优先权。但是对除IE之外的扫瞄器来讲，任何前面标有!important的语句将取得相对的优先权，比方：
margin-top:3.5em!important;margin-top:2em
除IE之外一切扫瞄器中的顶部界限都是3.5em，而IE为2em，偶然候这一点很有效，特别在利用绝对界限值时（就像这个例子），能够显现出IE与其他扫瞄器的渺小不同。
（良多人大概还注重到了css的子选择器也是会被IE疏忽的）
5.图片交换的技能
利用尺度的html而不是图片来显现笔墨一般更加明智，除加速下载还能够取得更好的可用性。可是假如你决计利用会见者的呆板中大概没有的字体时，你只能选择图片。
举例来讲，你想在每页的顶部利用“Buywidgets”的题目，但你同时又但愿这是能被搜刮引擎发明的，为了美妙你利用了少见的字体那末你就得用图片来显现了：
<h1><imgsrc="/uploadfile/200806/17/96162027360.gif"alt="Buywidgets"/></h1>
如许固然没错，可是有证据显现搜刮引擎对实在文本的器重远凌驾alt文本（由于已有太多网站利用alt文本充任关头字），因而，我们得用另外一种办法：<h1><span>Buywidgets</span></h1>，那你的大度字体怎样办呢？上面的css能够帮上忙：
h1
{
background:url(/uploadfile/200806/17/96162027360.gif)no-repeat;
}
h1span
{
position:absolute;
left:-2000px;
}
如今你既用上了大度的图片又很好的埋没了实在文本——借助css，文本被定位于屏幕左边-2000像素处。
6.css盒模子hack的另外一选择
css盒模子hack被用来办理IE6之前的扫瞄器显现成绩，IE6.0之前的版本会把某元素的边框值和添补值包括在宽度以内（而不是加在宽度值上）。比方，你大概会利用以下css来指定某个容器的尺寸：
#box
{
width:100px;
border:5px;
padding:20px;
}
然后在html中使用：<divid="box">...</div>
盒的总宽度在几近一切扫瞄器中为150像素（100像素宽度+两条5像素的边框+两个20像素的添补），惟独在IE6之前版本的扫瞄器中仍旧为100像素（边框值和添补值包括在宽度值中），盒模子的hack恰是为懂得决这一成绩，可是也会带来贫苦。更复杂的举措以下：
css:
#box
{
width:150px;
}
#boxdiv{
border:5px;
padding:20px;
}
html:
<divid="box"><div>...</div></div>
如许一来在任何扫瞄器中盒的总宽度都将是150像素。
7.将块元素居中
假定你的网站利用了流动宽度的结构，一切的内容置于屏幕中心，可使用以下的css：
#content
{
width:700px;
margin:0auto;
}
你能够把html的body以内任何项目置于<divid="content"></div>中，该项目将主动取得相称的摆布界限值从而包管了居中显现。不外，这在IE6之前版本的扫瞄器中仍旧有成绩，将不会居中，因而必需修正以下：
body
{
text-align:center;
}
#content
{
text-align:left;
width:700px;
margin:0auto;
}
对body的设定将招致主体内容居中，可是连一切的笔墨也居中了，这生怕不是你想要的效果，为此#content的div还要指定一个值：text-align:left
8.利用css完成垂直居中
垂直居中对表格来讲是小菜一碟，只需指订单元格为vertical-align:middle便可，但这在css结构中不论用。假定你将一个导航菜单的高度设为2em，然后在css中指定垂直对齐的划定规矩，笔墨仍是会被排到盒的顶部，基本没有甚么区分。
要办理这一成绩，只需将盒的行高设为与盒的高度不异便可，以这个例子来讲，盒高2em,那末只需在css中再到场一条：line-height:2em便可完成垂直居中了！
9.容器内的css定位
css的最年夜长处之一就是能够将工具定位在文档的任何地位，一样的也能够将工具在某容器内举行定位。只必要为该容器增加一条css划定规矩：
#container
{
position:relative;
}
则容器内的任何元素的定位都是相对该容器的。假定你利用以下html布局：
<divid="container"><divid="navigation">...</div></div>
假如想将navigation定位在容器内离右边界30像素，离顶部5像素，可使用以下css语句：
#navigation
{
position:absolute;
left:30px;
top:5px;
}
10.延长至屏幕底部的背景致
css的弱点之一是缺少垂直偏向的把持，从而招致了一个表格结构不会碰到的成绩。假定你在页面的左边设定了一列用于安排网站的导航。页面为红色背景，但你但愿导航地点的列为蓝色背景，利用以下css便可：
#navigation
{
background:blue;
width:150px;
}
成绩在于导航项不会一向延长到页面的底部，天然它的背景致也不会延长究竟部。因而左列的蓝色背景在页面上被半路截断，华侈了你的一番计划。怎样办呢？很不幸我们如今只能用棍骗的举措，行将body的背景指定为与左列同色彩同宽度的图片，css以下：
body
{
background:url(blue-image.gif)00repeat-y;
}
背景图应为宽150像素的蓝色图片。这一举措的弱点是没法利用em来指定左列的宽度，当用户改动笔墨的巨细招致内容的宽度扩大时，背景致的宽度不会随之改动。
到写这篇文章为止这是对这类成绩的独一办理举措，因而你只能为左列利用像素值来取得可以主动延长的分歧的背景致。
其实DIV+CSS是很简单的一种布局方式，甚至比任何一种编程语言都要简单(虽然它不能算是编程语言)。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
页:
[1]