源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 7829|回复: 0

[CSS/Html] Html文本属性和颜色控制属性的实现

[复制链接]

1169

主题

1557

帖子

8820

金币

超级版主

Rank: 8Rank: 8

积分
19323
发表于 2020-2-9 19:36:05 | 显示全部楼层 |阅读模式
这篇文章主要介绍了HTML文本属性&颜色控制属性的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、文本装饰的属性

1.格式:text-decoration:underline;

2.取值:

(1)underline代表下划线

(2)line-through代表删除线

(3)overline代表上划线

(4)none代表什么格式都没有(默认是这个属性)

注意:none的大多数用处在我们使用a标签的时候,可以用来去掉超级连接的下划线,可见下方演示

  1. <head>

  2.     <meta charset="UTF-8">

  3.     <title>Title</title>

  4.     <style>

  5.         p{

  6.             text-decoration: line-through;

  7.         }

  8.         u{

  9.             text-decoration: overline;

  10.         }

  11.         h1{

  12.             text-decoration:underline;

  13.         }

  14.         a{

  15.             text-decoration: none;

  16.         }

  17. </style>

  18. </head>

  19. <body>

  20. <u>我是一个事例文字</u>

  21. <p>我也是一个装饰文字</p>

  22. <h1>我更是一个事例文字</h1>

  23. <a href="https://www.baidu.com">我是一个超级链接</a>
复制代码


2019121715502467.jpg


3.快捷键

td代表text-decoration:none;

tdu代表text-decoration:undeiline;

tdl代表text-decoration:line-through;

tdo代表text-decoration:overline;

二、文本对齐的属性

1.格式:text-align:center;

2.取值:

(1)center代表居中

(2)right代表居右

(3)left代表居左

3.快捷键

ta代笔text-align:left;

tar代表text-align:right;

tac代表text-align:center;

总结:特殊的记住默认的值,平常的在记住属性值单词首字母。

三、文本缩进的属性

1.格式:text-indent:2em;

2.取值:

(1)3em代笔3个字符

(2)5px代表5个像素

3.快捷键:

ti代表text-indent:;

ti2e代表text-indent:2em;

  1. <head>

  2.     <meta charset="UTF-8">

  3.     <title>d64_attribute_of_text</title>

  4.     <style>

  5.         p{

  6.             text-decoration: line-through;

  7.             text-align: center;

  8.             text-indent: 2em;

  9.         }

  10.         u{

  11.             text-decoration: overline;

  12.             text-align: right;

  13.             text-indent: 100px;

  14.         }

  15.         h1{

  16.             text-decoration:underline;

  17.             text-align: left;

  18.         }

  19.         a{

  20.             text-decoration: none;

  21.         }

  22. </style>

  23. </head>

  24. <body>

  25. <u>我是一个事例文字</u>

  26. <p>我也是一个装饰文字</p>

  27. <h1>我更是一个事例文字</h1>

  28. <a href="https://www.baidu.com">我是一个超级链接</a>

  29. </body>
复制代码

2019121715502468.jpg


四、颜色控制属性

1.格式:color:值;

2.取值:

(1)颜色英文单词

注:一般情况下常见的颜色都是由对应的英文单词,但是英文单词能够表达的颜色是有限的,也就说不是所有的颜色都能够通过英文单词来表达

(2)RGB颜色选择器

注:红绿蓝三原色,格式:rgb(255,0,0)代表红色,里面的数字分别代表红绿蓝三原色各自的亮度,webstorm很智能,可以写代码时直接在旁边显示颜色。

2019121715502469.jpg


(3)RGBA颜色选择器

注:CSS3才推出来的一种格式,其中最后的字母a其实就是代表透明度,最大为1,最小为0,值越小越透明

2019121715502470.jpg


(4)十六进制(后天再写)

(5)十六进制的缩写

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持锦尚中国源码论坛。

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-6-25 12:42 , Processed in 0.112329 second(s), 33 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明