关于前端:零基础教你学前端61CSS文本颜色和大小写转化

28次阅读

共计 2127 个字符,预计需要花费 6 分钟才能阅读完成。

CSS 有很多用于格式化文本的属性。比方,文本的色彩、大小写转化、对齐形式、文本间距、文本装璜等等。(此时会同时演示几个案例)

首先,咱们来介绍 CSS 如何为文本增加色彩。

通过申明 color 属性 来设置文本的色彩,值能够是色彩名称、十六进制色彩值、RGB 色彩值。(此处用代码来演示)

这几个色彩值是不是感觉很相熟?没错,咱们在后面给 HTML 元素定义过 color 属性,值就是这三个。你还记得在哪一节讲过吗?能够弹幕通知大家!

咱们来做个例子。

关上编辑器,创立一个 005-css-text 文件夹,在文件夹里创立一个 text.html 文件,创立根底代码,增加 h1 元素,填入一些文本。再增加一个 p 标签,填入一些文本。

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

<!DOCTYPE html>

<html>

<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>

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 如何给文本增加色彩,以及转换文本的大小写,就介绍完了。

正文完
 0