HTML-CSS相關（2）

標籤：top   進位   字型   under   中文   over   字型樣式   enter   文字陰影   

【CSS常用文字屬性】
1，字型、字型大小類：
① font-weight:字型粗細。 bold-加粗 noemal-正常 lighter-細體
也可以使用100-900數值，400表示normal，700表示bold。
② font-style： 字型樣式。italic表示傾斜，normal-正常
③ font-size： 字型大小.可以寫px單位，也可以寫%
200%表示瀏覽器預設大小（16px）的兩倍=32px。
④ font-family:字型系列（字型族），
>>>可以直接寫字型名，也可以寫字型系列名，
>>>常用字型系列有 ：serif-襯線體 sans-serif 非襯線體；
>>>font-family可以接受多個值，用逗號分隔。表示優先使用第一個，如果沒有這個字型一次向後使用，
通常，最後一個放字型系列名。
font-family: "微軟雅黑",sans-serif;
⑤ font縮寫形式：
>>>順序必須是 style weight font-size/line-height font-family
>>>不同屬性之間用空格分隔
>>>size/line-height 必須一組，斜線分隔。
>>>font-family多個字型之間，用逗號分隔
eg:font:bold italic 32px/50px "微軟雅黑";
2,字型顏色
① color:字型顏色。可以是單詞、十六進位，RGB等。
② opcity: 透明度。可選值0-1。
[opcity和rgba的區別]
>>>rgba本身可以設定顏色，而opcity必須配合其他顏色屬性來用；
>>>rgba僅僅是讓當前元素設定的顏色透明；
而opcity，會讓當前元素裡面的而所有文字，背景，子項目都透明。
3，行距、對齊類
① line-height:行高。可以寫px單位、可以直接寫數字（表示預設行距的幾倍）、也可以寫百分比（預設行距的百分比）
>>>行高重要作用：讓單行文字在div中垂直置中，設定行高等於div的高度,即可設定讓單行文字垂直置中。
② text-align: 設定地區內的行級元素水平對齊。left center right
③ letter-spacing:：字元間距。字與字之間的距離。
④ text-decoration:文本修飾
underline-底線 overline-上劃線 、line-through-刪除線、none.
⑤ overflow:設定超出地區文字顯示方式。
使用overflow樣式可以設定文字超出地區的顯示方式
>>> overflow:hidden;超出地區的文字隱藏不顯示
>>> overflow:scroll;無論文字多少都會顯示水平垂直捲軸
>>> overflow:auto;自動，文字多顯示捲軸，文字少不顯示捲軸。
>>>overflow-y; overflow-x;單獨修改兩個方向的捲軸
overflow-y:auto; 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:文字描邊
-webkit-：表示只有webkit核心的瀏覽器生效，常見的有chrome、safari（蘋果瀏覽器）
⑩ text-shadow:文字陰影有四個屬性值，空格分隔。
>>>水平陰影距離 正數表示陰影右移，負數左移
>>>垂直陰影距離 正數表示陰影下移，負數上移
>>>陰影模糊距離 0表示陰影一點不模糊
>>>陰影的顏色

【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單位時:* 水平方向：正數右移，負數左移
 垂直方向：正數下移，負數上移
 （左負右正，上負下正）
 ③ 當寫百分數時，一般只能是正數。表示的是，去掉圖片的寬高，剩餘空白地區的分布比例。例如：background-position:30% 表示的是
 水平方向去掉圖片寬度，剩餘地區3:7分。

負邊距

【1、實現區塊層級元素在父容器中水平垂直置中】
① 設定子項目為定位元素
left: 50%; margin-left: -width/2px;
top: 50%; margin-top: -height/2px;

【2、使用負邊距增大元素的寬度】
① 子容器的寬度不指定，指指定高度，或者由內容撐開高度
② margin:0px -50px; 可以使左右兩邊均超出父容器50px

 

HTML-CSS相關（2）