css笔记——文本样式

来源：互联网发布：mac 删除office 编辑：程序博客网时间：2024/06/08 06:17

1.text-decoration

定义什么请移步：w3school

说明

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

默认值：none继承性：no版本：CSS1JavaScript 语法：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版本：CSS1JavaScript 语法：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>

【本文由“程序员小王”发布，2017年10月18日】

阅读全文

1 0