CSS文本装饰

最新推荐文章于 2023-02-06 11:30:47 发布
最新推荐文章于 2023-02-06 11:30:47 发布
阅读量695 收藏
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42900834/article/details/122742922
版权

 

1.下划线

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>装饰文本</title>

    <style>
            div{
                /* 下划线 */
                 text-decoration: underline;
            }
    </style>
</head>

<body>
          <div>粉红色的回忆</div>    
</body>

</html>

运行效果：

 2.删除线

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>装饰文本</title>

    <style>
            div{
                 /* 删除线 */
                 text-decoration:line-through;
            }
    </style>
</head>

<body>
          <div>粉红色的回忆</div>    
</body>

</html>

运行效果：

 3.上划线

代码：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>装饰文本</title>

    <style>
            div{
                 /* 上划线 */
                 text-decoration:overline;
            }
    </style>
</head>

<body>
          <div>粉红色的回忆</div>    
</body>

</html>

运行效果：

 

4.把链接去掉下划线

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>装饰文本</title>

    <style>

           a{
                    text-decoration:none;
                    color:#333;
            }

    </style>
</head>

<body>

          <a href="#">粉红色的回忆</a>
</body>

</html>

运行效果：

重点：添加和取消下划线

爱吃火锅的小boy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css零到一基础教程035：CSS 文字装饰
kerryqpw的博客
03-21 157
文字装饰 text-decoration属性用于设置或删除文本装饰。 text-decoration: none;通常用于从链接上删除下划线： 实例 <!DOCTYPE html> <html> <head> <style> a { text-decoration: none; } </style> </head> <body> <p>没有下划线的链接：<a href="https://..
CSS 文本装饰样式 换行
卋舉
10-08 139
添加边框 border:1px solid green; 强制不允许换行 white-space:nowrap; 强制换行,内容到边才允许换行 word-dreak:break-all; 以单词长度,选择换行,默认 break-word word-break:break-word; <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="v
CSS 文本装饰
weixin_44630407的博客
12-01 312
CSS 文本装饰 文本线 text-decoration:underline; /*下划线*/ text-decoration:line-through; /*删除线*/ text-decoration:overline; /*上划线*/ text-decoration:none; /*无，用于去掉a标签的下划线*/ 文本对齐 text-align:center; /*居中*/ text-al...
CSS 实现文本装饰效果
最新发布
前端开发
02-06 633
CSS 实现文本装饰效果
css装饰文本
weixin_44415561的博客
06-11 164
下划线 text-decoration: underline; 上划线 text-decoration: overline; 中划线（删除线） text-decoration: line-through; 移除a标签的下划线 a { text-decoration: none; } 移除ul标签下li标签的小黑圆点 .list li { text-style-type: none; } ...
使用CSS文本装饰效果优化网页排版
![使用CSS文本装饰效果优化网页排版]...在网页设计中，CSS文本装饰效果是指通过CSS样式来装饰文本，使得文本在页面中更具吸引力和视觉冲击力。通过添加阴影、渐
css文字控制与css文本样式示例和属性
09-25
在CSS中，文字控制和文本样式是构建良好用户体验的基础，对网页内容的可读性和美观性具有重要影响。以下将详细介绍CSS中与文字控制及文本样式相关的属性和示例。 一、CSS控制文字属性： 1. font-size：该属性用于...
css3文字特效_css3火焰文字_css3文字渐变代码
11-23
CSS3文字特效主要依赖于其新增的属性和功能，如文本阴影(text-shadow)、文本描边(text-stroke)、渐变(gradient)、变换(transform)等。通过这些特性，我们可以创造出丰富多彩的文字展示效果，提升网页的视觉吸引力。 ...
Html+css实现纯文字和带图标的按钮
12-29
本文总结一下一些基础页面元素的实现方式，后续陆续更新。首先我们遇到最多的可能是按钮的切图，按钮可能有很多种外观，但是一般可分为纯文字的和带图标的按钮，下面就来说说这两种按钮的实现方法。效果图如下： 代码如下： XML/HTML Code复制内容到剪贴板 </pre><pre u00a0name=code class><!DOCTYPE html>      <html lang=zh-CN>      <head>        <title>按钮写法</title>        <meta charset=UTF-8>     
CSS文本外观属性之颜色、对齐文本、装饰文本
WangZhang_521的博客
12-23 395
01-颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
文本装饰
weixin_30443813的博客
06-08 121
文本装饰--text-decoration属性1.none 标准文本2.underline 文本下划线3.overline 文本下划线4.line-though 文本删除线5.blink 文本闪烁 转载于:https://www.cnblogs.com/123456lala/p/6964485.html...
文本的装饰
persistence2020的博客
05-14 254
text-decoration 通常我们用于给链接修改装饰效果 值 描述 none 默认。定义标准的文本。 underline 定义文本下的一条线。下划线 也是我们链接自带的 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。 <head> <meta charset="utf-8"> <st
前端 字体样式
ball4022的博客
08-01 2060
字体样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本属性</title> <style> .box { width: 300px; he...
沁园春
michaelxjy的专栏
11-04 328
       《沁园春•长沙》（1925年）         独立寒秋，湘江北去，橘子洲头。 　　　　     看万山红遍，层林尽染，漫江碧透，百舸争流。 　　　　  鹰击长空，鱼翔浅底，万类霜天竞自由。 　　　  怅寥廓，问苍茫大地，谁主沉浮。 　　　　  携来百侣曾游，忆往昔峥嵘岁月稠。 　　　　  恰同学少年，风华正茂，书生意气，挥斥方遒。 　　　  指点江山，激
CSS 文本装饰 text-decoration属性
歪脖先生的博客
02-13 7099
文本装饰在CSS中，使用 text-decoration属性，可以在文本上方、下方、或中间添加装饰线，可选值为 none | underline | overline | line-through | blink，默认值为 none。none 无装饰，underline 下划线 ，overline 上划线，line-through 文字中间贯穿线，blink 闪烁。装饰线的颜色与文本的颜色相同。默...
CSS字体及装饰
diaoyin8112的博客
04-02 139
CSS字体详细介绍 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS字体</title><style>/*通配符选择器，*号代表所有的意思。实际开发根本不会有人用的*/* {font-size: 50px; ...
华丽的图片和文本装饰
培勤
06-04 1073
副标题一个程序简单来讲就是一套有序动作的系列指令，它会因被分享和探讨而更美。少说空话，多读程序，多写程序，多欣赏系统。公告悟天地之真，恒笃行之。美、凝、谨、新、情。 songheb@hotmail.com 文章 基础http://p.blog.csdn.net/images/p_blog_csdn_net/peiqin/jichu_peiqin.gif技能htt
CSS文本样式：颜色、对齐、装饰与缩进
"Web前端与移动开发中的CSS文本属性是网页设计中不可或缺的一部分，它们决定了文本的色彩、对齐方式、装饰效果、缩进和行间距，从而影响着文本的可读性和视觉美观。以下是对这些属性的详细解释： 1. **color**：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值