CSS設計徹底研究5.1節筆記
屬性 |
含義 |
備忘 |
|
font-family |
字型 |
可以同時聲明多種字型，字型之間用逗號分隔。例：font-family: Arial, ”Times New Roman”; |
|
font-size |
文字大小 |
長度單位 |
|
相對單位 |
（1）px：相對於1個像素的比例，1px相當於1像素； （2）em：1em表示的長度是其父元素中字母m的標準寬度； （3）ex：1ex表示字母x的標準高度； （4）% |
||
絕對單位 |
（1）pt：point，印刷的點數，在一般的顯示器中1pt相對於1/72inch； （2）in：inch，英寸； （3）cm：centimeter，厘米； （4）mm：millimeter，毫米； （5）pc：pica，1pc=12pt。 |
||
line-height |
行高 |
表示的是兩行文字之間的基準（底線的位置就是文字的基準）的距離。 |
|
註：三個屬性的混寫：font:大小/行高 字型; |
|||
color |
文字顏色 |
|
|
background-color |
背景顏色 |
|
|
font-weight |
文字加粗 |
normal|bold |
|
font-style |
文字傾斜 |
normal|oblique（傾斜）|italic（意大利體） |
|
text-decoration |
文字效果 |
none|underline（底線）|overline（上劃線）|line-through（刪除線）|blink（閃爍，IE不支援） 註：同時應用多個效果時，中間用空格隔開。 |
|
text-align |
水平對齊 |
left|right|center|justify（左右對齊） |
|
vertical-align |
垂直對齊 |
只能用於表格儲存格中的對象豎直方向的對齊 |
|
text-indent |
段首縮排 |
如：text-indent:2em;（縮排2個字元） |
|
技巧：
1.設定首字下沉
.firstLetter{
font-size:3em;
line-height:3em;
float:left;
}
2.段落的垂直置中
（1）方法一：將行高（line-height）設定為與高度（height）相同的值
缺點：對於超過一行的文本，增加文本長度，或者是瀏覽器視窗變窄，於是文本需要折行顯示，這種方法就無效了。
（2）方法二：改進方法：multi-vertical.htm
HTML代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Universal vertical center with CSS</title>
<style>
#outer {height: 100px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
.withBorder{
border:1px green solid;
}
</style>
</head>
<body>
<div id="outer" class="withBorder">
<div id="middle">
<div id="inner">
any text any height any content,
everything is vertically centered.
</div>
</div>
</div></body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
