CSS文本属性与字体

一,文本属性

  • 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++ 为第一行的缩进大小。

html 复制代码
text-indent:2em;

text-align

++text-align++取值为:

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

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

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

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: 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>
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

++数值+单位++

html 复制代码
font-size:10px;
font-size:2em;

++百分比(相对于父级元素的大小++)

html 复制代码
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:将小写字母替换为缩小过的大写字母

相关推荐
东风西巷44 分钟前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
森之鸟1 小时前
Mac电脑上如何打印出字体图标
前端·javascript·macos
mCell2 小时前
GSAP 入门指南
前端·javascript·动效
gnip2 小时前
组件循环引用依赖问题处理
前端·javascript
Aotman_3 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_6143 小时前
Web前端面试题(1)
前端·面试·职场和发展
lypzcgf3 小时前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育4 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失9494 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld4 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试