CSS小结4 之文本特效等

1 text-indent效果:
    在<H1>标签中，把网站LOGO放到<H1>标签中，去掉文字，只看到图片，优化SEO,指定H1元素的长度和图片的长度一样，
设置h1的背景图片，使用text-indent:-9999px;
<style type="text/css">
        h1
        {
            width:300px;
            height:100px;
            background-image:url("images/logo.jpg");
            text-indent:-9999px;
        }
    </style>

2 text-align：对块元素不起作用，对文字，inline元素和inline-block元素起作用；margin:0:auto中，是块元素水平居中；

3 line-height：两行文字基线间的距离
CSS中同样有顶线，中线，基线，底线的概念；
   行距：指的是上一行的底线到下一行顶线间的距离：
   内容区：行中顶线和底线之间的部分；
   行框：两行文字“半行距分隔线”之间的距离；
   CSS中定义height和line-height属性值相等，实现单行文字的垂直居中


<style type="text/css">
        div
        {
            width:240px;
            height:60px;
            border:1px solid gray;
            font-size:12px;
            text-align:center;
        }
        #div1{line-height:20px;}
        #div2{line-height:40px;}
        #div3{line-height:60px;}
     </style>
</head>
<body>
     <div id="div1">height为60px，line-height为20px</div>
     <div id="div2">height为60px，line-height为40px</div>
     <div id="div3">height为60px，line-height为60px</div>
</body>

4 line-height的值为百分比的时候，当前元素的行高是相对于父元素的font-size计算的；
line-height=父元素的 font-sixze*百分比
     <style type="text/css">
        body{font-size:30px;}
        #outer-box
        {
            /*父元素行高：30px×150%=45px*/
            line-height:150%;
            background-color:Red;
            color:White;
        }
        #inner-box
        {
            /*子元素行高：30px×150%=45px（继承父元素的line-height）*/
            font-size:20px;
            background-color:Purple;
            color:White;
        }
     </style>
</head>
<body>
     <div id="outer-box">这是父元素
         <div id="inner-box">这是子元素</div>
     </div>

5 vertical-align取值
   A 负值：元素相对于基线向下偏移2PX;

   B 百分比，比如vertical-align:50%,假如当前元素继承的line-height 为20PX，则vertical-align等于vertical-align:10PX,相对
于基线向上偏移10PX；

6 vertical中对于div元素，实现DIV中图片垂直居中；

   <style type="text/css">
        div
        {
            display:table-cell;
            vertical-align:middle;
            width:120px;
            height:120px;
            border:1px solid gray;
        }
    </style>
</head>
<body>
    <div><img src="images/girl.png" alt=""/></div>

CSS小结4 之文本特效等

猜你喜欢