CSS文本实例

CSS 文本属性可定义文本的外观。

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
#############################
CSS 文本属性
属性 描述
color  设置文本颜色
direction  设置文本方向。
line-height    设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration    向文本添加修饰。
text-indent    缩进元素中文本的首行。
text-shadow    设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi   设置文本方向。
white-space    设置元素中空白的处理方式。
word-spacing   设置字间距。

#####################
定义
text-indent 属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。

说明
用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。

默认值：   not specified
继承性：   yes
版本：    CSS1
JavaScript 语法： object.style.textIndent="50px"
可能的值
值  描述
length 定义固定的缩进。默认值：0。
%  定义基于父元素宽度的百分比的缩进。
inherit    规定应该从父元素继承 text-indent 属性的值。

#########
定义和用法
text-align 属性规定元素中的文本的水平对齐方式。

该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。

默认值：   如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。
继承性：   yes
版本：    CSS1
JavaScript 语法： object.style.textAlign="right"
可能的值
值  描述
left   把文本排列到左边。默认值：由浏览器决定。
right  把文本排列到右边。
center 把文本排列到中间。
justify    实现两端对齐文本效果。
inherit    规定应该从父元素继承 text-align 属性的值。

###############
注释：CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。这个定义没有实际的语义，它只是假设一个文档包含由一个或多个空白字符包围的字。支持 CSS 的用户代理不一定能确定一个给定语言中哪些是合法的字，而哪些不是。尽管这个定义没有多大价值，不过它意味着采用象形文字的语言或非罗马书写体往往无法指定字间隔。

提示：利用这个属性，可能会创建字间隔太宽的文档，所以，使用 word-spacing 时要小心。

可能的值
值  描述
normal 默认。定义单词间的标准空间。
length 定义单词间的固定空间。
inherit    规定应该从父元素继承 word-spacing 属性的值。

######
定义和用法
text-transform 属性控制文本的大小写。
提示和注释
注释：不同的用户代理可能会用不同的方法来确定单词从哪里开始，相应地确定哪些字母要大写。例如，文本 "w3-school" 可以用两种方式显示："W3-school" 和 "W3-School"。CSS 并没有规定哪一种是正确的，所以这两种都是可以的。

可能的值
值  描述
none   默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase  定义仅有大写字母。
lowercase  定义无大写字母，仅有小写字母。
inherit    规定应该从父元素继承 text-transform 属性的值。

###########
定义和用法
text-decoration 属性规定添加到文本的修饰。

注释：修饰的颜色由 "color" 属性设置。
可能的值
值  描述
none   默认。定义标准的文本。
underline  定义文本下的一条线。
overline   定义文本上的一条线。
line-through   定义穿过文本下的一条线。
blink  定义闪烁的文本。
inherit    规定应该从父元素继承 text-decoration 属性的值。
####################

定义和用法
white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

值  描述
normal 默认。空白会被浏览器忽略。
pre    空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap   保留空白符序列，但是正常地进行换行。
pre-line   合并空白符序列，但是保留换行符。
inherit    规定应该从父元素继承 white-space 属性的值。
##########################

下面的表格总结了 white-space 属性的行为：

值  空白符    换行符    自动换行
pre-line   合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre    保留 保留 不允许
pre-wrap   保留 保留 允许

#####################

1.设置文本颜色
本例演示如何设置文本的颜色。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {color: #00ff00;}
        h1 {color:red}
        p.ex {color:rgb(0,0,255)}
    </style>
</head>
<body>
<h1>这是红色</h1>
<p>普通段落，请注意，绿色</p>
<p class="ex">该段落定义了 class="ex". 该段落中得文本是蓝色得</p>
</body>

2.设置文本的背景颜色
本例颜色如何设置部分文本的背景颜色。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span.highlight
        {

        }
    </style>
</head>
<body>
<p>
    <span class="highlight"> 这是文本</span>
    这是文本
    <span class="highlight">这是文本</span>
</p>

</body>

3.规定字符间距
本例演示如何增加或减少字符间距。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1 {
            letter-spacing: -0.5em;}
        h4 {
            letter-spacing: 20px;}
    </style>
</head>
<body>

<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>

4.使用百分比设置行间距
本例演示如何使用百分比值来设置段落中的行间距。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p.small {line-height: 90%;background-color: red}
    </style>
</head>
<body>

<p>
这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 110% 到 120%。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>

<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>

5.使用像素值设置行间距
本例演示如何使用像素值来设置段落中的行间距。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p.small
        {
            line-height: 10px;
        }
        p.big
        {
            line-height: 30px;
        }
    </style>
</head>
<body>
<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>

6.使用数值来设置行间距
本例演示如何使用一个数值来设置段落中的行间距。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p.small {
            line-height: 0.5;
        }
        p.small {
            line-height: 2;
        }
    </style>
</head>
<body>
<p>
这是拥有标准行高的段落。
默认行高大约是 1。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>

<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>

<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>

</body>
7.对齐文本
本例演示如何对齐文本。
    <style type="text/css">
        h1 {
            text-align: center;}
        h2 { text-align: left;}
        h3 {text-align: right}
    </style>
</head>
<body>
<h1>居中</h1>
<h2>向左</h2>
<h3>向右</h3>
</body>

8.修饰文本
本例演示如何向文本添加修饰。
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1 {text-decoration: overline;}
        h2 {text-decoration: line-through;}
        h3 {text-decoration: underline;}
        h4 {text-decoration: blink;}
        a {text-decoration: none;}
    </style>
</head>
<body>
<h1>这是标题</h1>
<h2>这是标题</h2>
<h3>这是标题</h3>
<h4>这是标题</h4>
<p><a href="test1.html">这是个链接</a></p>

9.缩进文本
本例演示如何缩进文本首行。
    <style type="text/css">
        p {
            text-indent: 1cm;}
    </style>
</head>
<body>
<P>
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
</P>

10.控制文本中的字母
本例演示如何控制文本中的字母。
    <style type="text/css">
        h1 {text-transform: uppercase}
        p.uppercase {text-transform: uppercase}
        p.uppercase {text-transform: lowercase}
        p.capitalize {text-transform: capitalize}
    </style>
</head>
<body>
<h1>This IS An H1 Elenment</h1>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>

</body>

11.在元素中禁止文本折行
本例演示如何禁止在元素中的文本折行。
    <style type="text/css">
        p {white-space: normal}
    </style>
</head>
<body>
<p>
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</p>

12.增加单词间距
本例演示如何增加段落中单词间的距离。
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p.spread {word-spacing: 30px;}
        p.tight {word-spacing: -0.5em;}
    </style>
</head>
<body>
<p class="spread">This is some text. This is some text.</p>
<p class="tight">This is some text. This is some text.</p>

</body>

CSS文本实例的更多相关文章

CSS 文本实例
1.设置文本的颜色 color:red; color:#00ff00 color:rgb(0,0,255) 2.增加或减少字符间距 letter-spacing:-0.5em letter-spaci ...
W3School-CSS 文本实例
CSS 文本实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (paddi ...
CSS 文本
CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化 ...
CSS 文本、字体、链接
CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化 ...
CSS 文本字体颜色设置方法(CSS color)
CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...
CSS：CSS 文本格式
ylbtech-CSS:CSS 文本格式 1.返回顶部 1. CSS 文本格式文本格式 This text is styled with some of the text formatting pr ...
第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制主讲教师:李炎恢本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇本节课, ...
第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体主讲教师:李炎恢本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇本节 ...
css文本格式详解
一.css文本主体内容: 二.css文本详解: 1.文本缩进语法: text-indent:<length>|<percentage> 默认值为0. 属性值详解: < ...

随机推荐

[Linux.NET]Nginx 泛解析配置请求映射到多端口实现二级域名访问
由于想实现一个域名放置多个应用运行的目的,而不想通过域名后加端口号方式处理,这种方式处理记起来太麻烦,偷懒党简直不能忍,故而考虑了使用二级域名来处理多个应用同时运行.Google了一番资料并进行了尝试 ...
solr-query
解释: 1.query:获取全部数据的SQL 2.deltaImportQuery:获取增量数据时使用的SQL 3.deltaQuery:获取pk的SQL 4.parentDeltaQuery:获取父 ...
ccf--20151203--画图
本题思路如下: 题目和代码如下: 问题描述试题编号: 201512-3 试题名称: 画图时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述用 ASCII 字符来画图是一件有趣 ...
17秋软件工程第二次作业 sudoku
2017年秋季软件工程作业2:个人项目 sudoku Github Project Github Project at Wasdns/sudoku. PSP Table PSP2.1 Person ...
asp.net core中使用HttpClient实现Post和Get的同步异步方法
准备工作 1.visual studio 2015 update3开发环境 2.net core 1.0.1 及以上版本目录 1.HttpGet方法 2.HttpPost方法 3.使用示例 4. ...
请教MAC OS下PHP的mcrypt怎么安装
安装方法一: 通过Homebrew安装mcrypt,安装成功 [Shell] 纯文本查看复制代码 brew install mcrypt MCrypt是一个功能强大的加密算法扩展库,它包括有22种算 ...
Oracle数据库里面查询字符串类型的字段不为空和为空的SQL语句：
一:查询字符串类型的字段的值不为空的SQL: select * from TB_CMS_FLGTINFO_A t where (t.fsta is not null and t.fsta <&g ...
NSIS学习记录の----查找注册表某个键是否存在
最近要做一个注册表的判断.以往都是注册表某个键的键值存在查找,但是如何判断一个空键值的键是否存在呢(很多大厂装逼不写键值,有默认就好)? 下面给出解决办法(要沟通请邮件联系:7-7-2-7-0-6-5 ...
Django REST framework 之分页，视图，路由，渲染器
1.分页 2.视图 3.路由 4.渲染器 1.分页方法一: from django.shortcuts import render from rest_framework.versioning im ...
关于var与function的解析顺序问题
先给几段代码,看看你能知道运行结果不 function example1() { var f = function() {return 1;}; return f; var f = function( ...

CSS文本实例

CSS文本实例的更多相关文章

随机推荐

热门专题