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代码
<p class="sycode"> <! 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 > </p>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
545
收藏
