zoukankan      html  css  js  c++  java
  • css基本使用之文本样式

    一、文本样式

    常用的文本样式

    1.背景颜色(background-color)

    2.背景图片(background-image)

    3,背景铺盖(background-repeat)

    4背景大小(background-size)

    5,背景定位(background-position)

    也可以直接复合样式

    二、实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本样式</title>
        <style>
            p{
                /*首行缩进2个单位*/
                text-indent:2em;
    
                /*设置行高  整行字的高度,文字在这个行高的中间*/
                line-height:32px;
            }
            div{
                /*文字居中   上下居中,左右居中*/
                /*上下居中*/
                height:200px;
                200px;
                border:1px solid red;
                /*文字的上下居中:line-height = height*/
                line-height:200px;
                /*文字左右居中:text-align*/
                text-align:center;
                
                /*对英文字符的操作*/
                /*文本大小写*/
                /*capitlize(首字母大写),upper(全部大写),lowercase(小写)*/
                text-transform:capitalize;
            }
                a{
                    /*想要a标签的样式,但是不想要下划线*/
                    /*!*text-decoration: none;*!去除下划线*/
                    /*!*text-decoration: underline;*!下划线*/
                    /*text-decoration:overline;上划线*/
                    /*text-decoration:line-through ;中划线*/
                }
                 /*文字超出的部分用三个点省略*/
                #d{
                    /*要想实现文字超出部分隐藏,以下缺一不可*/
                    white-space: nowrap; /*换行方式不换行;*/
                    overflow:hidden;/*超出部分隐藏*/
                    text-overflow:ellipsis;   /*文字超出部分用...显示*/
                }
                /*div标签的居中*/
                d2{
                    height:500px;
                    800px;
                    background:deepskyblue;
                    
                }
                d3{
                    height:500px;
                    400px;
                    background:slateblue;
                    /*实现div在父级div居中*/
                    margin:0 auto
                }
            
        </style>
    
    
    
    </head>
    <body>
        
        <div>文字居中,HELLO,world!</div>
        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
        <a href="javascript:void(0);">我是一个a标签</a>
        
        <div id="d">那女孩对我说说我保护她的梦,说这个世界对他这样的不多那女孩对我说说我保护她的梦,说这个世界对他这样的不多那女孩对我说说我保护她的梦,说这个世界对他这样的不多那女孩对我说说我保护她的梦,说这个世界对他这样的不多那女孩对我说说我保护她的梦,说这个世界对他这样的不多那女孩对我说说我保护她的梦,说这个世界对他这样的不多</div>
    
    
        <div id="d2"><div id="d3"></div></div>
        
    </body>
    </html>
  • 相关阅读:
    分享一个流程实例运行时出现异常的恢复方案
    为什么要从事BPM开发
    分享两个BPM配置小技巧
    说说BPM数据表和日志表中几个状态字段的详细解释
    流程表单中js如何清空SheetUser控件数据?
    如何解决流程开发中SheetRadioButtonList页面取值问题
    把一个syn报文给rst掉
    linux io的cfq代码理解一
    xfs 的一些工具使用
    你知道这段代码为什么会段错误么?
  • 原文地址:https://www.cnblogs.com/zgzeng/p/11954225.html
Copyright © 2011-2022 走看看