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 box-sizing属性详解
Nov 15 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
PHP实现验证码校验功能
2017/11/16 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
JS重要知识点小结
2011/11/06 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
axios学习教程全攻略
2017/03/26 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
Python实现全排列的打印
2018/08/18 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
公司端午节活动方案
2014/02/04 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
离职报告范文
2014/11/04 职场文书
如何写好闭幕词
2019/04/02 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS