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制作登录表单的步骤
Apr 07 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php实现图片缩略图的方法
2016/03/29 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
js倒计时抢购实例
2015/12/20 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
js实现搜索栏效果
2018/11/16 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
学习python分支结构
2019/05/17 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
python os.listdir()乱码解决方案
2021/01/31 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
大一新生军训时的自我评价分享
2013/12/05 职场文书
法人授权委托书格式
2014/04/08 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python