text-transform属性介绍

  • text-transform属性就是设置HTML页面中的标签里面的文本大小写，text-transform属性常用的属性值有三种：capitalize、uppercase、lowercase，不常用的属性值在这笔者就不进行一一说明了。

text-transform属性值说明表

属性值 描述
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 将英文字母的首字母设置为大写。
uppercase 将英文字母设置为大写。
lowercase 将英文字母设置为小写。
inherit 规定应该从父元素继承 text-transform 属性的值。

capitalize首字母设置为大写。

  • 让我们进入text-transform属性的属性值为capitalize实践，实践内容如：笔者将HTML页面中的h2标签中的文本首字母设置为大写。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>设置文本的大小写</title>

    <style>

        h2{

            text-transform: capitalize;

        }

    </style>

</head>

<body>

    <h2>success is not defeating others, but changing yourself</h2>

</body>

</html>

  • 结果图

uppercase文本设置为大写。

  • 让我们进入text-transform属性的属性值为uppercase实践，实践内容如：笔者将HTML页面中的h2标签中的文本小写的英文设置为大写。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>设置文本的大小写</title>

    <style>

        h2{

            text-transform: uppercase;

        }

    </style>

</head>

<body>

    <h2>success is not defeating others, but changing yourself</h2>

</body>

</html>

  • 结果图

lowercase文本设置为大写。

  • 让我们进入text-transform属性的属性值为lowercase实践，实践内容如：笔者将HTML页面中的h2标签中的文本大写的英文设置为小写。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>设置文本的大小写</title>

    <style>

        h2{

            text-transform: lowercase;

        }

    </style>

</head>

<body>

    <h2>SUCCESS IS NOT DEFEATING OTHERS, BUT CHANGING YOURSELF</h2>

</body>

</html>

  • 结果图

总结

  • text-transform属性只对英文起作用，不支持中文哦。

如何在HTML中设置文本的大小写的更多相关文章

  1. 如何在 apache 中设置缓存有效时间

    今天学习了下如何在 apache 中设置缓存时间,记之以备忘. 在 http 报文头中,与缓存时间有关的两个字段是 Expires 以及 Cache-Control 中的 max-age,Expire ...

  2. 如何在Eclipse中设置默认的JSP文件头部编码

    如何在Eclipse中设置默认的JSP文件头部编码 一般,我们为了以后在导入和导出程序的时候(特别是项目较大,文件多)一般都默认文件编码格式为UTF-8 如果你通常都是通过Eclipse来编写程序,那 ...

  3. 如何在IIS中设置HTTPS服务

    文章:https://support.microsoft.com/en-us/help/324069/how-to-set-up-an-https-service-in-iis 在这个任务中 摘要 为 ...

  4. SPSS输出结果如何在word中设置小数点前面显示加0

    SPSS输出结果如何在word中设置小数点前面显示加0 在用统计分析软件做SPSS分析时,其输出的结果中,如果是小于1(绝对值)的数,那么会默认输出不带小数点的数值.例如0.362和 -0.141被显 ...

  5. 如何在XAMPP中设置多个网站

    xampp 是一个非常方便的本地 apache + php + mysql 的调试环境,在本地安装测试 WordPress 等各种博客.论坛程序非常方便.今天我们来给大家介绍一下,如何使用 XAMPP ...

  6. 如何在BIOS中设置RAID？

    随着价格的下降和相应主板的支持,目前SATA硬盘已经逐渐成为主流.但由于受芯片组和操作系统的影响,不少用户对SATA硬盘的使用及安装系统掌握不足,今天小编就给大家介绍一下SATA硬盘的日常应用技巧,希 ...

  7. 如何在SpriteBuilder中设置对象的通用属性

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们知道在SpriteBuilder中可以为对象设置自定义类从 ...

  8. 如何在 Windows 中设置 /3GB 启动开关

    备注: 只有在下列操作系统中才支持 /3GB 开关: Windows 2000 Advanced Server Windows 2000 Datacenter Server Windows Serve ...

  9. 如何在IDM中设置代理服务器？

    很多时候,大家下载文件都是在国外的一些网站上进行下载,这样不可免会受到自身国内网络的限制,另一方面下载源为避免服务器带宽占用过多而限制下载速率,这就会导致文件下载极慢,甚至几KB每秒. 这种情况是不是 ...

随机推荐

  1. IconFont使用注意点

    在工作中,我经常会用阿里的IconFont图标库,今天发现一个之前没怎么注意到的问题. 首先IconFont给我们提供了三种引用图标的方式 unicode引用 unicode是字体在网页端最原始的应用 ...

  2. PAT 1005 Spell It Right 字符串处理

    Given a non-negative integer N, your task is to compute the sum of all the digits of N, and output e ...

  3. Spring Boot 2 快速教程：WebFlux 集成 Thymeleaf（五）

    号外:为读者持续整理了几份最新教程,覆盖了 Spring Boot.Spring Cloud.微服务架构等PDF.获取方式:关注右侧公众号"泥瓦匠BYSocket",来领取吧! 摘 ...

  4. ASP.NET Core 2.2 WebApi 系列【一】搭建ASP.NET Core WebApi项目

    一.步骤 从“文件”菜单中选择“新建”>“项目” . 选择“ASP.NET Core Web 应用程序”模板,再单击“下一步” . 将项目命名为 NetCoreWebApi,然后单击“创建” . ...

  5. Python的6种内建序列之通用操作

    数据结构式通过某种方式(例如对元素进行编号)组织在一起的数据元素的集合,这些数据元素可以是数字或者字符,甚至可以是其他数据结构.在Python中,最基本的数据结构是序列(sequence).序列中的每 ...

  6. CSAPP 3 程序的机器级表示

    1 本章总述 1) 通过让编译器产生机器级程序的汇编表示, 学习了编译器及其优化能力, 以及机器.数据类型和指令集; 2) 学习了程序如何将数据存储在不同的内存区域中 -- 程序开发人员需要知道一个变 ...

  7. Hive静态分区和动态分区,对应Mysql中的元数据信息

    静态分区: 手动指定分区加载数据,就是常说的静态分区的使用.但是在日常工作中用的比较多的是动态分区. 创建: hive> create table order_mulit_partition( ...

  8. /dev/random 和 /dev/urandmon的差别

    最近使用这两个设备的时候,发现 /dev/random生成随机数很慢:于是就查了查: 这两个设备的差异在于:/dev/random的random pool依赖于系统中断,因此在系统的中断数不足时,/d ...

  9. springboot入门以及配置文件

    springboot入门以及配置文件 SpringBoot是什么? Spring Boot它本身并不提供Spring框架的核心特性以及扩展功能,只是用于快速.敏捷地开发新一代基于Spring框架的应用 ...

  10. Web-[RoarCTF 2019]Easy Calc

    看看题目内容,一个计算器,并且过滤了非数字的值,查看源码,上了waf,并且在calc.php显示waf的规则 <?php error_reporting(0); if(!isset($_GET[ ...