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

281 篇文章 16 订阅
订阅专栏

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

文本属性就是: 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颜色参数,或者十六进制参数,所以只需要会用上面的办法即可。 

怎么在css中定义字体颜色,css中怎么设置字体颜色
weixin_29544469的博客
08-03 1万+
css中怎么设置字体颜色发布时间:2021-07-22 18:15:24来源:亿速云阅读:52作者:Leah本篇文章给大家分享的是有关css中怎么设置字体颜色,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。font-size:18px;:设置字号color:#093:设置字色font-family:'宋体';:设置字体(要尽量使用通用的...
CSS样式所有属性.pdf
02-27
8. **定位属性(Positioning)**: - `bottom`, `left`, `right`, `top`:设置元素相对于其包含块的定位偏移。 - `clear`:规定元素周围不允许浮动元素的位置。 - `clip`:裁剪绝对定位元素的显示区域。 - `...
CSS常用属性字体属性(三)
全粘小谭的博客
10-02 682
CSS字体属性主要有:color属性font-sizefont-weight、font-style、font-family、@font-face,接下来我将对这些属性进行一个还算详细的描述
前端学习 -- Css -- 字体的几个属性学习
A08110123的博客
04-12 585
font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique它们的效果往往是一样的 - 一般我们只会使用italic font-weight可以用来设置...
CSS基础常用属性颜色(如果想知道CSS颜色知识点,那么只看这一篇就足够了!)
最新发布
秋刀鱼不做梦的编程日常
04-18 1697
CSS基础常用属性颜色(如果想知道CSS颜色知识点,那么只看这一篇就足够了!)
CSS 文本字体颜色设置方法(CSS color)
热门推荐
xiaoweids的博客
07-11 2万+
转自:微点阅读 https://www.weidianyuedu.com这篇文章主要介绍了CSS 文本字体颜色设置方法(CSS color),需要的朋友可以参考下一、认识CSS 颜色CSS color)这里要介绍的是网页设置颜色包含有哪些;网页颜色规定规范。1、常用颜色地方包含:字体颜色、超链接颜色、网页背景颜色、边框颜色2、颜色规范与颜色规定:网页使用RGB模式颜色二、颜色基础知识网页中颜色的运用是网页必不可少的一个元素。使用颜色目的在于有区别、有动感(特别是超链接中运用)、美观之用,同时颜色也是各种
前端开发_HTML5_CSS部分-文字(font)/文本(text)
u013185175的博客
12-14 2493
文字(font)/文本(text)属性 1.引入 上一节课我们讲解了有关边框的问题,接下来我们来学习一下有关文字的相关属性,文字的相关属性主要有两个,一个是文字属性font,另一个则是文本属性:text 。 2.文字属性(font) font文字常用属性 1.font-size:用于定义文字的字体大小,一般情况取值为:12px和18px,如:font-size:12px。 2.font-family:用于定义字体的类型,字体的类型如同之前我们接触到的word中的字体类型,如: ..
CSS之文字样式
weixin_45604020的博客
06-22 5951
CSS字体属性定义字体颜色、大小,加粗,文字等的样式。
CSS基础知识(二):字体属性文本属性
前端
10-23 1000
文章目录前言一、字体属性1.1 font-family1.2 font-size1.3 font-weight1.4 font-style1.5 字体的复合属性1.6 字体属性总结二、文本属性2.1 color2.2 text-align2.3 text-decoration2.4 text-indent2.5 line-height2.6 文本属性总结 前言 提示:以下是学习前端以来,整理过的一些CSS知识点。知识主要来源于黑马程序员Pink老师,内容都是自己的理解,如果有不对的地方,请评论区指正,谢谢~
CSS 属性组.docx
02-27
CSS(层叠样式表)中,我们有各种属性用于定义和控制网页的布局、颜色字体、边框、背景以及更多。以下是一些主要的知识点: 1. **边框属性**: - `border-left` 和 `border-top`:分别设置元素的左边框和上...
CSS标签属性大全.docx
02-27
8. **缩进**:`text-indent` 属性用于设置文本块的第一行缩进,单位通常是像素。 9. **垂直对齐**:`vertical-align` 属性控制元素在行内的垂直对齐方式,包括基线、下标、上标、顶部、底部等。 10. **边框属性**...
css3属性手册.docx
02-27
CSS3是层叠样式表的第三版,引入了许多新特性,极大地丰富了网页设计的视觉效果。以下是关于CSS3的一些关键知识点: **CSS3 动画属性 (Animation)** 1. **animation-name**: 定义动画的名称,这个名称对应于@...
CSS3属性速查表.pdf
09-14
**CSS3属性速查表.pdf** 是一个非常实用的资源,它包含了CSS3中的各种属性,这些属性在构建和设计现代网页时起着至关重要的作用。CSS3是 Cascading Style Sheets(层叠样式表)的第三版,是用于描述HTML或XML(包括...
DIV+CSS属性设置参数.docx
11-26
7. **Font** (字体设置): 包括`font-family`, `font-size`, `font-weight`等,用于定义文本的字体、大小和粗细。 8. **List-style-type** (列表符号): 可以设置列表项的类型,如实心圆点、空心圆、方块、数字等。 ...
DIVCSS网页布局实例:十步学会用CSS建站[整理].pdf
10-11
我们可以使用CSS选择器来选择特定的元素,并使用样式来设置字体颜色、大小等属性。 第七个步骤:网站头部图标与logo部分的设计 在这个步骤中,我们需要设计网站头部的图标和logo。我们可以使用图片编辑软件来...
CSS属性详解——使用color属性设置文字颜色
Wod_7的博客
05-23 3997
CSScolor属性是一个非常有用的属性,它可以为网页中的文本设置颜色。本文介绍了color属性的详细语法和使用方式,主要包括取值方式、应用等。如有疑问,欢迎提出。希望本文对您有所帮助。
字体和文本的相关属性
weixin_57772001的博客
06-27 687
一、字体相关属性 (1)color:该属性用于控制字体颜色,该属性值包括字符类型的颜色名、十六进制的颜色值、rgb(255,255,255)值。还有CSS3提供的HSL颜色值。 (2)font-famliy:设置文字的字体。因为浏览器内嵌字体的支持,该属性 可以设置多个显示字体,浏览器按该属性指定的多个字体依次搜索, 以优先找到的字体来显示文字,多个属性值之间用逗号(,)隔开。 (3)font-size:设置字体的大小。此处的字体大小分为相对字体大小和绝 对字体大小。还可以使用关键字。例如:me
WebCSS学习笔记
qq_62361050的博客
07-29 459
CSS英文全称【cascading style sheet】:层叠样式表。作用:CSS用于美化网页、还可以进行网页布局。前端三层是什么呀? 答案:前端分为三层:HTML(结构层)、CSS(样式层)、JavaScript(行为层)。总结:CSS前端人当中称之为样式层,可以对网页进行美化。比如:文字设置颜色、文字设置大小、设置文字字体。可以进行网页页面布局。CSS【层叠样式表,简称样式】:根据在网页书写位置不同。分为三种:行内样式、内嵌样式、外链样式。注意:我们刚开始学习的是行内样式写法。 任意标签【容器、
css字体渐变,要求:
05-28
好的,下面是关于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属性来创建一个从红色到蓝色的文本渐变。我们创建了多个阴影,并将它们的颜色设置为渐变色。每个阴影的大小和位置都略微不同,这样就能够创建出平滑的渐变效果。 需要注意的是,这两种方法都有它们的优缺点。使用第一种方法可以创建出更加平滑的渐变效果,但需要使用浏览器厂商前缀,并且在一些浏览器中可能不兼容。而使用第二种方法则可以在所有的浏览器中实现渐变效果,但是可能会出现锯齿状的文本,因为文本阴影的边缘并不是非常平滑。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • 将时间戳转换为日期格式:moment、new Date() 19649
  • css第八课:文本属性(字体,颜色属性) 18678
  • css宽高自适应 12951
  • overflow:auto的用法和实现弹性盒横向滚动 11828
  • index()函数和match()函数联合使用案例 11619

分类专栏

  • Excel 16篇
  • 摄影
  • web前端开发 281篇
  • 我的文件夹
  • java 1篇
  • 护肤
  • tableau 1篇
  • SQL 6篇
  • Ubuntu 1篇
  • python 1篇
  • PYTHON小题目 3篇
  • python基础知识 3篇

最新评论

  • sql资料库

    CSDN-Ada助手: MySQL入门 技能树或许可以帮到你:https://edu.csdn.net/skill/mysql?utm_source=AI_act_mysql

  • 设置Google浏览器在点击网站时,在新页面打开

    云之旋律: 已经解决: https://zhuanlan.zhihu.com/p/700463709

  • 设置Google浏览器在点击网站时,在新页面打开

    云之旋律: 还有其他方法吗?

  • js的ES6中的模板字符串( ``/$() )

    2301_81969946: 谢谢,找好半天。表情包

  • css溢出属性:overflow属性介绍

    罹景偓佺.: 写的很棒 赞啦!

您愿意向朋友推荐“博客详情页”吗?

  • 强烈不推荐
  • 不推荐
  • 一般般
  • 推荐
  • 强烈推荐
提交

最新文章

  • 永洪bi知识点
  • 永洪bi里topN的设置/用法
  • sql资料库
2024年3篇
2023年21篇
2022年292篇
2021年7篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

陌一一

你的鼓励是我最大的动力

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

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

打赏作者

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

抵扣说明:

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

余额充值

哆哆女性网汽车配件公司起名大全集在线起名网免费起名大全乡村爱情5剧情kugou.com色戒免费在线观看睿字起公司名字大全写给姓夏的女孩起名起名测分打分蔬菜公司昵称起名大全燕然勒功叶凡唐若雪最新章节全文免费阅读起个工作室名字大全张小五的春天电视剧女孩起名字珊珊的意思何时何地何原因受过何种奖励或处分砂锅米线起名字大全性孙用一个宸字男孩起名天下足球直播生辰八字起起名网张夏怎么起名以五行为木的字起名什么意思月野里沙魔形女天空之城台湾电视买护肤品去哪个网站给音乐工作室起名私生活韩剧狗年新生儿起名大全2018周易起名宝宝起名免费取名淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻不负春光新的一天从800个哈欠开始有个姐真把千机伞做出来了国产伟哥去年销售近13亿充个话费竟沦为间接洗钱工具重庆警方辟谣“男子杀人焚尸”男子给前妻转账 现任妻子起诉要回春分繁花正当时呼北高速交通事故已致14人死亡杨洋拄拐现身医院月嫂回应掌掴婴儿是在赶虫子男孩疑遭霸凌 家长讨说法被踢出群因自嘲式简历走红的教授更新简介网友建议重庆地铁不准乘客携带菜筐清明节放假3天调休1天郑州一火锅店爆改成麻辣烫店19岁小伙救下5人后溺亡 多方发声两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人?单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#青海通报栏杆断裂小学生跌落住进ICU代拍被何赛飞拿着魔杖追着打315晚会后胖东来又人满为患了当地回应沈阳致3死车祸车主疑毒驾武汉大学樱花即将进入盛花期张立群任西安交通大学校长为江西彩礼“减负”的“试婚人”网友洛杉矶偶遇贾玲倪萍分享减重40斤方法男孩8年未见母亲被告知被遗忘小米汽车超级工厂正式揭幕周杰伦一审败诉网易特朗普谈“凯特王妃P图照”考生莫言也上北大硕士复试名单了妈妈回应孩子在校撞护栏坠楼恒大被罚41.75亿到底怎么缴男子持台球杆殴打2名女店员被抓校方回应护栏损坏小学生课间坠楼外国人感慨凌晨的中国很安全火箭最近9战8胜1负王树国3次鞠躬告别西交大师生房客欠租失踪 房东直发愁萧美琴窜访捷克 外交部回应山西省委原副书记商黎光被逮捕阿根廷将发行1万与2万面值的纸币英国王室又一合照被质疑P图男子被猫抓伤后确诊“猫抓病”

哆哆女性网 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化