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动画效果
Aug 14 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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操作数组相关函数
2011/02/03 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
js实现日历的简单算法
2017/01/24 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
python数据结构之图的实现方法
2015/07/08 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
Python 字符串换行的多种方式
2018/09/06 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
美国钻石商店:Zales
2016/11/20 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
类如何去实现接口
2013/12/19 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
教师实习的自我鉴定
2013/10/26 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
大学开学感言
2015/08/01 职场文书
少先队中队工作总结
2015/08/14 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书