css第八课:文本属性(字体,颜色属性)

这一节我们要讲的是文本属性:

文本属性就是: css样式里的属性,对文本的修饰,比如颜色,大小,字体,下划线...

下图是文本的一些属性:

1.font-size和font-family属性

我们先来演示一下前两个属性:字体大小和字体类型

 结果:

 解释:我们这里第一个p标签设置的css样式(p1)是,字体是默认的字体,大小为12px,第二个p标签设置的css样式(p2)是,字体是宋体,大小为默认的大小,结果发现Google默认的字体是“微软雅黑”,大小为16px。

这里说一点就是:字体类型属性的属性值可以写多个,中间用逗号隔开,先执行第一个属性值,如果第一个浏览器显示不出来,就执行第二个,以此类推

还有p标签中间的英语单词,可以直接输入Lorem,就可以随机生成很多英语单词,用来测试充数很好哦

Google浏览器默认字体为:微软雅黑

浏览器支持的字体:

 2.color颜色属性

颜色属性的属性值写法有很多:直接写颜色的,十六进制的,rgb写法的,还有(0,255)颜色区域的

下面我们就开始演示:

(1)直接写颜色的,这个相信大家都很熟悉了

代码:

结果:

 (2)第二种:rgb

代码:

 结果:

 rgb()模式,参数是三个,如rgb(数值,数值,数值),三个参数的分为都是从0-255,0表示最弱,255表示最强,如果rgb分别代表的是red红色,green绿色,blue蓝色,是光学基本三原色,三个颜色混在一起能混合出其他的颜色,所以当参数数值为0时,就代表没有这个颜色,如上图代码所示,红色和绿色两个颜色都是0,蓝色的数值为255,说明红色和绿色都没有,只有蓝色,如果说三个参数数值都在0-255之间,那么最终的颜色就是他们三个颜色按数值混合后的颜色。

(3)十六进制

代码演示:

 结果:

 解释:我们现在看见的数字都是用十进制表示的,数字范围是(0-9);计算机是用二进制表示的,数字范围是(0-1);这个十六进制的数字范围是(0-9,A-F),f是最大的,上面的代码演示含义是:这里的颜色用“#+6个0-f之间的数”表示,前两位表示的是红色的强度,中间两个参数表示的是绿色的强度,最后两个参数表示的是蓝色的强度,这里前两个参数都是00,说明红色的强度为0,中间两个参数都是ff,表示绿色的强度最大化,最后两个参数都是00,表示蓝色的强度也是0,所以总体显示的是绿色。

(4)第四种:颜色数值

代码演示: 

 结果:

最后一种方法是:直接写颜色值来配对颜色,

上面的写颜色的方法,不用我们自己去记这些颜色怎么写的,只需要知道方法,我们可以将图片放在ps里面识别,就会出现颜色值,rgb颜色参数,或者十六进制参数,所以只需要会用上面的办法即可。 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,下面是关于CSS字体渐变的详细解释: CSS字体渐变可以让文本从一种颜色渐变到另一种颜色CSS3中,我们可以使用以下两种方法来实现字体渐变: 1. 使用渐变的背景填充文本,然后将文本颜色设置为透明,从而显示出背景颜色。 ``` h1 { background: -webkit-linear-gradient(#f00, #00f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } ``` 在这个例子中,我们将h1元素的背景设置为从红色到蓝色的渐变。然后,我们使用-webkit-background-clip将元素的文本内容裁剪为背景,以便显示出背景渐变。最后,我们将元素的文本颜色设置为透明,这样文本就不会遮挡住背景颜色。 2. 使用text-shadow属性实现文本渐变。text-shadow属性可以创建一个或多个阴影,我们可以使用这个属性来实现文本颜色的渐变。 ``` h1 { text-shadow: 0 0 2px #f00, 0 0 4px #f00, 0 0 6px #f00, 0 0 8px #00f, 0 0 10px #00f, 0 0 12px #00f, 0 0 14px #00f, 0 0 16px #00f; } ``` 在这个例子中,我们使用text-shadow属性来创建一个从红色到蓝色的文本渐变。我们创建了多个阴影,并将它们的颜色设置为渐变色。每个阴影的大小和位置都略微不同,这样就能够创建出平滑的渐变效果。 需要注意的是,这两种方法都有它们的优缺点。使用第一种方法可以创建出更加平滑的渐变效果,但需要使用浏览器厂商前缀,并且在一些浏览器中可能不兼容。而使用第二种方法则可以在所有的浏览器中实现渐变效果,但是可能会出现锯齿状的文本,因为文本阴影的边缘并不是非常平滑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陌一一

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值