css006 文本格式化

css006 文本格式化

文本格式化：字体(font-family)、颜色(color)、字号(font-size)、

行距(line-height)、粗体(font-weight)、斜体(font-style)、

背景(background)、间距(word-spacing/letter-spacing)、

缩进(text-indent)、对齐(text-align)、大小写(text-transform)、

空白属性(white-space)、装饰(text-direction)

1、           使用字体：font-family

2、           使用web字体：？

@font-face{

fot-family:”league gothic”;

src:url(fpnts/league_gothic-webfont.ttf)

}

添加@font-face指令，告诉浏览器要使用什么字体，并告诉它要去哪里下载。最好放在样式表的最上方，方便开始就下载相应字体。

要考虑浏览器版本的兼容性（IE）

3、           Goole的web字体探秘：？

4、           如何给字体添加颜色：color

Color：#f00;

Color:red;

Color:rgb(255,0,0);

Color:rgba(255,0,0,0.5)  (最后面的.5表示透明度。透明度在0到1之间，0-不透明，1-完全透明)

5、           如何修改字号：font-size

单位：px/keyword/percentage/em

px:任意相应的数值+px;

Keyword:large/small/medium/xx-small/x-small/x-large/xx-large；

Percentage:相对于默认文本（16px）的百分比；

em:和percentage用法类似，也是相对于16px的百分比

6、           如何格式化词语和字母

斜体化：font-style:italic

粗体化：font-weight:bolid;

font-weight:normal;

大写化：text-transform：uppercase；

text-transform：lowercase；

text-transform：capitalize；（首字母大写）

text-transform：none；（不改变文本大小写）

小型大写字母：fong-variant:small-caps;

文本修饰：text-direction：underline；

text-direction：line-through；

text-direction：blink；

text-direction：underline line-through； （可以多个关键字一起使用，达到叠加的效果）

text-direction：none；

字母间距和字间距：letter-spacing：length；

word-spacing：length；

7、     如何给文本添加阴影：text-shadow（在IE9或更早的版本中无效）

text-shadow：3px 4px 5px #000；

（3px为水平偏移量：正在右，负在左；4px为垂直偏移量：正在下，负在上。 5px为模糊度，数值越大越模糊。 最后为阴影的颜色）

8、  如何格式化整个段落：p{……}

调整行间距：line-height（设置行高）

可用px/em/percentage表示行间距

可以用数字直接表示行高，不需要单位，和百分比效果一样

如：line-height：1.5；表示行高为字号的1.5倍

行高属性是继承的，但是继承的不是百分比，而是算出来后的行高，所以谨慎使用

对齐文本：text-align：center；

text-align：left；

text-align：right；

text-align：justify；（两端都对齐）

首行缩进并去除边距：text-indent和margin

text-indent：px/em;   (em值是以当前字母大小问基准)

控制段落之间的距离：margin-top 和 margin-bottom

如果直接用font来定义文本的各种属性，最后两个属性必须是：font-size（或 font-size/line-height）和font-family 。其他的属性顺序随便。

问题：如果文本的设置没有font-size（或 font-size/line-height）和font-family呢？怎么办？其他的属性还是可以随意顺序吗

格式化段落的首字母和首行:first-letter 和 first-line

如：p first-letter{ color:red; }

9、   如何给列表定义样式：？

列表的类型：有序列表（<ol>） 和 无序列表(<ul>)

list-style-type:circle;（空心圆形）

list-style-type:squar;（实心方块）

list-style-type:disc;(实心原点)

list-style-type:decimal;（十进制）

list-style-type:decimal-leading-zero;（十进制前面置零）

list-style-type:upper-alpha; /lower-alpha（大写/小写  字母）

list-style-type:upper-roman;/lower-roman （大写/小写 罗马字母）

list-style-type:none; （没有任何装饰）

ntn-of-type选择器

如：li{list-style-type:square;}

li:nth-of-type(odd){list-style-type:circle;}

方块和圆，交替使用

list-style-type：none；

给项目符号和项目序号定位

list-style-t-position：outside；/inside;

图形项目符号

list-style-image:url(……);

注：黑色问号是指在看目录时，自己什么东西都想不起来，不知道那个标题是什么东西的。

红色字体的问号是看完书后还不懂的东西。