`

css text-decoration下划线 删除线 上划线属性样式

    博客分类:
  • CSS
CSS 
阅读更多

一、DIV+CSS下划线基础

DIV CSS text-decoration下划线、删除线、上划线属性,本节介绍使用div+css样式实现文字字体下划线、字体删除线贯穿线、上划线样式。

text-decoration : none || underline || blink || overline || line-through 

 

text-decoration下划线CSS单词值参数:
none :  无装饰
blink :  闪烁
underline :  下划线
line-through :  贯穿线
overline :  上划线

 

text-decoration:none 无装饰,通常对html下划线标签去掉下划线样式
text-decoration:underline 下划线样式
text-decoration:line-through 删除线样式-贯穿线样式
text-decoration:overline 上划线样式

 

二  完整下划线删除线上划线案例

我们进行对3个盒子对象分别设置对象内文字下划线、文字删除线样式、字体上划线样式。

1、css代码片段:

  1. .divcss5{text-decoration:underline} 
  2. .divcss5_1{text-decoration:line-through} 
  3. .divcss5_2{text-decoration:overline} 

2、html代码片段:

  1. <div class="divcss5">我被加下划线</div> 
  2. <div class="divcss5_1">我被加贯穿删除线</div> 
  3. <div class="divcss5_2">我被加上划线</div> 

3、css删除线、css下划线、css上划线案例截图

css删除线、css下划线、css上划线案例截图
CSS删除线下划线上划线案例截图

 

所以删除线除了之前总结过得<del>标签,css也可以控制。且进过测试兼容性良好

.

分享到:
评论

相关推荐

    text-decoration 、border-radius与其他属性的区别

    - **作用**:用于设置或删除文本的下划线、上划线、删除线等装饰效果。 - **语法**:`text-decoration: none | underline | overline | line-through;` 例如: ```css p { text-decoration: underline; } ``` **...

    CSS中的下划线text-decoration属性使用进阶

    在CSS中,text-decoration属性被用于对文本应用修饰效果,比如常见的加下划线、删除线等。了解这个属性的基本用法对于前端开发者来说是非常基础且重要的。本篇文章旨在深入探讨text-decoration属性的使用技巧,以及...

    CSS3多行文本下划线动画特效.zip

    - `text-decoration` 属性允许我们添加、删除或改变文本的装饰,如下划线、上划线和删除线。例如,`text-decoration: underline;` 将为文本添加下划线,而 `text-decoration: none;` 则可以移除下划线。 - `text-...

    day03(CSS01-基础选择器+字体文本样式).rar

    5. **文本修饰**:`text-decoration`用于添加或删除文本装饰,如`underline`(下划线)、`overline`(上划线)、`line-through`(删除线)。 6. **文本转换**:`text-transform`可控制文本的大小写,如`uppercase`...

    css-text 教程

    **文本装饰**:`text-decoration`属性用于设置文本的下划线、删除线等装饰效果。常用的值包括`none`(无装饰)、`underline`(下划线)、`overline`(上划线)和`line-through`(删除线)。例如: ```css p { text-...

    html超链接去掉下划线

    CSS中的`text-decoration`属性用于设置文本的装饰,如下划线、上划线或删除线。要移除下划线,我们将其值设置为`none`: ```css a { text-decoration: none; } ``` 这将全局应用到所有超链接,使其不再显示...

    CSS属性速查表.pdf

    CSS 语法 说明 关键字 font-family:字型一,字型二,…… 设置文本字型 font-size:长度|关键字设置文本大小 xx-small:极小 ...line-through:删除线 blink:闪烁 none:无,默认值 text-transform

    Web前端与移动发开之css的文本属性

    3.text-decoration 装饰文本 一般用来取消下划线 上划线 删除线 none/underline下划线/overline上划线/line-through删除线 4.text-indent 文本首行缩进 通常以em为单位设置 无需关注字体大小 em相对单位 1em表示一...

    (jsp)网页中去掉超连接的下划线

    这个属性控制文本的装饰,如下划线、上划线或删除线。 ```css a { text-decoration: none; } ``` 4. 应用CSS到JSP 在JSP中,有多种方式应用CSS。一种是通过`&lt;style&gt;`标签直接在页面内写CSS,另一种是创建...

    css3文字特效

    CSS3的`text-decoration-line`、`text-decoration-style`和`text-decoration-color`属性可以用来添加下划线、上划线、删除线等装饰,甚至可以设置渐变线。 8. **字体渲染(font-smooth)** 对于Mac系统,`font-...

    曹鹏CSS视频教程-37.文本装饰.rar

    CSS提供了`text-decoration`属性,允许我们添加下划线(`underline`)、上划线(`overline`)、删除线(`line-through`)或无装饰(`none`)。例如,`text-decoration: underline;`将为文本添加下划线,而`text-...

    CSS3文本效果共2页.pdf.zip

    text-decoration属性可以添加下划线、上划线或删除线,CSS3还引入了text-decoration-line、text-decoration-style和text-decoration-color来更精细地控制这些装饰。 10. **字体大小单位(vw/vh)** 使用视口宽度...

    CSS样式

    `text-decoration` 属性允许我们添加或移除文本的装饰性样式,如下划线、上划线或删除线等。这对于突出显示某些文本或改变链接的默认外观非常有用。 - **`underline`**:在文本下方添加一条线。例如,“thesewords...

    第21章 CSS3文本效果

    CSS3扩展了文本装饰,如`text-decoration-line`、`text-decoration-style`和`text-decoration-color`,允许更精细的控制下划线、上划线、删除线等。例如: ```css a { text-decoration-line: underline; text-...

    CSS 属性速查表PDF

    可以选择`underline`表示下划线,`overline`表示上划线,`line-through`表示删除线,`blink`表示闪烁效果(此选项已过时),`none`表示没有任何装饰。例如: ```css text-decoration: underline; ``` - **`text-...

    CSS图片和文字排版教程

    下划线、顶划线、删除线设置可以使用text-decoration属性,例如: ``` p { text-decoration: underline; } ``` text-decoration属性值可以是none、underline、line-through、overline、blink。 1.7 英文字母大小写...

    CSS3创意文字中划线悬停特效.zip

    它可以用来添加下划线、删除线或上划线等效果。在本案例中,可能是通过设置`text-decoration: underline;`来实现静态的下划线,然后在悬停时通过修改这个属性来实现动态效果。例如,可以使用`:hover`伪类来改变悬停...

    CSS3-标签集合.pdf

    文本样式中,`color`定义文本颜色,`text-align`控制水平对齐,`text-indent`设置首行缩进,`line-height`调整行间距,`text-decoration`添加下划线、上划线或删除线,`vertical-align`用于元素的垂直对齐,如`...

    21.1 CSS 文字样式

    8. **文本装饰**:`text-decoration`属性用于添加下划线、上划线、删除线等装饰。例如:`text-decoration: underline;` 9. **文本缩进**:`text-indent`属性用于设置段落的第一行的缩进。 10. **行高**:`line-...

    css属性详解说明,css属性详解说明

    - **简介:** 用于设置文本的下划线、删除线等装饰。 - **取值:** - `none`: 默认值,无装饰。 - `underline`: 下划线。 - `overline`: 上划线。 - `line-through`: 删除线。 - **用法示例:** ```css a { ...

Global site tag (gtag.js) - Google Analytics