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

      1. 網頁設計時的CSS基本用法

        • 2019-07-17 13:25:12
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        CSS樣式代碼在網頁設計時必須保存在.css類型的文本文件中,或者放在網頁內<style>標簽中,或者在網頁設計時插在網頁標簽的style屬性值中,否則是無效的,瀏覽器會視其如普通的字符串,而不對其進行解析。詳細說明如下:   

        ?直接放在標簽的style屬性中。

        【示例1】在下面代碼中,直接使用style屬性為標簽定義樣式。

        <span style="color:red;">紅色字體</span>

        <div style="border:solid 1px blue; 

        width:200px; height:200px;"></div>

        這樣當瀏覽器解析這些標簽時,檢測到該標簽包含有style屬性,于是就調用CSS引擎來解析這些樣式碼,并把效果呈現出來。這種通過style屬性直接把樣式碼放在標簽內的做法被稱之為行內樣式,因為它與傳統網頁布局中在標簽增加屬性的設計方法沒有什么兩樣,這種方法實際上還沒有真正把HTML結構和CSS表現分開進行設計,因此不建議使用。除非為頁面中個別元素設置某個特定樣式效果而單獨進行定義。   

        ?把樣式代碼放在<style>標簽內。

        【示例2】在下面代碼中,把樣式代碼放置在<style>標簽內。

        <style type="text/css">body {/*頁面基本屬性*/    

        font-size: 12px;    

        color: #CCCCCC;}

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

        p { background-color: #FF00FF; }

        </style>

        網頁設計時設置<style>時應該指定type屬性,告訴瀏覽器該標簽包含的代碼是CSS源代碼。

        這樣當瀏覽器解析<style>標簽所包含的代碼時,會自動調用CSS引擎進行解析。這種CSS應用方式也被稱為網頁內部樣式。如果僅為一個頁面定義CSS樣式時,使用這種方法比較高效,且管理方便。但是在一個網站中,或多個頁面之間引用時,使用這種方法會產生代碼冗余,不建議使用,而且一頁頁管理樣式也是不經濟的。

        內部樣式一般放在網頁的頭部區域,目的是讓CSS源代碼早于頁面源代碼下載并被解析,這樣避免當網頁信息下載之后,由于沒有CSS樣式渲染而使頁面信息無法正常顯示。   

        ?保存在.css類型的文件中。

        把樣式代碼保存在單獨的.css類型文件中,然后使用<link>標簽或者@import關鍵字導入。這樣當瀏覽器遇到這些代碼時,會自動根據它們提供的URL把外部樣式表文件導入到頁面中并進行解析。關于這個話題將在之后詳細分析。這種應用樣式的方式也被稱為外部樣式。一般網站都采用外部樣式來設計網站的表現層問題,以便統籌設計CSS樣式,并能夠快速開發和高效管理。

        當前文章標題:網頁設計時的CSS基本用法

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

        上一篇:網站建設中的CSS基礎

        下一篇:網頁設計中的CSS樣式表

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