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实现多重边框的方法总结
May 31 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 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下打开URL地址的几种方法小结
2010/05/16 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
phplot生成图片类用法详解
2015/01/06 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
js用闭包遍历树状数组的方法
2014/03/19 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
python使用mysql数据库示例代码
2017/05/21 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
python支付宝支付示例详解
2019/08/22 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
大学生就业自我鉴定
2013/10/26 职场文书
体育教师自荐信范文
2013/12/16 职场文书
人民教师求职自荐信
2014/03/12 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
导游词之桂林
2019/08/20 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript