乐趣区

关于前端:CSS文本样式14个示例

jiezi

示例 01：文本色彩

色彩属性被用来设置文字的色彩。

色彩是通过 CSS 最常常的指定：
● 十六进制值 – 如: #FF0000
● 一个 RGB 值 – 如: RGB(255,0,0)
● 色彩的名称 – 如: red

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> 菜鸟教程 (runoob.com)</title> 
<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>

示例 02：text-align 文本对齐

文本排列属性是用来设置文本的程度对齐形式。文本可居中或对齐到左或右, 两端对齐。当 text-align 设置为 ”justify”，每一行被开展为宽度相等，左，右外边距是对齐（如杂志和报纸）。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
    <style>
        .box {
            background-color: red;
            font-size: 40px;
            color: whitesmoke;
            /* 居中 */
            text-align: center;
        }
    </style>
</head>
<body>
<div class="box"> 须要居中显示 </div>
</body>
</html>

示例 03：text-decoration 文本润饰

text-decoration 属性用来设置或删除文本的装璜。从设计的角度看 text-decoration 属性次要是用来删除链接的下划线。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
</head>
<body>
<!-- a 标签默认有下划线 -->
<a href="#"> 百度一下 </a>

<!-- p 能够通过 css 款式增加下划线 -->
<p style="text-decoration: underline"> 百度一下 2 </p>

<!-- 能够在两头增加一条线 -->
<p style="text-decoration: line-through"> 不要了 </p>

<!-- 上划线 -->
<p style="text-decoration: overline"> 顶部有一条线 </p>
</body>
</html>

示例 04：text-transform 文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
</head>
<body>
<!-- 首字母大写 -->
<p style="text-transform: capitalize">hello world</p>

<!-- 全副大小 -->
<p style="text-transform: uppercase">hello world</p>

<!-- 全副小写 -->
<p style="text-transform: lowercase">hello world</p>

<!-- 勾销成果 -->
<p style="text-transform: none">Hello world</p>
</body>
</html>

示例 05：text-indent 文本缩进

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

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
</head>
<body>
<!-- 首行缩进两个字符 -->
<p style="text-indent: 2em">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>

示例 06：font-family 字体系列

font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种 ” 后备 ” 机制，如果浏览器不反对第一种字体，他将尝试下一种字体。多个字体系列是用一个逗号分隔指明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
    <style>
        .box {font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "\5B8B\4F53", sans-serif;}
    </style>
</head>

<body>
<!-- 根本的用法 -->
<p class="font-family: Arial, Helvetica, sans-serif;"> 这一段的字体是 Arial.</p>
<!-- 比拟惯例的字体 -->
<p class="box"> 这一段的字体是 Arial.</p>

</body>
</html>

示例 07：font-style 字体款式

次要是用于指定斜体文字的字体款式属性。这个属性有三个值：
● normal – 失常显示文本
● italic – 以斜体字显示的文字
● oblique – 文字向一边歪斜（和斜体十分相似，但不太反对）

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
</head>

<body>
<p style="font-style: normal"> 这是段落 </p>
<!-- 斜体，更罕用 -->
<p style="font-style: italic"> 这是段落 </p>
<!-- 歪斜 -->
<p style="font-style: oblique"> 这是段落 </p>
</body>
</html>

示例 08：font-size 字体大小

font-size 能够设置文字的大小，反对的单位有 px 像素，百分比，em 等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
</head>
<body>
<!-- 默认是 16px-->
<p> 你好世界 </p>
<!-- 设置字体大小 px-->
<p style="font-size: 22px"> 你好世界 </p>

<!-- 设置字体大小 em-->
<p style="font-size: 2em"> 你好世界 </p>

<!-- 设置字体大小百分比 -->
<p style="font-size: 300%"> 你好世界 </p>
</body>
</html>

示例 09：text-align 图片居中

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
    <style>
        .box {
            background-color: red;
            font-size: 40px;
            color: whitesmoke;
            /* 居中 */
            text-align: center;
        }

        img {width: 100px;}
    </style>
</head>
<body>
<div class="box">
    <img src="test.jpg" alt="测试">
</div>
</body>
</html>

示例 10：text-align 让 div 居中

text-align 居中只针对行内元素失效，而 div 是块级元素。如果要让 div 被 text-align 居中，须要将 div 转换为行内块元素。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
    <style>
        .box {
            background-color: red;
            font-size: 40px;
            color: whitesmoke;
            /* 居中 */
            text-align: center;
        }

        .test {
            width: 100px;
            height: 100px;
            background-color: goldenrod;
            display: inline-block;
        }

        img {width: 100px;}
    </style>
</head>
<body>
<div class="box">
    <div class="test"></div>
</div>
</body>
</html>

示例 11：letter-spacing 字间距

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
</head>
<body>
<p> 你好世界 </p>
<!-- 设置文字之间的间隔 -->
<p style="letter-spacing: 5px"> 你好世界 </p>
<p style="letter-spacing: 15px"> 你好世界 </p>
<p style="letter-spacing: 25px"> 你好世界 </p>
</body>
</html>

示例 12：font-weight 字体粗细

font-wight 能够设置字体的粗细，值是 100-700 的整百数，也能够 bold 示意加粗和 normal 示意一般。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
    <style>
        .box {font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "\5B8B\4F53", sans-serif;}
    </style>
</head>

<body>
<p style="font-weight: bold"> 这是段落 </p>
<p style="font-weight: normal"> 这是段落 </p>
<p style="font-weight: 100"> 这是段落 </p>
<p style="font-weight: 400"> 这是段落 </p>
<p style="font-weight: 700"> 这是段落 </p>

</body>
</html>

示例 13：line-height 行高

line-hight 能够设置一行文本占据的高度。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
</head>

<body>
<p style="border:1px solid #ccc;line-height: 16px">
    这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落 </p>

<!-- 行高变大 -->
<p style="border:1px solid #ccc;line-height: 26px">
    这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落 </p>

<!-- 行高更大 -->
<p style="border:1px solid #ccc;line-height: 36px">
    这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落 </p>
</body>
</html>

示例 14：line-height 让文字垂直居中

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
    <style>
        .box {
            background-color: cadetblue;
            /* 行高和高度雷同，文字就会垂直居中 */
            height: 100px;
            line-height: 100px;
        }
    </style>
</head>

<body>
<div class="box"> 这个文字须要垂直居中 </div>
</body>
</html>

本文由 mdnice 多平台公布

退出移动版