<output id="jbxdv"></output>

      1. 網站建設中的CSS基礎

        • 2019-07-16 15:28:18
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        使用HTML豐富的標簽可以輕松構建不同的網頁結構,但是在設計網頁時,控制網頁顯示效果方面,它的能力就比較弱,如果要在網站建設時設計美觀大方、賞心悅目的網頁效果,就要用到CSS。CSS彌補了HTML不足,為用戶提供了強大的頁面樣式美化和布局功能。

        1、認識CSS

        CSS是在HTML語言基礎上發展而來的,是為了克服HTML在網頁布局方面存在的不足。在HTML語言中,各種顯示效果的實現都是通過標簽來實現,然后通過標簽的各種屬性來定義標簽的顯示樣式。這造成了網頁代碼的臃腫、雜亂,網頁后期維護和控制變得非常困難。

        【示例】要在一段文字中把一部分文字變成藍色,HTML標識代碼如下:

        <p><font color=blue>顯示信息</font></p>

        而使用CSS之后,則上例代碼可以寫成:

        <p style="color: blue ">顯示信息</p>

        這樣簡單比較就可以看出CSS簡化了HTML中各種繁瑣的標簽,使得各個標簽的屬性在網頁設計時更具有一般性和通用性,并且樣式表擴展了原先的標簽功能,能夠實現更多的效果,樣式表甚至超越了網頁本身顯示功能,而把樣式擴展到多種媒體上,顯示了難以抗拒的魅力。這僅僅是一個小小的例子,如果把整個網頁,甚至全部網站都用一張或幾張樣式表來專門設計網頁的屬性和顯示樣式,讀者就會發現使用CSS的優越性,特別是對后期更改維護提供了方便。

        樣式表的另一個巨大貢獻就是把對象引入了HTML,使得可以使用JavaScript腳本控制網頁標簽的顯示效果,這在早期的HTML中實現起來會非常困難。CSS比較簡單、靈活、易學。除了可以控制文本屬性外,如字體、字號、顏色等,還可以設計復雜的網頁樣式,如對象位置、圖片效果、網頁布局等。通過CSS樣式表,可以統一控制HTML中各標簽的顯示屬性。對頁面布局、字體、顏色、背景和其他圖文效果實現更加精確的控制。用戶只修改一個CSS樣式表文件就可以實現改變一批網頁的外觀和格式,保證在所有瀏覽器和平臺之間的兼容性,擁有更少的編碼、更少的頁數和更快的下載速度。

        2、CSS基本語法

        樣式是CSS最小語法單元,每個樣式包含兩部分內容:選擇器和聲明(或稱為規則)。

         ?選擇器(Selector):選擇器告訴瀏覽器該樣式將作用于頁面中哪些對象,這些對象可以是某個標簽、所有網頁對象、指定Class或ID值等。瀏覽器在解析這個樣式時,根據選擇器來渲染對象的顯示效果。   

        ?聲明(Declaration):聲明可以增加一個或者無數個,這些聲明命令瀏覽器如何去渲染選擇器指定的對象。聲明必須包括兩部分:屬性和屬性值,并用分號來標識一個聲明的結束,在一個樣式中最后一個聲明可以省略分號。所有聲明被放置在一對大括號內,然后整體緊鄰選擇器的后面。   

        ?屬性(Property):屬性是CSS提供的設置好的樣式選項。屬性名由一個單詞或多個單詞組成,多個單詞之間通過連字符相連。這樣能夠很直觀地表示屬性所要設置樣式的效果。   

        ?屬性值(Value):屬性值是用來定義顯示樣式的參數,包括數值和單位,或者關鍵字。

        【示例】定義網頁字體大小為12像素,字體顏色為深灰色,則可以設置如下樣式:

        body{font-size: 12px; color: #CCCCCC;}

        多個樣式可以并列在一起,不需要考慮如何進行分隔。例如,定義段落文本的背景色為紫色,則可以在上面樣式基礎上定義如下樣式:                     body{font-size: 12px; color: #CCCCCC;}

        p{background-color: #FF00FF;}

        由于CSS語言忽略空格(除了選擇器內部的空格外),因此可以利用空格來格式化CSS源代碼,則上面代碼可以進行如下美化:

        body {    font-size: 12px;    color: #CCCCCC;}

        p { background-color: #FF00FF; }

        這樣在閱讀CSS源代碼時就一目了然了,既方便閱讀,也更容易維護。CSS使用“/*注釋語句*/”對樣式進行注釋。例如,對于上面樣式可以增加注釋:

        body {/*頁面基本屬性*/    font-size: 12px;    color: #CCCCCC;}

        /*段落文本基礎屬性*/

        p { background-color: #FF00FF; }

        當前文章標題:網站建設中的CSS基礎

        當前URL:http://www.freenetsites.com/news/wzzz/3053.html

        上一篇:網頁設計中的HTML屬性

        下一篇:網頁設計時的CSS基本用法

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>