CSS从入门到精通（CSS字体和文本样式）-优快云博客

主要介绍css字体和文本样式

原文请访问我的技术博客番茄技术小栈

CSS字体

文字样式属性

字体:font-family
文字大小:font-size
文字颜色:font-color
文字粗细:font-weight
文字样式:font-style

font-family字体属性

定义元素内文字以什么字体来显示

语法:

font-family:[字体1][,字体2][,...]
复制代码

说明:

含空格字体名和中文，用英文引号(“ )括起
多个字体，用英文逗号“，”隔开
引号嵌套，外使用双引号，内使用单引号

font-family属性值: 具体字体名，字体集字体集

Serif
Sans-serif
Monospace • Cursive
Fantasy

Serif 和 Sans-serif区别

font-size文字大小

定义元素内文字大小

语法:

font-size: 绝对单位|相对单位
复制代码

绝对单位

相对路径

px 像素
em/%：百分比

color文字颜色

定义元素内文字颜色

语法:

color: 颜色名|十六进制|RGB
复制代码

font-weight文字粗细

为元素内文字设置粗细

语法:

font-weight: normal | bold | bolder | lighter | 100~900
说明:
默认值:normal
400 等同于 normal，而 700 等同于 bold
复制代码

font-style文字样式

为元素内文字设置样式

语法:

font-style: normal|italic|oblique
复制代码

font-variant 字体变形

设置元素中文本为小型大写字母

语法:

font-variant: normal | small-caps
复制代码

CSS文本样式

text-align

设置元素内文本的水平对齐方式

语法:

text-align: left | right | center | justify 
复制代码

注: 该属性对块级元素设置有效

line-height属性

设置元素中文本行高

语法:

line-height: 长度值 | 百分比
复制代码

说明:

一行文字的高度。
行高指文本行的基线间的距离。

文字基线

注意基线并不是汉字文字的下沿

行高和行距

行框和行内框

vertical-align 属性

设置元素内容的垂直方式

语法:

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

单行文字垂直方向居中

使用Line-height

多行文字居中

例子

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>输入文本</title>
  <style type="text/css">
    *{padding:0px;margin: 0px;}
   
   /* .warp{    
          height:400px;
          width: 100%;
          border:1px blue solid;
          line-height: 400px;
          text-align: center;              
          
         }*/
      .warp{
              height:400px;
              width: 100%;
              border:1px blue solid;              
              display:table;      
             }
      .content{vertical-align: middle;
               display:table-cell;
               text-align: center;}   
   </style>
</head>
<body>
  <!-- <div class="warp">
    <p>Welcome to Website<br>Welcome to Website</p>
  </div> -->
   <div class="warp">
        <div class="content">
            <img src="img\logo.jpg"/>
            <h1>Welcome to Website</h1>
            <h2>CSS层叠样式，用于网页样式设置，使网页更美观。</h2>
        </div>
   </div>
</body>
</html>
</html>

复制代码

-------------------------华丽的分割线--------------------

看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励。

个人博客番茄技术小栈和掘金主页

想了解更多，欢迎关注我的微信公众号：番茄技术小栈