標籤：固定 direction radius dia medium col 適應 delay font
一、文本樣式：1. text-index:縮排文本
- ，用於段落首行縮排。
- 取值：text-index：2em（父級元素的2倍）；10%（父級寬度的百分之10；10px；
- 只能用於區塊層級元素，無法用於行內元素、映像元素。如果一個區塊層級元素首行有一個映像，它會隨文本移動。
- 使用負值，可實現“首行凸排”。
2. text-align：水平對齊
- 取值：
- left：靠左對齊，預設值。
- right：靠右對齊。
- center：置中。
- justify：左右對齊。
3. word-spacing：字（單詞）間隔
- 取值：normal：正常間隔，預設值，其值與設定0一樣。
- 取值可正可負，為正時增加間隔，為負時縮小間隔。
4. letter-spcing：字母間隔
- 修改的是字元或字母間的間隔。
- 取值和word-spcing相同。
5.text-transform：字元轉換。
- 取值：
- none：預設值，不改動。
- uppercase：轉換全大寫。
- lowercase：轉換全小寫。
- capitalize：每個單字首大寫。
6.text-decoration：文本裝飾。
- 取值：
- none：預設值。
- underline：加底線。
- overline：文本頂端上劃線。
- line-through：貫穿線。
- blink：文本閃爍。
- 不同裝飾作用同一個元素，其值會替換，而不積累。
7. direction：文本方向
8. color：文本顏色
- 取值：
- 顏色名稱（color-name）：如red。
- 16進位顏色（hex-number）：#ff0000
- rgb顏色：rgb（255,0,0）
9. line-height：行高
- 取值：
- normal：預設，合理行間距
- number（設定數字）：數字與字型尺寸相乘來設定行間距。
- length：還可以設定固定行間距，如20px；
- %：基於當前字型尺寸的百分比行間距。
10. vertical-align：垂直對齊
11.text-shadow：文字陰影
- 文法：text-shadow：10px 20px 30px red;
- 其中：10px代表水平延伸距離。20px代表垂直方向延伸距離。30px代表模糊值。
二、背景樣式1. background-color：背景色
- 取值：和color取值一樣。不同的是預設值為transparent（透明）。
2.background-image：背景映像
- 取值：
- none：預設
- background-image：url（“路徑”）設定背景
3.background-repeat:映像平鋪
- 前提：背景圖小於標籤時
- 取值
- no-repeat：不重複
- repeat-x：水平方向上重複
- repeat-y：垂直方向上重複
- repeat：全部重複（預設）
4. background-position：背景定位
- 改變映像在背景中的位置。
- 取值：top bottom left right 長度值等。
5. background-attachment：背景關聯
- 取值：
- fixed：背景固定，不隨文字移動而移動
- scroll：隨文字滾動而移動
- local：隨文字滾動，超出背景後，背景將逐漸收合。
6.background-size：背景映像尺寸
- 取值：
- cover：放大映像覆蓋背景地區（某些超出部分無法顯示）
- contain：縮放映像適應內容地區
- auto：保持原有圖片尺寸
- 數值，如background-size：80px 60px；其中80px是寬，60px是高
- %
7.background-origin：指映像相對於哪裡來定位，設定背景渲染地區
- 取值：
- content-box：內容地區
- padding-box：填充盒地區
- border-box：邊框盒地區
8.背景漸層①線性漸層：background：linear-gradient（to top，green，red，。。）
- 其中，to top：從下到上，表示方向，還可以取值：to bottom等，或者用度數：如45deg（即45度）
- 重複漸層：repeating-linear-gradient（to top，green 10% ，red 15%，blue 20%）
- 其中，10-15%代表green到red漸層地區，15-20%代表red到blue漸層地區
②放射狀漸層：
- 文法：background：radial-gradient（center，shape size 5%，start-color 10%，….，last-color）
- 其中：shape定義了形狀，取值：circle圓形，eclipse：橢圓形（預設）
三、字型樣式1. font-style：文本斜體設定
- 取值：
- normal：正常字型
- italic：斜體
- obligue：使文字傾斜（對於沒有斜體字的字型）
2. font-variant：定義元素的文本是否為小型的大寫字母
- 取值：
- normal：正常
- small-caps：小型的大寫字母
3.font-weight：字型粗細
- 取值：
- normal：400
- bold：粗體，相當於700
- bolder：比繼承值更重
- lighter：比繼承值更輕
- 用數值表示，取值為100 200 300 400 500 600 700 800 900
4.font-size：字型大小
5.font-family：字型名稱
- 取值：
- 字型名稱：若名稱有中文或空格，用引號括起
- 字型序列名稱
- 引用字型：
font-face{
font-family:”F53”; F53自訂名稱
src:url(“路徑”)；} 字型檔路徑
- 襯線體：serif：有筆鋒
- 非襯線體：sans serif 無筆鋒
四、邊框樣式1. border-width：邊框寬度
- 取值：
- 長度值，不可為負
- medium：預設邊框，3px
- thin：比預設細 1px
- thick：比預設粗 5px
2.border-style：邊框樣式
- 取值：
- none：無輪廓
- hidden：隱藏邊框
- dotted：點狀輪廓
- dashed：虛線輪廓
- solid：實線
- double：雙線
- groove：3D凹槽輪廓
- ridge：3D吐槽輪廓
- inset：3D凹邊
- outset：3D凸邊
- 用邊框畫三角形：
{width:0px;height:0px;border-top:30px solid transparent;border-left:30px solid transparent;border-right:30px solid red;border-bottom:30px solid transparent;}3.border-color：邊框顏色4.box-shadow：陰影
- 取值：
- none：無陰影
- inset：內陰影，否則為外陰影
- box-shadow：10px 10px 20px 5px darkgray inset；
- 第一個長度值定義陰影水平位移量，正值則右，負值則左
- 第二個長度值定義陰影垂直位移量，正值則底部，負值則頂部
- 第三個長度值定義陰影模糊值半徑，值越大越模糊，不允許負值
- 第四個長度值定義陰影外延值，正值則四面擴充，負值則向裡收縮
5. border-radius:定義圓角邊框
- 取值：
- length長度值：定義圓形半徑或橢圓半長軸、半短軸，非負值
- percentage百分比，水平方向上對比元素寬度，垂直方向上對比元素高度
{width：50px;height:50px;border:5px solid red;border-radius:50%;}五、列表樣式1.list-style：設定列表相關內容
- 文法：list-style：type position image；
2.list-style-type：設定列表標記
- 取值：
- disc：實心圓
- circle：空心圓
- square：實心方塊
- decimal：阿拉伯數字
- lower-roman：小寫羅馬數字
- upper-roman：大寫羅馬數字
- lower-alpha：小寫英文字母
- upper-alpha：大寫英文字母
- none：不適用標記
3. list-style-image：設定列表標記的映像
- 取值：
- url（“地址”）：使用絕對或相對位址指定列表標記映像
- none：不指定映像
4. list-style-position：設定清單項目如何根據文本排列
- 取值：
- outside：清單項目標記放置文本以外，且環繞文本，不根據標記對齊
- inside：清單項目標記放置文本以內，且環繞文本，根據標記對齊
5.列表：①無序列表：ul 即unorder list②有序列表：ol 即order list<ol> <li> </li></ol> <ul> <li> </li></ul>③自訂欄表：dl<dl> <dt></dt> 標題 <dd></dd> 文本</dl>④表格標記：table<table> <caption></caption> caption表格標題 <tr> tr代表行 <td><.td> td代表每行的儲存格 </tr><table>
<td colspan="4">0 </td> 該儲存格佔4列<td rowspan="2">0</td> 該儲存格佔2行
-表格頭：
<thead> <th></th></thead>
- 列表語義化格式：table>caption+(thead>th)+(tbody>tr>td)+(tfooter>tr>td)
六、其他
- hover的時候防震：
- ①改box-sizing：border-box；
- ②先把底線加上，佔有位置，設定透明，hover的時候出現
- ③給父級設定足夠的高與寬
- 延遲效果：
- transition：指定過度細節（單位ms）
- transition-delay：hover之後到開始出現的延遲時間
- transition-duration：從開始出現到結束的期間
- transition-property：延遲屬性，指定要過渡的屬性（必需設定）
- 雙向延遲：在原樣式標籤裡設定延遲屬性，在hover下同樣設定延遲則實現。
CSS樣式整理
