仓酷云

标题: 给大家带来CSS款式表优化更整齐而冗长 [打印本页]

作者: 分手快乐 时间: 2015-1-16 00:09
标题: 给大家带来CSS款式表优化更整齐而冗长
一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。
　　CSS简写就是指将多行的CSS属性声明化成一行，又称为CSS代码优化。CSS简写的最年夜优点就是可以明显削减CSS文件的巨细，实在另有良多其他好处。痴肥而混乱的CSS款式表会使你碰到成绩是难以调试。特别是当一个团队在举行计划的时分，你的痴肥的CSS代码会使你的团队其他成员的事情效力下落。
　　明天，收拾了一些CSS简写技能，它们实际上是CSS最经常使用的写法，可是太多的人利用Dreamweaver这类所见即所得软件来编写CSS，使得代码过于痴肥。不外不妨，看过本文以后，你一能能把握CSS代码优化的技能，从此让你的每个CSS款式表都看起来整齐而冗长吧。
属性值为0

誊写准绳是假如CSS属性值为0，那末你不用为其增加单元(如:px/em)，你大概会如许写:

padding:10px5px0px0px;

尝尝如许吧:

padding:10px5px00;

移除选择器

　　选择器是你在为一些元素使用CSS款式时的基础办法，好比h1,h2,h2,div,strong,pre,ul,ol等等…假如你利用了class(.类名)或ID(#id名),那末就不必再在声明CSS时包括选择器了。

div#logowrap

实验抛弃过剩的选择器吧:

#logowrap

在这个例子中所谓的谁人选择器就是div
*总爱和你开顽笑

　　要明智的利用*而制止它在全部CSS款式表中乱开顽笑，*是个通配符，你可使用它来为你的计划部分或全体举行一系列CSS声明。比方:

*{
margin:0;
}

这个声明会将一切元素的margin值设置为0，一样的，为了松散起见，你能够实验如许设置:

#menu*{
margin:0;
}

如许的声明是指将#menu下的一切元素的margin设为0。
背景

　　背景(background)属性大概会包括设置背景致、背景图、背景图的地位和背景图反复体例的参数，你大概会写成:

background-image:url(”logo.png”);
background-position:topcenter;
background-repeat:no-repeat;

实在能够写成:

background:url(logo.png)no-repeattopcenter;

色彩

　　色彩(color)属性在CSS一般指定为一个十六进制的值,一个#加6位数，他的简写体例是假如色彩值由成对儿呈现的三对而数字构成，你能够省略失落没对中的一个数字。
　　#000000能够写成#000,#336699能够写成#369
　　这类简写技能只合用于成对呈现的色彩值，别的色彩值不合用这类技能，好比:
　　#010101,#223345,#FFF000
Margin(外边距/空缺边)

声明CSSmagin值得时分一般会写成如许:

margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;

让我们尝尝把值为0的单元往失落，并把4条声明兼并成一条声明:

margin:010px010px;

当你性命padding、margin、border(另有一些其他属性)时，记得要把依照顺时针的偏向来声明属性值，也就是依照上-右-下-左的偏向。关于这些属性另有另外一个加倍复杂的写法，看看属性中上和下、左和右是不是值是相称的，假如是那末就能够进一步优化了，你能够省略失落后两个值，剩下的两个值前者指高低，后者指摆布:

margin:010px;

它是指摆布的值为10px，高低的值为0；
Padding(内边距)

padding的简写技能同等于margin:

padding-top:0px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;

能够写成:

padding:010px;

Borders(边框)

　　边框的简写体例比拟别的性命来讲会对照庞大，良多CSSer一入手下手都简单记混它的简写按次，假如你想声明一个1像素宽的实线玄色边框，大概会写成:

border-width:1px;
border-style:solid;
border-color:#000;

实在能够写成:

border:1pxsolid#000;

注重:这里的色彩值已利用了下面讲过的色彩简写办法了哦。
我们还能够为四个边设置分歧的宽度:

border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;

能够简写成:

border-width:1px2px3px4px;

最初，我们还能够只设置左和右的边的款式:

border-right:1pxsolid#000;
border-bottom:1pxsolid#000;

固然并没削减几代码,但狂风彬彬倡议写成如许:

border:1pxsolid#000;
border-width:01px1px0;

先设置四个边的默许作风，然后声明详细的哪一个边要显现。
笔墨

　　笔墨属性也有良多大概会用到的属性值，像背景一样，你大概会声明这类庞大的笔墨款式:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:150%;
font-family:宋体,Arial,sans-serif;

实在能够优化成一行:

font:italicsmall-capsbold1em/150%宋体,Arial,sans-serif;

列表

list-style-type:square;
list-style-position:inside;
list-style-image:url(filename.gif);

能够写成:

list-style:squareinsideurl(filename.gif);

但愿狂风彬彬总结的这10个CSS缩写技能能对你的CSS誊写有所匡助

最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。

作者: 若天明 时间: 2015-1-18 05:25
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 莫相离 时间: 2015-1-24 13:44
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 透明 时间: 2015-2-1 16:46
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 乐观 时间: 2015-2-7 11:33
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 仓酷云 时间: 2015-2-22 02:42
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 爱飞 时间: 2015-3-6 23:49
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 深爱那片海 时间: 2015-3-13 23:36
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 海妖 时间: 2015-3-20 23:48
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

欢迎光临仓酷云 (http://ckuyun.com/)