CSS整体布局声明的一些使用技巧_经验交流

我们应该养成良好的编码习惯,CSS整体布局声明为我们的代码简化、提高运行效率提供了途径。我们列举比较常用的形式,并加上解释。整体布局声明的作用在于将目标作一个整体的概括,声明一些完全相同或基本相同的属性及值,以免在后面的代码中每一个标签中都需要单独定义。若有不同的属性与值,后面的重新定义即可。

一、通配式整体布局声明。

* {
margin:0;
padding:0;
font-size:0.8em;
...
}
  这类形式的声明是针对整个页面的。可以设置页面元素共有的属性。而不必每一个元素单独的声明。上面的代码我们声明边距及填充为零、字体大小为0.8em。对于页面中的元素都应用此声明的属性和值。除非在后面的代码中再次定义margin、padding、font-size的值,否则就按这一定义来显示。

二、标签式整体声明

body {
background:#fff;
font-family: Courier, "Courier New", monospace;
}

p {
background:#fff;
font-family: Courier, "Courier New", monospace;
}
  这类声明是针对某些xhtml标签的。如果无特别的定义,将适用此声明。我们定义了body的背景色及字体。所以body内的元素都适用它,除非再次定义。对于段落p的定义原理是一样的。

三、群组式整体声明

h1,h2,h3 {color:#00f; font-weight:100;}
  这类声明表示h1,h2,h3的文字颜色以及字体加粗情况。我们在实际操作中,不一定是这样的情况,或许是某些class或id的xhtml元素有着相同的属性,我们都可以群组起来编码。有些不同的地方,单独的重新定义即可。例如在带有小图标的清爽CSS表单设计这个http://www.52css.com/article.asp?id=392实例中。我们就用到了这种类型的声明。
   

时间: 2024-09-20 00:16:57

CSS整体布局声明的一些使用技巧_经验交流的相关文章

div+css页面布局的五个小技巧_经验交流

1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中,一切就会变得简单多了,如: 复制代码 代码如下: <textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="th

使用CSS框架布局的缺点和优点小结_经验交流

现在好多网站都用了div+css来布局网页结构,优点是速度快了,可负面影响呢,来看下面的分析前端时间写了一篇<利用CSS框架进行高效率的站点开发>,有不少朋友问我相关的问题.很早5key就在公司进行CSS框架的架构,也对不少朋友提出CSS框架的建议.效果是很明显的.当然,CSS框架有利也有弊,最近也看了一些相关的文章.一些感想,与大家分享.  CSS框架之利:  1.开发效率的提高.          如果你是一个企业建站的前端开发,相信在大部分时间里进行着同类站点的代码工作.定义好的框架可以

标准网页制作技巧:CSS整体布局声明的一些用法

css|标准|技巧|网页 我们应该养成良好的编码习惯,CSS整体布局声明为我们的代码简化.提高运行效率提供了途径.我们列举比较常用的形式,并加上解释.整体布局声明的作用在于将目标作一个整体的概括,声明一些完全相同或基本相同的属性及值,以免在后面的代码中每一个标签中都需要单独定义.若有不同的属性与值,后面的重新定义即可. 一.通配式整体布局声明. * {margin:0;padding:0;font-size:0.8em;...} 这类形式的声明是针对整个页面的.可以设置页面元素共有的属性.而不必

制作网页技术CSS整体布局声明的一些用法

css|网页 我们应该养成良好的编码习惯,CSS整体布局声明为我们的代码简化.提高运行效率提供了途径.我们列举比较常用的形式,并加上解释.整体布局声明的作用在于将目标作一个整体的概括,声明一些完全相同或基本相同的属性及值,以免在后面的代码中每一个标签中都需要单独定义.若有不同的属性与值,后面的重新定义即可. 一.通配式整体布局声明. * {margin:0;padding:0;font-size:0.8em;...} 这类形式的声明是针对整个页面的.可以设置页面元素共有的属性.而不必每一个元素单

CSS标签切换代码实例教程 比较漂亮_经验交流

我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容.与此同时我们发现一些问题,内容的简单排列总使页面很长.滚屏很多才能将显示的内容布局完毕.YAHOO与网易率先应用了标签切换的布局方式,打破了常规布局的局限性,在相同尺寸的区域内,可以放置更多的内容.我们只需要点击不同的选项卡或链接就能展开内容,这并不需要打开新的网页,只是在同一页内完成. 一.标签切换总体的实现思路: 实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用DIV CSS进行布局,首先来整理一下思路,

DIV+CSS作网页容易犯的错误小结_经验交流

1. 检查HTML元素是否有拼写错误.是否忘记结束标记. 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误.  2. 检查CSS是否正确.  检查一下有无拼写错误.是否忘记结尾的 } 等.可以利用CleanCSS来检查 CSS的拼写错误.CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误.  3. 确定错误发生的位置. 如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置.  4. 利用

纯CSS制作的新闻网站中的文章列表_经验交流

应用CSS制作的新闻网站中的文章列表:ul是html中的无序列表,li是列表中的列表项.如果没有CSS定义它的外观,它默认是显示成一列列表,并且它会存在项目符号(比如方块或实心的黑点)的列表内容.CSS网页布局中,除了新闻列表.链接运行ul.li制作以外,我们通常将菜单也用ul.li来实现.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

用CSS开发时髦的导航栏图例教程_经验交流

制作容易的站点导航栏是CSS真正展现自己特有能力的一个领域.制作导航条的老方法倾向于依赖大量的图片.嵌套表格和Javascript脚本 – 所有这些都会严重影响站点的可用性和无障碍性.如果你的站点不能在一个不支持Javascript的设备上被导航,那么你不仅阻止了关闭Javascript的用户,同时你也阻止了只支持文本的设备,比如屏幕阅读器已经搜索引擎的机器人程序 – 它们将永远无法从你的首页得到网站内容的索引.就算你的客户不在乎无障碍性,告诉他们笨重的菜单阻止他们得到一个体面的搜索引擎排名!

技巧:应该如何合理的应用CSS整体布局声明

css|技巧 1. 基本上,整体声明有两种方法,第一种就是针对一个标签,然后一次设定好几个样式.第二种就是同时对好几个标签设定相同的样式.下面这个例子就是:"针对一个标签,然后一次设定好几个样式": <stype="text/css">     body{font-size:9pt;    font-color:red;    background:white}</style>  2. 你会发现,我们同时声明了:字形大小为 9pt.字形颜色为