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 26 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
用CSS3画一个爱心
Apr 27 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 HandlerSocket的使用
2011/05/02 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
常用PHP框架功能对照表
2014/10/23 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
pytest中文文档之编写断言
2019/09/12 Python
如何基于python实现归一化处理
2020/01/20 Python
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
C++面试题目
2013/06/25 面试题
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
高中打架检讨书
2014/02/13 职场文书
2014年终个人总结报告
2015/03/09 职场文书
参加招聘会后的感想
2015/08/10 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS