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地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 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
玩转虚拟域名◎+ .
2006/10/09 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
Atom的python插件和常用插件说明
2018/07/08 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python获取栅格点和面值的实现
2020/03/10 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
公务员职务工作的自我评价
2013/11/01 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
工商局个人工作总结
2015/03/03 职场文书
创卫工作总结2015
2015/04/22 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python