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>