全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

CSS文本颜色和大小写转化

发布时间:2023-01-17 17:14:00
发布人:qyf

CSS文本颜色和大小写转化

  CSS有很多用于格式化文本的属性。比如,文本的颜色、大小写转化、对齐方式、文本间距、文本装饰等等。

  首先,我们来介绍 CSS 如何为文本添加颜色。

  通过声明 color 属性 来设置文本的颜色,值可以是颜色名称、十六进制颜色值、RGB颜色值。

  我们来做个例子。

  打开编辑器,创建一个 005-css-text 文件夹,在文件夹里创建一个 text.html 文件,创建基础代码,添加 h1 元素,填入一些文本。再添加一个 p 标签,填入一些文本。

  再创建一个 mystyle-1.css 文件,定义 body 元素选择器,声明样式 color: blue。在页面里引用它,路径为当前目录下的 mystyle-1.css 文。./mystyle-1.css)。

<!DOCTYPE html>

<html lang="en">

<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>CSS Text</title>

  <link rel="stylesheet" href="./mystyle-1.css">

</head>

<body>

  <h1>浠浠呀老师,学前端的大专生就业难吗?</h1>

  <p>

  不难,只要你能力过关、项目经验过关、人品过关,企业就会录用你。你可以在面试的时候,着重介绍一下你的开发能力、技术能力以及你对技术理解,让别人挑不出毛病,那学历这块是可以自动忽略的。我在面试别人的时候也是这样,如果这个人的技术能力和过往经验真的征服了我,我不是很在他乎他的学历。</p></body></html>

  这里说明一下:一个页面的默认文本颜色是在 body 选择器中定义的。

  body {

  /* 一个页面的默认文本颜色是在body选择器中定义的。 */

  color: blue;

  }

  细心的小伙伴发现了,这里添加的是注释吗?没错,和 html 注释一样,它是用来解释CSS 代码的,浏览器会忽略注释。CSS注释以 /* (读作:斜杠 星号) 开始,以 */ (读作:星号 斜杠)结束,里面编写注释内容。注释一般放到一组样式定义的前面,或者放在单个样式声明的后面,中间可以换行。

  在浏览器里查看页面效果,文本全部为蓝色。

  在 mystyle-1.css 里再定义一个 h1 选择器,声明样式 color: green。

  再来看效果,标题变为了绿色,段落还是蓝色。

  接下来,我们介绍 CSS 如何强制转换文本中,单词和字母的大写和小写。

  使用 text-transform 属性来实现这个功能,它的值有三个:

  uppercase:文本被转换为大写。

  lower case:文本被转换为小写。

  capitalize [ˈkæpɪtəlaɪz]:每个单词的首字母被转换为大写。

  这个属性主要用来设置英文的文本,对中文无效。

  回到编辑器,我们再创建一个段落,填入答案的英文版。

<body>

  <h1>浠浠呀老师,学前端的大专生就业难吗?</h1>

  <p>

  不难,只要你能力过关、项目经验过关、人品过关,企业就会录用你。你可以在面试的时候,着重介绍一下你的开发能力、技术能力以及你对技术理解,让别人挑不出毛病,那学历这块是可以自动忽略的。我在面试别人的时候也是这样,如果这个人的技术能力和过往经验真的征服了我,我不是很在他乎他的学历。

  </p>

  <p class="transform">

    It's not difficult, as long as you are competent, have project experience and are a good person, companies will hire you. You can focus on your development skills, technical skills and your understanding of technology during the interview so that no one can pick a fault, then the education piece can be automatically ignored. I do the same thing when interviewing people, if the person's technical skills and past experience really conquered me, I am not very in him about his education.

  </p>

</body>

  给这个段落定义 class 属性,值为 transform。

  在样式中,定义 p.transform 选择器,声明样式属性text-transform ,值为 uppercase。

  返回浏览器,全部的英文为大写字母。

  修改 text-transform 的属性值为 lowercase。全部的英文为小写字母。

  修改 text-transform 的属性值为 capitalize。全部单词的首字母大写。

  有关 CSS 如何给文本添加颜色,以及转换文本的大小写,就介绍完了。最后给大家留一个作业,把屏幕上显示的这个页面效果实现一下,大家加油!

相关文章

Java常用的包(package)有哪些?

Java常用的包(package)有哪些?

2023-10-15
Java Nio中Selector是什么?

Java Nio中Selector是什么?

2023-10-15
ThreadLocal为什么会发生内存泄漏?

ThreadLocal为什么会发生内存泄漏?

2023-10-15
工业机器人、自动化、PLC三者是什么关系?

工业机器人、自动化、PLC三者是什么关系?

2023-10-15

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取