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 简写animation
May 10 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 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和.net中des加解密的实现方法
2013/02/27 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
javascript基本类型详解
2014/11/28 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Python算法之图的遍历
2017/11/16 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
什么是python的列表推导式
2020/05/26 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
Css3圆角边框制作代码
2015/11/18 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
母亲七十大寿答谢词
2014/01/18 职场文书
供电工程专业求职信
2014/08/09 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
工作感想范文
2015/08/07 职场文书
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫