首页 > 其他分享 >CSS文本颜色和大小写转化

CSS文本颜色和大小写转化

时间:2023-02-06 17:35:18浏览次数:44  
标签:颜色 text transform 大小写 文本 CSS 属性

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

CSS文本颜色和大小写转化_选择器

标签:颜色,text,transform,大小写,文本,CSS,属性
From: https://blog.51cto.com/u_14573321/6039975

相关文章

  • N-GRAM文本挖掘
    N-GRAM介绍:N-Gram是基于一个假设:第n个词出现与前n-1个词相关,而与其他任何词不相关。(隐马尔科夫当中的假设。)整个句子出现的概率就等于各个词出现的概率乘积。各个词的概率......
  • MySQL(十)操纵表及全文本搜索
    一、创建表MySQL不仅用于表数据操作,还可以用来执行数据库和表的所有操作,包括表本身的创建和处理。创建表一般有如下两种方式:①使用具有交互式创建和管理表的工具;②直接使用M......
  • CSS3实现打勾(✔)效果
    CSS3实现打勾效果​​HTML主体​​​​我们看,这个效果的HTML结构​​​​属性:​​​​样式属性​​关于打勾✔效果,应该都不陌生。eg:我们在某些商场,支付的时候,支付成功会有......
  • css中文字体和Unicode编码转换方法
    在网站中,都不可避免的要用到一些中文字体,比如宋体,微软雅黑,黑体等,在css中写入中文的方法一般是:font-family:"微软雅黑","黑体";这样类似的表达方式。css样式文件也区分文......
  • markdown文本的常见编辑快捷键
    ##标题#+一级标题##+二级标题###+三级标题####+四级标题 ##字体风格样式**字体粗体** *字体斜体* ***字体斜体加粗体***~~废弃字体~~ #......
  • MVC项目发布后没有CSS样式
    使用VS2019开发asp.netMVC框架的时候,代码调试没有问题,在部署到IIS上的时候,通过浏览器提示获取不到相关的样式文件资源有以下几种情况:1.在所在地址没有相关样式;2.相关......
  • 新闻文本爬取——以央广网为例
    目录crawlingcrawling1.xcrawling1.0crawling2.xcrawling2.0crawling2.1crawling3.xcrawling3.0crawling3.1crawling3.2crawling3.3crawlingcrawling1.xcrawling1.0imp......
  • CSS 3 所有的选择器整理(2023.2)
    你知道的和你不知道的所有选择器。不包含尚未广泛实现的,也不包含已弃用的。基本的选择器规则(Selector)类型(Type)选择器直接用标签匹配特定的元素span{ ...}p{ .........
  • css box-shadow单边阴影设置
    box-shadow参数说明box-shadow:h-shadowv-shadowblurspreadcolorinset h-shadow(X轴)必需第一个长度值指明了阴影水平方向的偏移,即阴影在x轴的位置。值为正数时......
  • 学习css的第二天~
    基本选择器:1、标签选择器:p{color:blue;} 2、类选择器:(对标签里的class属性值进行样式设置)html标签里加入class进行区分<pclass="red">文本</p>在css里......