HTML/CSS中文本text属性详解

来源：互联网发布：淘宝手机卡编辑：程序博客网时间：2024/06/09 16:16

我们可以通过添加一些HTML标记和CSS属性来设置text文本的样式。
HTML中的标记包括结构化标记和语义化标记两种，结构化标记简单来说是用来标记标题和段落的，而语义化标记则是不会影响到网页的结构。
机构化：<h1>标题、斜体、加粗、上标、下标、 换行、<hr />下划线。
语义化：斜体、加粗，参数有：normal、blod、bolder、lighter、100-900的整数等、<addr>缩写词、<cite>引用，一般为斜体、<ins>下划线、<del>删除线、<s>删除线、背景标记、字体变小为原来的85%、<big>放大。
Css属性设置样式
font-style:设置字体倾斜，可能的属性有normal、italic、oblique;
line-height:设置字体的行间距;
letter-spacing:控制字母之间的距离；
text-overflow:当文本溢出包含元素时发生的事情；可能的值有
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
word-spacing :控制单词间空格的距离，以空格来区分单词，中英都OK；
text-decoration :控制文本是否有下划线，可能值有
none 没有下划线
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
underline 定义文本下的一条线。
text-transform :控制英文的大小,可能的值有
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
text-align:控制文本的对齐方式
text-indent :控制文本首行的缩进，px或%都可；
white-space:控制文本与文档源代码的关系，可能值有
normal 默认，空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
来看下面两个例子：
列1：
<html>
<head>
</head>
<body>
<div style="width:400px;border:2px solid red;line-height:50px;text-indent:35px;letter-spacing:10px;font-style:italic;">
这是一个例子这是一个例子
</div>
这是第一个<abbr title="这是例子的具体信息">"例子11"</abbr>。。。<hr />
<ins><s>这是第二个"例子22"。。。</s></ins>
这又<big>是一个</big>例子
</body>
</html>
列2：

<html>
<head>
<style type="text/css">
.p1
{
white-space: normal;
}
.p2
{
white-space: pre;
}
.p3
{
white-space: nowrap;
}
.p4
{
white-space: pre-wrap;
}
.p5
{
white-space: pre-line;
}
.p6
{
text-transform:capitalize;
}
</style>
</head>
<body>

这是一些文本这是一些文本这是一些文本
这是一些文本。


这是一些文本这是一些文本这是一些文本
这是一些文本。

这是一些文本这是一些文本这是一些文本
这是一些文本。

这是一些文本这是一些文本这是一些文本
这是一些文本。

这是一些文本这是一些文本这是一些文本
这是一些文本。

aaaaaAAAAABBBBBaaaaabbbbb
</body>
</html>

0 0