CSS属性-文本

最新推荐文章于 2024-08-20 23:30:49 发布

DustinWangq

最新推荐文章于 2024-08-20 23:30:49 发布

阅读量64

点赞数

分类专栏： # HTML-CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/Welitsi/article/details/131983192

版权

HTML-CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

text-decoration

text-decoration用于设置文字的装饰线
- decoration是装饰/装饰品的意思;
text-decoration有如下常见取值:
- none：无任何装饰线
  - 可以去除a元素默认的下划线
- underline：下划线
- overline：上划线
- line-through：中划线（删除线）
a元素有下划线的本质是被添加了text-decoration属性

<style>
    div {
        text-decoration: underline;
    }
    p {
        text-decoration: overline;
    }
    h1 {
        text-decoration: line-through;
    }
    /* 去除a标签原有的下划线 */
    a {
        text-decoration: none;
    }
</style>

在这里插入图片描述

text-transform

text-transform用于设置文字的大小写转换
- Transform单词是使变形/变换(形变);
text-transform有几个常见的值:
- capitalize：(使首字母大写)将每个单词的首字符变为大写
- uppercase：(大写字母)将每个单词的所有字符变为大写
- lowercase：(小写字母)将每个单词的所有字符变为小写
- none：没有任何影响
实际开发中用JavaScript代码转化的更多.

text-indent

text-indent 用于设置第一行内容的缩进
text-indent: 2em; 刚好是缩进2个文字

em: 相对值，相对于父元素的值，2em表示相对于父元素的2倍

text-align（重要）

text-align: 直接翻译过来设置文本的对齐方式;
MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐;
常用的值
- left：左对齐
- right：右对齐
- center：正中间显示
- justify：两端对齐
W3C中的解释:

在这里插入图片描述

text-align官方解释：它用作用于行内级元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.text {
      /* 文本居中 */
      text-align: center;
    }
    div.img {
      /* 图片居中 */
      text-align: center;
    }
    div.block {
      /* 给块级元素居中 无效*/
      text-align: center;
    }
    div.content {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      /* 块级元素居中 */
      margin: 0 auto;
    }
      /*justify演示*/
    p {
      width: 300px;
      background-color: orange;
      text-align: justify;
    }

  </style>
</head>
<body>
  <div class="text">我是div元素</div>
  <div class="img">
    <img src="../../images/diqiu.jpg" alt="地球">
  </div>
  <div class="block">
    <div class="content">块级元素</div>
  </div>
  <p>
    This CSS module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation. why
  </p>
</body>
</html>

在这里插入图片描述

word/letter-spacing

letter-spacing、word-spacing分别用于设置字母、单词之间的间距

默认是0，可以设置为负数

在这里插入图片描述

DustinWangq

关注

0
点赞
踩
0

收藏

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

text-decoration用于设置文字的装饰线noneunderlineoverlinea元素有下划线的本质是被添加了text-decoration属性div;p;h1;/* 去除a标签原有的下划线 */a;
复制链接

扫一扫

专栏目录