css txt-aline,CSS—与文本有关的属性设置

字号font-size

//相对单位

font-size:14px; //px与当前使用的显示屏的分辨率有关，14px，即占用14个像素点。

font-size:1.5em; //em相对于文本对象内原来的字体尺寸，1.5em，即是原来该字所处段落的字体尺寸的1.5倍。

font-size:200%; //与em解释相同，2倍。

font-size:1.5rem; //这是css3的新增单位，详情看本文最下面。

//绝对定位

//in、cm、pt(基本不用，无需了解)

颜色color

color: #FF0000; //采用#+6位16进制表示

color: blue; //颜色名称

color: rgb(155,2,2);//r:红;g：绿;b：蓝;

字体font-family

引自这里，作者写的很好，我复制了一下，方便自己看。

font-family: Georgia, "Times New Roman",

"Microsoft YaHei", "微软雅黑",

STXihei, "华文细黑",

serif;

—规则：每种字体以,号分隔开；子体内有空格需加""；

优先使用排在前面的字体进行渲染，如果前面的字体不包括该字的渲染效果，则使用下一个字体。例如：

中文字体里面包括英文的渲染效果，但是比较丑。如果将中文字体放在前面，则英文也被强迫渲染啦。建议：将英文字体放在中文字体前面，这样英文字体将引文渲染后，无法对中文进行渲染，将对中文渲染的工作交给下一个字体。

如果font-family列举的字体，用户主机内都没有，则计算机采用默认字体进行设置。

—注意：将mac字体放在微软字体前(考虑mac用户)；同时列出中文字体的英文名称(兼容性考虑)

—理解：衬线体与非衬线体

百科上的一张图，很容易看懂

如图可以发现衬线体是比较具有装饰性的，比较好看，但是当字体小于14px时，字的可识别性降低。

—推荐：

font-family:Helvetica,Arial,//安全放心字体

"Microsoft Yahei","微软雅黑",//win7上才安装。

宋体, SimSun, //安全放心字体

STXihei, "华文细黑"；//微软雅黑在Mac平台的对应字体是华文细黑(STXihei)

//另有一种安全放心的英文字体是手写类，在需要可爱的地方可以用一下

// font-family:'Comic Sans MS

样式font-style

font-style: normal;//常规

font-style: intalic;//斜体

font-style: oblique;//斜体

粗细font-weight

font-weight:bold;

font-weight:normal;

//虽然可以用数字，但是这样就可以满足一般的要求啦。

行高line-height

我对于网上有些人简单粗暴地理解她为行间距，感到很生气，误导了我好一阵，参照W3C手册，正解是这样的。

段落行间距

多行文本

font-size:20px;

line-height:150%;//推荐。

//随着字体越大，行间距应该越小，所以行高也要越小。

—技巧：单行文本居中设置(参照上图不难理解)

p{

height:100px;//段落块的高度

line-height：100px;

}

段落修饰text-decoration

text-decoration:overline;//上划线

text-decoration:underline;//下划线

text-decoration:line-through;//删除线

text-decoration:blink;//闪烁

text-decoration:none;//无

注意：text-decoration:blink;大部分浏览器都不支持这一属性值，说明存在兼容问题，所以我们在编写时，应尽量不使用存在兼容问题的css属性。可以采用其他效果代替。

字符间距letter-spacing

设置字符(汉字或字母)间距。

letter-spacing：20px;

单词间距word-spacing

注意：实际上是针对空格的处理，在汉语间插入空格(不论多少)，也可以达到效果。

word-spacing: 8px;

文本缩进 text-indent

text-indent: 2em;//该段落的首行缩进2个字符长度。

—首行悬浮怎么实现？

text-indent:-2em;

padding-left:3em;

—解释：

首行缩进为负的2em

设置zuo

文本对其 text-aline

注意：指的是文本横向对齐

text-aline:center;

text-aline:left;

text-aline:right;

文本中空白处理 white-space

white-space: normal;//默认，不考虑空格，换行。

white-space: pre;//保留原来文档内部的换行，空格

white-space: nowrap;//强制性的要求文档处于一行。

文本大小写 text-transform

text-transform: capitalize;//首字母大写

text-transform: uppercase;//全部大写

text-transform: lowercase;//全部小写

text-transform: normal//默认

**文本中元素垂直对齐 vertical-aline **

这个属性存在很大的兼容性，不建议使用。等学的多了，再写一篇关于这个的。

CSS3对于字体的新功能。

通过Css3，web设计师再也不必被迫使用web-safe字体。

使用方法

在新的@font-face规则中，您必须首先定义字体的名称，然后指向该字体文件。如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称。

@font-face

{

font-family: myFirstFont; //设置字体名称

src: url('Sansation_Light.ttf'), //设置字体文件来源

url('Sansation_Light.eot'); /* IE9+ /

}

@font-face

{

font-family: myFirstFont; //设置字体名称

src: url('Sansation_Bold.ttf'), //设置字体文件来源

url('Sansation_Bold.eot'); / IE9+ */

font-weight:bold;

//设置条件，当需要让字体加粗时，会自动调用这个加粗的字体样式

}

div

{

font-family:myFirstFont;

}

加粗的字

文件 "Sansation_Bold.ttf" 是另一个字体文件，它包含了 Sansation 字体的粗体字符。只要 font-family 为 "myFirstFont" 的文本需要显示为粗体时()，浏览器就会使用该字体。

兼容性：

源自W3C

CSS3对于字号的新增单位：rem

参考这里

解释

使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

好处

这个的好处是相对于rm在使用时的不方便而来的。

如果在根元素或是content中已经声明过字体大小。

html{font-size:1.2em;}

这时如果需要对P元素在进行设置字号大小，

p{font-size:1.2em;}

—问题：浏览器默认为16px，根元素进行设置后，字号大小为：16*1.2=19.2px; em是相对单位，相对该内容原来的字号而定，p的原来大小即刚刚根元素设置的19.2px，现在又进行设置后，大小应该为：19.2*1.2=23.04，但是设计本意也许只是想让p为19.2px

—解决方法1：在根元素中这样声明字体

html{font-size：62.5%}

默认尺寸时：1em=16px;则现在的字体大小为：0.625*16px=10px;

那么12px=1.2em;此时，在后续元素更改字号时，可以参照1em=10px来进行设置。

—解决方法2：css3新增单位

当我们在body{font-size:1.2rem;}中进行设置后，再在body内子元素p{font-size:1.2rem;}进行设置，效果是一样的，他们的参照大小均是浏览器的默认大小。所以字号大小均是：1.2*16px=19.2px;