text-align设置文本内容的水平对齐方式

text-align:left | right | center | justify

只对块级元素有用,比如<span>就没用,如果我们要对块级元素应用,那么就要外嵌一个块级元素,比如<div>

大家是不是很熟悉啊,没错,我们在看html的时候,前面说了,对齐方式align="left" | "right" | "center" | "justify" |

是不是很相似啊,时至今日,我个人发现,html也好,css也好,我们表达某种效果的时候,如果强行用html,或者css都可以实现,只是简易程度和后期维护的简易程度有不同,比如对齐方式,异曲同工之妙,不过css更好。当然我说的不一定对,大家参考一下。

text-align属性是可以继承的,当我们对其父元素设置了text-align那么他的子元素将集成父元素的属性

我们当然可以用行内样式来实现文本的对齐方式。如下图,但是这样不利于后期维护,我个人认为用这个行内样式还不如直接用align

"style=texe-align:left;"

所以我们用内部样式或者外部样式更好

 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="UTF-8">
  <title>漫步白月光之css文本样式</title>
  <style type="text/css">
           /*.text1{text-align: left;} 
           .text2{text-align: right;}
           .text3{text-align: center;}
           .text4{text-align: justify;}
           div{text-align: center;}
           body{text-align: center;}*/
           .text5{text-align: center;}
           .text5 p{width: 50%;margin: 0 auto;}/*margin增强兼容性,0代表上下边距,auto代表左右边距自动,让元素内的标签也居中*/
            
    </style>
 </head>
 <body>
  <h2>出师表</h2>
  <div>
<!--   <div><img src="../img/logo.png"></div> -->
    <p>
  先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。
然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。
  </p>
  </div>
  <p>
  先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。
然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。
  </p>
  <p>
  亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。
先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军,此悉贞良死节之臣,愿陛下亲之信之,则汉室之隆,可计日而待也。
  </p>
  <p>
  臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。
先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。
后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。
  </p>
  <p>
  愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。
若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏,臣不胜受恩感激。
  </p>
 </body>
 </html>

vertical-align

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | 长度 | 百分比

下来我们来聊一下这些属性,首先我们来说一下sub和super,分别是下标和上标,它只对行内元素生效,对块级元素不生效

 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="UTF-8">
  <title>漫步白月光之css文本样式</title>
  <style type="text/css">
       span{color: red;font-size:10px;}
       .sub{vertical-align: sub;}
       .super{vertical-align: super;}
    </style>
 </head>
 <body>
 	<p>漫步白月光<span class="sub">www.ccava.net</span></p>
 	<p>漫步白月光<span class="super">www.ccava.net</span></p>
 	<p class="super">漫步白月光<span>www.ccava.net</span></p><!--大家观察,这个是没有生效的,因为p是一个块级标签-->

 </body>
 </html>

接下来跟大家聊baseline,top,text-top,middle,bottom,text-bottom

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式

这句话真绕口啊。这是官方给出的定义。首先,我们要了解基线的概念,我给大家画个图先,不要害怕,这次我不描述灵魂,用普通画笔

上图一目了然了大家对基线的认知吧

接下来,我们来了解一下这些属性

这下大家应该对这六个属性有一定的了解了,那么我们就来操作一番吧,我自己除了top没看出什么变化。。大家自己看着练习下吧

 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="UTF-8">
  <title>漫步白月光之css文本样式</title>
  <style type="text/css">
         .top{vertical-align: top;}
         .text-top{vertical-align: text-top;}
         .middle{vertical-align: middle;}
         .baseline{vertical-align: baseline;}
         .text-bottom{vertical-align: text-bottom;}
         .bottom{vertical-align: bottom;}
       
    </style>
 </head>
 <body>
  <p>
  ABCDEFG
  <span>
       <img src="../img/logo.png">
       漫步白月光www.ccava.net
  </span>
  </p>
  <p>
  ABCDEFG
  <span>
  <img src="../img/logo.png">
  漫步白月光www.ccava.net
  </span>
  </p>
  <p>
  ABCDEFG
  <span>
  <img src="../img/logo.png">
      漫步白月光www.ccava.net
      </span>
  </p>
  <p>
  ABCDEFG
  <span>
  <img src="../img/logo.png">
      漫步白月光www.ccava.net
      </span>
  </p>
  <p>
  ABCDEFG
  <span>
  <img src="../img/logo.png">
      漫步白月光www.ccava.net
  </span>
  </p>
  <p>
  ABCDEFG
  <span>
  <img src="../img/logo.png">
  漫步白月光www.ccava.net
  </span>
  </p>
  <p>
  ABCDEFG
  <span>
  <img src="../img/logo.png">
  漫步白月光www.ccava.net
  </span>
  </p>

 </body>
 </html>


长度值和百分比

长度值负值代表下移,比如(-20px)或者(-20%)

 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="UTF-8">
  <title>漫步白月光之css文本样式</title>
  <style type="text/css">
         .weight1{vertical-align: 30px;}
         .percent{vertical-align: 50%;}
         .weight2{vertical-align: -30px;}
          
       
    </style>
 </head>
 <body>
  <p>
  ABCDEFG
  <span>
       <img src="../img/logo.png">
       漫步白月光www.ccava.net
  </span>
  </p>
   <p>
  ABCDEFG
  <span>
       <img src="../img/logo.png">
       漫步白月光www.ccava.net
  </span>
  </p>
  <p>
  ABCDEFG
  <span>
  <img src="../img/logo.png">
  漫步白月光www.ccava.net
  </span>
  </p>

 </body>
 </html>


单元格内我们也可以用这种样式

垂直居中

单行文字垂直居中;多行文字垂直居中

单行文字垂直居中,我们需要用line-height:(行高)属性和我们的height(高)设置为一样的值,然后再用text-align:center水平居中就实现了如下效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之css文本样式</title>
<style type="text/css">
      .test1{height: 100px;
            width: 80%;
            border: 2px red solid;
            line-height: 100px;
            text-align: center;
           }

    </style>
</head>
<body>
   <div>
      <p>漫步白月光www.ccava.net
      </p>
   </div>
</body>
</html>

多行文字垂直居中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之css文本样式</title>
<style type="text/css">
      .test1{height: 300px;
            width: 80%;
            border: 2px red solid;
            display: table;/*这是为了告诉浏览器第一个div下是一个表格*/
           }
      .test2{vertical-align: middle;
             display: table-cell; /*这是为了告诉浏览器这是一个表格*/
             text-align: center;
            }    

    </style>
</head>
<body>
     <div class="test1">
	<div class="test2">
         <img src="../img/logo.png">
         <h2>出师表</h2>
         <p>臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。
先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。
后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。
         </p>
      </div>
    </div>
</body>
</html>

文本行高

line-height: 长度值 | 百分比(属性是可以继承的,同样,继承是继承的计算值,而不是行高本身

这里大家需要注意的是行高的距离是固定的,也就是说我们的行高设置大小必须大于字体的大小(浏览器字体默认16px,我没有单独设置字体大小),不然就会造成字体重叠,比如下面这样

那么有没有办法实现我们的行高跟字体大小成比例呢,答案当然是可以的。我们这个时候就要用em或者%,em和%与字体大小有关

.test3{line-height: 2em;font-size: 20px}/*此时的行高值 20(字体大小)*2(em属性)=40px*/
.test3{line-height: 50%;font-size: 20px}/*此时的行高值 20(字体大小)*50%(百分比)=1px*/    哈哈哈,错位了有木有,大家自己实验百分比吧

效果分别是下面两个,大家按照顺序对比,浏览器有默认的行高,不同浏览器默认行高可能不一样,一般是120%

其它文本样式属性

文本样式属性
字体属性解释
word-spacing设置元素内单词之间的间距
letter-spacing
设置元素内字幕直接的间距
text-transform

设置元素内文本的大小写

capitalize|uppercase|lowercase|none

text-decoration

可以应用于所有元素,但是不能继承

设置元素内文本的装饰

underline|overline|line-through|blink|none

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之css文本样式</title>
<style type="text/css">
           .test1{word-spacing: 20em;}/*em或者px都可以,负值也可以,大家可以自行测试*/
           .test2{letter-spacing: 20px;}/*默认值是0*/
           .test3{text-transform: capitalize;}/*首字母大写*/
           .test4{text-transform: uppercase;}/*字母设置成大写*/
           .test5{text-transform: lowercase;}/*字母设置成小写*/
           .test6{text-transform: none;}/*不做设置,该属性默认值*/
           .test7{text-decoration: underline;}/*下划线*/
           .test8{text-decoration: overline;}/*上划线*/
           .test9{text-decoration: line-through;}/*贯穿线,跟删除线效果一样*/
           .test10{text-decoration: blink;}/*闪烁效果,有兼容性问题*/
           .test11{text-decoration: none ;}/*不做设置,该属性默认值,同一个内容可以设置多个text-decoration,属性值之间用空格隔开,如果最后一个属性值是none,那么前面设置的属性值都会清空*/
           .test12{text-decoration: none;}
           .test13{text-decoration: underline overline;color: red}
           .test14{text-decoration: underline;color: blue}
           </style>      
<body>
     <p class="test1">漫步白月光www.ccava.net</p>
     <p class="test2">漫步白月光www.ccava.net</p>
     <p class="test3">漫步白月光www.ccava.net</p>
     <p class="test4">漫步白月光www.ccava.net</p>
     <p class="test5">漫步白月光www.ccava.net</p>
     <p class="test6">漫步白月光www.ccava.net</p>
     <p class="test7">漫步白月光www.ccava.net</p>
     <p class="test8">漫步白月光www.ccava.net</p>
     <p class="test9">漫步白月光www.ccava.net</p>
     <p class="test10">漫步白月光www.ccava.net</p>
     <p class="test11">漫步白月光www.ccava.net</p>
     <a class="test12" href="https://www.ccava.net/">漫步白月光</a><br/>
     <a href="https://www.ccava.net/">漫步白月光</a><!--大家注意看这两个超级连接有什么不一样--><br/><br/>
     <p class="test13">漫步白月光
       <span class="test14">www.ccava.net</span>
     </p>
</body>
</html>

我是按照顺序做的,大家可以对比学习一下。