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制作动感导航条示例
Jan 26 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
玩转方法:call和apply
2014/05/08 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
python之yield表达式学习
2014/09/02 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
Python实现Event回调机制的方法
2019/02/13 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
焦裕禄精神心得体会
2014/09/02 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
Python实战之疫苗研发情况可视化
2021/05/18 Python
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL