千锋教育-做有情怀、有良心、有品质的职业教育机构

当前位置:首页  >  关于学院  >  技术干货  >  html5技术干货  >  正文

CSS文本装饰

来源:千锋教育
作者:qyf
关键词: decoration   
2023-01-17
分享

  通过CSS文本装饰可以为文本添加装饰线、为装饰线设置颜色、为装饰线指定风格、为装饰线设置厚度等效果。

  为文本添加装饰线通过 text-decoration-line 属性实现,可以结合一个以上的值,如上划线和下划线,来显示文本上方和下方的线条。具体的值有三个:

  overline,在文本上方添加线条修饰。

  line-through,在文本中间添加线条修饰,实现了删除线的效果。

  underline,在文本下方添加线条修饰,实现了下划线的效果。

图片2

  我们来做个例子。

  打开编辑器,在 005 文件夹下创建 decoration.html 文件,构建好基本代码。

  添加 h1,h2,h3,p 四个元素。分别填入一些文本。

  在 005 文件夹下再创建一个 mystyle-3.css 文件,

  定义 h1 选择器,声明样式属性 text-decoration-line,值为 overline。

  定义 h2 选择器,也声明样式属性 text-decoration-line,值为 line-through。

  定义 h3 选择器,再声明样式属性 text-decoration-line,值为 underline。

  回到页面,通过 link 元素引入 mystyle-3.css 这个外部样式。

  在浏览器上预览效果,我们看:上边线、删除线和下划线就做好了!

  实际上,可以同时给文本添加多个线条,实现方法是给 text-decoration-line

  [ˌdekəˈreɪʃn】属性设置多个值,每个值通过空格分开。

  在 mystyle-3.css 再定义一个 p 选择器,声明样式属性 text-decoration-line,值写为 overline underline (读作overline 空格 underline )。

  看一下效果,段落被添加了两条装饰线。

  有的小伙伴还记得,给文本添加链接后,浏览器会默认给这个文本添加一个下划线。所以,添加了链接的文本就不要使用 underline 下划线装饰了。

  为文本设置装饰线的颜色通过 text-decoration-color 属性实现,属性值为任意合法的颜色值。

  给 h1 元素设置 text-decoration-color 属性,颜色值设置为 red。再快速的给 h2,h3,p 元素设置 text-decoration-color 属性,值分别为 blue,green,purple。

  我们看,线条都有了颜色。

  为装饰线指定风格通过 text-decoration-style 属性实现,属性值有五个:

  solid,实线。

  double,双实线。

  dotted,圆点线。

  dashed[dæʃt],虚线。

  wavy[ˈweɪvi],波浪线。

  为了演示方便,在 html 中再添加一个标题 h4,填入一些文本,在 css 中将全部元素的 text-decoration-line 样式属性都设置为 underline。再定义一个 h4 选择器,声明样式 text-decoration-line: underline。

  给 h1, h2,h3,h4,p 全部添加 text-decoration-style 属性,值分别为 solid,double,dotted,dashed[dæʃt],wavy。

  这样,各种线条的风格就设置好了!

  通过 text-decoration-thickness 属性为线条设置厚度,也就是线条的粗细。属性值有三种设置方法:

  auto, 默认值,这个值是不确定的,和所修饰的文字大小有关系。

  px,像素大小,是一个绝对值。比如 5px。

  %,是一个相对值,根据修饰文字的高度计算出来。比如 25%。

  在 h1 元素上声明样式属性 text-decoration-thickness,值为 auto。在 h2,h3 上也声明这个样式属性,值分别为 5px,50%。

  在浏览器里仔细观察,h1 上的下划线厚度是浏览器给的默认值。h2 上的下划线厚度是 5px。h3 上的下划线厚度为文字高度的一半。

  回到样式表代码,我们分析一下:每个文本修饰的属性名,均为三个单词连接起来的,这样写起来比较啰嗦,能不能简化一下呢?可以的!

  h1 {

  /* text-decoration-line: overline; */

  text-decoration-line: underline;

  text-decoration-color: red;

  text-decoration-style: solid;

  text-decoration-thickness: auto;

  }

  h2 {

  /* text-decoration-line: line-through; */

  text-decoration-line: underline;

  text-decoration-color: blue;

  text-decoration-style: double;

  text-decoration-thickness: 5px;

  }

  h3 {

  text-decoration-line: underline;

  text-decoration-color: green;

  text-decoration-style: dotted;

  text-decoration-thickness: 50%;

  }

  h4 {

  text-decoration-line: underline;

  text-decoration-style: dashed;

  }

  p {

  /* text-decoration-line: overline underline; */

  text-decoration-line: underline;

  text-decoration-color: purple;

  text-decoration-style: wavy;

  }

  我们可以去掉第三个单词,使用 text-decoration 这个样式属性来实现,text-decoration 是一个简写的属性,它的值是通过空格分隔的

  text-decoration-line、

  text-decoration-color、

  text-decoration-style

  以及 text-decoration-thickness 的一个或多个值。

  其中,text-decoration-line 必须设置,其他三个可选。

  举几个例子:

  这里的 text-decoration: underline,表示给文本设置下滑线装饰,线条的颜色、风格和粗细都采用默认值,也就是黑色、实线、自动粗细。

  这里的 text-decoration: underline red,表示给文本设置下滑线装饰,线条颜色为红色,其他修饰属性都采用默认值。

  这里的 text-decoration: underline red double,表示给文本设置下滑线装饰,线条颜色为红色、双线条。线条的粗细采用默认值。

  这里的 text-decoration: underline red double 5px,表示给文本设置下滑线装饰,线条颜色为红色、双线条、厚度为5px。

  h1 {

  text-decoration: underline;

  }

  h2 {

  text-decoration: underline red;

  }

  h3 {

  text-decoration: underline red double;

  }

  p {

  text-decoration: underline red double 5px;

  }

  这里你可能会问,四个值的顺序可以颠倒吗?答案是没有要求。但是,text-decoration-line 这个属性的值,必须设置!比如上边例子的 underline。

  回到样式表代码,我们试着改写一下 h1 的 样式声明,注释掉以前的代码,声明 text-decoration 属性,顺序可以按照上面样式书写的顺序,依次抄下来即可。因为这几个值没有顺序要求,但是必须设置 underline。

  我们看,h1 的文本装饰效果依然存在!

  HTML中的所有链接默认都有下划线。有时你会看到别人的页面,链接的样式没有下划线。如何实现的呢?

  给 a 元素声明 text-decoration: none,可以去除链接的下滑线,大家自己试一试吧!

  a {

  text-decoration: none;

  }

  最后,给大家总结一下:(说到这就行了,不用理睬下表)

  属性说明

  text-decoration在一个声明中设置所有的文字装饰属性

  text-decoration-color指定文本装饰的颜色

  text-decoration-line指定要使用的文本装饰的种类(下划线、上划线等)。

  text-decoration-style指定文本装饰的样式(实心、点状等)。

  text-decoration-thickness指定文本装饰线的厚度

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

相关推荐

  • CSS字体风格和样式简写 回到样式代码,给 p3 添加两个样式声明 font-size: 30px,line-height: 30px,font-family: 华文仿宋。我们看,第三个段落应用了6个样式效果:细体、倾斜、英文小型大写、30像素大小、行高30像素、字体为华文仿宋。
  • CSS文本装饰 通过CSS文本装饰可以为文本添加装饰线、为装饰线设置颜色、为装饰线指定风格、为装饰线设置厚度等效果。为文本添加装饰线通过 text-decoration-line 属性实现,可以结合一个以上的值,如上划线和下划线,来显示文本上方和下方的线条。具体的值有三个:
  • 数组扁平化 toString(),将数组转化为字符串,结果是获取数组中的每一个单元的数据组成一个字符串,使用逗号间隔再以逗号为间隔,将字符串转化为数组function fun1( arr ){ let str = arr.
  • 柯理化函数 所谓的柯里化函数指的是:把接受多个参数的函数变换成接受一个单一参数的函数,并且返回接受余下的参数而且返回结果的新函数//普通的add函数 function add(x, y) { return x + y } // Currying后 function curryingA...
  • 谈一谈垃圾回收机制? 垃圾回收是动态存储管理技术,会自动地释放“垃圾‘’(不再被程序引用的对象),按照特定的垃圾收集算法来实现资源自动回收的功能。 回收的两种机制
  • 函数的节流和防抖? function thro(cb,wait){ let timeOut return function(){ if(timeOut) return timeOut = setTimeout(function(){ cb() clearTimeout(timeOut) ti...