重庆SEO前端技术博客

重庆SEO前端技术博客

当前位置: 主页 > CSS >

text-decoration 文本装饰

时间:2020-05-12 10:58来源:未知 作者:admin 点击:
定义:添加到文本的修饰 案例: HTML 代码: p让你的心不追随过去不迎接未来不执着现在的时候,它就自然停。就像风刮着沙,风一停,沙自然就落到地面。/p p class=A1如果一个人没有苦
定义:添加到文本的修饰
 
 text-decoration 文本装饰
 
案例:
HTML代码:
    <p>让你的心不追随过去不迎接未来不执着现在的时候,它就自然停。就像风刮着沙,风一停,沙自然就落到地面。</p>
    <p class="A1">如果一个人没有苦难的感受,就不容易对他人给予同情。你要学救苦救难的精神,就得先受苦受难</p>
    <p class="B1">美色动欲心,丑态招恶心,不见为净;直言仿面子,争论伤和气,沉默是金。以不辨对流言,流言不得不息;以不理对挑衅,挑衅不得不休</p>
    <p class="C1">我站在年华的这头,为逝去的青春默哀。你听见我的轻声的叹息,如泪轻弹。</p>
<p class="D1">活着,一定要有气度,这不仅仅是涵养,也是一种标识。在与人交往中,为人所看中的第一要素即是气度。修炼人生,展示自己活着的气度,让生命更有意义</p>

Css代码:
    p{text-decoration:none;}
    .A1{text-decoration:underline;}
    .B1{text-decoration:overline;}
    .C1{text-decoration:line-through;}
    .D1{text-decoration:blink;}
 
效果:

text-decoration 文本装饰

看以上效果,none得值会关闭原本在该文本得所有装饰效果,underline会对元素加下划线,就像html得U元素一样。而overline会在文本顶端画上一条上划线。line-through会出现一个贯穿文本的线。
注意:由于IE、Chrome 或 Safari 均不支持 "blink" 属性值,即现在的主流的浏览器均不支持该属性值,如果想继续使用该属性的话,建议尝试使用低版本的火狐浏览器。因为该标记目前的主流浏览器均不支持,所以也就没有任何实质性的使用价值和意义了,不建议使用。



------分隔线----------------------------