html和css總結

1. css:用於控制網頁的外觀，包括內容和影像的定位，不同顏色使用。
2. css有四種方法：1.內嵌樣式 2.內部樣式表 3.外部樣式表 4.瀏覽器預設設定（預設的值），優先順序依次遞減。內嵌優先順序最高!
3. css外部引用的方法：<link rel="stylesheet" href="test-css.css" type="text/css">
4. css同時給一個標籤的同一個屬性給了不同值，那麼後面的會覆蓋前面的值。
5. css的語法:選擇器{宣告1；宣告2}其中宣告包括屬性=值。eg：p{color="red";fontsize="14px"}p{color:rgb(143,12,12);fontsize="14px"}一個值包括幾個單詞時需用引號。比如某些字型的值。
6. 選擇器分組用“，”；“*”為選中所有標籤。
7. 派生選擇器：某個標籤下的子標籤。方法：父標籤和子標籤之間用空格。eg：h1 p{....}指給h1下的p標籤設定css樣式。
8. “#”定義id.eg:#id名。“.”定義類選擇器。eg：.center
9. id和class的區別：id只能用一次，class可以被引用多次。
10. class和id 都可以有派生用法。eg.center li意思為class=center的標籤下的li標籤
11. “[]”定義屬性。eg：[title]，或者[title=wsschool]，或者[title~=hello]或者[title|hello]可以有值可以無值可以包含。（後面兩種都是包含，但前一種適用於空格 連線的屬性值，後一種適用於連字元連線的屬性值。屬性選擇器多用於對其他人程式碼的維護

---

常用屬性

1. backgroud
2. backgroud-image
3. backgroud-repeat
4. backgroud-position
5. text-align
6. word-spacing
7. letter-spacing
8. text-transform：轉換大小寫
9. text-decoration：文字裝飾，其值有：underline，overline，bink，line-through
10. border-width
11. border-style
12. border-color：可以有三種表示顏色的方式。eg：border-color{red},border-color{rgb()},border-color{#16位制顏色}
13. white-space：處理文字的格式。其值有：pre，nowrop（不換行），pre-wrap（保留空白，不換行），pre-line（保留空白，換行）
14. list-style-type
15. list-style-image：給定url
16. list-style-position
17. border-collapse：邊框合併
18. padding：內邊距，可以有撐開元素的效果
19. content：用於給偽元素插入內容
20. attr：獲取屬性？

偽類

1. 偽類用於元素狀態改變時的設定。常用於點選連結時連結顏色的改變，但一定注意順序！a:link；a:visited；a:hover；a:active

偽元素

1. 偽元素給元素標籤裡的特定內容設定樣式。常用的有first-letter，first-line，before（在元素之前新增內容），after（在元素之後新增內容）。eg：p:before{content:url(logo.gif)}效果為在p標籤原有內容之前新增一個圖片。

Spring（圖片替換文字）技術

1. 一種意義：將文字替換為圖片來展示，可增加效果。
2. 第二種意義：

優先順序（權重）

<p style> 優先順序最高 <style></style>優先順序次之 link.css tab 優先順序最低 style(a)，id（b）,類屬性和偽類（c），元素和偽元素（d） “！important”優先順序在所有裡最高。

css3

1. border-radius:圓角邊框
2. border-radius：瀏覽器核心：-moz-；-webkit-，-o-注意宣告。
3. box-shadow：10px（陰影右邊距） 20px(陰影下邊距） 5px（模糊化）
4. boder-image：url（""）30 30 round/stretch
5. backgroud-size
6. backgroud-origin:
7. text-shadow
8. word-wrap:

盒模型

1. ：padding：不能為負值，百分比時是相對父級元素的wdith值，不是height值，只給定三個值時，代表上，左右，下。
2. border：沒有style則不會顯示。transparent為透明。
3. margin：可以有負值，負值時有可能會覆蓋其他元素。預設值一般為0，但是有的瀏覽器會對有的元素設定預定的樣式，因此最好*{margin=0；}然後再單獨給需要的元素設定。margin{0，auto}，auto會相對與父元素居中。在子元素中設定margin值，那麼這個margin會傳遞給父元素去顯示，而不是在子元素中顯示。解決方法是給父元素設定padding值而不是給子元素設定margin值。！