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;
            width: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;
                width:800px;
                background:deepskyblue;
                
            }
            d3{
                height:500px;
                width: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>
css基本使用之文本样式

猜你喜欢
