CSS文字

最新推荐文章于 2025-08-15 10:51:23 发布

jinjiangdongfang

最新推荐文章于 2025-08-15 10:51:23 发布

阅读量611

点赞数

分类专栏： CSS 文章标签： css xhtml div html border 浏览器

CSS 专栏收录该内容

14 篇文章

订阅专栏

CSS设计彻底研究

属性	含义	备注
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

 
    01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
    02<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    03<head> 
 
    04  <title>Universal vertical center with CSS</title> 
 
    05  <style> 
 
    06#outer {height: 100px; overflow: hidden; position: relative;} 
 
    07#outer[id] {display: table; position: static;} 
 
    08
 
    09#middle {position: absolute; top: 50%;} /* for explorer only*/ 
 
    10#middle[id] {display: table-cell; vertical-align: middle; position: static;} 
 
    11
 
    12#inner {position: relative; top: -50%} /* for explorer only */ 
 
    13/* optional: #inner[id] {position: static;} */   
 
    14
 
    15.withBorder{ 
 
    16    border:1px green solid; 
 
    17} 
 
    18</style> 
 
    19</head> 
 
    20
 
    21<body> 
 
    22<div id="outer" class="withBorder"> 
 
    23  <div id="middle"> 
 
    24    <div id="inner"> 
 
    25      any text any height any content, 
 
    26      everything is vertically centered. 
 
    27    </div> 
 
    28  </div> 
 
    29</div></body> 
 
    30</html>