【CSS】CSS文本样式【CSS基础知识详解】

这篇具有很好参考价值的文章主要介绍了【CSS】CSS文本样式【CSS基础知识详解】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

css文本,# CSS,css,前端

👨‍💻个人主页:@花无缺
欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
本文由 花无缺 原创

本文章收录于专栏 【CSS】


【CSS专栏】已发布文章

📁【CSS基础认知】
📁【CSS选择器全解指南】
📁【CSS字体样式】



🌙文本颜色

属性名:color

作用:设置文本的颜色

属性值:

颜色表示方式 表示含义 属性值
颜色名称 预定义的颜色名 red、green、blue…
RGB表示法 红绿蓝三原色,每项取值范围:0~255 rgb(0,0,0)、rgb(255,255,255)
RGBa表示法 红绿蓝三原色+a表示透明度,取值范围是0~1 rgba(255,255,255,0.5)、rgba(255,0,0,0.3)
十六进制表示法 以#开头,将数转换成十六进制表示 #000000、#ff0000、#e92322,简写:#000、#f00

例如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        p {
            color: blue;
        }

        span {
            color: pink;
        }
    </style>
</head>

<body>
    <p>这是一句话,被设置成了蓝色</p>

    <span>这是另一句话,被设置成了粉色</span>
</body>

</html>

css文本,# CSS,css,前端

🌙文本缩进

属性名:text-indent

取值:

  • 数字+px
  • 数字+em

例如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        p {
            text-indent: 32px;
        }
    </style>
</head>

<body>
    <p>这是一句话,设置文本缩进32px,相当于两个汉字的距离</p>

    <span>这是另一句话,没有设置文本缩进</span>
</body>

</html>

css文本,# CSS,css,前端

🌙文本对齐

🌏水平对齐

🌸一般水平对齐

属性名:text-align

作用:用于设置文本的水平对齐方式

取值:

属性值 效果
left 文本左对齐
center 文本居中对齐
right 文本右对齐
justify 文本两端对齐

注意:属性设置为 “justify” 后,将拉伸每一行,以使每一行具有相等的宽度

例如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花无缺</title>
    <style>
        .a1 {
            text-align: center;
        }

        .a2 {
            text-align: left;
        }

        .a3 {
            text-align: right;
        }

        .a4 {
            width: 100px;
            height: 90px;
            float: left;
            background-color: pink;
            text-align: justify;
        }

        .a5 {
            width: 100px;
            height: 90px;
            float: left;
            margin-left: 10px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <p class="a1">文本水平居中对齐</p>

    <p class="a2">文本左对齐</p>

    <p class="a3">文本右对齐</p>

    <div class="a4">文本两端对齐,文本两端对齐,文本两端对齐</div>

    <div class="a5">文本默认对齐,文本默认对齐,文本默认对齐</div>
</body>

</html>

css文本,# CSS,css,前端

🌸最后一行的水平对齐

属性名:text-align-last

作用:规定如何对齐文本的最后一行

取值:

描述
auto 默认值。最后一行被调整,并向左对齐。
left 最后一行向左对齐。
right 最后一行向右对齐。
center 最后一行居中对齐。
justify 最后一行被调整为两端对齐。
start 最后一行在行开头对齐(如果 text-direction 是从左到右,则向左对齐;如果 text-direction 是从右到左,则向右对齐)。
end 最后一行在行末尾对齐(如果 text-direction 是从左到右,则向右对齐;如果 text-direction 是从右到左,则向左对齐)。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

例如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        p {
            text-align-last: justify;
        }
    </style>
</head>

<body>
    <p>周杰伦(Jay Chou),1979年1月18日出生于台湾省新北市,祖籍福建省泉州市永春县,中国台湾流行乐男歌手、音乐人、演员、导演、编剧,毕业于淡江中学。
        2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格。2002年举行“The
        One”世界巡回演唱会。2003年成为美国《时代周刊》封面人物。2004年获得世界音乐大奖中国区最畅销艺人奖。2005年凭借动作片《头文字D》获得金马奖、金像奖最佳新人奖。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖。2007年自编自导的文艺片《不能说的秘密》获得金马奖年度台湾杰出电影奖
        。</p>
</body>

</html>

css文本,# CSS,css,前端

🌏垂直对齐

属性名:vertical-align

作用:设置元素的垂直对齐方式

取值:

描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 使元素及其后代元素的底部与整行的底部对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length 将元素升高或降低指定的高度,可以是负数。
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

例如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        .a1 {
            vertical-align: text-top;
        }

        .a2 {
            vertical-align: text-bottom;
        }
    </style>
</head>

<body>
    <p>把元素的顶端<img src="../../../../../../ChromeDownload/爱心.png" class="a1">与父元素字体的顶端对齐</p>
    <hr>
    <p>把元素的底端<img src="../../../../../../ChromeDownload/爱心.png" class="a2">与父元素字体的底端对齐。</p>
</body>

</html>

css文本,# CSS,css,前端

🌙文本修饰

属性名:text-decoration

取值:

属性值 效果
underline 下划线
line-through 删除线
overline 上划线
none 无装饰线

例如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        .a1 {
            text-decoration: underline;
        }

        .a2 {
            text-decoration: line-through;
        }

        .a3 {
            text-decoration: overline;
        }

        .a4 {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <p class="a1">下划线效果</p>

    <p class="a2">删除线效果</p>

    <p class="a3">删除线效果</p>

    <p class="a4">无装饰线</p>

</body>

</html>

css文本,# CSS,css,前端

🌙文本转换

属性名:text-transform

作用:控制文本中的大小写字母

取值:

取值 效果
capitalize 文本中的每个单词以大写字母开头
uppercase 定义仅有大写字母
lowercase 定义无大写字母,仅有小写字母

例如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        .a1 {
            text-transform: capitalize;
        }

        .a2 {
            text-transform: uppercase;
        }

        .a3 {
            text-transform: lowercase;
        }
    </style>
</head>

<body>
    <p class="a1">My name is huawuque.</p>
    <p class="a2">My name is huawuque.</p>
    <p class="a3">My name is huawuque.</p>
</body>

</html>

css文本,# CSS,css,前端

🌙文本方向

属性名:direction

取值:

取值 效果
ltr 默认,文本方向从左到右
rtl 文本方向从右到左

如果文本方向设置为从右到左,则需要配合unicode-bidi: bidi-override;使用。

例如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        .a1 {
            direction: ltr;
        }

        .a2 {
            direction: rtl;
            unicode-bidi: bidi-override;
        }
    </style>
</head>

<body>
    <p class="a1">文本方向从左到右</p>
    <p class="a2">文本方向从右到左</p>
</body>

</html>

css文本,# CSS,css,前端

🌙文字间距

属性名:letter-spacing/word-spacing

作用:增加或减少字符间的空白(字符间距)

取值:

取值 效果
normal 默认。规定字符间没有额外的空间
length 定义字符间的固定空间(允许使用负值)

例如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        .a1 {
            letter-spacing: 16px;
        }

        .a2 {
            word-spacing: 16px;
        }
    </style>
</head>

<body>
    <p class="a1">文本间距为16px,i love you</p>
    <p class="a1">文本间距为16px,i love you</p>
</body>

</html>

css文本,# CSS,css,前端

🌙文本阴影

属性名:text-shadow

作用:设置文本阴影效果

语法:text-shadow: h-shadow v-shadow blur color;

取值:

取值 作用
h-shadow 必须写,水平偏移量,允许负值
v-shadow 必须写,垂直偏移量,允许负值
blur 可选,模糊距离
color 可选,阴影颜色

例如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        p {
            text-shadow: 2px 2px 2px blue;
        }
    </style>
</head>

<body>
    <p>文本阴影效果</p>
</body>

</html>

css文本,# CSS,css,前端

🌙行高

属性名:line-height

作用:控制文本行与行之间的距离

取值:

描述
normal 默认。设置合理的行间距。
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。

例如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        .a1 {
            line-height: 16px;
        }

        .a2 {
            line-height: 50%;
        }
    </style>
</head>

<body>
    <p class="a1">
        这一个段落的行高为16px,没错,就是这么多,我写这么多字就是为了有足够多的字来换行。
    </p>

    <p class="a2">
        这一个段落的行高为默认字体大小的%50,没错,就是这么多,我写这么多字就是为了有足够多的字来换行。
    </p>
</body>

</html>

css文本,# CSS,css,前端

🌙文本重写

属性名:unicode-bidi

作用:与 direction 属性一起使用,来设置或返回文本是否被重写,以便在同一文档中支持多种语言

语法:unicode-bidi: normal|embed|bidi-override;

取值:

取值 效果
normal 默认。不使用附加的嵌入层面
embed 创建一个附加的嵌入层面
bidi-override 设置该属性为它的默认值

例如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        p {
            direction: rtl;
            unicode-bidi: bidi-override;
        }
    </style>
</head>

<body>
    <p>文本方向改变了</p>
</body>

</html>

css文本,# CSS,css,前端

🌙空白处理

属性名:white-space

作用:指定元素内的空白怎样处理

取值:

取值 效果
normal 默认。空白会被浏览器忽略
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 < pre > 标签
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 < br > 标签为止
pre-wrap 保留空白符序列,但是正常地进行换行
pre-line 合并空白符序列,但是保留换行符

例如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        .a1 {
            white-space: nowrap;
        }

        .a2 {
            white-space: pre-wrap;
        }

        .a3 {
            white-space: pre-line;
        }

        .a4 {
            white-space: pre;
        }
    </style>
</head>

<body>
    <p class="a1">
        这里的文本不会换行
        这里的文本不会换行
        这里的文本不会换行
        这里的文本不会换行
        这里的文本不会换行
    </p>

    <p class="a2">
        保留空白符序列,但是正常地进行换行 保留空白符序列,但是正常地进行换行 保留空白符序列,但是正常地进行换行
        保留空白符序列,但是正常地进行换行
        保留空白符序列,但是正常地进行换行
        保留空白符序列,但是正常地进行换行
        保留空白符序列,但是正常地进行换行
        保留空白符序列,但是正常地进行换行
    </p>

    <p class="a3">
        合并空白符序列,但是保留换行符 合并空白符序列,但是保留换行符 合并空白符序列,但是保留换行符
        合并空白符序列,但是保留换行符
        合并空白符序列,但是保留换行符
        合并空白符序列,但是保留换行符
        合并空白符序列,但是保留换行符
    </p>

    <p class="a4">
        空白会被浏览器保留。其行为方式类似 HTML 中的 < pre> 标签空白会被浏览器保留。其行为方式类似 HTML 中的 < pre> 标签
                空白会被浏览器保留。其行为方式类似 HTML 中的 < pre> 标签
                    空白会被浏览器保留。其行为方式类似 HTML 中的 < pre> 标签
    </p>
</body>

</html>

css文本,# CSS,css,前端


好了,CSS文本样式就讲解完毕了,更多CSS知识都将在 【CSS专栏】中持续更新哦~

🌸欢迎关注我的博客:来和我一起成长吧!
🥇往期精彩好文:
📢【HTML基础知识详解】
📢【CSS基础认知】
你们的点赞👍 收藏⭐ 留言📝 关注✅
是我持续创作,输出优质内容的最大动力!
谢谢!文章来源地址https://www.toymoban.com/news/detail-812974.html

到了这里,关于【CSS】CSS文本样式【CSS基础知识详解】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端-CSS 字体和文本样式

    字体大小 字体粗细 字体样式 字体系列 文本缩进 取值 数字 + px 数字 + em(推荐:1em=当前标签的 font-size 大小) 文本水平对齐方式 内容居中需要给父元素设置居中属性 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ENfm2r2-1688123416662)(https://note.youda

    2024年02月11日
    浏览(118)
  • css 基础知识

    CSS(层叠样式表)是用于描述网页中元素样式和布局的一种标记语言。以下是一些CSS的基础知识: 选择器:选择器用于选择HTML文档中的元素,并为其应用样式。常见的选择器有标签选择器、类选择器和ID选择器。 标签选择器:使用HTML标签名作为选择器,可以选择所有匹配该

    2024年02月10日
    浏览(68)
  • CSS基础知识,必须掌握!!!

    CSS背景属性用于定义HTML元素的背景 CSS属性定义背景效果: background-color - 定义背景颜色 background-image - 定义背景图片 background-repeat - 是否平铺,水平平铺(repeat-x)、垂直平铺(repeat-y)、不平铺(no-repeat) background-attachment - 是否固定背景图片,不随滚动而发生位置改变 bac

    2023年04月09日
    浏览(60)
  • CSS的基础知识讲解

    一般来说我们CSS就是我们对浏览器的第二个操作,就是给网页穿衣服.让网页变得更好看. 在CSS中,选择器用于选择HTML文档中的元素,从而将样式应用于这些元素。选择器通常基于元素的标签名、类名、ID、属性值或父子关系等特征来进行匹配。 标签选择器:选择某个 HTML 标签

    2024年02月05日
    浏览(43)
  • CSS——基础知识及使用

    CSS是层叠样式表 (Cascading Style Sheets)的简写. CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。 选择器 + { 一条/N条声明 } 选择器决定针对谁修改 (找谁) 声明决定修改啥. (干啥) 声明的属性是键值对. (使用 ; 区分键值对

    2024年02月16日
    浏览(38)
  • 关于CSS的基础知识

    CSS的基本介绍 css(Cascading style sheets):层叠样式表 作用:给页面中的html标签设置样式 css标签写在style标签中,style标签一般写在head标签里面,title标签下面 css常见引入方式 title引入方式一(内嵌式)/title 内嵌式:css写在style里,作用在当前页面(小案例) 外联式:css写在

    2024年01月19日
    浏览(49)
  • 【JavaEE】CSS基础知识

    CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离;简单的说就是,没用CSS之前就相当于原照片,使用CSS之后,照片就相当于被p了,被美颜了。 选择器 + {一条/N条声明} 选择器决定针对谁修改 (找谁) 声明决定修改啥

    2024年02月02日
    浏览(40)
  • CSS基础知识点

    目录 ​编辑一、基本语法规范 二、CSS 选择器 1、简单选择器  (1)标签选择器 (2)类选择器 (3)ID 选择器 2、复合选择器 (1)后代选择器 (2)子选择器 (3)并集选择器 三、CSS常用属性值 1、设置字体家族 2、设置字体大小 3、设置字体的粗细 4、文字倾斜设置 5、文字

    2024年02月11日
    浏览(59)
  • css 动画基础知识和案例

      想要更好的掌握知识,可以常识将知识教授出来。这就是写这篇文章的目的。     animation:创建动画的意思;其中的属性有:animation:属性,执行时间 显示方式 执行次数。    animation: 执行动画名称 执行时间(50s 代表50s执行一个循环) 执行速度(linear 代表匀速) 重复次数

    2024年04月25日
    浏览(44)
  • css基础知识十一:CSS3新增了哪些新特性?

    一、是什么 css,即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更为美观 css3是css的最新标准,是向后兼容的,CSS1/2的特性在CSS3 里都是可以使用的 CSS3 也增加了很多新特性,为开发者带来了更佳的开发体验 从几个维度列举一些

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包