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

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元素有着相同的属性,我们都可以群组起来编码。有些不同的地方,单独的重新定义即可。

时间: 2024-08-30 06:29:01

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

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

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

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

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

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

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

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

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

CSS网页制作技巧:CSS纯英文数字自动换行

文章简介:并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行.这个问题如何解决?先来认识一下两位主角word-wrap和word-break. 当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行 并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行.这个问题如何解决?先来认识一下两位主角word-wrap和word-break word-wrap用来控制换行两种取值:(1)normal (2)break-

CSS网页制作技巧:兼容主流浏览器的背景颜色透明

文章简介:CSS网页制作技巧:兼容主流浏览器的背景颜色透明. 以前都是用jquery来写背景透明,方法简单,但是有缺点,脚本没加载完时,背景颜色是不透明的.如果换成在css里写好的话,效果就很好了..transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持f

CSS网页制作技巧:IE浏览器下li的默认高度问题

文章简介:CSS网页制作技巧:IE浏览器下li的默认高度问题. 昨天,在家打开IE7浏览器看"视频导航网"的时候,发现居然有排版错误. 用F12开发者工具看了下,发现 li 的默认高度既然不统一? 用工具看了下,发现火狐高度解析统一为33px,而IE7解析高度根据字的不一样,默认解析的高度为30px,纯数字的解析高度为31px;中英文组合的解析高度为32px; 解决方法一:给LI设置高度后,IE7正常了,但IE6问题依然存在.原来,LI里面还嵌套着A标签,给A也设置一个高度后问题解决.

网页制作技巧:数据过多时不会影响页面布局

文章简介:网页制作技巧:数据过多时不会影响页面布局. 着网站的迅速发展,对用户交互体验需要也越来越高,web前端开发者需要考虑更多,怎样通过前端的控制,让用户数据更高效的显示.要达到的目标是:数据过多时,不会影响页面布局解决方法:1,在不影响布局的情况下,可以选择,数据自动换行a.设置宽度限制:可以使用width值和max-width最大宽度值.b.内容自动换行:word-wrap:break-word(中文,英文语句,长串字母都能实现);注意点:长串字母实现前提,必须将宽度限制直接添加到"文本

CSS网页制作技巧:隐藏网页元素的方法汇总

文章简介:CSS网页制作技巧:隐藏网页元素的方法汇总. 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不占据空间,无法点击 */ }{ visibility: hidden; /* 占据空间,无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }{ position: rela