CSS技術的網(wǎng)頁設計應用研究——科技論文

作者：中州期刊聯(lián)盟來源：日期：2014-10-19人氣：2050

隨著社會的進步和時代的飛速發(fā)展，互聯(lián)網(wǎng)技術正在快速的發(fā)展中，目前，我國已經(jīng)全面的進入了網(wǎng)絡化的信息時代，網(wǎng)絡已經(jīng)進入我們的日常生活當中，成為日常生活中不可缺少的一部分，網(wǎng)絡中的網(wǎng)絡頁面是主要的展示平臺，為了讓網(wǎng)絡頁面可以更好地在多個網(wǎng)絡平臺上兼容，因此，推出了CSS規(guī)范。CSS可以讓網(wǎng)頁中的代碼變得更加簡潔，有效地提高網(wǎng)站的下載速度，統(tǒng)一網(wǎng)絡頁面的風格，并且可以在多個頁面中使用外部的連接樣式，提高網(wǎng)絡代碼的重用率。

1.CSS語法及類型

1.1CSS的語法

CSS是我語法有著基本的格式，基本格式如下：

selector {property:value}（選擇符 {屬性：數(shù)值}）

例如：body {color: blue}

選擇符中的body指網(wǎng)頁頁面中的主體部分，color指文字顏色的控制屬性，blue值顏色值，這個格式在網(wǎng)頁中表現(xiàn)出來的效果是網(wǎng)頁中的文字顏色為藍色。

1.2ID選擇符

與ID選擇符相似的還有類選擇符，只不過，類選擇符中使用的是CLASS，而ID選擇符中使用的是ID，ID選擇符的局限性大，因此，只能對某個元素樣式進行單獨的定義，一般在特殊的情況下才會使用，例如：<p id="intro">你好</p>，在ID選擇符的名稱前加“#”號，ID的屬性會把所有的id="intro"元素匹配：#intro{font- size:12pt;color:#000;}[1]。

2.CSS使用

2.1外部樣式表

外部樣式表適用于需要很多個頁面的時候，外部樣式表是一種文件，里面包含了多個網(wǎng)站或者網(wǎng)絡的頁面，并且可以在網(wǎng)頁中以獨立的形式存在，一般，文件的擴展名是.css。使用了外部樣式表的多個網(wǎng)絡頁面，在鏈接的過程中可以將相同的.css文件鏈接到，甚至還可以將一個文件進行改變，以此來改變整個站點外觀的形象[2]。

在網(wǎng)絡頁面中加一個網(wǎng)布樣式表，例如：mystyle.css，需要把<link>加在文檔的頭部，作為標簽：

<head>

.........

</head>

在外部樣式表的文件中，可以對內部文本在編輯器中進行不同的編輯，但是文件中不能出現(xiàn)html的任何代碼，以上述例子為例，該文件的內容就是：

p{color:blue;text-align:center;}

body{background-color:#FFFFFF}

2.2內部樣式表

當單獨的一個網(wǎng)頁不需要特殊樣式的時候，普遍使用的都是內部樣式表。一般，使用<style>作為內部樣式表的定義標記，文檔的頭部處在<head>和</head>的標簽之間，例如：

<head>

p{color:blue;text-align:center;}

body{background-color:#FFFFFF}

</style>

……

</head>

這種樣式比較簡單且實用，并且可以將網(wǎng)站的頁面頭部都輸入相同的樣式，就可以讓所有的頁面都有統(tǒng)一的樣式。

2.3內聯(lián)樣式表

內聯(lián)樣式表是可以在HTML中直接加入style參數(shù)的，其中，參數(shù)的內容是CSS屬性的和值，例如：所定義的段落中，元素樣式是綠色居中，內嵌的樣式就是：

<p style=“color:green;text-align:center”>This is a paragraph</p>

實質上，內聯(lián)樣式表的效率相較于以上兩種而言比較低，在網(wǎng)頁當中并不推薦使用內聯(lián)樣式表進行網(wǎng)頁設計。內聯(lián)樣式表中的樣式內容不能進行重復使用。如果將上面的內聯(lián)樣式表中的p 元素進行重復使用，那么，后面進行使用的網(wǎng)頁樣式就會將p 元素的定義完全重復，其樣式的屬性也是完全相同的。除此之外，內聯(lián)樣式表中的樣式以及標記的內容全部混雜為一體，在代碼的閱讀和維護方面產(chǎn)生了很大的困難度[3]。

3.CSS在網(wǎng)頁設計中實例

3.1多彩文字的效果

把兩個內容一樣顏色不同的蚊香相互重合在一起，給它添加clip的屬性，讓上下文字被剪切的位置不一樣，以此產(chǎn)生兩種不同的顏色。

clip:auto | rect ( number number number number )

其參數(shù)為：

auto:對象沒有剪切

rect(number number number number):

根據(jù)上右下左的順序，給對象的左上角作為坐標原點，分別計算四個不同的數(shù)值，將其中一個數(shù)值用auto進行替換。

.textBottom {color: #333333;position: absolute;left: 3em;top: 1em;font: 26px Century Gothic,Arial, Helvetica, sans- serif;clip: rect(18px auto auto auto);}

.textTop {color:#CC0000;position:absolute;left:3em;top:1em;font:26px Century Gothic,Arial, Helvetica, sans- serif;clip: rect(0 auto 18px 0);}

3.2鏈接變色的效果

文字為紅色，點擊是黑色，點擊過是黃色。

<! - -

a:link {text- decoration: none ; color: red }

a:active {text- decoration: none ; color: black }

a:visited {text- decoration: none ; color: yellow }

- - >

</style>

4.結束語：

隨著網(wǎng)絡技術的不斷發(fā)展，CSS技術在網(wǎng)頁中的應用方式以及CSS技術的自身發(fā)展還有十分廣闊的領域和空間。

【參考文獻】