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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
css display table 自适应高度、宽度问题的解决
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
数据库的日期格式转换
2006/10/09 PHP
php实现httpclient类示例
2014/04/08 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
VueJS全面解析
2016/11/10 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
什么时候用assert
2015/05/08 面试题
秋季运动会广播稿大全
2014/02/17 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
死亡赔偿协议书
2015/01/28 职场文书
导游词400字
2015/02/13 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
《1942》观后感
2015/06/08 职场文书
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python