1. 程式人生 > >什麼是css,style,以css的各種樣式的比較

什麼是css,style,以css的各種樣式的比較

  1、  css是什麼,有什麼用,   

css指的是層疊樣式表,Cascading Style Sheets。解決是內容與表現相分離的問題

  2、一開始我們在html中設定字型是用font標籤來設定字型的顏色大小型別的,而現在我們用css來設定,每一個標籤都有自己的屬性,於是我們用p標籤,或者其他標籤的屬性style來設定字型的顏色大小型別:例子如下所示

<p style="color:red;  font-size:24px; font-family:'微軟雅黑'">你好</p>

3、style樣式寫在哪裡?各個寫法有的優缺點

 根據寫在哪裡,把style分為三類

行內樣式:  例:<p style="color:red;  font-size:24px; font-family:'微軟雅黑'">你好</p>

      好處:是能直接改,優先順序也是最高,對於單個不重複頁面處理容易,易於理解。

      缺點: 當頁面重複使用一種型別的style時,容易造成冗餘,後期程式碼量大,不易於維護。

內部樣式: 實現了內容與表現相分離

                    例: <style> 

                              p{ color:red;}

                            </style>

      好處:實現了內容與表現相分離,解決了內部樣式出現的冗餘的問題

      缺點:當頁面較多,且用到同一種樣式的時候,會造成冗餘

外部樣式:用單獨的css檔案表示,然後再在內部引用,即首先在css檔案下新建一個css檔案,用來放樣式,然後在html或者是要展示的檔案下引用樣式: <link rel="stylesheet" href="css的目錄地址">

  例:檔案demo.css下有  p{ color:red;}

在檔案index.html的body上下都可以,引用 <link rel="stylesheet" href="demo.css"> 即可

      好處:實現css的單個話,便於所用的要用的樣式用

      缺點:幾乎沒有,除了引用複雜,每一種型別的樣式都有他們獨特的好處

4、如果都作用在同一個樣式下的三種樣式,css的優先順序為:  行內樣式>內部樣式>外部樣式