Home >Web Front-end >HTML Tutorial >6.css文本样式_html/css_WEB-ITnose

6.css文本样式_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:17:161194browse

  文本样式,只要针对的是文本的效果和文本的方位,即文本样式文本控制总结起来有一表中的属性可用:

属性名 说明 CSS 版本
text-decoration 装饰文本出现各种划线 1
text-transform 将英文文本转换大小写 1
text-shadow 给文本添加阴影 3
text-align 设置文本对齐方式 1,3
white-space 排版中的空白处理方式 1
letter-spacing 设置字母之间的间距 1
word-spacing 设置单词之间的间距 1
line-height 设置行高 1
word-wrap 控制段词 3
text-indent 设置文本首行的缩进 1

 

文本样式

 1.text-decoration

  这是文本中的各种划线,有下面的值可以选择:

说明
none 让本身有划线装饰的文本取消掉
underline 让文本的底部出现一条下划线
overline 让文本的头部出现一条上划线
line-through 让文本的中部出现一条删除划线
blink 让文本进行闪烁,基本不支持了

 

/*让本来有下划线的超链接取消*/a {    text-decoration: none;}

 

 

 

2.text-transform

   英文文本的大小写转换,和字体的不同,不会出现小型大写字母的情况

说明
none 将已被转换大小写的值恢复到默认状态
capitalize 将英文单词首字母大写
uppercase 将英文转换为大写字母
lowercase 将英文转换为小写字母

p {    text-transform: uppercase;}

 

 

3.text-shadow

  文本阴影添加

p {    text-shadow : 5px 5px 3px black;} 

 

  解释:给文本添加阴影。其中四个值,第一个值:水平偏移;第二个值:垂直偏移;第 三个值:阴影模糊度(可选);第四个值:阴影颜色(可选)。

 

文本控制

1.text-align

  指定文本的对齐方式,有以下的值可以选择:

说明
left 靠左对齐,默认
right 靠右对齐
center 居中对齐
justify 内容两端对齐
start 让文本处于开始的边界(css3)
end 让文本处于结束的边界(css3)

 

p {    text-align: center;}

 

  注意:这里使用标签的话会没有效果,所以应该使用分组标签。

 

2.white-space

  处理空白排版方式

说明
normal 默认值,空白符被压缩,文本自动换行
nowrap 空白符被压缩,文本不换行
pre 空白符被保留,遇到换行符则换行
pre-line 空白符被压缩,文本会在排满或遇换行符换行
pre-wrap 空白符被保留,文本会在排满或遇换行符换行

  

p {    white-space: nowrap;}

 

  解释:浏览器在处理空白字符是时候有一个特性,当重复出现多个空白字符的时候,都把它们压缩成一个,下面是具体例子:

<span>Sc        olia</span><br />
<span>Sc olia</span>

 

    上面两个显示效果是一样的,虽然第一行那里c和o相隔很多个空白字符,但浏览器会将它们压缩成一个。

  而换行在默认条件下只有浏览器在一行显示不下就会自动换行,不管代码里是否是在一行内写完的,当然也可以通过设置改变这种默认行为。

3.letter-spacing

  设置文本之间的间距

说明
normal 设置默认间距
长度值 比如:“数字”+“px”

 

p {    letter-spacing: 4px;}

 

  解释:这个设置类似word文档中的文字间隔。

 

4.word-spacing

  设置英文单词之间的间距

说明
normal 设置默认间距
长度值 比如:“数字”+“px”

 

p {    word-spacing: 14px;}

 

  解释:单词的判定标准其实就是空格,类似于:

<span>scolia abc</span><span>你 好</span>

 

   只要用空格将一段文本分隔,那么分隔后的两个部分就是单词了,对中文也有效。

 

5.line-height

  设置段落行高

说明
normal 设置默认间距
长度值 比如:“数字”+“px”
数值 比如:1,2,3
% 比如:200%

 

p {    line-height: 200%;}

 

  解释:类似word中的行距。

 

6.word-wrap

  设置过长的英文单词是否断开

说明
normal 单词不断开
break-word 断开单词

 

p {    word-wrap: break-word;}

 

  解释:如果一个的单词很长,但一个视口显示不下,默认是不断开的,此时会出现横向的滚动条,若设置了断开,这会在一行显示满了以后自动换行。

 

 

7.text-indent

  设置文本首行的缩进

说明
normal 设置默认间距
长度值 比如:“数字”+“px”

 

p {    text-indent: 20px;}

 

  解释:就是控制缩进的。

 

   这里总结一下:

  文本样式:

    1.各种划线

    2.大小写转换

    3.阴影

  文本控制:

    1.对齐方式

    2.空白字符和换行处理

    3.文字间距

    4.单词间距

    5.行高

    6.单词断开

    7.首行缩进

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn