网页设计 CSS网页制作实用技巧九则

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

下面是个简单易学的网页设计 CSS网页制作实用技巧九则教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - Web开发 】

  一.使用css缩写

  使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《css基本语法》。

  二.明确定义单位,除非值为0

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

  忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写;100,但是在CSS中,你必须给一个准确的单位,比如:" width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。

  三.区分大小写

  当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。

  class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。

  四.取消class和id前的元素限定

  当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如:

  div#content { /* declarations */ }
  fieldset.details { /* declarations */ }

  可以写成

  #content { /* declarations */ }
  .details { /* declarations */ }

  这样可以节省一些字节。

  五.默认值

  通常padding的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样:

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

  * {
  margin:0;
  padding:0;
  }

  六.不需要重复定义可继承的值

  CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。但是要注意,浏览器可能用一些默认值覆盖你的定义。

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

延伸阅读
标签: Web开发
在 CSS网页布局 开发中,会有很多小技巧,webjx.com相关的文章也有很多,但新手朋友往往对此很不熟悉。在某一两个小问题上,或许纠缠很长时间才能搞明白,虽然在的文档中,多次提及过这方面的内容,但依然有很多朋友在这些问题上犯错。我们今天看看这些CSS技巧,认真读一读,或许您并不能完全理解,您可以在进行搜索,扩展您所想要得到...
标签: Web开发
在CSS网页布局开发中,会有很多小技巧,新手朋友往往对此很不熟悉。在某一两个小问题上,或许纠缠很长时间才能搞明白,虽然在webjx.com的文档中,多次提及过这方面的内容,但依然有很多朋友在这些问题上犯错。我们今天看看这些CSS技巧,认真读一读,或许您并不能完全理解,您可以在webjx.com进行搜索,扩展您所想要得到的知识,相信您会...
标签: Web开发
第一步 下面是我们将要动手制作的设计图。在这篇教程里我们只制作首页,不过你可以以此为基础用相同的布局制作内页。 第二步 首先要做的是确定页面结构。随着你对CSS布局的逐步学习,这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片,我们可以非常简单地完成这个设计。 什么是绝对定位? 一个HTML元素(比如di...
标签: 办公软件
在WORD中计算某一字符串出现的次数 在WORD中怎样统计某个字符串在文章中出现的次数呢?可以这样做:使用“替换”对话框,在“查找内容”和“替换为”的对话框中填入欲统计的字符串,按“全部替换”命令。执行完命令后,WORD会弹出对话框提示有XX个被替换(XX就是该字符串出现的次数)。 在WORD中查找上次编辑时的位置 如果你正在编...
标签: 办公软件
一、快速返回到前次的编辑位置 Word97可跟踪键入或编辑文字的最后三个位置。若要回到前次的编辑位置,可按Shift+F5组合键,它使光标在最后编辑过的三个位置间循环。 二、长文档中移动和复制对象 要在长文档相距较远的两部分之间移动或复制对象(文字、图形),可将窗口拆分...

经验教程

331

收藏

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