HTML文本属性&颜色控制属性的实现


Posted in HTML / CSS onDecember 17, 2019

一、文本装饰的属性

1.格式:text-decoration:underline;

2.取值:

(1)underline代表下划线

(2)line-through代表删除线

(3)overline代表上划线

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

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

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p{

            text-decoration: line-through;

        }

        u{

            text-decoration: overline;

        }

        h1{

            text-decoration:underline;

        }

        a{

            text-decoration: none;

        }

</style>

</head>

<body>

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

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

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

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

HTML文本属性&amp;颜色控制属性的实现

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;

<head>

    <meta charset="UTF-8">

    <title>d64_attribute_of_text</title>

    <style>

        p{

            text-decoration: line-through;

            text-align: center;

            text-indent: 2em;

        }

        u{

            text-decoration: overline;

            text-align: right;

            text-indent: 100px;

        }

        h1{

            text-decoration:underline;

            text-align: left;

        }

        a{

            text-decoration: none;

        }

</style>

</head>

<body>

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

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

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

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

</body>

HTML文本属性&amp;颜色控制属性的实现

四、颜色控制属性

1.格式:color:值;

2.取值:

(1)颜色英文单词

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

(2)RGB颜色选择器

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

HTML文本属性&amp;颜色控制属性的实现

(3)RGBA颜色选择器

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

HTML文本属性&amp;颜色控制属性的实现

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

(5)十六进制的缩写

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
利用CSS3实现自定义滚动条代码分享
Aug 18 HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 #HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 #HTML / CSS
处理textarea中的换行和空格
Dec 12 #HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 #HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 #HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 #HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 #HTML / CSS
You might like
PHP中for循环语句的几种变型
2006/11/26 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
浅谈PHP的反射API
2017/02/26 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
js创建对象的方式总结
2015/01/10 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
vue组件间通信解析
2017/03/01 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
Python Gitlab Api 使用方法
2019/08/28 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
python游戏开发的五个案例分享
2020/03/09 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
安全教育感言
2014/03/04 职场文书
工程项目建议书范文
2014/03/12 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers