CSS常用字型屬性(多出的文本隱藏,或者以省略符號的形式顯示)和背景樣式以及背景圖的2個不常用屬性:background-origin和background-clip

來源:互聯網
上載者:User

標籤:weight   移動   空白   劃線   起點   ati   位移量   表示   border   

(一)常用的字型屬性:

      font-weight: 屬性值100-900  400等於正常 700等於bold ,數值越大,越粗

      font-size:字型大小,單位可以為px或者%

      font-family:字型族 比如說:微軟雅黑

      font-style:字型的樣式 italic斜體 normal正常

      font-variant:small-caps 將字母轉化為小一號的大小字母

      注意:所有屬性也可以通過font一個屬性寫,例如:

               font:italic bold 75%/1.8 ‘Microsoft Yahei‘,sans-serif,寫的順序:font-style font-variant font-weight font-size line-height font-famiyl,多個樣式有空格分開,必須按照這個順序寫,font-size和line-height中間必須用/分開        (二)字型的顏色:color:屬性值可以寫顏色英文,例如:red           或者rgb(0-255,0-255,0-255);          或者rgba(0-255,0-255,0-255,0-1);0表示透明,1表示不透明       opacity:0-1;也表示透明。和rgba()的區別,該屬性會作用於後代標籤,而rgba()不會 (三)行距、對齊
              line-height (行高) :a.像素單位,比如48px b.不帶px 正常行高的倍數 c.百分數 同b(調整控制項中文字垂直方向垂直置中的方式,控制項的height=控制項的line-height)      text-align (對齊):區塊層級元素中文字的水平對齊left center right      letter-spacing (字元間距): 字與字之間的距離      text-decoration (文本修飾 ):底線underline 刪除線line-through 上劃線overline none(可以去掉超連結的底線)      overflow:控制超出範圍文本的顯示方式,auto根據文字多少自動顯示捲軸,scroll始終顯示捲軸,hidden超出範圍文本隱藏,也可以通過overflow-x、overflow-y設定水平和垂直方向      text-overflow:設定多餘文字的顯示方式,clip裁減掉,ellipsis省略符號,(重點,讓每行多餘的文字顯示省略符號,a.white-spacing:nowrap b.overflow:hiddern text-overflow:ellipsis)       text-shadow:(4個屬性值:水平陰影距離 垂直陰影距離 模糊距離 陰影顏色)文本的陰影,前面2個屬性值不能省。水平陰影距離越大,陰影右移。垂直陰影距離越大,陰影下移。陰影模糊距離,數值越大,陰影越來越模糊,預設為0,不模糊。陰影顏色,可以選,預設為黑色       text-indent:首行縮排,可以用像素值調整縮排大小      text-stroke:描邊的粗細,描邊的顏色      white-space:nowarp 設定中文行末不斷行顯示(中文預設自動換行,英文不會自動換行,根據空格會自動換行)      word-break:瀏覽器預設在空格處斷行,當一個單詞長度超出範圍時,會不斷行顯示,break-all允許在單詞內換行  (五)背景樣式:          background (縮寫形式)          background-color(背景色 )          background-image(背景圖 ):url(圖片的地址),背景圖和背景色同時存在,背景圖會覆蓋背景色          background-repeat(背景圖重複方式 ): no-repeat(不平鋪) repeat-x(水平平鋪) repeat-y(垂直平鋪) repeat平鋪(預設)          background-position(位置座標、位移量 2個屬性值:水平和垂直):指定位置:left/center/right ,可以寫像素或者百分比,唯寫一個屬性值,預設寫的是水平方向,另外一個方向預設垂直置中(注意:當使用像素時候,圖片的左上方往各個方向移動的實際距離, 當使用百分比的時候,建議不使用負數,代表去掉圖片後剩餘空白距離的分布比例,例如:background-positon:30% 水平方向去掉圖片後,剩餘的地區3:7分)          top/center/bottom 當唯寫一個屬性值的時候 另外一個預設置中          background-clip :border-box (從邊框外緣開始顯示)padding-box(從邊框內緣開始顯示) content-box(從文字內容開始顯示,不在顯示區的背景圖或背景色會被裁切不顯示)          background-origin:定位的起點 border-box(從邊框外緣開始) padding-box(從邊框內緣) content-box(從文字內容區開始)          background-size:背景圖片大小 一般2個屬性:寬度 高度,當只有一個屬性值的時候,預設為寬度,高度等比縮放          寬高的寫法:a.直接寫像素 b.寫百分比(父容器寬高的百分比) 

 

CSS常用字型屬性(多出的文本隱藏,或者以省略符號的形式顯示)和背景樣式以及背景圖的2個不常用屬性:background-origin和background-clip

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.