css文本样式-css学习之旅（4）

最新推荐文章于 2025-01-06 19:05:09 发布

转载最新推荐文章于 2025-01-06 19:05:09 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fengsehng/p/6048536.html

本文深入探讨了HTML和CSS中的文本效果属性，包括文本阴影、文本换行规则等，并通过实例展示了如何使用这些属性来美化网页内容。同时，介绍了CSS布局技巧，如锁定文本首行、对齐文本方向等，提供了实用的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

color：颜色derction：方向；line-height：行高；letter-spaceing：字符间距；text-align：对齐方向；text-decoration：装饰；text-indent：锁紧文本中首行；text-transform：元素中的字母；unicode-bidi：设置文本方向；white-spacing：元素中空白的处理方式；word—spacing：字间距

代码实例：

p{
    color:red;
    text-align: center;
}
h6{
    text-indent: 5em;
    text-align: center;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html5样式</title>
    <link href="MyCss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p title="t">属性选择器</p>
    <p title="te">属性和值得选择器</p>
    <h6>属性和值得选择器</h6>
</body>
</html>

效果图：

这里写图片描述

css3的文本效果属性：text-shadow：向文本添加阴影word-wrap：规定文本的换行规则

实例代码

p{
    text-shadow: 100px 100px 0px red;
    word-wrap: normal;
    width:200px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html5样式</title>
    <link href="MyCss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p title="t">属性选择器</p>
    <p title="te">属性和值得选择器属性和值得选择器属性和值得选择器属性和值得选择器属性和值得选择器属性和值得选择器属性和值得选择器属性和值得选择器属性和值得选择器属性和值得选择器属性和值得选择器属性和值得选择器属性和值得选择器属性和值得选择器</p>
</body>
</html>

！！！！效果图

这里写图片描述

转载于:https://www.cnblogs.com/fengsehng/p/6048536.html