Web前端篇:CSS常用格式化排版

一、字体的属性
设置字体属性:

body{font-family:"Microsoft Yahei"}

body{font-family:"Microsoft Yahei","宋体","黑体"}
#备选字体可以有无数个,那么浏览器在去解析这个代码的时候,是从左往右解析的,如果没有微软雅黑,再去找宋体,最后黑体。
  • 字体大小:

最常用的像素单位:px、em、rem,这里咱们先介绍一种单位,px。
px:像素是指由图像的小方格组成的,这些小方块都有一个明确的位置和被分配的色彩数值,小方格颜色和位置就决定该图像所呈现出来的样子。
点击领取免费资料及课程

  • 字体颜色:

颜色表示方法在css中有三种方式:
英文单词表示法:red/green/blue
rgb表示法
十六进制表示法

  • 字体样式font-style

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

normal正常,italic斜体,oblique斜体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-style:italic;
        }
    </style>
</head>
<body>
    <p>你好</p>

</body>
</html>
  • 字体粗细

font-weight
在这里插入图片描述

  • 文本属性:

text-decoration
在这里插入图片描述

  • 文本缩进

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

  • 行间距

  • line-height:数值px/em

  • 纵纹字间距/字母间距

letter-spacing:数值px;
word-spacing:数值px;

  • 文本对齐

text-align

在这里插入图片描述

二、px,em,rem

  • px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率的最小分割。点击领取免费资料及课程

  • 它是相对于当前对象内文本的字体尺寸;如果没有人为设置当前对象内文本的字体尺寸,那么它相对的是浏览器默认的字体尺寸

  • rem只相对于根目录,即HTML元素。所以只要在html标签上设置字体大小,文档中的字体大小都会以此为参照标准,一般用于自适应布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        html{
            font-size:20px
        }
        .box{
            font-size:12px;
            width:20rem;
            height:20rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/ITmiaomiao666/article/details/91896394
今日推荐