网页设计,从CSS开始。贡献本人专用的一套CSS

/* CSS Document */
<style type="text/css">
<!--
body,td,th {
font-size: 9pt;
color: #000000;
line-height:13pt
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a {
font-size: 9pt;
color: #000000;
line-height:13pt
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: #ff0000;
line-height:13pt
}
a:active {
text-decoration: none;
color: #000000;
}
input {
    font-size:9pt;
line-height:13pt
}
-->
</style>


--------------------------------------------------------------------------------------------------------------------------------
  使用方法:将上述代码复制到一个新的网页文件内,然后保存为.css后缀。例如“lain.css”文件。
--------------------------------------------------------------------------------------------------------------------------------
说  明:
font-size: 9pt; [字体字号定义,没有注明字体既默认的宋体字体,9pt是网上最流行的字号。在Dreamweaver也可以定义,意思是9镑或者9点。]

color: #000000; [文字颜色,连接颜色等的问题颜色也是这种表示方式。#000000是网页抓色标准,“000000”代表黑色。具体打开Dreamweaver就可以看到。]

line-height:13pt[行间距,指每行字之间的距离,同样适用pt来注释,13pt是很合理的距离]

body[普通文字的定义。]

margin-left: 0px;[左边距]
margin-top: 0px;[上边距]
margin-right: 0px;[右边距]
margin-bottom: 0px;[下边距]

input[对标单的定义。]

a [定义超级链接整体的风格,例如文字字体、原始颜色、行间距。]

a:link[和上面所述的a有同样效果,不同的是超级链接是否运用下划线等效果也在这里定义,例如不对text-decoration:字段做任何定义,就是默认的永远有下划线]

a:visited[定义已经被访问过的超级链接的属性,例如颜色和下划线。]

a:hover[定义当鼠标经过超级链接时候的属性,例如颜色和下划线。]

a:active[定义活动超级链接,也就是鼠标按下时候的属性,例如颜色和下划线。]

  至于下划线如何显示,我在这里就不罗嗦了,如果上面的CSS你用了不顺手,可以打开Dreamweaver,右键选择属性,自己定义。

  连接外部CSS的方法是,在网页内右键-CSS样式-附加样式表-点选“连接”-选择你的CSS文件就可以了。

--------------------------------------------------------------------------------------------------------------------------------
  如何在同一个页面内使用不同的超级链接,如何定义这类CSS。
--------------------------------------------------------------------------------------------------------------------------------

  如果你已经在网页内使用了一个外部的CSS,例如上述的,定义超级链接平时为黑色,只有在鼠标经过的时候为红色。可是这时候客户要求有个别的超级链接,需要平时为绿色,鼠标经过的时候变成蓝色,这可怎么办?下面我就教给大家。

  我你的CSS中关于超级链接的那一段代码Copy到你需要做第二个超级链接的网页内,例如

<style type="text/css">
<!--
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: none;
}
-->
</style>


  就是上面的这段代码,然后你在每个定义前面加点东西,例如"a."、“b.”、或者“sky.”,反正就是任意的英文和数字的单独或者组合再加一个点,我们这里定义的是"sky."。然后把颜色也给修改成客户的要求,修改完之后就是:

<style type="text/css">
<!--
sky.a:link {
color: #009900;
text-decoration: none;
}
sky.a:visited {
color: #009900;
text-decoration: none;
}
sky.a:hover {
color: #0066FF;
text-decoration: underline;
}
sky.a:active {
color: #009900;
text-decoration: none;
}
-->
</style>


  使用方法:先做好超级链接,然后选中它,然后在下方的标识栏找到他,应该是一个白色的<a>,然后右键“设置类”选择sky。或者选中它后右键在CSS样式中选择sky类,就可以了。

  说了这么多,估计您已经看晕了,慢慢来吧,CSS很烦,但是很重要,谁也不想出现一个很简单的页面,内容不到百行,但是在页面内胡乱定义的一套又一套的CSS就有80多行吧?那不是虐待人玩吗,对自己负责,对客户负责,对你的作品负责。
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值