| 目錄：1、CSS注釋的書寫 怎麼寫？好處？2、CSS引入方式 各種的優缺點3、選取器的寫法與選取器的優先順序4、CSS命名規範5、背景，行高6、文本(text與font開頭)等所有屬性 |
| ① CSS注釋書寫規範： 1、單行注釋： 直接寫在屬性值的後面，如： ① .search{ border:1pxsolid#fff;/*定義搜尋輸入框邊框*/ background:url(../images/icon.gif)no-report#333;/*定義搜尋方塊的背景*/ } ② .wrap { /*height: 100px;*/ } 2、多行注釋： 分別在開始的地方及結束的地方注釋，如： ①/********Start 搜尋條開始********/ .search{ border:1pxsolid#fff; background:url(../images/icon.gif)no-repeat#333; } /********End 搜尋條結束*********/ ② <style type="text/css"> /*.tb { width:300px; font-size:12px; background:#6887D9; table-layout:fixed; }*/ </style> |
| ② CSS注釋書寫好處： 1. 利用注釋可以快速定位到複雜的字碼頁面中，可以高效的編寫樣式，使得代碼層次清楚，修改更加直觀。2. css註解（css 注釋）可以協助我們對自己寫的CSS檔案進行說明，如說明某段CSS代碼是什麼地方、功能、樣式等說明，以便我們以後維護具有一看即懂的方便性，同時在團隊開發網頁是時候合理適當的註解有利於團隊看懂css樣式是對應html哪裡的，以便順利快速開發網頁。 |
行注釋 |
// 這是行注釋，注意'//'後面有空格 /* 這是一段注釋 */ |
塊注釋 |
/* * 注釋以一行（*後面記得有空格） * 注釋以二行（*後面記得有空格） * 注釋以三行（*後面記得有空格） */ |
| 使用 <!--注釋內容--> 進行注釋 如：<body> <!-- <div class="wrap"></div> --> </body> |
| ① 外部引入：使用最廣泛，一個css檔案可控制多個頁面，從整站來講，減少代碼數量，提高載入速度，便於維護 ② 頭部引入：使用也比較多，載入速度快，一般用於訪問量較大的網站或首頁，但是整站代碼較多，不利於維護 ③ 標籤內寫：用得比較少，權重最高，代碼多，載入慢，不利於維護 ④ @import: 跟link類似，如果使用@import的話，要將@import放到樣式代碼的最前面，否則它將會不起作用 link與@inport區別：① @import url（）機制是不同於link的，link是在載入頁面前把css載入完畢，而@import url（）則是讀取完檔案後在載入，所以會出現一開始沒有css樣式，閃爍一下出現樣式後的頁面(網速慢的情況下)。 ② @import 是css2裡面的，所以古老的ie5不支援。 ③ 當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的 ④ link除了能載入css外還能定義RSS，定義rel串連屬性，@import只能載入css |
| 選取器種類： ① 標籤名選取器 ② ID名選取器 ③ 類別選取器 ④ 後代選取器 ⑤ 群組選取器 ⑥ 偽類別選取器 ⑦ 屬性選取器 ⑧ 萬用字元 ⑨ 子代選取器 選取器優先順序： ① CSS不同引入方式的優先順序：標籤內嵌樣式 > 頭部書寫樣式 > 外部參考樣式 > 瀏覽器預設樣式。 ② CSS選取器的優先順序：id > class > tagname. ③ 多個選取器混用時的優先順序：例子.a .b c{}和.a c{},它們指向的目標都是c，但是前者的優先順序高於後者。 註：當指向同一目標選取器的優先順序相同時，後面的優先順序大於前面的優先順序；當同一個標籤中定義有多個class名時，各個類別選取器之間的優先順序與html中的class名排列無關，而是與css檔案中各個類別選取器的排列有關。 |
| 1、規則命名中，一律採用小寫加中劃線的方式，不允許使用大寫字母或_ 2、命名避免使用中文拼音，應該採用更簡明有意義的英文但是進行組合 3、命名注意縮寫，但是不能盲目縮寫 4、不允許通過1 、2、3等序號進行命名 5、避免class與id重名 6、id用於標識模組或頁面的某一父容器地區，名稱必須唯一，不要隨意建立id 7、class命名必須言簡意賅 8、除了重設瀏覽器預設樣式外，禁止直接為html tag添加css樣式設定，例如：div { width:200px;height:100px;} 9、每一條規則應該確保選取器唯一，禁止直接為全域 .nav/.header/.body等類設定屬性 |
| 1、區分大小寫2、首寫符必須是字母，底線（ _ ）或者美元符($)3、除首字母外的字元，可以由字母，數字，底線，貨幣符號組成4、不允許包含空格 |
| background背景屬性： * background-color * background-position * background-size * background-repeat * background-origin * background-clip * background-attachment * background-image CSS3新增的屬性： background的文法：[詳見部落格背景圖合并知識整理] background-color：red | #RGB; background-position:X軸座標 Y軸座標 | left| right | center | top.. background-size: 100px | 30% | cover | contain; 線上測試 background-repeat: repeat | no-repeat | repeat-x | repeat-Y background-origin：border | padding | content background-clip：border-box | padding-box | content-box background-attachment：fixed | scroll background-image：url 簡寫的形式：background:color url() positon repeat； 備忘：background-size的屬性值如果只設定一個值，則第二個值會被設定為 "auto"。 cover：實現把背景映像擴充至足夠大，以使背景映像完全覆蓋背景地區。 contain：把映像映像擴充至最大尺寸，以使其寬度和高度完全適應內容地區line-height行高屬性：設定行間的距離（行高）。 文法： line-height : normal | <實數> | <長度> | <百分比> | inherit 行高與行距： line-height詳解 |
CSS 文字屬性
CSS 字型屬性
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
