常见文本样式及标签

Posted lovemarvin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了常见文本样式及标签相关的知识,希望对你有一定的参考价值。

  本文设计到常见对文档的处理样式,和块,行标签的特点。

  没用什么重要内容,只是自己的一些知识点的回忆,对以前知识的一个梳理过程,望某懒虫加油!!!

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式和块、行、内敛标签</title>
    <style>
        div{
            color: red;
            /*这是颜色,对于颜色的几种表示方式,大家都懂不用多说*/

            /*text-align: left;
            text-align: right;
            text-align: center;*/
            /*text-align: justify;*/
            /*这是文本排列对其方式,对于justify的意思就是,在一个容器
            里展开宽度的相等的。*/

            /*text-decoration: overline;
            text-decoration:line-through;*/
            text-decoration: underline;
            /*这是对文本进行划线装饰,比如商场的大甩卖在价格中间划一道
            线*/
            
            /*text-transform:uppercase;
            text-transform:lowercase;*/
            text-transform: capitalize;
            /*这是文本的转换,全部转换成大写,或者小写,
            对于capitalize,意思是将每一个单词的首字母转换成大写*/

            /*text-indent:2em;*/
            /*这是文本缩进,通常情况下,em承接父级字体px,2em就是刚好缩进2字符。
            有时候用text-indent:-9999px;来偏移掉字体,偏离可见区域。*/

            /*letter-spacing:10px;*/
            /*设置字母间的间距*/

            /*line-height: 30px;*/
            /*这是文本的行高,通常与height搭配,使文字垂直居中*/

            text-shadow: 5px 5px 10px yellow;
            /*这是文字的阴影,第一个5px是水平方向,第二个5px是垂直方向,
            注意10px是阴影的模糊范围。
            和box-shadow类似*/
            
            font-family: 微软雅黑;
            font-style: italic;
            word-spacing: 10px;
            vertical-align: center;
            white-space: nowrap;
            /*当然还有不经常用到的这些,知道意思就行,用到的时候能想到,
            W3CSchool,菜鸟教程必备的工具。对于文本样式还有很多简写的
            方式,font,background,border,padding,margin,*/

        /*    写到了这么多文本样式,突然想到经常遇到的一个问题,就是
            要求你在一行文本中,文本超出宽度溢出显示省略号,
            css解决方案如下:*/
            width: 100px;
            /*给出你显示文本的范围,当然如果用em来代替效果会更好,不会
            出出现半截在外面的丑态*/
            overflow: hidden;
            /*让超出部分隐藏*/
            /*white-space: nowrap;*/
            /*前面刚提到,意思是强制不换行,这是对一行文本的操作,
            对于多行文本,一般用js来写效果更好*/
            text-overflow: ellipsis;
            /*文本隐藏后添加省略号,通过这几句话就可以实现文本溢出显示省略号了*/


        }
    </style>
</head>
<body>
    <div>
        这是一行文字!
    </div>

    <!-- 这两天写着写着写烦了,就纳闷,这么简单的东西花时间写干什么,
    写了8百遍的东西,写了也算是一种回顾,以后看到了,告诉自己学过这个啊(苦笑) -->
    <!-- 接下来让我们闲扯一下常见标签有哪些,当然他们是有分类的
    比如,块标签,内敛属性的标签以及内敛块。下面我们一一讲解他们的特点和区别 -->

    <!-- 对于块标签来说,他们独一无二
        1,独占一行
        2,支持所有的css样式
        3,宽度会继承父级100%(默认情况) -->
            <div style="height:20px;padding:10px 10px;background-color: yellow;">
                <div style="background-color: red;">宽度继承</div>
            </div>
        <!-- 常见的块标签有标题标签,列表标签等 -->


        <!-- 对于行标签
        1,内容撑开高度
        2,不支持宽高,不支持上下的margin,padding
        (对于设置相应的属性,没用效果)
        3,同属性的标签排在同一排
        4,代码换行被解析 -->
        
        <!-- 行标签常见的有span,a,strong,em(斜体)等
        写网页的时候经常会设置宽高没用效果,可能就是
        行标签的作为,看情况转换成块或内敛快就行,有时候被定位
        或者浮动了就不需要设置。 -->

        <!-- 通常用a标签可以设置锚点 -->
        <a href="#tips">访问到id名为tip的位置</a>

        <a id="tips" href="javascripts;">我的名字叫tips</a>
        
        <!-- 标签a有target属性,_self默认在当前页打开
        _blank在新的窗口打开 -->
        
        <!-- 对于内联块标签
        1,内容撑开宽度
        2,同属性的标签排在同一排
        3,支持所有的css样式
        4,代码换行被解析 -->

        <!-- 常见的内联块标签有img标签,注意当页面加入img时,要指定它的宽高,这样
        当页面加载,或者维护人员加入图片,保证图片不变形 -->
</body>
</html>

 

以上是关于常见文本样式及标签的主要内容,如果未能解决你的问题,请参考以下文章

vue常见api

覆盖一个常见的片段帮助其他标签片段

小程序里echarts画的饼图在安卓手机上效果不正常?

HTML基础-常用标签及语法

input[type='file']样式美化及实现图片预览

input标签及属性