CSS（四）：字体和文本属性

一、字体属性

属性

描述

font-style

设置字体风格

font-weight

设置字体粗细

font-size

设置字体的尺寸（一般用px表示）

font-family

设置字体系列

font

简写属性，作用是把所有针对字体的属性设置在一个声明中（注意顺序）例如：font:italic bold 16px "楷体";

字体的简写属性顺序：

font:font-style || font-variant || font-weight || font-size/line-height || font-family。

二、文本属性

属性 描述
color 设置文本的颜色，如red
line-height 设置文本的行高
text-align 设置文本的对齐方式，如left、center、right
text-decoration 设置文本装饰，如underline、none、line-through

注意：text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

例如：

 

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>字体、文本属性</title>
  <style type="text/css">
    /*
    div p span{
      font-family: "楷体";
      font-style: italic;  <!--设置字体是斜体-->
      font-size: 16px; <!--设置字体的大小-->
      font-weight: 800; <!--设置字体加粗 100~500正常 600以上加粗 blod 字体加粗 normal 字体正常-->
    }*/
    h1{
      text-align: center;
    }
    /*统一设置字体*/
    div p span{
      font: italic bold 16px "楷体";/*设置字体*/
      color:blue;/*设置文本的颜色*/
      text-decoration: underline;/*设置文字添加下划线*/
      line-height: 30px; /*设置文本的行高*/
    }
  </style>
</head>
<body>
    <div>
       <h1>京东商城--全部商品分类</h1>
       <h2>图书、音像、电子书刊</h2>
       <p>
          <span>电子书刊</span>电子书 网络原创 数字杂志 多媒体图书
       </p>
       <p><span>音像</span>音乐 影视 教育音像</p>
       <p><span>经管励志</span>经济 金融学投资 管理 励志与成功</p>
    </div>
</html>

 

浏览器运行效果：

 

posted @ 2017-07-18 10:23  .NET开发菜鸟  阅读(1213)  评论(0)  编辑  收藏  举报