快捷搜索:

网页制作必学技巧之用CSS美化你的网页

现在我们设计网页已经离不开CSS,应用CSS可以美化我们的网页,这已经是大年夜家所共知的了!

CSS是“Cascading Style Sheets”的缩写,译为样式表。HTML容许我们使用CSS来实现风格的显示,举个简单的例子:我们可以应用标签来使页面的字体加粗。如:

雨枫技巧教程网加粗字体显示

假如你使我们使字体显示为血色、宋体、并且加粗显示我们可以应用下面的代码:

雨枫技巧教程网字体演示

这时我们察看上面的代码时我们发明网页中的元素对照多了,当我们自己编写时可能显得很杂乱,这时我们该想有没有一种措施应用的代码对照少,而同时达到上面显示的要求呢?回答是肯定的,这时我们就要用到CSS了。用CSS设置一种风格,设置好我们必要的特点,给它命名一个独一的名字,然后保寄放在网站的其它地方,然后我们在编写HTML时引用刚才的风格的名字就可以达到这种要求。如:

雨枫技巧教程网的 CSS 风格文本

然后在网页的头部之间加上设置风格的代码,如:

假如你想使上面的CSS节制你的网页的每个页面,那么我们复制粘贴上面的代码就可以了,假如感觉对照麻烦或者说你感觉网页的头部很乱的话,我们也可以把CSS设置的风格零丁保存为一个文件(文件的扩展名为.CSS),之后我们在HTML直接引用那个保存的文件就可以引用样式了。如你保存的文件的名字为:myFirstStyleSheet.css,那么我们可以应用下面代码来引用:

留意:上述代码要放到HTML页面的区域内。

至于CSS的设置就在这里不提了,我们可以专门打开一个记事本,或应用专门的设计对象如DW等。

在编辑CSS留意不要再加上如下代码了:

我们在CSS文件中只要设置CSS风格就行了,如:

.myNewStyle {

font-family: 宋体;

font-weight: bold;

font-size: 8pt;

color: #FF0000;

}

.my2ndNewStyle {

font-family: 宋体;

font-weight: bold;

font-size: 9pt;

color: #FF0000;

}

.my3rdNewStyle {

font-family: 宋体;

font-weight: bold;

font-size: 12pt;

color: #FF0000;

}

然后直接保存为扩展名为css的文件就行了(如:myFirstStyleSheet.css)

着末我们在HTML代码的BODY区域内加入如下代码就可以引用我们的设置了:

雨枫技巧教程网CSS字体显示1

雨枫技巧教程网CSS字体显示2

雨枫技巧教程网CSS字体显示3

我们在上面的代码顶用到了标签,我们在CSS中也可以直接对标签进行风格的定义:

h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }

然后我们就可以直接在代码中加入:

雨枫技巧教程网CSS字体显示2

那么同样按我们设置的风格来显示。

我们也可以对其它的标签设置风格,举个例子:我们对全部页面的边框进行设置:

body { margin-left: 15%; margin-right: 15%; }

我们也可以对DIV标签进行设置:

div {

background: rgb(204,204,255);

padding: 0.5em;

border: 1px solid #000000;

}

在HTML代码中只要在

之间的内容将都按上述的风格进行显示。

着末在举个例子,关于超级连接的变色:

.a:link { color: rgb(0, 0, 153) } /* 未造访连接的环境 */

.a:visited { color: rgb(153, 0, 153) } /* 造访连接之后的连接 */

.a:hover { color: rgb(0, 96, 255) } /* 鼠标盘旋的状态 */

.a:active { color: rgb(255, 0, 102) } /* 连接激活的状态 */

然后在HTML代码中加入:

雨枫技巧教程网

上述代码可以按我们设置的风格显示。

着末给大年夜家扩展一下,由于近来总有网友在论坛中问,若何使在同一页面的连接不合呢?我们接着末这个例子给大年夜家先容一下。这时我们必要设置CSS的另一种风格:

.a1:link { COLOR: #ff0000; TEXT-DECORATION: underline }/* 血色、有下划线*/

.a1:hover { COLOR: #ff0000; TEXT-DECORATION: underline }

.a1:visited { COLOR: #000000; TEXT-DECORATION: none }/* 玄色、无下划线*/

.a1:active { COLOR: #0000ff; TEXT-DECORATION: none }

然后在HTML代码中加入:

雨枫技巧教程网

雨枫技巧教程网

就会呈现两种连接效果了。

CSS在我们设置网页时功能是异常强大年夜的,盼望大年夜家在制作网页时要纯熟的运用,以使我们的页面加倍漂亮和统一。在本站有很多多少关于CSS的课本盼望大年夜家好好钻研吧!盼望这篇文章能起到画龙点睛的感化。

您可能还会对下面的文章感兴趣: