酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
【ECS精选特惠】新用户上云低至1折起
百度资源

详解HTML文本属性&颜色控制属性

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-12-18
本篇文章主要介绍了详解HTML文本属性&颜色控制属性,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

一、文本装饰的属性

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>



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>



四、颜色控制属性

1.格式:color:值;

2.取值:

(1)颜色英文单词

注:一般情况下常见的颜色都是由对应的英文单词,但是英文单词能够表达的颜色是有限的,也就说不是所有的颜色都能够通过英文单词来表达

(2)RGB颜色选择器

注:红绿蓝三原色,格式:rgb(255,0,0)代表红色,里面的数字分别代表红绿蓝三原色各自的亮度,webstorm很智能,可以写代码时直接在旁边显示颜色。
 

(3)RGBA颜色选择器

注:CSS3才推出来的一种格式,其中最后的字母a其实就是代表透明度,最大为1,最小为0,值越小越透明
 

(4)十六进制(后天再写)

(5)十六进制的缩写

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.jb51.net/html5/706636.html

相关文章

  • html5拖拽应用记录及注意点的介绍

    html5拖拽应用记录及注意点的介绍

    下面通过代码给大家介绍html5拖拽应用记录,具体代码如下所示: e.dataTransfer.setData(a,设置的值);e.dataTransfer.getData(a);function drop(e){ !--尝试console.log(e),这里能拿到好多你用得到的api-- e.dataTransfer.setData(a, e.t......
    06-02
  • 详解Html5 canvas画图白板踩坑

    详解Html5 canvas画图白板踩坑

    最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了。 主要是记录一下自己菜到像傻子一样的技术。 1、canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大。 2、图片上传!白板涂鸦的内容是以base64的形......
    06-02
  • video实现有声音自动播放的教程

    video实现有声音自动播放的教程

    video实现自动播放有声音 需求:老板见人家可以的,我们的也要可以!!! 前端:自动播放,简单... 要实现:鼠标移入视频播放同时有声音,移出让你暂停,,,,, 问题集合 1- 自动播放实现没有声音, 2- 怎么实现有声音自动播放? 3- 鼠......
    05-20
  • video.js支持m3u8格式直播的实现教程

    video.js支持m3u8格式直播的实现教程

    为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. video.js解决以上两个问题,还可以有各种视频状态接口暴露,优化......
    05-20
  • 详解HTML5 HTMLCollection和NodeList的区别

    详解HTML5 HTMLCollection和NodeList的区别

    获取 HTMLCollection 对象 getElementsByTagName() 方法返HTMLCollection对象。 HTMLCollection 对象类似包含 HTML 元素的一个数组。 注意: HTMLCollection 不是一个数组! HTMLCollection 看起来可能是一个数组,但其实不是。 你可以像......
    05-01
  • canvas绘制太极图的实现

    canvas绘制太极图的实现

    看到了很多人写的太极图案,自己也来搞一下,今天就来介绍一下 css样式代码 .animation{ width: 800px; height: 800px; border: 1px solid #000;}#canvas{ animation: rotate 6s linear infinite; }/* 给太极图设置旋转动画 */@keyframes......
    05-01
  • html5中使用hotcss.js实现手机端自适配

    html5中使用hotcss.js实现手机端自适配

    Html5页面在手机端做自适配是很常见的技术需求,下面介绍下在html页面使用hotcss 简介 使用动态的HTML根字体大小和动态的viewport scale。 遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下,让你的页面看起来是一样的。 1.......
    04-25
  • 详解HTML中meta标签及Keywords

    详解HTML中meta标签及Keywords

    关键字 meta(标签)及 Keywords(关键词),曾经在网页中很重要的,但现在已经被很多搜索引擎完全忽略。但是,如果加上这个标签也对网页的综合表现没有坏处,不过,如果使用不恰当的话,对网页非但没有好处,还有欺诈的嫌疑。 键字标签K......
    04-21
  • 移动端h5页面根据屏幕适配的四种方案总结!

    移动端h5页面根据屏幕适配的四种方案总结!

    方法一:引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案: https://github.com/amfe/lib-flexible (此处可点击) 淘宝的其实也和viewport的有点像,但是它主要是根据设备设备像素比设置scale的值,保持视口device-width始......
    04-21
  • html5 canvas实现光线沿不规则路径运动的代码

    html5 canvas实现光线沿不规则路径运动的代码

    svg让动画沿着不规则路径运动 查阅svg文档后发现,svg动画运动有两种实现方式,且都非常简单,但对于100%实现设计师给出的效果有很大的距离 使用offset-path偏移路径和offset-roate偏移角度让元素沿着不规则路径走 !DOCTYPE html html he......
    04-21

最新更新