标签归档：text
css文本属性word-spacing
使用word-spacing属性可在一个标签内的字之间添加空格。可以指定一个长度值或用关键字normal来恢复到正常字间距。例如： h1 {word-spacing: 50px} 可在<h1>标签内的字之间加入一个额外的50像素的空格。 在旅游网站建设中需要注意的是word-spacing属性和以前讲到的css文本属性letter-spacing 他们们的不同在于word-spacing属性是针对段落而letter-spacing是针对字母。 如：<li>DDDDDDDDDD DDDDDD</li>和 <li>旅 游线路2</li>中间打了一个空格就可以看到，word-spacing属性在打空格的地方空了50像素的间隔出来。 <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>无标题文档</title> <style type=”text/css”> li { line-height: 150%; word-spacing: 50px } </style> </head> <body> <ul> <li>旅游线路1</li> <li>旅 游线路2</li> <li>旅游线路3</li> <li>DDDDDDDDDD DDDDDD</li> <li>dddddddddd</li> … 继续阅读
css文本vertical-align属性
vertical-align属性控制某元素相对于包含这个元素的行的相对位置。这个属性的有效值包括： 1、baseline把元素的基线与包含这个元素的基线对齐。 2、middle把元素的中部与包含这个元素的中部(通常是x-height)对齐。 3、sub下标元素。 4、super上标元素。 5、text-top把元素的上端与其父元素字体的上端对齐。 6、text-bottom把元素的下端与其父元素字体的下端对齐。 7、top把元素的上端与当前行的最高元素的上端对齐。 8、bottom把元素的下端与当前行的最低元素的下端对齐。 此外，百分数值指出了相对于当前基线的一个位置，这样50%的位置就是在基线上一半行高处放置这个元素。100%位置值就是在当前行的基线下侧的一个整行行高处放置元素。 当这个属性应用于<img>标签或其他非文本内联元素时，Netscape会支持除middle之外所有用于文本元素的值，以及除sub以外的值。 Internet Explorer只有在这个属性应用于文本元素时才支持sub和super值，而且只在该属性应用于非文本内联元素时才支持所有值。
css文本属性text-transform
使用text-transform属性可以自动将文档的部分或全部文本转换成大写或小写字母。可接受的值为capitalize、uppercase、lowercase或none。 capitalize将文本中每个单词的第一个字母都显示为大写字母，即使源文档的文本是小写的。uppercase和lowercase值分别以相应的状态显示所有文本。当然，none会取消任何转换。例如： h1 {text-transform: uppercase} 这行代码使所有字母都显示为1级标题，其中文本为大写字母，而下列代码： h2 {text-transform: capitalize} 确定了2级标题中的每个单词都以大写字母开始，例如它适合于节标题。注意，当uppercase和lowercase影响整个文本时，capitalize影响的仅是文本中每个单词的第一个字母。 因此，用capitalize转换单词“htM1”时会生成“HtM1”。Netscape和Internet Explorer都支持text-transform属性。
css文本属性text-shadow
text-shadow属性允许通过阴影的使用使文本具有三维外观。这个属性值包括一个必需的偏移量，还有可选的模糊范围和颜色。这个属性可能包括用逗号分开的多于一个的属性值组来得到阴影层，而此后每组值都是叠加在前一层上的，但总是在原始文本的下面。 属性需要的偏移量由两个长度值组成：第一个值指定水平偏移量；第二个指定垂直偏移量。正属性值则把阴影放置在该文本的右下方，向右和向下的偏移量是由两个长度值指定的。负值则把阴影向左上方移动。 可选模糊范围也是长度值，它指定了模糊边框，而其效果则取决于输出代理。另一个阴影值是颜色。当然这可以是一个RGB组合或颜色名，用来指定阴影的颜色。如果不指定该值，text-shadow将使用color属性的颜色值。例如： h1 {text-shadow; 10px 10px 2px yellow} p:first-letter {text-shadow: -5px -5px purple, 10px 10px orange} 第一个text-shadow示例使得在文档的一级标题向后2个像素，向下10个像素，向右10个像素的位置出现模糊黄色阴影。 第二个示例在每个段落的第一个字母后产生2个阴影。紫色阴影的位置是第一个字母上面5个像素，左面5个像素的位置。 另一个阴影除了是紫色以外与第一个示例一样，其位置是每个段落第一个字母向右10个像素向下10个像素。 目前text-shadow属性大部份的浏览器还不支持所以在旅游网站建设中也不常用。比如IE所有的版本都不支持这一属性。
css文本属性text-indent
尽管该属性现在已经不像以前那样通用了，但这仍然是缩进文本段落首行的标准做法。诸如定义这样的某些文本块通常要凸出显示第一行如缩进，在旅游网站建设中text-indent属性一般用在文章段落，或者在旅游线路里面我们也可以用text-indent来控制列表的缩进。 CSS2的text-indent属性允许把这些特性应用到任何块标签上。使用长度和百分比值时：负值可以创建悬挂缩进，百分比值则确定了缩进量相对于父元素宽度的百分比。默认值为0。 要缩进文档中的所有段落，可以参考以下示例：p{text-indent: 3em}或者p{text-indent: 3px}等等。当段落的字体大小随浏览器的不同而发生改变时，长度单位em会相应调整缩进量。 使用悬挂缩进需要一些技巧，因为必须要注意元素的边框。负缩进不会移动文本的左边界，它仅仅会向左移动元素的第一行，可能将其移动到边界、边框或父元素的补白部分。由于这个原因，只有在把元素的左边界也向右移动，并且偏移量等于或大于悬挂缩进量时，悬挂缩进才能像预期得那样有效。例如： p.wrong {text-indent: -3em} p.hang {text-indent: -3em; margin-left: 3em} p.large {text-indent: -3em; margin-left: 6em} 上述代码创建了三种段落样式。第一种样式创建了一个向左边界延伸的悬挂缩进。第二种样式创建了一个常规悬挂缩进。第三种样式则创建了一个正文缩进量大于悬挂缩进量的段落样式。 Internet Explorer和Netscape都支持text-indent属性。
css文本text-align、text-decoration属性
1、text-align属性 文本相对页边的调整几乎是所有文字处理器都具备的基本特性。text-align属性使得HTML的任何模块级标签都具有了这个能力(遵循W3C标准的人们更希望对<div>和<p>这类的模块级标签使用CSS2的text-align样式，而不是使用显式的align属性)。该属性共有4个值：left、right、center或justify。默认值当然是left(注)。例如： div{text-align:left} 这行代码告诉能够识别样式的浏览器，向右边界对齐<div>标签内的所有文本。justify值告诉浏览器要把文本与左右边界对齐，从中间拉伸字母和词语可以适应这种对齐方式。 2、text-decoration属性 text-decoration(文字修饰)属性可以产生文本修饰，其中有些还可以用于最早的物理样式标签。它的值是下列关键字中的一个或多个：underline、overline、line-through和blink。值none是默认值，它告诉能够识别样式的浏览器要正常显示文本。 利用text-decoration属性定义不同链接的外观十分方便。例如： a:visited, a:link, a:active{text-decoration: underline overline} 上述代码将在文档中链接的上面和下面各加一条线。这种文本属性不能继承，而且非文本元素不会受到text-decoration属性的影响。 Netscape和Internet Explorer都支持text-decoration属性，好在并不支持其blink值。
css文本属性line-height
line-height属性在旅游网站建设过程中主要用在线路的列表上以及文章的段落上较多。因为line-height(行间距)属性可定义标签文本内容间的最小行间距。 通常情况下，浏览器会用单行距离来显示文本行，也就是说下一行的上端到上一行的下端只有几磅的间隔。通过增加行高，便可以增加行间距。line-height值可能是绝对或相对长度，百分比，缩放系数或关键字normal。例如： p{line-height: 14pt} p{line-height:120%} p{line-height: 2.0} 第一个示例将文本相邻行基线之间的行高设置为整14磅。第二个示例计算出行高为字体大小的120%。最后一个示例用缩放系数将行高设置为字体大小的两倍，创建了双倍行距的文本。默认值normal一般等于1.0-1.2的缩放系数。 旅游网站建设过程中，旅游线路列表line-height的应用如： <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>无标题文档</title> <style type=”text/css”> li { line-height: 150%; } </style> </head> <body> <ul> <li>旅游线路1</li> <li>旅游线路2</li> <li>旅游线路3</li> </ul> </body> </html> 请记住，line-height的绝对值和百分比值是根据font-size属性值来计算行高的。计算出的属性值将被子元素所继承。随后父元素或子元素对font-size的改变都不会影响计算出的行高。 另一方面，缩放系数将拖延到文本被实际显示出来时才计算行高。因此，改变fontsize只能局部影响line-height。总得说来，最好对line-height属性使用缩放系数，这样当字体大小改变时行高也会自动改变。 尽管通常认为与文本相关的line-height属性是与字体属性分离的，也可以把其值包括在font属性的缩略符号中。
css文本属性letter-spacing
样式表可以对字体属性和文本属性加以区分，前者控制文本的大小、样式和外观，而后者在旅游网站建设时可以控制文本对齐和呈现给用户的方式。 letter-spacing(字间距)属性在文本字符之间加入了额外的空格，如我们在旅游网站建设过程中想把每个文字的间隔拉开一些来显示，就可以用letter-spacing属性。设置后浏览器在显示文本时可以表现出来了。这个属性时可以使用长度值也可以使用默认关键字normal，表明浏览器应该使用正常的字符间隔。例如： .abc{letter-spacing:2px}或.abc{letter-spacing:2em}等等。 letter-spacing属性在旅游网站建设时也较为常用，比如旅游网站里的线路价格数字想把他们的间隔拉大些显示。或者用在旅游网站线路里的路线文字显示上。