css(文本格式化,文本格式處理)
文本格式化,文本格式處理
文本格式化
1、控制字體
1、指定字體
font-family:"microsoft yahei",arial,"宋體";
2、字體大小
font-size: px , pt 作為單位 30pt 16pt
常用字體大小：12px - 14px
3、字體加粗
相當於 <b></b>
font-weight : normal / bold ;
建議：通過 該屬性取代 b 標簽
4、字體樣式
斜體
font-style:normal / italic;
相當於<i></i>
5、小型大寫字母
font-variant : normal / small-caps;
6、字體屬性 font
將所有的屬性設置在一個聲明當中
font:font-style font-varaint font-weight font-size font-family;
eg:font:italic small-caps bold 12px "microsoft yahei",arial;
常用寫法:
font :font-size font-family;
font:bold 12px "microsoft yahei";
其他寫法:
font : font-size/line-height font-family;
font:12px/24px "microsoft yahei";
line-height : 行高
2、文本屬性
1、顏色
color : 顏色值 ;
rgba(255,0,0,0.5);
2、文本排列
text-align:left/right/center; 元素中的內容水平對齊方式，大部分主流瀏覽器，只對行內元素起作用，對塊不起作用
vertical-align:top / bottom / middle / baseline; 文本內容垂直對齊方式
baseline : 基線對齊
3、文字修飾(線條)
text-decoration:none / underline
none : 去除文本上的線條
underline : 下劃線
overline : 上劃線
linethrough : 刪除線 <s></s>
4、行高
每行文本所占據的高度。如果行高的值高於文本的高度，那麽這段文本會在行高範圍內垂直居中顯示。
使用方式：
1、將行高與容器高度設置為一致，從而使容器內的文本垂直居中顯示。(只針對一行數據)
2、如果想給文本增加上下的邊距，也可以使用line-height
5、首行文本縮進
讓元素內的首行文本，空出指定的像素值
text-indent:value;
6、文本陰影
text-shadow:h-shadow v-shadow blur color;
常用例子：text-shadow: 5px 5px 5px #FF0000;
3、文本溢出處理
1、處理空白
white-space:normal / nowrap;
出現場合：配合著overflow:hidden;來對超出範圍的內容進行隱藏。從而保證元素的高度
2、文本溢出
overflow:hidden; 元素對溢出後的處理
屬性:text-overflow:
取值:
clip : 裁剪、切割
ellipsis : 隱藏溢出內容並且顯示 ...
註意：text-overflow 要 配合著 overflow:hidden;一起使用
3、長單詞換行
屬性:word-wrap
值:normal / break-word(長單詞換行)
css(文本格式化,文本格式處理)