【CSS系列】第五章 · CSS文本属性

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

写在前面


        Hello大家好, 我是【麟-小白】,一位软件工程专业的学生,喜好计算机知识。希望大家能够一起学习进步呀!本人是一名在读大学生,专业水平有限,如发现错误不足之处,请多多指正!谢谢大家!!!

        如果小哥哥小姐姐们对我的文章感兴趣,请不要吝啬你们的小手,多多点赞加关注呀!❤❤❤ 爱你们!!!

【CSS系列】第五章 · CSS文本属性


目录

写在前面

1. CSS文本属性

1.1 文本颜色

1.2 文本间距

1.3 文本修饰

1.4 文本缩进

1.5 文本对齐_水平

1.6 细说 font-size

1.7 行高

1.8 文本对齐_垂直

1.9 vertical-align

结语


【往期回顾】

【CSS系列】第一章 · CSS基础

【CSS系列】第二章 · CSS选择器

【CSS系列】第三章 · CSS三大特性和颜色的表示

【CSS系列】第四章 · CSS字体属性


【其他系列】

【HTML系列】

【Java基础系列】(已更新完)


1. CSS文本属性


1.1 文本颜色

  • 属性名: color
  • 作用:控制文字的颜色。
  • 可选值:
    • 颜色名
    • rgb rgba
    • HEX HEXA (十六进制)
    • HSL HSLA
  • 开发中常用的是: rgb/rgba HEX/HEXA (十六进制)。
举例:
div {
    color: rgb(112,45,78);
}

代码演示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_文本颜色</title>
    <style>
        div {
            font-size: 90px;
        }
        .xiaobai1 {
            color: red;
        }
        .xiaobai2 {
            color: rgb(255, 0, 0);
        }
        .xiaobai3 {
            color: rgba(255, 0, 0, .5);
        }
        .xiaobai4 {
            color: #00f;
        }
        .xiaobai5 {
            color: #00f8;
        }
        .xiaobai6 {
            color: hsl(0, 100%, 50%);
        }
        .xiaobai7 {
            color: hsla(0, 100%, 50%, .5);
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="xiaobai1">麟-小白1</div>
    <div class="xiaobai2">麟-小白2</div>
    <div class="xiaobai3">麟-小白3</div>
    <div class="xiaobai4">麟-小白4</div>
    <div class="xiaobai5">麟-小白5</div>
    <div class="xiaobai6">麟-小白6</div>
    <div class="xiaobai7">麟-小白7</div>
</body>
</html>

1.2 文本间距

  • 字母间距: letter-spacing
  • 单词间距: word-spacing (通过空格识别词)
  • 属性值为像素( px ),正值让间距增大,负值让间距缩小。

代码演示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            font-size: 30px;
        }
        .xiaobai2 {
            letter-spacing: 20px;
        }
        .xiaobai3 {
            word-spacing: 20px;
        }
    </style>
</head>
<body>
    <div>You got a dream, you gotta protect it.麟-小白1</div>
    <div class="xiaobai2">You got a dream, you gotta protect it.麟-小白2</div>
    <div class="xiaobai3">You got a dream, you gotta protect it.麟-小白3</div>
</body>
</html>

1.3 文本修饰

  • 属性名: text-decoration
  • 作用:控制文本的各种装饰线。
  • 可选值:
    • none 无装饰线(常用)
    • underline :下划线(常用)
    • overline 上划线
    • line-through 删除线
  • 可搭配如下值使用:
    • dotted :虚线
    • wavy :波浪线
    • 也可以指定颜色
举例:
a {
    text-decoration: none;
}

代码演示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_文本修饰</title>
    <style>
        div {
            font-size: 40px;
        }
        .xiaobai1 {
            text-decoration: overline green dotted;
        }
        .xiaobai2 {
            text-decoration: underline red wavy;
        }
        .xiaobai3 {
            text-decoration: line-through;
        }
        .xiaobai4,
        ins,
        del {
            font-size: 40px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="xiaobai1">麟-小白1</div>
    <div class="xiaobai2">麟-小白2</div>
    <div class="xiaobai3">麟-小白3</div>
    <a class="xiaobai4" href="https://www.baidu.com">麟-小白4</a>
    <ins>测试1</ins>
    <del>测试2</del>
</body>
</html>

1.4 文本缩进

  • 属性名: text-indent
  • 作用:控制文本首字母的缩进。
  • 属性值: css 中的长度单位,例如: px
举例:
div {
    text-indent:40px;
}
  • 后面我们会学习 css 中一些新的长度单位,目前我们只知道像素( px )

代码演示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_文本缩进</title>
    <style>
        div {
            font-size: 30px;
            text-indent: 60px;
        }
    </style>
</head>
<body>
    <div>欢迎学习前端!欢迎学习前端!欢迎学习前端!欢迎学习前端!欢迎学习前端!欢迎学习前端!欢迎学习前端!欢迎学习前端!欢迎学习前端!</div>
</body>
</body>
</html>

1.5 文本对齐_水平

  • 属性名: text-align
  • 作用:控制文本的水平对齐方式。
  • 常用值:
    • left :左对齐(默认值)
    • right :右对齐
    • center :居中对齐
举例:
div {
    text-align: center;
}

代码演示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05_文本对齐_水平</title>
    <style>
        .xiaobai {
            font-size: 40px;
            background-color: orange;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="xiaobai">麟-小白</div>
</body>
</html>

1.6 细说 font-size

  • 由于字体设计原因,文字最终呈现的大小,并不一定与 font-size 的值一致,可能大,也可能小。 例如: font-size 设为 40px ,最终呈现的文字,可能比 40px 大,也可能比 40px小。
  • 通常情况下,文字相对字体设计框,并不是垂直居中的,通常都靠下 一些。

1.7 行高

  • 属性名: line-height
  • 作用:控制一行文字的高度。
  • 可选值:
    • normal :由浏览器根据文字大小决定的一个默认值。
    • 像素( px )
    • 数字:参考自身 font-size 的倍数(很常用)。
    • 百分比:参考自身 font-size 的百分比。
  • 备注:由于字体设计原因,文字在一行中,并不是绝对垂直居中,若一行中都是文字,不会太影响观感。
举例:
div {
    line-height: 60px;
    line-height: 1.5;
    line-height: 150%;
}
代码演示:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>07_行高</title>
    <style>
        #d1 {
            font-size: 40px;
            background-color: orange;

            line-height: 60px;
            line-height: normal;
            line-height: 1.5;
            line-height: 150%;
        }
    </style>
</head>
<body>
    <div id="d1">欢迎学习前端!欢迎学习前端!欢迎学习前端!欢迎学习前端!欢迎学习前端!欢迎学习前端!欢迎学习前端!欢迎学习前端!欢迎学习前端!</div>
</body>
</html>
行高注意事项:
  • line-height 过小会怎样?—— 文字产生重叠,且最小值是 0 ,不能为负数。
  • line-height 是可以继承的,且为了能更好的呈现文字,最好写数值。
  • line-height height 是什么关系?
    • 设置了 height ,那么高度就是 height 的值。
    • 不设置 height 的时候,会根据 line-height 计算高度。
应用场景:
  • 对于多行文字:控制行与行之间的距离。
  • 对于单行文字:让 height 等于 line-height ,可以实现文字垂直居中。
备注:由于字体设计原因,靠上述办法实现的居中,并不是绝对的垂直居中,但如果一行中都是文字,不会太影响观感。
代码演示:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>08_行高_注意事项</title>
    <style>
        /* 注意点1:行高过小会怎样? —— 文字重叠,且最小值是0,不能为负数。 */
        #d1 {
            font-size: 40px;
            background-color: skyblue;
            line-height: 0px;
        }

        /* 注意点2:行高是可以继承的 */
        #d2 {
            font-size: 40px;
            background-color: orange;
            line-height: 1.5;
        }
        span {
            font-size: 200px;
            color: red;
        }

        /* 注意点3:line-height和height是什么关系 
            设置了height,高度就是height的值。
            没有设置height,高度就是line-height*行数
        */
        #d3 {
            font-size: 40px;
            background-color: yellowgreen;
            line-height: 100px;
        }

        #d4 {
            font-size: 40px;
            background-color: skyblue;
            line-height: 0px;
        }

        /* 行高的应用场景1:调整多行文字的间距 */
        #d5 {
            font-size: 40px;
            background-color: skyblue;
            line-height: 100px;
        }

        /* 行高的应用场景2:单行文字的垂直居中 */
        #d6 {
            font-size: 40px;
            background-color: skyblue;
            height: 300px;
            line-height: 300px;
        }

    </style>
</head>
<body>
    <!-- <div id="d1">欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端</div> -->
    <!-- <div id="d2">欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端</div> -->
    <!-- <div id="d3">欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端</div> -->
    <!-- <div id="d4">欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端</div> -->
    <!-- <div id="d5">欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端</div> -->
    <div id="d6">欢迎学习前端x</div>
</body>
</html>

1.8 文本对齐_垂直

  • 顶部:无需任何属性,在垂直方向上,默认就是顶部对齐。
  • 居中:对于单行文字,让 height = line-height 即可。
    • 问题:多行文字垂直居中怎么办?—— 后面我们用定位去做。
  • 底部:对于单行文字,目前一个临时的方式:
    • line-height = ( height × 2 ) - font-size - x
    • 备注: x 是根据字体族,动态决定的一个值。
    • 问题:垂直方向上的底部对齐,更好的解决办法是什么?—— 后面我们用定位去做。

代码演示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>09_文本对齐_垂直</title>
    <style>
        div {
            font-size: 40px;
            height: 400px;
            line-height: 745px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>麟-小白</div>
</body>
</html>

1.9 vertical-align

  • 属性名: vertical-align
  • 作用:用于指定同一行元素之间,或 表格单元格 内文字的 垂直对齐方式
  • 常用值:
    • baseline (默认值):使元素的基线与父元素的基线对齐。
    • top :使元素的顶部与其所在行的顶部对齐。
    • middle :使元素的中部父元素的基线加上父元素字母 x 的一半对齐。
    • bottom :使元素的底部与其所在行的底部对齐。
  • 特别注意: vertical-align 不能控制块元素。

代码演示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>10_vertical-align</title>
    <style>
        div {
            font-size: 100px;
            height: 300px;
            background-color: skyblue;
        }
        span {
            font-size: 40px;
            background-color: orange;
            vertical-align: middle;
        }
        img {
            height: 30px;
            vertical-align: top;
        }
        .san {
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        麟-小白x<span>x前端</span>
    </div>
    <hr>
    <div>
        麟-小白x<img src="../images/我的自拍.jpg">
    </div>
    <hr>
    <table border="1" cellspacing="0">
        <caption>人员信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr height="200">
                <td class="san">张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>女</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

【CSS系列】第五章 · CSS文本属性

结语


本人会持续更新文章的哦!希望大家一键三连,你们的鼓励就是作者不断更新的动力【CSS系列】第五章 · CSS文本属性

【CSS系列】第五章 · CSS文本属性文章来源地址https://www.toymoban.com/news/detail-442574.html

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

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

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

相关文章

  • 8 CSS文本属性

    8 文本属性 font-style(字体样式风格) font-weight(字体粗细) font-size(字体大小) font-family(字体族) color(字体颜色) text-align(文本对齐方式) line-height(字体行高) vertical-align 属性设置元素的垂直对齐方式。 text-decoration 代码效果图:

    2024年02月12日
    浏览(32)
  • 【零基础学web前端】CSS学习,字体属性,文本属性,背景属性,圆角矩形属性

    前言: 大家好,我是 良辰丫 ,在上一篇文章中我们了解了CSS引入方式,CSS基础选择器,CSS复合选择器,今天我们继续学习CSS的相关知识点.💞💞 🧑个人主页:良辰针不戳 📖所属专栏:零基础学web前端 🍎励志语句:生活也许会让我们遍体鳞伤,但最终这些伤口会成为我们一辈子的

    2024年02月05日
    浏览(80)
  • CSS文本外观属性内容(知识点1)

    知识引入 使用HTML可以对文本外观进行简单的控制,但是效果并不理想,为此CSS提供了一系列的文本外观样式属性,具体如下。 color:文本颜色 color属性用于定义文本的颜色,其取值方式有以下三种。 (1)预定义的颜色值,如red、green、blue等。 (2)十六进制,例如#FF6600,#29

    2024年01月23日
    浏览(46)
  • 【期末不挂科-单片机考前速过系列P5】(第五章:11题速过中断系统和中断系统结构)经典例题盘点(带图解析)

    前言 大家好吖,欢迎来到 YY 滴单片机系列 ,热烈欢迎! 本章主要内容面向接触过单片机的老铁 主要内容含: 欢迎订阅 YY 滴C++专栏!更多干货持续更新!以下是传送门! YY的《C++》专栏 YY的《C++11》专栏 YY的《Linux》专栏 YY的《数据结构》专栏 YY的《C语言基础》专栏 YY的《

    2024年02月01日
    浏览(49)
  • 【HTML 往日冒险 01】标签 元素 属性 注释 文本格式化 颜色 CSS

    说在前面 HTML 对于现在的我来说,熟悉又陌生,熟悉的是其标签的结构清晰,陌生的是其丰富的使用细节,长期不使用难免会失去许多相关的记忆,但是不妨让我们与W3school教程一同补全往日的冒险日志…(主要是从中提炼关键的信息,具体的知识点还是参考相关手册) 重新开

    2024年02月07日
    浏览(46)
  • CSS笔记(黑马程序员pink老师前端)选择器,字体,文本属性,Emmet语法,元素显示模式,CSS背景

    选择器分为基础选择器和复合选择器两大类。 基础选择器 包括:标签选择器、类选择器、id选择器和通配符选择器。 多类名 可以把一些标签元素共同的样式放到一个类里面。这些标签都可以调用这个公共的类,然后再调用自己独有的类。 复合选择器 基础选择器的组合.包括后

    2024年02月09日
    浏览(61)
  • 【CSS系列】第六章 · CSS列表、表格、背景、鼠标属性

            Hello大家好, 我是【 麟-小白 】,一位 软件工程 专业的学生,喜好 计算机知识 。希望大家能够一起 学习进步 呀!本人是一名 在读大学生 ,专业水平有限,如发现 错误 或 不足之处 ,请多多指正!谢谢大家!!!         如果 小哥哥小姐姐们 对我的文章感兴趣

    2024年02月13日
    浏览(58)
  • CSS 之 background 系列属性详解

    一、background总览 1、简介 background 属性是所有背景属性的缩写,通常建议在代码中使用该缩写属性,而不是使用多条单独的背景属性,因为该缩写属性在老版本浏览器中支持性更好,而且书写简便。未写在缩写属性中的其他背景属性,则会采用默认值。 但我个人不提倡一味的

    2024年02月12日
    浏览(46)
  • CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)

    CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表 (Cascading Style Sheets)。下面是一些常用的CSS3属性及其详细解释: border-radius:设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径,也可以只使用一个值来设置统一的圆角。 box-shadow:创建一个元

    2024年02月08日
    浏览(55)
  • 【前端|CSS系列第2篇】CSS零基础入门之常用样式属性

    欢迎来到CSS零基础入门系列的第二篇博客!作为前端开发的关键技术之一,CSS(层叠样式表)能够为网页添加各种样式和布局效果。对于前端零基础的小白来说,了解和掌握CSS的常用样式属性是入门的关键。本篇博客将带你深入了解如何设置常用样式属性,包括文本属性、字

    2024年02月11日
    浏览(70)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包