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 06 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 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-fpm的配置详解
2013/06/03 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
Python字符串拼接的几种方法整理
2017/08/02 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
Solaris操作系统的线程机制
2012/12/23 面试题
大一自我鉴定范文
2013/10/04 职场文书
自我鉴定怎么写
2013/12/05 职场文书
一份报关员的职业规划范文
2014/01/08 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
承租经营合作者协议书
2014/10/01 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
python 远程执行命令的详细代码
2022/02/15 Python