给大家带来CSS需注重的一点技能
在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？1.CSS字体属性简写划定规矩
一样平常用CSS设定字体属性是如许做的：
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif
但也能够把它们全体写到一行上往：
font:bolditalicsmall-caps1em/1.5emverdana,sans-serif
真不错！只要一点要提示的：这类简写办法只要在同时指定font-size和font-family属性时才起感化。并且，假如你没有设定font-weight,font-style,和font-varient，他们会利用缺省值，这点要记上。
2.同时利用两个类
一样平常只能给一个元素设定一个类（Class），但这其实不意味着不克不及用两个。现实上，你能够如许：
<pclass="textside">...</p>
同时给P元素两个类，两头用空格格开，如许一切text和side两个类的属性城市加到P元素下去。假如它们两个类中的属性有抵触的话，后设置的起感化，即在CSS文件中放在前面的类的属性起感化。
3.CSSborder的缺省值
一般能够设定界限的色彩，宽度微风格，如：
border:3pxsolid#000
这位把界限显现成3像素宽，玄色，实线。但实践上这里只必要指定作风便可。
假如只指定了作风，其他属性就会利用缺省值。一样平常地，Border的宽度缺省是medium，一样平常即是3到4个像素；缺省的色彩是个中笔墨的色彩。假如这个值恰好符合的话，就不必设那末多了。
4.CSS用于文档打印
很多网站上都有一个针对打印的版本，但实践上这其实不必要，由于能够用CSS来设定打印作风。
也就是说，能够为页面指定两个CSS文件，一个用于屏幕显现，一个用于打印：
<linktype="text/css"rel="stylesheet"href="stylesheet.css"media="screen"/>
<linktype="text/css"rel="stylesheet"href="printstyle.css"media="print"/>
第1行就是显现，第2行是打印，注重个中的media属性。
但应当在打印CSS中写甚么器材呢？你能够按计划一般CSS的办法来设定它。计划的同时就能够把这个CSS设成显现CSS来反省它的效果。大概你会利用display:none这个命令来关失落一些粉饰图片，再关失落一些导航按钮。要想懂得更多，能够看“打印差别”这一篇。
5.图片交换技能
一样平常都倡议用尺度的HTML来显现笔墨，而不要利用图片，如许不仅快，也更具可读性。但假如你想用一些特别字体时，就只能用图片了。
好比你想全部卖器材的图标，你就用了这个图片：
<h1><imgsrc="widget-image.gif"alt="Buywidgets"/></h1>
这固然能够，但对搜刮引擎来讲，和一般笔墨比拟，它们对alt内里的交换笔墨几近没有乐趣这是由于很多计划者在这里放很多关头词来骗搜刮引擎。以是办法应当是如许的：
<h1>Buywidgets</h1>
但如许就没有特别字体了。要想到达一样效果，能够如许计划CSS：
h1
{
background:url(widget-image.gif)no-repeat;
height:imageheight
text-indent:-2000px
}
注重把imageheight换成真的图片的高度。这里，图片会看成背景显现出来，而真实的笔墨因为设定了-2000像素这个缩进，它们会呈现在屏幕右边2000点的中央，就看不见了。但这关于封闭图片的人来讲，大概全体看不到了，这点要注重。
6.CSSbox模子的另外一种调剂技能
这个Box模子的调剂次要是针对IE6之前的IE扫瞄器的，它们把界限宽度和空缺都算在元素宽度上。好比：
#box
{
width:100px;
border:5px;
padding:20px
}
如许挪用它：
<divid="box">...</div>
这时候盒子的全宽应当是150点，这在除IE6之前的IE扫瞄器以外的一切扫瞄器上都是准确的。但在IE5如许的扫瞄器上，它的全宽还是100点。能够用之前人创造的Box调剂办法来处置这类差别。
但用CSS也能够到达一样的目标，让它们显现效果分歧。
#box
{
width:150px
}
#boxdiv
{
border:5px;
padding:20px
}
如许挪用：
<divid="box"><div>...</div></div>
如许，不论甚么扫瞄器，宽度都是150点了。
7.块元素居中对齐
假如想做个流动宽度的网页而且想让网页程度居中的话，一般是如许：
#content
{
width:700px;
margin:0auto
}
你会利用<divid="content">来围上一切元素。这很复杂，但不敷好，IE6之前版本会显现不出这类效果。改CSS以下：
body
{
text-align:center
}
#content
{
text-align:left;
width:700px;
margin:0auto
}
这会把网页内容都居中，以是在Content中又到场了
text-align:left。
8.用CSS来处置垂直对齐
垂直对齐用表格能够很便利地完成，设定表格单位vertical-align:middle就能够了。但对CSS来讲这没用。假如你想设定一个导航条是2em高，而想让导航笔墨垂直居中的话，设定这个属性是没用的。
CSS办法是甚么呢？对了，把这些笔墨的行高设为2em：line-height:2em，这就能够了。
9.CSS在容器内定位
CSS的一个优点是能够把一个元素恣意定位，在一个容器内也能够。好比对这个容器：
#container
{
position:relative
}
如许容器内一切的元素城市绝对定位，能够如许用：
<divid="container"><divid="navigation">...</div></div>
假如想定位到距左30点，距上5点，能够如许：
#navigation
{
position:absolute;
left:30px;
top:5px
}
固然，你还能够如许：
margin:5px0030px
注重4个数字的按次是：上、右、下、左。固然，偶然候定位的办法而不是边距的办法更好些。
10.纵贯到屏幕底部的背景致
在垂直偏向是举行把持是CSS所不克不及的。假如你想让导航栏和内容栏一样纵贯到页面底部，用表格是很便利的，但假如只用如许的CSS：
#navigation
{
background:blue;
width:150px
}
较短的导航条是不会纵贯究竟部的，半路内容停止时它就停止了。该怎样办呢？
不幸的是，只能接纳棍骗的手腕了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的色彩和设定的背景致一样。
body
{
background:url(blue-image.gif)00repeat-y
}
此时不克不及用em做单元，由于那样的话，一旦读者改动了字体巨细，这个把戏就会露馅，只能利用px
</p>
最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
页:
[1]