CSS文本样式-CSDN博客

本文链接：https://blog.csdn.net/qq_33430421/article/details/89392394

字体样式

字体属性

字体：font-family

语法：font-family:[字体1],[字体2]...,字体集，设置多个字体，浏览器依次查找，如果都没有，使用浏览器默认样式。

说明：含空格字体名和中文，用英文引号括起；多个字体用英文逗号隔开；引号嵌套，外使用双引号，内使用单引号。

font-family属性值可以是具体字体名，字体集(Serif,Sans-serif,Monospace,Cursive,Fantasy)。不同的字体集对文字的修饰不一样，有的有装饰线。

<style type="text/css">
       h3{font-family:"宋体",serif;}
 </style>

<body>
        <h3>CSS样式表</h3>
        <p style="font-family:'微软雅黑','隶书';">
           CSS目前最新版本为CSS3
        </p>
</body>

文字大小：font-size

语法：font-size:绝对单位|相对单位

属性值（绝对单位）	说明
in	Inch，英寸 1英寸=2.54厘米
cm	厘米 1厘米=0.394英寸
mm	毫米 1毫米=0.1厘米
pt	磅，印刷的点数 72磅=1英寸
pc	Pica 1pc=12pt

属性值（绝对单位）	CSS缩放系数1.2
xx-small	9px
x-small	11px
small	13px
medium	16px
large	19px
x-large	23px
xx-large	28px

绝对大小，不能随浏览器分辨率或父元素大小的改变而改变。在不同浏览器下，绝对单位显示的内容不一样，因此不推荐使用绝对单位。

相对大小使用px，larger（相对父元素的文字大小变大），smaller（相对父元素的文字大小变小），em（针对父元素），%（针对父元素）。该属性可以继承。

  <title>font-size</title>
        <style type="text/css">
           /*补充代码*/
           h3{font-family:"宋体";font-size:200%;}
           .em{font-family: "微软雅黑";font-size: 1.5em;}
  </style>
    </head>
    <body>
        <div>
            <h3>web前端工程师</h3>
            <p class="em">
                 <a href="#" class="em">Web前端开发工程师</a>，主要职责是利用HTML/CSS/JavaScript/Flash
        </div>      
    </body>
<!--div默认的大小是16px，h3是父元素的2倍，是32px，p标签是父元素的1.5倍，是24px,a标签是父元素p的1.5倍，是36px-->

文字颜色：color

有三种表示方法，英文，rgb，十六进制。

        <style type="text/css">
           /*补充代码*/
           h3{font-family:"宋体";font-size: 1.5em;color:rgb(255,0,0);}
           span{color:#0000ff;font-size: 2em;}
        </style>

文字粗细：font-weight

为元素内文字设置粗细，语法：font-weight:normal | bold（加粗） | bolder（更粗） | lighter（更细） | 100~900。有些相近效果差别不大，常用的是bold。默认值：normal，400等同于normal，700等同于bold。

文字样式：font-style

为元素内文字设置样式，语法：font-style: normal | italic（斜体） | oblique（倾斜）。设置斜体一般使用italic。

字体变形：font-variant

设置元素中文本为小型大写字母，语法：font-variant：normal | small-caps

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 补充代码 -->
    <style type="text/css">
        p{color: blue;font-family: "微软雅黑";font-size: 2em;}
        .weight{font-weight: bold;}
        .style{font-style: italic;}
        .variant{font-variant: small-caps;}
    </style>
</head>
<body>
    <!-- 补充代码 -->
    <p class="weight">font-weight属性规定字体的粗细</p>
    <p class="style">font-style属性规定字体的样式</p>
    <p class="variant">font-variant属性设置文本为小型大写字母</p> 
</body>
</html>

font属性（简写）

语法： font:font-style font-variant font-weight font-size/line-height font-family

说明：值之间空格隔开，注意书写顺序，并没有颜色这一项，不能加。（同时设置font-size 和font-family，属性才起作用，前三者的顺序之间是任意的，后两者的顺序必须先写size再写family，前三者要放在后两者的前面。）

文本样式

text-align文本水平对齐方式（可继承）

语法： text-align: left | right | center | justify，text-align属性只对块级元素有效，且子元素可以继承父元素的属性。

line-height行高（可继承）

语法： line-height: 长度值(px) | 百分比(em %)，如果使用长度值px，则行高是一个固定值，如果文字字体变大，会产生行与行之间重叠。实际开发中使用em。例子：font-size：20px；line-height：1.3em；则行高为20*1.3=26px，继承行高属性时要注意这样的计算。

text-indent:2em（首行缩进2字符）

vertical-align文本垂直对齐方式

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

垂直居中应用

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

单行文字只需要将line-height设置的和空间高度一致就行。多行文字要添加单元格属性，display:table-cell，其父元素要添加属性display:table。

<!DOCTYPE html>
<html>
    <head>
   <meta charset="UTF-8">
   <title>vertical-align</title>
   <style type="text/css">
    *{padding:0px;margin: 0px;}
   
    .warp1{    
              height:80px;
              width: 100%;
              background-color: #14191e;              
           /*在此补充代码*/
              line-height: 80px;
              text-align: center;
             }

     .warp1 h1{ color:#fff;
                /*在此补充代码*/
                font-size: 24px;
              }

     .warp2{
              height:400px;
              width: 100%;
              border:1px  #14191e solid;
              /*在此补充代码*/  
              display: table;
             }

     .content{    
              /*在此补充代码*/
              display: table-cell;
              vertical-align: middle;
              /* border: 2px blue solid; */
                  
              }

     .content  p{ width:500px;
                  font-family: "微软雅黑";
                  margin:0 auto;
                  /*在此补充代码*/
                  line-height: 1.5em;
                  font-size: 14px;
                  /* border: 1px red solid}    */

   </style>
</head>
<body>
    <div class="warp1">
          <h1>欢迎来到慕课网</h1>      
    </div>
    <div class="warp2">
        <div class="content">
           <p>慕课网，只学有用的！</p>
           <p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p>
        </div>
    </div>    

</body>
</html>