CSS-零基礎學習

 

CSS

1. 什麼是 CSS?
   1. CSS 指層疊樣式表 (Cascading Style Sheets)
   2. 樣式定義如何顯示 HTML 元素
   3. 樣式通常存儲在樣式表中
   4. 把樣式添加到 HTML 中，是爲了解決內容與表現分離的問題
   5. 外部樣式表可以極大提高工作效率
   6. 外部樣式表通常存儲在 CSS 文件中
   7. 多個樣式定義可層疊爲一
2. CSS的特點：
   1. 樣式表由樣式規則組成，以告訴瀏覽器如何顯示一個文檔
   2. 每個規則的組成包括一個選擇符---通常是一個HTML的元素---和該選擇符所接受的樣式
   3. 每個元素可以定義多個屬性，每個屬性帶有一個值，共同的描述選擇符如何呈現
3. CSS的樣式
   1. 樣式規則格式：
      • 選擇符{屬性:值}
   2. 單一選擇符的複合樣式聲明應該用分號分割：
      • 選擇符{屬性1:值1; 屬性2:值2}
4. 位置
   1. css定義的位置，可以在head，也可以在body中
   2. 外部引入，在頁面的外部創建的CSS文件，引入到html中
      • <link href="css/demo03.css" type="text/css" rel="stylesheet"/>
5. Css優先級
   1. 靠近原則：按照最靠近元素的定義來顯示
   2. 如果兩個css文件衝突,以後面的爲準
6. 註釋：在CSS中要主要寫好註釋信息，每個模塊，每個頁面的功能點都要說明。
7. 標籤選擇符
   1. 標籤選擇符
   2. 類選擇符
   3. ID選擇符
   4. 派生選擇符
      • 派生選擇器允許你根據文檔的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。
8. 字體屬性：
   1. font-family 字體
   2. font-style 字體樣式
   3. font-variant 小體大寫
   4. font-weight 字體粗細
   5. font-size 字體大小
   6. color 字體顏色
9. 顏色與背景屬性
   1. Color 顏色
   2. Background-color 背景色
   3. Background-image 背景圖案
   4. Background-repeat 背景圖案重複方式
   5. Background-attachment 背景的滾動
   6. Background-position 背景圖案初始位置
10. 文本屬性
    1. word-spacing 單詞間距
    2. letter-spacing 字母間距
    3. text-decoration 裝飾樣式
    4. text-transform 轉爲其他形式
    5. text-align 對齊
    6. text-indent 縮進
    7. line-height 行高
11. 僞類選擇符
    1. 對鏈接的修飾
    2. A:link 未訪問時的狀態
    3. A:hover 鼠標劃過時的狀態
    4. A:active 鼠標點中不放時的狀態
    5. A:visited 訪問過後的狀態
12. 邊距屬性
    1. margin-top 上邊距
    2. margin-right 右
    3. margin-bottom 下
    4. margin-left 左
13. 填充屬性
    1. padding-top 上填充
    2. padding-right 右
    3. padding-bottom 下
    4. padding-left   左
14. 邊框屬性
    1. Border-top-width 上邊框寬度
    2. Border-right-width 右
    3. Border-bottom-width 下
    4. Border-left-width 左
    5. Border-width 四邊
    6. Border-color 邊框顏色
    7. Border-style 邊框樣式
    8. Border-top |right|bottom|left 上(右|底|左)所有屬性
15. 邊距、填充、邊框
    1. 關係如下圖所示
16. 圖文混排
    1. Width 寬度
    2. Height 高度
    3. Float 文字環繞列表屬性
17. 列表屬性
    1. List-style-type 項目編號類型
    2. List-style-image 項目前圖片
    3. List-style-position 第二行位置
    4. List-style 全部屬性
18. 鼠標屬性
    1. Cursor
    2. 屬性值：
       • pointer 手形
       • Move 移動
       • Wait 沙漏
       • Crosshair "+"
19. 絕對定位
    1. 使用 position 屬性進行左和右對齊
    2. 對齊元素的方法之一是使用絕對定位：
    3. 實例

       • .right{
         position:absolute;
         right:0px;
         width:300px;
         background-color:cyan;
         }

          

    4. 提示：因爲絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index 屬性來控制這些框的堆放次序。
20. 浮動
    1. CSS float 屬性
    2. 在 CSS 中，我們通過 float 屬性實現元素的浮動。
21. 圖像的透明度
    1. 定義透明效果的 CSS3 屬性是 opacity。
    2. IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設定透明度。opacity 屬性能夠設置的值從 0.0 到 1.0。值越小，越透明。

       • img{
         opacity:0.4;
         	filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */
         }

          

    3. 圖像透明度 - Hover 效果

       • img{
         	opacity:0.4;
         }
         img:hover{
         	opacity:1.0;
         }

          

22. 導航欄
    1. 熟練使用導航欄，對於任何網站都非常重要。
    2. 使用CSS你可以轉換成好看的導航欄而不是枯燥的HTML菜單。
    3. 導航欄=鏈接列表
    4. 作爲標準的HTML基礎一個導航欄是必須的。在我們的例子中我們將建立一個標準的HTML列表導航欄。導航條基本上是一個鏈接列表，所以使用 <ul> 和 <li>元素非常有意義：

    5. <ul>
         <li><a href="#home">主頁</a></li>
         <li><a href="#news">新聞</a></li>
         <li><a href="#contact">聯繫</a></li>
         <li><a href="#about">關於</a></li>
       </ul>