仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1020|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 给大家带来CSS款式表优化更整齐而冗长

[复制链接]
分手快乐 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:09:06 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
一般来说还需要用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:20 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
莫相离 该用户已被删除
板凳
发表于 2015-1-24 13:44:37 来自手机 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
透明 该用户已被删除
地板
发表于 2015-2-1 16:46:26 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
乐观 该用户已被删除
5#
发表于 2015-2-7 11:33:45 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
6#
发表于 2015-2-22 02:42:43 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
爱飞 该用户已被删除
7#
发表于 2015-3-6 23:49:03 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
深爱那片海 该用户已被删除
8#
发表于 2015-3-13 23:36:53 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
海妖 该用户已被删除
9#
发表于 2015-3-20 23:48:51 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 07:35

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表