网页标准化:CSS代码缩写精简实例

2016-02-19 19:43 1 1 收藏

下面图老师小编要跟大家分享网页标准化:CSS代码缩写精简实例,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

【 tulaoshi.com - Web开发 】

  一些CSS属性允许使用一串值代替许多属性,值使用空格分开。

  margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。

  所以下面的代码:

  p {
  border-top-width: 1px;
  border-right-width: 5px;
  border-bottom-width: 10px;
  border-left-width: 20px;
  }

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  可以写成:

  p {
  border-width: 1px 5px 10px 20px;
  }
  border-width,border-color,border-style同样可以合并到一起,例如:
  p {
  border: 1px red solid;
  }

  (同样可以运用到border-top,border-right等等)

  如果只使用两个值(比如margin: 1em 10em;),第一个值包括顶部和底部,第二个值包括左右。

  字体属性同样可以使用font属性合并。

  p {
  font: italic bold 1em/1.5 courier;
  }

  (上面"/1.5"是 line-height的值)

  把它们总结在一起,试下下面的代码:

  p {
  font: 1em/1.5 "Times New Roman", times, serif;
  padding: 3em 1em;
  border: 1px black solid;
  border-width: 1px 5px 5px 1px;
  border-color: red green blue yellow;
  margin: 1em 5em;
  }

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  推荐大家使用缩写形式,促进CSS代码的精简、优化!

来源:http://www.tulaoshi.com/n/20160219/1621634.html

延伸阅读
    脸部的设计是在AI中是很重要的一部分,很多人在这个上面缺乏思绪,不知道从哪里下手,设计完成的人总觉得那里不对。其实,我们人物设计是遵循很多设计规律的:比如人有三庭,三庭五眼,当然还有一些自然准则是要遵守的。     在本教程中用简单粗暴的方法可以轻松地完成一个女性标准脸。这个过程中会让你正确的认识人...
标签: Web开发
尽管通常一个CSS文件占用不了什么带宽, 但之于网页设计, 在不影响整个网页构架与功能的情况下, 网页文件越小越好. 因为更小的网页文件有利于缩短页面的载入时间. 更重要的是, 相同的页面排版和结构, 能用最简洁的代码来实现, 也应该是每个网页设计师对自己的一种要求. 本文里面, 我们为大家介绍介绍两个 CSS代码精简工具 和相关的一些 CSS...
    Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种,包括Web服务器的速度、访问者的Internet连接情况,以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小。       为了...
标签: Web开发
很久没有写文章,最近一直在忙于找工作和找房子。哎,现在终于安定下来了,哎,又叹息一下,是因为我把去淘宝面试的机会也推掉了,本来以为要卷铺盖回武汉了,哎,不提了,很对不起小马哥,也很对不起自己啊! 现在还是在上海,不扯了,开始正题吧。做前端开发快有3年时间,今天跟大家谈谈个人对WEB前端开发的一些经验(当然都是个人的一些...
标签: Web开发
很多朋友对我说,她/他有代码洁癖,即,让她/他写XHTML的话,从来不愿意加上额外的标签(tag)。举个简单的例子,相信很多人从很多地方都看到过的: 以下是引用片段:div id="nav"     ul         li/li         li/li  &nbs...

经验教程

980

收藏

37
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部