【学习笔记之CSS+DIV】CSS文字
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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>