Rss订阅

首页 »Css教程 » 字体css切换:css切换网页变脸 »正文

字体css切换:css切换网页变脸

来源: 发布时间:星期四, 2009年2月12日浏览:172次评论:0

文档来自天极

CSS核心:属性重定义

先来看几个小窍门技巧:

1、给链接加上修饰

我们通常会用样式表以外

元素对链接进行修饰

比如使用图片、使用表格、使用其他标签

其实我们可以对<a>标签用样式表来定义

为了过程简单

我们直接在<a>中使用style来定义

A:给链接加上边框

为什么要给链接加边框呢

通常情况下我们在导航部分会给链接作些边框修饰

如果用样式表来定义

我们可以这样写:

<astyle=\"border:1pxsolid#ccc;\"href=\"http://homepage.yesky.com/\">带边框

链接</a>

当然

这样

边框并不好看

我们还需要对其设置

下内边距

如下代码:

<astyle=\"border:1pxsolid#ccc;padding:5px;\"href=\"http://homepage.yesky.com/\">带边框

链接</a>

B:给链接加上背景颜色

其实这个效果也并没有达到美观

效果

我们可以为其添加背景颜色

代码如下:

<astyle=\"border:1pxsolid#ccc;padding:5px;background-color:#efefef;\"href=\"http://homepage.yesky.com/\">带边框

链接</a>

这样

边框和背景色也许不是您想要

您可以自己修改颜色参数

C:给链接加上文字修饰

通常情况下我们可以在<a>标签中使用<b>标签或<strong>标签来加粗文字链接

实际上这都是多余

我们只要在<a>标签中这样定义:

<astyle=\"border:1pxsolid#ccc;padding: 5px;background-color:#efefef;font-weight:bold;\"href=\"http://homepage.yesky.com/\"> 带边框

链接</a>

2、重定义原始标签属性

什么叫重定义原始标签

属性？举个简单

例子:<b>标签

作用在于把文字显示为粗体

这是浏览器对<b>标签

默认属性

解释

但我们可以通过样式表对其进行改写

如下代码:

<bstyle=\"font-weight:100;\">被重定义属性

<b>标签</b>

这里是效果:被重定义属性<b>标签

大家会看到上面

这几个字“被重定义属性

<b>标签”显示为正常文字

而非粗体

这是

<b>

font-weight属性被重新定义了

所以在显示

时候会优先解析CSS对其

定义

当然

我们同样可以对<b>标签加诸如边框、背景色、上划线下划线的类

修饰

见以下代码:

<bstyle=\"border:1pxsolid#FF6600;background -color:#FFEFE8;padding:5px;text-decoration:underline;\">被修饰

< b>标签</b>

这里是效果:被修饰<b>标签

综上所述

html中几乎所有尖角符号内

标签都可以用来样式重新定义

进而改变这些标签

默认属性

简洁美:用表格和段落进行网页布局设计

通常

菜鸟们会采用表格和段落来进行网页布局设计

实际上这称不上网页布局设计

只不过是

些简单

排版罢了；然而真正

高手他们可以仅使用表格和段落设计出美观

网页来

而且绝对符合W3C标准

在大多数情况下满足了各种浏览器对代码

解析

首先你要明白为何要使用表格和段落进行网页设计

它们的间

搭配有何优势？

其实

使用表格和段落来进行网页设计

优势非常明显

首先

表格作为

种布局元素在网页中使用得非常多

设计者能够随心所欲地利用表格来划分网页各个部分

功能

但必须

提

是

表格虽然好用但不能滥用

滥用表格会使页面显得臃肿不堪

网页废代码增多不仅浪费大量带宽

降低网页下载速度

影响用户体验

同时也违反了搜索引擎所支持

网页简单化要求

个优秀

网页设计师必须考虑这两个原因

其次

段落在网页排版中也大量使用

个回车键就是

个段落

而且代码非常简洁

使用起来非常方便

最后

个优势在于使用CSS重定义表格属性和段落属性

使的获得完美

视觉效果并达到简单就是美

最高境界

正

表格和段落在网页布局设计中各自

优势

我们可以充分利用两者

功用

让表格完成整体布局

而让段落在细节上给排版给予更大

支持

这是这对“黄金组合”最大

优势所在

变脸:灵活运用标签可定义样式

既然要设计出美观

网页

那么就要很好地应用颜色窍门技巧、边框窍门技巧等

种比较好

设计思路方法是<p>和<td>采用相同

颜色

<p>

背景色为白色而表格

背景色采用比<p>以及<td>

边框颜色浅

同类色彩

见以下例子:

<STYLE>
.pstyle{
background-color:#fff;
padding:5px;
margin:5px;
font-size:12px;
}
td{
border:1px solid #FF8040;
background-color:#FFEBE1;
}
a{
color:#FF8040;}
</STYLE>

<TABLE title=不停变换

页面样式 cellSpacing=3 cellPadding=0 width=250 border=0>
<TBODY>
<TR>
<TD vAlign=top>
<P

=pstyle>此处为被定义了边框以及背景

<p>标签

当然同时可以定义行高、字体大小、内边距和外边据等</P>
<P

=pstyle>此处为被定义了边框以及背景

<p>标签

当然同时可以定义行高、字体大小、内边距和外边据等</P>
<P

=pstyle>此处为被定义了边框以及背景

<p>标签

当然同时可以定义行高、字体大小、内边距和外边据等</P></TD>
<TD vAlign=top width=80>
<P

=pstyle><A href=\"http://homepage.yesky.com\">右侧导航</A>
<P

=pstyle><A href=\"http://homepage.yesky.com\">右侧导航</A> </P></TD></TR>
<TR>
<TD align=middle colSpan=2>
<P

=pstyle><A href=\"http://homepage.yesky.com\">底部导航</A>|<A href=\"http://homepage.yesky.com\">底部导航</A>|<A href=\"http://homepage.yesky.com\">底部导航</A>|<A href=\"http://homepage.yesky.com\">底部导航</A></P></TD></TR></TBODY></TABLE>

我们只需要定义其中

p、td以及a

样式属性为:

<style>
.pstyle{
background-color:#fff;
padding:5px;
margin:5px;
font-size:12px;
}
td{
border:1pxsolid#FF8040;
background-color:#FFEBE1;
}
a{
color:#FF8040;}
</style>

为了保持新鲜感

你可以定义几种方案并随机

样式表

本文采用JS来不停地改变样式属性

加入如下JS代码:

<scriptlanguage=\"javascript\">

(document.getElementById){
varr=Math.floor(Math.random

*241);
varg=Math.floor(Math.random

*241);
varb=Math.floor(Math.random

*241);
varrp1,gp1,bp1,rp2,gp2,bp2,rp3,gp3,bp3;
varp1=.1;
varp2=.15;
varp3=.2;
getLighterRGBShades

;
varri=Math.floor(Math.random

*5);
vargi=Math.floor(Math.random

*5);
varbi=Math.floor(Math.random

*5);
}
function

StyleByTag(e,p,v){
varelements=document.getElementsByTagName(e);
for(vari=0;i<elements.length;i

){
elements.item(i).style[p]=v;
}
}

functiongetLighterRGBShades

{
rp1=parseInt((r*p1)+(255-(255*p1)));
gp1=parseInt((g*p1)+(255-(255*p1)));
bp1=parseInt((b*p1)+(255-(255*p1)));
rp2=parseInt((r*p2)+(255-(255*p2)));
gp2=parseInt((g*p2)+(255-(255*p2)));
bp2=parseInt((b*p2)+(255-(255*p2)));
rp3=parseInt((r*p3)+(255-(255*p3)));
gp3=parseInt((g*p3)+(255-(255*p3)));
bp3=parseInt((b*p3)+(255-(255*p3)));
}

functionchangeLinkColor

{

(!document.getElementsByTagName){

false;}//unclean!unclean!

(r>239||r<1)ri=ri*-1;

(g>239||g<1)gi=gi*-1;

(b>239||b<1)bi=bi*-1;
r

ri;
g

gi;
b

bi;

StyleByTag(\'a\',\'color\',\'rgb(\'+r+\',\'+g+\',\'+b+\')\');

StyleByTag(\'p\',\'border\',\'rgb(\'+r+\',\'+g+\',\'+b+\')\');

StyleByTag(\'td\',\'border\',\'rgb(\'+r+\',\'+g+\',\'+b+\')1pxsolid\');
getLighterRGBShades

;

StyleByTag(\'td\',\'background\',\'rgb(\'+rp2+\',\'+gp2+\',\'+bp2+\')\');

Timeout(\'changeLinkColor

\',40);
}

functiongetLighterRGBShades

{
changeLinkColor

;
}
</script>

<STYLE>
.pstyle{
background-color:#fff;
padding:5px;
margin:5px;
font-size:12px;
}
td{
border:1px solid #FF8040;
background-color:#FFEBE1;
}
a{
color:#FF8040;}
</STYLE>

<TABLE title=不停变换

页面样式 cellSpacing=3 cellPadding=0 width=250 border=0>
<TBODY>
<TR>
<TD vAlign=top>
<P

=pstyle>此处为被定义了边框以及背景

<p>标签

当然同时可以定义行高、字体大小、内边距和外边据等</P>
<P

=pstyle>此处为被定义了边框以及背景

<p>标签

当然同时可以定义行高、字体大小、内边距和外边据等</P>
<P

=pstyle>此处为被定义了边框以及背景

<p>标签

当然同时可以定义行高、字体大小、内边距和外边据等</P></TD>
<TD vAlign=top width=80>
<P

=pstyle><A href=\"http://homepage.yesky.com\">右侧导航</A>
<P

=pstyle><A href=\"http://homepage.yesky.com\">右侧导航</A> </P></TD></TR>
<TR>
<TD align=middle colSpan=2>
<P

(document.getElementById) {
var r = Math.floor(Math.random

*241);
var g = Math.floor(Math.random

*241);
var b = Math.floor(Math.random

*241);
var rp1, gp1, bp1, rp2, gp2, bp2, rp3, gp3, bp3;
var p1 = .1;
var p2 = .15;
var p3 = .2;
getLighterRGBShades

;
var ri = Math.floor(Math.random

*5);
var gi = Math.floor(Math.random

*5);
var bi = Math.floor(Math.random

*5);
}
function

StyleByTag(e, p, v) {
var elements = document.getElementsByTagName(e);
for(var i = 0; i < elements.length; i

) {
elements.item(i).style[p] = v;
}
}

function getLighterRGBShades

{

(!document.getElementsByTagName) {

false;} // unclean! unclean!

(r>239||r<1) ri=ri*-1;

(g>239||g<1) gi=gi*-1;

(b>239||b<1) bi=bi*-1;
r

ri;
g

gi;
b

bi;

StyleByTag(\'a\',\'color\',\'rgb(\'+r+\', \'+g+\', \'+b+\')\');

StyleByTag(\'p\',\'border\',\'rgb(\'+r+\', \'+g+\', \'+b+\')\');

StyleByTag(\'td\',\'border\',\'rgb(\'+r+\', \'+g+\', \'+b+\') 1px solid\');
getLighterRGBShades

;

StyleByTag(\'td\',\'background\',\'rgb(\'+rp2+\', \'+gp2+\', \'+bp2+\')\');

Timeout(\'changeLinkColor

\',40);
}

function getLighterRGBShades

{
changeLinkColor

;
}
init

;
</script>

这段代码中

语句

Timeout(\'changeLinkColor

\',40)

其中

40是指变脸间隔时间

当然

你可以任意改变其大小

这段代码并不复杂

读者可以自行研究

标签：css栏目切换切换css样式 css图片切换效果字体css切换

下载文章的 PDF文档电子版离线看

我顶

专注于互联网--专注于架构

首页 »Css教程 » 字体css切换:css切换网页变脸 »正文

字体css切换:css切换网页变脸

相关文章

读者评论

发表评论

热门标签

精华推荐

最新标签

Dig排行

阅读排行

最新文章

专注于互联网--专注于架构

首页 »Css教程 » 字体css切换:css切换 网页变脸 »正文

字体css切换:css切换 网页变脸

相关文章

读者评论

发表评论

热门标签

精华推荐

最新标签

Dig排行

阅读排行

最新文章

首页 »Css教程 » 字体css切换:css切换网页变脸 »正文

字体css切换:css切换网页变脸