CSS文本属性与字体

ma_no_lo

于 2024-08-24 23:28:42 发布

阅读量238

点赞数 6

分类专栏：前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/ma_no_lo/article/details/141506567

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一，文本属性

text-decoration
text-transform
text-indent
text-align
word/letter-spacing

text-decoration

text-decoration取值为：

none：去除所有装饰
underline：添加下划线
overline：添加上划线
line-through：添加中划线

text-transform

text-transform取值为：

capitalize：把每个单词的首字符变为大写
uppercase：把每个单词的所有字符变为大写
lowercase：把每个单词的所有字符变为小写
none：无影响

text-indent

text-indent 为第一行的缩进大小。

text-indent:2em;

text-align

text-align取值为：

left：左对齐
right：右对齐
center：居中对齐
justify：两端对齐

！text-align只适用于行内元素

text-align:center与text-align:justify的区别：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div {
    height: 200px;
    width: 30%;
    background-color: azure;
    text-align: center;
  }
</style>

<body>
  <div>Welcome to Flask’s documentation.
    Get started with Installation and then get an overview with the Quickstart.
    There is also a more detailed Tutorial that shows how to create a small but complete application with Flask.
    Common patterns are described in the Patterns for Flask section.
    The rest of the docs describe each component of Flask in detail, with a
    full reference in the API section.</div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div {
    height: 200px;
    width: 30%;
    background-color: azure;
    text-align: justify;
  }
</style>

<body>
  <div>Welcome to Flask’s documentation.
    Get started with Installation and then get an overview with the Quickstart.
    There is also a more detailed Tutorial that shows how to create a small but complete application with Flask.
    Common patterns are described in the Patterns for Flask section.
    The rest of the docs describe each component of Flask in detail, with a
    full reference in the API section.</div>

</body>

</html>

letter-spacing

letter-spacing可以控制字间距，可以为负数。

二，字体属性

font-size
font-family
font-weight
line-height
font-style
font-variant

font-size

数值+单位

font-size:10px;
font-size:2em;

百分比（相对于父级元素的大小）

font-size:50%;

font-family

字体类型设置

font-weight

字体大小设置

取值：

100/200/300.....，每个数字表示一个重量

normal = 400

bold = 700

line-height

行高为基线之间的距离：

font-style

font-style取值：

normal：常规显示
italic：斜体形式
oblique：倾斜

font-variant

normal：常规显示

small-caps：将小写字母替换为缩小过的大写字母

ma_no_lo

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS文本属性与字体

letter-spacing可以控制字间距，可以为负数。100/200/300.....，每个数字表示一个重量。small-caps：将小写字母替换为缩小过的大写字母。line-through：添加中划线。underline：添加下划线。overline：添加上划线。百分比（相对于父级元素的大小。justify：两端对齐。none：去除所有装饰。为第一行的缩进大小。center：居中对齐。normal：常规显示。italic：斜体形式。normal：常规显示。oblique：倾斜。
复制链接

扫一扫

专栏目录