CSS Text（文本）

最新推荐文章于 2024-04-17 23:37:40 发布

一只爱好编程的程序猿

最新推荐文章于 2024-04-17 23:37:40 发布

阅读量587

点赞数 1

分类专栏： CSS 文章标签： html css html5

本文链接：https://blog.csdn.net/qq_37881565/article/details/108254307

版权

CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

CSS文本格式

文本颜色

颜色属性被用来设置文字颜色。

颜色基本三种格式来设置的：

十六进制-如：#FF0000
一个RGB值-如：RGB（255,0,0）
颜色的名称-如:red

可以参考一下下面的实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
    body {color:red;}
    h1 {color:#00ff00;}
    p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
    <h1>这是标题 1</h1>
    <p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
    <p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>
</html>

效果图如下所示:

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可设置居中或左对齐或右对齐，两端对齐。

当text-align设置为“justify”，每一行被展开宽度相等，左右外边距是对齐的。

可以参考下面的实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
    h1 {text-align:center;}
    p.date {text-align:right;}
    p.main {text-align:justify;}
</style>
</head>

<body>
    <h1>CSS text-align 实例</h1>
    <p class="date">2015 年 3 月 14 号</p>
    <p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；；”</p>
    <p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body>

</html>

效果图如下所示:

文本修饰

text-decoration属性用来设置或删除文本的装饰，主要是用来删除链接的下划线。

可以参考一下下面的实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
    a {text-decoration:none;}
</style>
</head>

<body>
    <p>链接到: <a href="//www.baidu.com/">baidu.com</a></p>
</body>

</html>

效果图如下所示:

也可以这样装饰文字：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
    h1 {text-decoration:overline;}
    h2 {text-decoration:line-through;}
    h3 {text-decoration:underline;}
</style>
</head>

<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
</body>

</html>

效果图如下所示:

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	p.uppercase {text-transform:uppercase;}
	p.lowercase {text-transform:lowercase;}
	p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
	<p class="uppercase">This is some text.</p>
	<p class="lowercase">This is some text.</p>
	<p class="capitalize">This is some text.</p>
</body>
</html>

效果图如下所示：

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
    p {text-indent:50px;}
</style>
</head>
<body>

    <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

效果图如下所示:

所有CSS文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向
letter-spacing	设置字符间距
line-height	设置行高
text-align	设置文本的位子
text- decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本的阴影
text- transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

一只爱好编程的程序猿

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS Text（文本）

CSS文本格式文本颜色颜色属性被用来设置文字颜色。颜色基本三种格式来设置的：十六进制-如：#FF0000 一个RGB值-如：RGB（255,0,0）颜色的名称-如:red可以参考一下下面的实例：<!DOCTYPE html><html><head><meta charset="utf-8"> <style> body {color:red;} h1 {color:#00ff00;} p
复制链接

扫一扫