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. 属性值详解: < ...

随机推荐

LeetCode题解之Binary Tree Paths
1.题目描述 2.分析使用递归. 3.代码 vector<string> ans; vector<string> binaryTreePaths(TreeNode* root ...
【redis专题(4)】命令语法介绍之sorted_set
有序集合可以模拟优先级队列的实现增 zadd key score1 value1 score2 value2 .. redis 127.0.0.1:6379> zadd stu 18 lily ...
linux设置自动更换壁纸
#!/bin/bash let n=0 files=($HOME/wallpapers/*.jpg) count=${#files[@]} while [ 1 ] do let "n=n%$ ...
MySQL GTID复制错误处理之跳过错误
某Slave报错信息: mysql> show slave status\G; mysql> show slave status\G; ************************** ...
Configure Monit on AWS CentOS7 to guard Squid proxy
Install Monit:sudo -iamazon-linux-extras install epelyum -y install monit Config monit: vim /etc/mon ...
Linux的命名空间详解--Linux进程的管理与调度（二）【转】
Linux Namespaces机制提供一种资源隔离方案. PID,IPC,Network等系统资源不再是全局性的,而是属于特定的Namespace.每个Namespace里面的资源对其他Namesp ...
eclipse版本和jdk对应关系
jdk最新版历史版本下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html http://www.oracle.co ...
使用golang求出A-Z的所有子集
参考链接:https://blog.csdn.net/K346K346/article/details/80436430 有一个集合由A-Z这26个字母组成,打印这个集合的所有子集,每个子集一行,写C ...
WPFの获取任意元素的位置
如果布局在Grid中: 方法一: //_stackPanel为子元素,_grid为父元素 Point point = _stackPanel.TranslatePoint(new Point(0, 0 ...
C#事件の事件处解
C# 事件(Event) 事件(Event) 基本上说是一个用户操作,如按键.点击.鼠标移动等等,或者是一些出现,如系统生成的通知.应用程序需要在事件发生时响应事件.例如,中断.事件是用于进程间通信. ...

CSS文本实例

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

随机推荐

热门专题