文本修饰标签(text-decoration)

HTML标签详解
本文详细介绍了HTML中的各种标签及其使用方法,包括文本格式化标签、换行标签、对齐方式等,并给出了部分已弃用标签的替代方案。

水平横线 <hr />

  横线对齐 <hr align=left/right/center />

  横线厚度 <hr size=? /> (以px为单位)

  横线宽度 <hr width=?/% /> (以px或%为单位)

  实心线 <hr noshade /> (没有立体效果)

  以上标签属性[HTML5]不支持,改用CSS修饰:

  {border:0 none;border-top:px solid RGB;}

换行 <br />

  文字部份看齐方式 <br clear="left/right/all" />(与图形合用时)

  不可换行 <nobr></nobr> (不换行)

  可换行处 <wbr> (如果需要,可在此断行)

居中对齐 <center></center> (文字与图片都可以)

鼠标置于上面时显示全部描述 :

       <abbr title="对缩写词的描述文本">缩写词</abbr>  (HTML5支持)

       <acronym title="......">...</acrony>  (HTML5不支持)

字体大小 <font size=""></font>(从1到7,数字越大字体越大)

改变字体大小 <font size="+/- "></font>

基本字体大小 <basefont size="" face="" color="" /> (从1到7,内定为3)

指定字型  <font face="字型名称">………</font>

字体颜色 <font color="rgb"></font>

加粗 <b>….</b>    <strong>...</strong>

斜体 <i>….</i>   <em>...</em>强调   <dfn>...</dfn>定义(有些浏览器不支持)

显示小字体 <small>…………</small>

显示大字体 <big>…………</big>

下划线 <u>….</u>   <ins>...</ins> (表示插入文字)(尚有些浏览器不提供)

删除线 <s>...</s>   <del>...</del>  <strike>….</strike>

下标字 <sub>….</sub>

上标字 <sup>….</sup>

打字机字体 <tt>….</tt> (用单空格字型显示)

固定宽度字体 <xmp>...</xmp>(在文件中空白、换行、定位功能有效)

固定宽度字体 <plaintext>...</plaintext>(不执行标记符号)

固定宽度小字体 <listing>...</listing>

预定格式 <pre></pre> (保留代码页面编写时留下的空格和换行等)

预定格式的宽度 <pre width=?></pre>(以字元计算)

闪烁效果 <blink></blink> (有史以来最被嘲弄的标签)

文本引用效果 <blockquote>文本</blockquote>(转行分离并缩进,适用长句)

      <q>文本</q>(添加双引号,适用短句)

                     <cite></cite> 引文(通常会以斜体显示)

      <code></code> 显示源码之用

      <samp></samp> 样本

      <var></var> 变量

      <kbd></kbd> 键盘输入

      <address></address> 地址域

文本从右向左显示 <bdo dir="rtl">文本</bdo>(默认为从左向右dir="ltr")

转载于:https://www.cnblogs.com/zhouwanqiu/p/8856698.html

`text-decoration` 是 CSS 中的一个属性,用于控制文本的装饰效果,如下划线、删除线等。它可以帮助您自定义文本的外观,使得文本更加美观或具有特定的语义。 ### `text-decoration` 属性详解 `text-decoration` 属性可以设置或检索文本是否带修饰修饰的样式。它可以影响文本的以下几种装饰效果: 1. **下划线 (`underline`)**: -文本添加下划线。 - 示例:`text-decoration: underline;` 2. **删除线 (`line-through`)**: -文本添加删除线(表示已删除或废弃的内容)。 - 示例:`text-decoration: line-through;` 3. **上划线 (`overline`)**: -文本添加上划线。 - 示例:`text-decoration: overline;` 4. **无修饰 (`none`)**: - 移除所有文本修饰- 示例:`text-decoration: none;` 5. **组合使用**: - 您可以组合使用多种修饰效果。 - 示例:`text-decoration: underline overline;` ### `text-decoration` 的语法 ```css text-decoration: [line] || [color] || [style]; ``` - **line**: 可以是 `none`, `underline`, `overline`, `line-through` 或者它们的组合。 - **color**: 设置文本装饰的颜色。 - **style**: 设置文本装饰的样式(实线、虚线等)。常见的值包括 `solid`, `dotted`, `dashed`, `double`, `wavy`。 ### 示例代码 #### 基本用法 ```css a { text-decoration: underline; /* 添加下划线 */ } .striked-text { text-decoration: line-through; /* 添加删除线 */ } .highlighted-text { text-decoration: overline; /* 添加上划线 */ } .no-decoration { text-decoration: none; /* 移除所有装饰 */ } ``` #### 组合使用 ```css .special-text { text-decoration: underline overline red wavy; /* 下划线、上划线、红色波浪线 */ } ``` #### 实际应用 假设您有一个导航栏,希望链接在默认状态下没有下划线,但在悬停时添加下划线: ```html <nav class="navbar"> <ul class="nav-links"> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> ``` ```css .navbar a { text-decoration: none; /* 默认状态下移除下划线 */ } .navbar a:hover { text-decoration: underline; /* 悬停时添加下划线 */ } ``` ### 知识点详解 1. **`text-decoration-line`**: - 控制文本装饰的类型(如`underline`, `line-through`等)。这是`text-decoration`的细分属性之一。 - 示例:`text-decoration-line: underline;` 2. **`text-decoration-color`**: - 控制文本装饰的颜色。这是`text-decoration`的细分属性之一。 - 示例:`text-decoration-color: red;` 3. **`text-decoration-style`**: - 控制文本装饰的样式(如`solid`, `dotted`等)。这是`text-decoration`的细分属性之一。 - 示例:`text-decoration-style: wavy;` 通过这些细分属性,您可以更精细地控制文本装饰的效果。例如,您可以在不影响其他装饰属性的情况下,仅改变装饰的颜色或样式。 ### 总结 `text-decoration` 是一个非常有用的 CSS 属性,可以用来添加或移除文本的装饰效果,如下划线、删除线和上划线。通过组合使用不同的值,您可以创建丰富的文本样式,提升网页的美观性和可读性。如果您有更多的需求或疑问,请随时告诉我!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值