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代码
Universal vertical center with CSS title > #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 > any text any height any content, everything is vertically centered. div > div > div > body > html >
登录后复制
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3088600.html
