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系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
HTTP中的Content-type详解
Jan 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP session会话的安全性分析
2011/09/08 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Python+Wordpress制作小说站
2017/04/14 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
捐助感谢信
2015/01/22 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
利用python做表格数据处理
2021/04/13 Python
python3 字符串str和bytes相互转换
2022/03/23 Python