文本属性
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"的段落。这个文本是蓝色的。