css基礎文法二（常用文本與背景屬性）

標籤：ati   隱藏   多個   核心   ext   十六進位   之間   height   寬度   

【CSS常用文字屬性】
 1、 字型、字型大小類：
① font-weight： 字型粗細。 bold-加粗、normal-正常、lighter-細體
 也可以使用100-900數值，400表示normal，700表示bold
 ② font-style: 字型樣式。 italic-傾斜、normal-正常
 ③ font-size: 字型大小。 可以寫px單位，也可以寫%
 200%表示瀏覽器預設大小(16px)的兩倍=32px
 ④ font-family: 字型系列(字型族)。
 >>> 可以直接寫字型名，也可以寫字型系列名。
 >>> 常用字型系列：serif-襯線體 sans-serif-非襯線體；
 >>> font-family可以接收多個值，用逗號分隔。表示優先使用第一個，如果沒有這個字型，依次向後使用。 通常，最後一個值放字型系列名；
 eg: font-family: "黑體","微軟雅黑",sans-serif; ⑤ font縮寫形式：

 >>> 順序必須是：
 font-weight font-style font-size/line-height font-family
 >>> 不同屬性之間，用空格分隔；
 >>> font-size/line-height必須一組，用/分隔；
 >>> font-family多個字型之間，用逗號分隔
 >>> eg： font: bold italic 32px/50px "微軟雅黑",serif;
 2、 字型顏色
 ① color： 字型顏色 可以使單詞、十六進位、RGB等
 ② opacity： 透明度，可選值0-1
 [opacity和RGBA的區別]
 >>> RGBA本身可以設定顏色，而opacity必須配合其他顏色屬性來用；
 >>> rgba僅僅是讓當前元素設定的顏色透明；
 而opacity，會讓當前元素裡面的所有文字、背景、子項目都透明；
 3、行距、對齊、其他類
① line-height: 行高。 可以寫px單位、可以直接寫數字(表示預設行距的幾倍)、可以寫% (表示預設行距的百分比)
 >>> 行高重要作用： 讓單行文字在div中垂直置中？
 設定行高等於div的高度，即可讓單行文字垂直置中。
 ② text-align：設定地區內的行級元素水平對齊left/center/right
 ③ letter-spacing： 字元間距，字與字之間的距離
 ④ text-decoration: 文本修飾；
underline-底線、overline-上劃線、line-through-刪除線、none
 ⑤ overflow： 設定超出地區文字的顯示方式。
 >>> overflow: hidden; 超出地區的文字隱藏不顯示；
>>> overflow: scroll; 無論文字多少，都會顯示水平垂直捲軸
>>> overflow: auto; 自動。文字多顯示捲軸，文字少，不顯示捲軸。
 >>> 可以使用overflow-x和overflow-y單獨修改兩個方向的捲軸
 overflow-y: scroll; overflow-x: hidden;
 ⑥ text-overflow：設定行末多餘文字的顯示方式；
>>> clip-多餘文字裁剪掉 ellipsis-多餘文字省略符號顯示
>>> 顯示省略符號，需要配合white-space: nowrap;使用
>>> 【重點】 設定行末顯示省略符號(三行代碼，缺一不可)
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
 ⑦ white-space: nowrap; 設定中文行末，不斷行顯示
 ⑧ text-indent: 首行縮排。
 ⑨ -webkit-text-stroke: 0.5px blue; 文字描邊。
 -webkit-表示只有webkit核心瀏覽器生效、常見的有chrome、safari
 ⑩ text-shadow: 文字陰影，有四個屬性值，空格分隔；
>>> 水平陰影距離，正數表示陰影右移，負數左移；
 >>> 垂直陰影距離，正數表示陰影下移，負數上移。

 >>> 陰影模糊距離， 0表示陰影一點不模糊；

 >>> 陰影的顏色；
 >>> eg:text-shadow: 20px -10px 2px blue;

 【CSS常用背景屬性】

 1、 background-color： 背景色
 2、 background-image: 背景圖。使用url("")選擇背景圖片。背景圖和背景色同時存在時，背景圖覆蓋背景色。
 3、 background-repeat: 背景圖的重複方式。
 no-repeat-不平鋪、repeat-平鋪、repeat-x-x軸平鋪、 repeat-y-y軸平鋪
 4、 background-size： 背景圖的大小
 [指定寬度高度]
 >>> 寬度高度的指定，可以寫px，也可以寫%(父容器寬高的百分比)
 >>> 當寫兩個屬性時，分別表示寬度、高度；
 當寫一個屬性時，表示寬度，高度將會等比縮放；
[其他屬性值]
 >>> contain: 圖片等比縮放，直到寬或高中較大的一邊縮放到100%為止。(可能導致較短的一邊<100%,圖片無法蓋住全部地區)
>>> cover： 圖片等比縮放，直到寬或高中較小的一邊縮放到100%為止。(可能導致較大的一邊>100%,圖片超出地區顯示不全)
 5、 background-position： 背景圖位移量
 >>> 指定位置： left/center/right top/center/bottom
 當，唯寫一個值時 ，另一個預設置中。
 >>> 指定座標： 兩個屬性分別表示 ：水平位移 垂直位移
 ① 座標的值，可以是px單位，也可以是百分數 ② 當寫px單位時：

水平方向：正數右移 負數左移 ； 垂直方向： 正數下移 負數上移；
 (左負右正 上負下正)
 ③ 當寫%百分數時：
 一般只能是正數。表示的是，去掉圖片的寬高，剩餘空白地區的分布比例。 eg：background-position:30%; 水平方向去掉圖片寬度，剩餘地區3:7分。

css基礎文法二（常用文本與背景屬性）