td 首行缩进_文本属性以及字体尺寸

文本属性

1. 对齐方式：text-align(适用对象：块级元素和表格中的单元格)

文本属性

/*适用对象：块级元素和表格中的单元格*/

/*居中*/h1 {text-align:center;}/*左对齐*/p.diary{

text-align:left;

}/*每一行被展开为宽度相等，左，右外边距是对齐*/

/*两端对齐*/p.main {text-align:justify;}/*右对齐*/p.date {text-align:right;}/*表格中的单元格数据*/td{

text-align: center;

}

段落中CSS text-align 实例

我的日记

“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”

2020 年 4 月 7 号

注意： 重置浏览器窗口大小查看 "justify" 是如何工作的。

表格CSS text-align 实例

学号	姓名
01	王五
02	李四

2. 文本的首行缩进：text-indent(用来指定文本的第一行的缩进) (适用对象：块级元素和表格中的单元格)

文本属性

/*适用对象：块级元素和表格中的单元格*/

/*居中*/h1 {text-align:center;}/*左对齐*/p.diary{

text-align:left;

}/*每一行被展开为宽度相等，左，右外边距是对齐*/

/*两端对齐*/p.main {text-align:justify;}/*右对齐*/p.date {text-align:right;}/*文本缩进*/p.information{

text-indent: 2em;

}/*表格中的单元格数据*/td{

text-align: center;

}

段落中CSS text-align 实例

我的日记

“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”

2020 年 4 月 7 号

注意： 重置浏览器窗口大小查看 "justify" 是如何工作的。

表格CSS text-align 实例

下面的是一个学生信息表

学号	姓名
01	王五
02	李四

3. 字行行高：line-height(文本中基线最小的距离)(适用对象：所有对象)

顶线、中线、基线、底线

行高(line-height)：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行高。一般情况下，也可以认为是相邻文本行基线间的距离。

注意：基线(base line)并不是汉字文字的下端沿，而是英文字母“x”的下端沿。

行高

line-height: 2em;

}

p.number{

line-height: 2;

}

p.small {line-height:70%;}

p.big {line-height:200%;}

这是一个标准行高的段落。
这是一个标准行高的段落。
大多数浏览器的默认行高约为110%至120%。

这是一个2em行高的段落。
这是一个2em行高的段落。

这是一个2倍行高的段落。
这是一个2倍行高的段落。

这是一个更小行高的段落。
这是一个更小行高的段落。

这是一个2倍行高的段落。
这是一个2倍行高的段落。

4. 单词之间的空白空间：word-spacing(适用对象：所有对象)

单词之间的空白空间

{

word-spacing:30px;

}

Thisis some text. This issome text.

5. 字符之间的空间：letter-spacing(适用对象：所有对象)

字符之间的空间

/*增加字符之间的间隔*/h1 {letter-spacing:2px;}/*减少字符之间的间隔*/h2 {letter-spacing:-3px;}/*汉字之间的间距*/p.charset{letter-spacing: 2em;}/*p{word-spacing: 3em;}*/

This is heading 1

This is heading 2

“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；

“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；

6. 文本装饰：text-decoration(不可继承)

文本装饰

/*text-decoration: underline;*/

/*上划线*/

/*text-decoration:overline;*/

/*删除线*/

/*text-decoration:line-through;*/text-decoration: blink;(默认)

}

a{

text-decoration: none;

}

“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；

取消下划线

7.  改变字母大写：text-transform

字符之间的空间

}

h2{/*全部大写*/text-transform: uppercase;

}

h3{/*全部小写*/text-transform:lowercase;

}

This is heading 1

This is heading 2

This is heading 3

8. 文本阴影：text-shadow

文本阴影

h1 {text-shadow:2px 2px #FF0000;}

Text-shadow 效果

注意： Internet Explorer 9 以及更早的浏览器不支持 text-shadow 属性。

9. 文本颜色：color

文本颜色

h1 {color:#00ff00;}

p.ex {color:rgb(0,0,255);}

这是标题 1

这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。

这是一个类为"ex"的段落。这个文本是蓝色的。