網頁設計中CSS技術的研究與應用

程琳琳 林培芬

摘要??? 隨著網絡的迅猛發展，網頁已成為人們獲取信息的一個重要方式。網頁設計中CSS技術的合理使用，可以使得網頁以更美觀、更快速的方式呈現給用戶。文章首先簡述了CSS技術的概念以及引用方式，然后以一個案例，詳述了CSS技術在網頁設計中的實際應用，為相關技術人員提供參考。

【關鍵詞】網頁設計 CSS 引用方式 優先級 精靈技術

1 CSS技術簡介

CSS，即Cascading Style Sheets，又稱為層疊樣式表。它是一種計算機語言，用于表現HTML或XML等文件的樣式。它不僅可以靜態地修飾web頁面，還可以使用腳本語言動態地格式化web頁面元素。使用HTML標簽搭建的是網頁的結構，而CSS技術可以精確控制網頁中的每個元素，達到美化網頁中各個元素的目的。CSS不僅可以改變頁面中文字的字體、顏色、大小樣式，還可以改變網頁元素的位置、性質、背景圖片、背景顏色等。

CSS技術是一種十分方便的網頁制作技術，具有顯著的優勢。不僅能夠對網頁進行合理規范的布局，還可以提高代碼重用率和網頁傳輸速率。合理使用CSS技術，有利于網頁的設計與開發。

2 CSS技術在網頁中的引用方式

CSS技術的主要目的是使網頁的結構與樣式相分離。CSS樣式的引用方式十分靈活，設計人員可依據實際情況，選擇合適的引用方式來使用CSS樣式，同時，需注意各CSS引用方式的優先級。

2.1 行內樣式

該引用方式是直接在標簽中，通過設置STYLE屬性的值來設置相關對象的樣式。例如，要將某個段落中的字體大小設置為16像素，字體顏色設置為綠色。代碼如下：

XXXX

2.2 內嵌樣式

該引用方式，是在網頁文件內的標簽中直接內嵌。

2.3 鏈接外部樣式表形式

該引用方式，是在網頁文件外部，新建一個CSS文件，并將CSS樣式代碼寫在該文件中。同時在網頁文件中，通過LINK標簽將CSS樣式文件進行引入。

3 CSS技術在網頁設計中的實際應用舉例

本文以CSS精靈技術為例，詳述CSS技術在網頁中的應用。CSS精靈技術是CSS技術在網頁中的一個高級應用，合理使用可有效優化網頁加載速度。

3.1 原理

當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每幅圖像都需要通過一個請求才能顯示給用戶。

然而，小圖像在網頁中是十分常見的。許多零星的小背景圖像經常會被作為修飾用于網頁中。例如淘寶網的小欄目菜單，淘寶網的登錄窗口的小圖標，京東網站的分類列表，等等。當網頁中有太多的圖像時，服務器將頻繁地發送和接收請求，頁面的加載速度會受到極大的影響。如果這時網站訪問量很大，服務器的壓力就會大大增加。

為了有效地減少服務器接收和發送請求的次數，提高頁面的加載速度，出現了CSS精靈技術。CSS精靈技術是處理網頁背景圖像的一種方法。

它將一個頁面中使用到的分散的小背景圖像都聚集到一張大圖像中，這張大圖像被稱為精靈圖。瀏覽器只需發送一次服務器請求，就可一次性獲得所有的小背景圖。再通過背景圖片的定位來找到所需的小圖。比如說一個頁面需要12張小圖，我們把這12張小圖放到一張大圖中去。這樣，瀏覽器只需要向服務器發送一次請求，就可以得到所有的12張小圖，而不需要向服務器發送12次請求。CSS精靈技術的目的就是通過減少服務器發送和接收請求的次數，從而提高頁面的訪問速度。

3.2 實現要點

CSS精靈技術的實現要點是通過CSS背景屬性來確定圖片呈現的位置。CSS精靈圖其實就是將頁面中分散的小背景圖像聚集到一張大圖中。然而，網頁中的不同元素通常只需要精靈圖中不同位置的某一個小圖像，要在精靈圖中準確定位到這個小圖像，就需要使用CSS的背景屬性進行背景定位。

CSS的背景屬性主要包括background-repeat、background-image和background-position。background-image屬性用于設置背景圖像的路徑，background-repeat屬性用于設置背景圖像是否以及如何鋪排，Background-position屬性用于設置背景圖像的位置。這三個屬性中，最關鍵的是使用background-position屬性精確地定位。

3.3 代碼實現

以一個實際案例為例，使用CSS精靈技術，將圖1精靈圖作為素材，制作出圖2的頁面效果。

從圖2效果圖容易看出，頁面整體上是由一個列表構成。每個列表的左側都有一個用于修飾的小圖像。

首先，搭建頁面結構，設置列表項背景圖片。HTML代碼如下所示。

• 話費
• 車票
• 電影
• 游戲
• 機票

因為要在每個列表項里要放一個小圖片，

所以我們這里用了一個標簽來設置小圖片。給每個span標簽引用一個樣式，用來設置背景屬性。同時為列表和超鏈接添加相關樣式。

并且設置列表項里的span標記的背景圖像為精靈圖，背景鋪排方式為不平鋪，span的寬高和精靈圖中每個小圖像的寬高一致。

接著，我們還需要做的是，調整span的背景圖像的具體位置。我們可以通過background-position屬性來精確定位中背景圖像的位置。

先通過一個坐標，分析該如何實現背景圖像的精確定位，坐標如圖3所示。

在網頁坐標中，原點位于左上角。y坐標的值越往下越大，越往上越小。所以，對y坐標來說，精靈圖往下移動取正值，精靈圖往上移動取負值。對x坐標來說，x坐標的值越往右越大，越往左越小。所以，對x坐標來說，精靈圖往右移動取正值，精靈圖往左移動取負值。

圖3中框選出來的區域是span盒子的位置。Span盒子大小與精靈圖小圖像的大小是一致的。在初始狀態下，背景圖像加載進來，都是對齊到span盒子的左上角，所以我們最先看到的都是精靈圖的第一個小圖像。假設現在，第二個列表項需要顯示精靈圖中第二張火車的小圖像，我們只需精靈圖往上移動一段距離就可以。向上移動的距離為第二個小圖像Y坐標值的長度即可。即應當把background-position的值設置為0，-29px。表示精靈圖沿橫坐標方向不變，沿縱坐標方向往上移動29像素。這樣就可以定位到小火車這張小背景圖像。同理，如果背景要定位到第三張攝像機的小圖像，精靈圖需往上移動58像素，background-position的值應設置為0，-58px。如果背景要定位到飛機的小圖像上，background-position的值應設置為-29px，0px。表示精靈圖沿橫坐標方向往左移動29像素，沿縱坐標方向不變。

分析完畢，補充如下相應代碼。

ul li span.sp1{ background-position：0px 0px;}

ul li span.sp2{ background-position：0px -29px;}

ul li span.sp3{ background-position：0px-58px;}

ul li span.sp4{ background-position：0px-87px;}

ul li span.sp5{ background-position：-29px 0px;}

每個span盒子的背景圖不變，都為精靈

圖。平鋪規則也不變，改變的是背景的定位。

如此，每個列表項的背景都能正確顯示。

4 結語

在網頁技術日新月異的今天，CSS技術是一種十分便捷的網頁設計方式。它不僅提高了網頁設計的靈活度，而且還能加快網頁瀏覽的速度。所以，我們不僅要對其應用形式進行深入的研究，而且還需注意其代碼優化方法的應用，以更好地滿足應用需求，進一步促進CSS技術在網頁制作中的積極作用。

參考文獻

[1]高英.DIV+CSS網頁設計布局技巧分析[J].電子商務，2011，7（44）：60-61.

[2]馮小強.基于CSS技術的網頁布局探究[J].電腦知識與技術，2018，14（28）：244-245.

[3]陸郁.探析CSS技術在網頁制作中的應用與代碼優化[J].科技風，2019，1（88）：110.

[4]周芷儀，陳婷.淺談網頁中實現圖片輪播圖效果的方法[J].軟件，2018，39（10）：187-191.