css笔记——文本样式

最新推荐文章于 2023-09-25 15:47:36 发布

piyi9352

最新推荐文章于 2023-09-25 15:47:36 发布

阅读量230

点赞数 1

本文链接：https://blog.csdn.net/piyi9352/article/details/78271383

版权

1.text-decoration

定义什么请移步：w3school

说明

这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。

默认值：	none
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.textDecoration="overline"

可能的值

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文本实例-设置文本字体效果</title>
    <style type="text/css">
    h2 {
        text-decoration: underline;
    }

    .p1 {
        text-decoration: overline;
    }

    .p2 {
        text-decoration: line-through;
    }

    .sp1 {
        text-decoration: blink;
    }

    .decoration {
        text-decoration: underline;
        padding: 10px;
    }
    </style>
</head>

<body>
    <h1>none默认。定义标准的文本</h1>
    <h2>underline定义文本下的一条线。</h2>
    <p class="p1">overline定义文本上的一条线。</p>
    <p class="p2">line-through定义穿过文本下的一条线。</p>
    <span class="sp1">blink定义闪烁的文本。</span>
    <div class="decoration">
        <span class="sp2">inherit规定应该从父元素继承 text-decoration 属性的值。</span>
    </div>
</body>

</html>

注释：IE、Chrome 或 Safari 不支持 "blink" 属性值。

效果图

2.text-indent

定义什么请移步：w3school

说明

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

默认值：	not specified
继承性：	yes
版本：	CSS1
JavaScript 语法：	object.style.textIndent="50px"

可能的值

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .indent{
            width: 300px;
            margin: 0 auto;
        }
        .text1{
            text-indent: 20px;
        }
        .text2{
            text-indent: 20%;
        }
    </style>
</head>
<body>
<div class="indent">
    <div class="text1">测试测试测试</div>
    <div class="text2">测试测试测试</div>
</div>
</body>
</html>