HTML-CSS相關(2)

來源:互聯網
上載者:User

標籤: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)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.