第四章 常用格式化排版

4.1字体属性

  • 为网页中的文字设置字体为微软雅黑
body{font-family:'微软雅黑'}

  • 备选字体

    备选字体是为了防止用户电脑上没有”微软雅黑“这个字体。

    备选字体可以有无数个，那么浏览器在去解析这个代码的时候，是从左往右解析的，如果没有微软雅黑，再去找宋体，最后黑体.

  • 语法：

body{font-family:'Microsoft Yahei','宋体','黑体'}

  • 字体大小

    • 可以为网页中的文本设置字体大小，那么一般浏览器的字体大小默认为为16px。

    • 最常用的像素单位：px、em（相对单位）、rem，这里咱们先介绍一种单位，px。

    • px:是个绝对单位也叫固定单位，不管在什么尺寸下大小都是没有变化的，像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。

    • em：相对单位，相对于当前盒子的字体大小 1px=1em,可以根据盒子的大小变化而变化

    • rem：以根据盒子的大小变化而变化

  • 字体颜色

    • 颜色分为三原色：红、绿、蓝，三原色进行混合能呈现出不同的颜色

  • 字体样式

    • 网站中的字体分为了普通字体和斜体字体，我们可以使用font-style属性来设置对应的字体样式。

属性值描述
normal 默认的，文本设置为普通字体
italic 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。常用
oblique 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style type="text/css">
        p{
            font-style: italic;
        }
        i{
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>普通字体样式</p>
    <i>斜体样式</i>
</body>
</html>

    • 因为i标签本身具有倾斜的含义，所以可以对已有的倾斜的字体来按照需求进行相应的设置。

  • 字体粗细

    • 网站中我们可以通过font-weight来设置文字的粗体大小。这里有很多值可选，那么使用最多的就是normal和bold分别代表普通和加粗和字体粗细。

| 属性值  | 描述                   |
| ------- | ---------------------- |
| normal  | 普通的字体粗细，默认   |
| bold    | 加粗的字体粗细 700     |
| lighter | 比普通字体更细的字体   |
| bolder  | 比bold更粗的字体   900 |
| 100~900 | 400表示normal          |

4.2 文本属性

  • 文本修饰

    • 在网页中有些时候我们需要对文本设置下划线，或者删除线，

    • 如果想实现下划线或者删除线，使用text-decoration属性。

属性值描述
none 无文本的修饰
underline 文本下划线
overline 文本上划线
line-through

穿过文本的线，可以模拟删除线。

 

文本缩进

  • 比如我们通常写文章的时候，首字母要空两格。那么我们需要使用text-indent属性来实现。它的属性值是像素(px、em、rem)单位。

    代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本缩进</title>
    <style type="text/css">
        
   p{
    text-indent:2em;
    font-size:30px;
}
    </style>
</head>
<body>
    <p>在人类漫长的历史长河中，推动社会向前的从不会是那些甘于平凡的多数人，相反，他们往往都是一群特立独行桀骜不驯的疯子！这一群疯子中有位传奇的人物，他颠覆性地将人文与科技完美融合，
极大地改变了人类计算机领域，改变了人们的生活方式，其一手创建的计算机公司到如今仍是手机行业的传奇，没错！他就是乔布斯！</p>
</body>
</html>

行间距

  • 行间距，也叫行高，表示行与行之间的距离。

  • 上个案例的呈现效果会发现，行与行之间的距离有点近，那么为了使文本显示更加美观，我们可以使用line-height属性来进行设置行间距，它的单位为像素。举个例子，我们在word文档中对段落设置。

p{    
    font-size: 20px;
    text-indent: 2em;
    line-height:2em; 距。
}
line-height:2em;表示2倍行间

中文字间距、字母间距

  • 我们在使用word文档时，通常会对文字之间的间隔进行设置

  • 如果想在网页排版中设置中文字间隔或字母间隔可以使用letter-spacing或word-spacing来实现。

p{
    /*文字之间的距离*/
    letter-spacing:5px; 
    /*调整英文单词之间的距离*/
    word-spacing: 10px;
}

文本对齐

  • 在word文档中，我们通常都知道对文本甚至图片可以设置对齐方式，比如让文本或者图片居中显示。那么在网页排版中我们可以使用text-align属性来进行设置。

| 属性值 | 描述             |
| ------ | ---------------- |
| left   | 文本左对齐，默认 |
| right  | 文本右对齐       |
| center | 中心对齐         |
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本对齐</title>
    <style type="text/css">
        div{
            /*给父级标签设置一个边框，表示这是一行，让p段落标签中的内容实现文本对齐的方式，这是文本中心对齐*/
            border: 1px solid red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <p>这是了不起的乔布斯</p>
    </div>
</body>
</html>

 

posted @ 2020-04-24 12:11  炜琴清  阅读(177)  评论(0)  编辑  收藏  举报