学习css之文本属性

css3之文本属性:  

1、缩进和水平对齐:text-indent,

通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进6 em:p {text-indent:6em;}

text-indent 属性可以继承.

2、水平对齐:text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。

取值范围:{left:把文本排列到左边。默认值:由浏览器决定;

      right:把文本排列到右边。;

      center:把文本排列到中间;

      justify:实现两端对齐文本效果。;

      inherit:规定应该从父元素继承 text-align 属性的值。}

text-align:center 与 <CENTER>区别----您可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相同。

<CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。

text-align:justify----在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。

3、字间隔:word-spacing属性,指定单词之间的标准间距。取值范围:{normal = 0。x:用户设置。inherit:继承}。

4、字母间隔:letter-spacing属性,修改字母或者字符之间的间隔。取值范围和字间隔一样。

5、文本转换:text-transform属性,处理文本的大小写。取值范围:{none:不做处理,uppercase:将文本转为全大写,lowercase:将文本转为全小写,capitalize:只对首字母转化为大写}。

6、文本 装饰:text-decoration属性,取值范围:{none--没有,underline--加下划线,overline--上划线,line-through--贯穿线,blink---让文本闪烁}。

7、处理空白符:white-space属性,影响到用户代理对源文档中的空格、换行和tab字符的处理。取值范围:{

    none:合并空白符,忽略换行符,自动换行;

    pre-line:合并空白符,保留换行符,自动换行;

    nowrap:合并空白符,忽略换行符,不允许自动换行;

    pre:保留空白符,保留换行符,不允许自动换行;

    pre-wrap:保留空白符,保留换行符,允许自动换行;

}。

8、文本方向:direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的。ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。

9、文本颜色:color属性,设置文本颜色,值可取正确颜色值。

10、文本阴影(css3):text-shadow属性,能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色,如:text-shadow: apx bpx cpx #FF0000;a:代表水平阴影;b代表垂直阴影;c代表模糊距离,最后代表颜色,这个三个值之间没有逗号,只是空格哦。

11、自动换行(css3):word-wrap属性,单词太长的话就可能无法超出某个区域,在 CSS3 中,word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分,取值范围:{break-word}

13...css3,对css文本属性又添加11个等,这里就不先不写了

时间: 2024-10-06 00:20:49

学习css之文本属性的相关文章

css常用文本属性

[CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal,700表示bold ② font-style: 字体样式. italic-倾斜.normal-正常 ③ font-size: 字号. 可以写px单位,也可以写% 200%表示浏览器默认大小(16px)的两倍=32px ④ font-family: 字体系列(字体族). >>> 可以直接写字体

web前端学习笔记:文本属性

今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常用的文本格式化效果.有的网站在段落的第一个字母前放一个很小的透明图像,这些图像将文本推到后面来制造一种缩进文本的感觉.另外一些网站则使用完全标准的空格(spacer)标记.而在CSS中有一种更好地方法实现文本缩进.那就是text-indent属性. 通过使用text-indent属性,所有元素的第一

web前端——CSS 10 文本属性和字体属性

文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 color属性 文本首行缩进 text-indent 属性规定元素首行缩进的距离,单位建议使用em 文本修饰 text-decoration属性规定文本修饰的样式 属性值:none(默认) | underline(下划线) | overline(定义文本上的一条线)  | line-through (定义

css的文本属性与边框属性

文本属性 text-align:center 横向居中 line-helight:100px 文本行高,可设纵向居中 text-indent:150px 首行缩进 letter-spacing:10px 字符间距 word-spacing:20px 单词间距 text-transform:capitalize 首字母大写,一般设定标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&

(十一)学习CSS之float属性

参考:http://www.w3school.com.cn/cssref/pr_class_float.asp 定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 值 描述

(三)学习CSS之opacity 属性

参考:http://www.w3school.com.cn/cssref/pr_opacity.asp opacity 属性设置元素的不透明级别. <!DOCTYPE html> <html> <head> <style> div { background-color:red; opacity:0.5; filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */ } </style> </head> &l

(六)学习CSS之color属性

参考:http://www.w3school.com.cn/cssref/pr_text_color.asp color 属性规定文本的颜色. 这个属性设置了一个元素的前景色(在 HTML 表现中,就是元素文本的颜色):光栅图像不受 color 影响.这个颜色还会应用到元素的所有边框,除非被 border-color 或另外某个边框颜色属性覆盖. 要设置一个元素的前景色,最容易的方法是使用 color 属性. 值 描述 color_name 规定颜色值为颜色名称的颜色(比如 red). hex_

(五)学习CSS之line-height属性

参考:http://www.jb51.net/w3school/css/pr_dim_line-height.htm line-height 属性设置行间的距离(行高). 注释:不允许使用负值. 值 描述 normal 默认.设置合理的行间距. number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距. length 设置固定的行间距. % 基于当前字体尺寸的百分比行间距. inherit 规定应该从父元素继承 line-height 属性的值.

(十二)学习CSS之display属性

参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"."run-in"."table"."table-caption"."table-cell".&qu