Web前端-Web开发CSS基础1-字体属性

news/2024/8/26 15:45:59 标签: 前端, css

一. 基础
1. 在一个html文件中引入"../css/format1.css";
2. 在一个html文件中引入"../css/format2.css";
3. 在一个html文件中引入"../css/format3.css";
已知一个html文件中引入了一个css文件中,则:
4. 对于html文件中的p标签,将其字体颜色都设置为orange;
5. 对于html文件中的p标签,将其字体颜色都设置为green;
6. 对于html文件中的p标签,将其字体颜色都设置为purple;
7. 对于html文件中的p标签,将其字体颜色都设置为rgb(253, 184, 55);
8. 对于html文件中的p标签,将其字体颜色都设置为rgb(24, 210, 24);
9. 对于html文件中的p标签,将其字体颜色都设置为rgb(182, 34, 182);
10. 对于html文件中的p标签,将其字体颜色都设置为#fdb837;
11. 对于html文件中的p标签,将其字体颜色都设置为#18d218;
12. 对于html文件中的p标签,将其字体颜色都设置为#b622b6;
13. 对于html文件中的p标签,将其字体颜色都设置为hsl(39, 98%, 60%);
14. 对于html文件中的p标签,将其字体颜色都设置为hsl(120, 79%, 46%);
15. 对于html文件中的p标签,将其字体颜色都设置为hsl(300, 69%, 42%);
16. 对于html文件中的p标签,将其字体颜色都设置为hwb(39 21% 1%);
17. 对于html文件中的p标签,将其字体颜色都设置为hwb(120 10% 18%);
18. 对于html文件中的p标签,将其字体颜色都设置为hwb(300 13% 29%);
19. 已知html文件中,<html>标签的字体大小为16px。则对于html文件中的p标签,将其字体大小设置为<html>标签字体的1.5倍大;
20. 已知html文件中,<html>标签的字体大小为16px。则对于html文件中的p标签,将其字体大小设置为<html>标签字体的1.25倍大;
21. 已知html文件中,<html>标签的字体大小为16px。则对于html文件中的p标签,将其字体大小设置为<html>标签字体的0.8倍大;
22. 对于html文件中的p标签,将其字体大小设置为其父标签字体大小的1.5倍;
23. 对于html文件中的p标签,将其字体大小设置为其父标签字体大小的1.25倍;
24. 对于html文件中的p标签,将其字体大小设置为其父标签字体大小的0.8倍;
25. 对于html文件中的p标签,将其字体大小设置为16像素;
26. 对于html文件中的p标签,将其字体大小设置为18像素;
27. 对于html文件中的p标签,将其字体大小设置为20像素;
28. 对于html文件中的p标签,将其字体粗细设置为一般粗细;
29. 对于html文件中的p标签,将其字体粗细设置为粗;
30. 对于html文件中的p标签,将其字体粗细设置为细;
31. 对于html文件中的p标签,将其字体粗细设置为更粗;
32. 对于html文件中的p标签,将其字体粗细设置为“从父元素继承”;
33. 对于html文件中的p标签,将其字体粗细设置为300;
34. 对于html文件中的p标签,将其字体粗细设置为600;
二. 提高
1. rgb表示法是什么?
2. #表示法是什么?
3. hsl表示法是什么?
4. hwb表示法是什么?
5. <head>标签有结束标签嘛?
6. <head>标签有结束标签嘛?


一. 基础
1. <head>
<link rel="stylesheet" href="../css/format1.css">
</head>
2. <head>
<link rel="stylesheet" href="../css/format2.css">
</head>
3. <head>
<link rel="stylesheet" href="../css/format3.css">
</head>
4. p{ color: orange; }
5. p{ color: green; }
6. p{ color: purple; }
7. p{ color: rgb(253, 184, 55); }
8. p{ color: rgb(24, 210, 24); }
9. p{ color: rgb(182, 34, 182); }
10. p{ color: #fdb837; }
11. p{ color: #18d218; }
12. p{ color: #b622b6; }
13. p{ color: hsl(39, 98%, 60%); }
14. p{ color: hsl(120, 79%, 46%; }
15. p{ color: hsl(300, 69%, 42%); }
16. p{ color: hwb(39 21% 1%); }
17. p{ color: hwb(120 10% 18%); }
18. p{ color: hwb(300 13% 29%); }
19. p{ font-size: 1.5rem; }
20. p{ font-size: 1.25rem; }
21. p{ font-size: 0.8rem; }
22. p{ font-size: 1.5em; } 或者 p{ font-size: 150%; }
23. p{ font-size: 1.25em; } 或者 p{ font-size: 125%; }
24. p{ font-size: 0.8em; } 或者 p{ font-size: 80%; }
25. p{ font-size: 16px; }
26. p{ font-size: 18px; }
27. p{ font-size: 20px; }
28. p{ font-weight: normal; } 或者 p{ font-weight: 400; }
29. p{ font-weight: bold; } 或者 p{ font-weight: 700; }
30. p{ font-weight: lighter; } 或者 p{ font-weight: 100; }
31. p{ font-weight: bolder; } 或者 p{ font-weight: 900; }
32. p{ font-weight: inherit; }
33. p{ font-weight: 300; }
34. p{ font-weight: 600; }
二. 提高
1. rgb表示法,通过调整红、绿、蓝三盏灯的亮度,进而调整混合后得到的颜色;
2. #表示法,用十六进制重写rgb表示法中的三个0到255之间的数,接着粘贴到一起。通过调整这个六位十六进制的值,调整红、绿、蓝三盏灯的亮度,进而调整混合后得到的颜色;
3. hsl表示法,通过调整色相hue、饱和度(浓度)saturation、亮度lightness来调整颜色;
4. hwb表示法,通过调整色相hue、白色浓度whiteness、黑色浓度blackness来调整颜色;
5. <head>标签有结束标签;
6. <head>标签有结束标签;


http://www.niftyadmin.cn/n/5558171.html

相关文章

2024CAIP省赛

title: 2024CAIP省赛 date: 2024-07-16 22:13:50 tags: 总结 categories: 比赛 文章目录 RC-u1 热҈热҈热҈思路 RC-u2 谁进线下了&#xff1f;思路 RC-u3 暖炉与水豚思路 RC-u4 章鱼图的判断思路代码 RC-u5 工作安排思路 总结写在前面&#xff0c;就一句话 状态的保持胜过少…

Adobe Photoshop 2024 25.9.1 Win/Mac PS2024最新中文学习版

Adobe Photoshop 2024&#xff0c;简称PS&#xff0c;目前最强的图片处理合成软件,PS提供了广泛的工具和功能&#xff0c;包括画笔、铅笔、颜色替换、混合器画笔等绘画工具&#xff0c;以及裁剪、透视变形、智能修复画笔等编辑工具。用户可以使用这些工具进行图片编辑、合成、校…

【Linux】进程信号 --- 信号产生

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

鸿蒙系统在服装RFID管理中的应用:打造智能零售新时代

​随着物联网技术的迅速发展&#xff0c;服装零售行业正面临着新的变革与挑战。鸿蒙系统作为新一代智能操作系统&#xff0c;结合RFID技术&#xff0c;为服装行业提供了高效、智能的管理解决方案。常达智能物联&#xff0c;作为RFID技术的领先企业&#xff0c;致力于将鸿蒙系统…

一篇文章认识Servlet并安装【Tomcat】

web后端开发环境搭建 web后端(javaEE)程序需要运行在服务器中的. 这样前端才可以访问得到. 什么是服务器? 解释1: 服务器就是一款软件,可以向其发送请求,服务器会做出一个响应.可以在服务器中部署文件,让他人访问解释2: 也可以把运行服务器软件的计算机也可以称为服务器 安…

对象存储解决方案:高性能分布式对象存储系统MinIO

文章目录 引言I 自动化数据管理界面1.1 图形用户界面:GUI1.2 命令行界面:MinIO CLI1.3 应用程序编程接口:MinIO APIII 部署集成2.1 静态端口分配2.2 将NGINX用作反向代理,配置负载。III 基础概念3.1 为什么是对象存储?3.2 MinIO支持哪些系统拓扑结构?3.3 时间同步3.4 存储…

小程序 - - - - - 实现渐隐渐显(监听滚动距离版)

代码如下&#xff1a; <!-- fixed-left --> <view class"fixed-box" animation"{{animationData}}">这里是渐隐渐显的标签 </view>.fixed-box {position: fixed;left: 0;top: 0;z-index: 999;background-color: #ccc;/* background-colo…

xml 标记语言介绍

XML&#xff08;可扩展标记语言&#xff09;是一种标记语言&#xff0c;其设计宗旨是简单、通用、自我描述。XML文档由一系列元素&#xff08;elements&#xff09;组成&#xff0c;这些元素可以包含属性&#xff08;attributes&#xff09;和文本内容。下面是XML标签的基本格式…