html和body标记应用CSS方法和技巧

 大家都知道对于一个页面来说,最基本的结构呢就是

<html>
<head>
<!-- 头部信息内容区域 -->
</head>
<body>
<!-- 页面显示内容区域 -->
</body>
</html>

对于这样的一个结构,不会有人感到陌生,然而往往有时候却是大家越熟悉的东西就容易让人去遗忘了他们的存在。或许你会在想,这个结构这些标签有什么好聊的呢,每个页面都需要他们的啊。是啊,以前我一直也是这么认为的,不过最近发现,其实在很多时候这些不起眼的我们不在乎的标签却可以帮我们在页面美化的过程带来很大的帮助。

对于hack方面,大家都知道* html跟*+html可以帮助我们在IE7跟IE6之间作为识别,而这个也不是我现在想说的内容。其实我想说的内容很简单,主要有下面几点。

1、利用一下html的background,可以让我们在更多的时候能减少添加一个div标签来包含body中的所有内容;而且html作为body的父级,因此背景(背景色以及背景图片,以下出现的“背景”二字都是指背景色跟背景图片)都会被body中的背景所覆盖,先看一小段代码我们继续聊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="myHtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css">
#myHtml {background-color:#CCCCCC;}
#myBody {background-color:#FF0000;}
</style>
<title>无标题文档</title>
</head>
<body id="myBody">
小志提醒:尝试删除body中的文字再做于未删除前做一个简单的对比,别忘了浏览器的差别哦。
</body>
</html>

通过上面的一小段代码,大家可以看到body的背景跟html的背景所存在的区别了吧。接着大家应该可以想到背景既然有这个特点,我们是不是可以考虑在有时候处理一些背景图片的时候把html的background也利用起来呢,尤其是在处理一些比较个性的页面(比如游戏官网)。

PS:

a.如果你把html(#myHtml)的样式去掉,你再看看浏览器的表现,你会发现世界又变了。

b.对于背景色的设置还可以让浏览器自定义的背景颜色失效(IE7为例:“工具”->“Internet选项”->“常规”中的颜色里可以找到背景的设置)

2、在上面的那一小段代码中并没用直接设置

html {background-color:#CCCCCC;}
body {background-color:#FF0000;}

而是用了两个ID,不知道你是否在想我为什么要这样做呢?对于这点的话,可以从几个方面来考虑

2.1 JS的调用(相对来说,用到比较多一点的是body中使用ID或者CLASS)

2.2 CSS中权限值的提升(这点基本上来说用到的机率微乎其微)

简单的再说一下如果body中使用ID或者CLASS的时候,我们能做什么吧。

a.对于现在网络中出现的页面,大家都可以看到很多时候,某个导航是高亮显示,提示你当前浏览的是在哪个页面上。这点的功能我就是可以通过body或者那个导航中添加一个ID或者CLASS来判断识别,当然少不了给这个ID或者CLASS添加一个样式。

b.在一些比较大型的网站中,某个频道或者某些频道的大致结构都是相同,因此我们可以把其中一个结构作为基础参考,复制到其他页面中使用,然后再调用同一个样式,这样可以减少很多的重复工作量,也让页面中的结构的重用性提高,作为区别我们只要利用body中的ID或者CLASS来修改样式的权重值就OK了。这样说或许比较混乱,大家可以大致参考一下迅雷的动漫频道http://anime.xunlei.com/(不过这个频道中的body所用CLASS过多而且相对比较杂乱,这点算是一个败笔吧)

时间: 2022-12-30

html和body标记应用CSS方法和技巧的相关文章

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

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

常用的10种CSS BUG解决方法与技巧

最常用的10种CSS BUG解决方法与技巧-浏览器兼容教程 CSS bug是布局中最头疼的问题.我们需要兼顾各种浏览器,以期待获得一致的效果. 非常遗憾的是各厂商之间的竞争导致很多问题的存在.而IE6与IE7在很多问题上也存在着很大的差别. 轻松的解决CSS bug是我们必须掌握的技能.现在整理出最常用的12种CSS BUG解决方法以及CSS BUG类的小技巧. 希望对您的学习.工作有所帮助,如果您依然有疑问, 一. 针对浏览器的选择器 这些选择器在你需要针对某款浏览器进行css设计时将非常有用

Jquery使用css方法改变样式实例

  本文实例讲述了Jquery使用css方法改变样式.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

jQuery的css() 方法使用指南

  在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了,下面我来给大家详细介绍介绍. 定义和用法 css() 方法返回或设置匹配的元素的一个或多个样式属性. 返回 CSS 属性值 返回第一个匹配元素的 CSS 属性值. 注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 "background" 和 "border"). 复制代码 代码如下: $(selector).css(name) name 必需.规定 CSS 属性的名称.

jQuery使用CSS()方法给指定元素同时设置多个样式

 这篇文章主要介绍了jQuery使用CSS()方法给指定元素同时设置多个样式的方法,实例分析了jQuery中css方法的使用技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery使用CSS()方法给指定元素同时设置多个样式的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html> <html> <head> <

jQuery - css() 方法示例详解

 css()方法设置或返回被选元素的一个或多个样式属性,下面有几个不错的示例,大家可以感受下   设置 CSS 属性    如需设置指定的 CSS 属性,请使用如下语法:   代码如下: css("propertyname","value");    下面的例子将为所有匹配元素设置 background-color 值:  实例  代码如下: $("p").css("background-color","yellow

jQuery CSS()方法改变现有的CSS样式表

  使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: 1$("#61dh a").css('color','#123456'); 2//选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. 3//.css('color','#123456');表示把颜色设为'#123456' 如果需要改变多个样式属性,可先定

Jquery使用css方法改变样式实例_jquery

本文实例讲述了Jquery使用css方法改变样式.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

jQuery - css() 方法示例详解_jquery

css() 方法设置或返回被选元素的一个或多个样式属性. 设置 CSS 属性 如需设置指定的 CSS 属性,请使用如下语法: 复制代码 代码如下: css("propertyname","value"); 下面的例子将为所有匹配元素设置 background-color 值: 实例 复制代码 代码如下: $("p").css("background-color","yellow"); 设置多个 CSS 属性