【前端开发】:使用CSS类选择器编写Google字体样式
2023-09-11 14:21:08 时间
假设我们想要实现谷歌首页这样的样式字体该怎么办呢?如下所示:
从中可以看到Google当中的G和小写的g均为蓝色,o和e均为红色,剩下的一个o和l分别为黄色和绿色。我们可以使CSS当中的class选择器来完成这字体的编写,首先我们使用span标签来表示Google这个单词如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>谷歌</title> <style> span { font-size:100px; } </style> </head> <body> <span>G</span> <span>o</span> <span>o</span> <span>g</span> <span>l</span> <span>e</span> </body> </html>
这样使用了span标签这个行内元素之后,以及在css当中编写了span标签所对应的字体的大小,因此字体已经是相当大了。现在我们重新编码,将css当中每一个元素所对应的颜色的class以及css有关颜色的代码写在head标签内,如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>谷歌</title> <style> span { font-size:100px; } .red { color:red; } .green { color:green; } .blue { color:blue; } .yello { color:yellow; } </style> </head> <body> <span class="blue">G</span> <span class="red">o</span> <span class="yello">o</span> <span class="blue">g</span> <span class="green">l</span> <span class="red">e</span> </body> </html>
这样我们就可以得到我们新的字体了!如下所示:
相关文章
- [Google Guava] 排序: Guava强大的”流畅风格比较器”
- Google 确认 Chrome 即将支持 GPU 硬件加速
- Google财报遇提前发布闹剧 净利大跌股价下降8%
- css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS
- 从Google Quick Draw涂鸦观察不同文化属性
- CSS - 工具类 tool.css
- Google Hack的一些整理
- [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
- Google Developing for Android 学习总结
- 为什么CSS这么难学?css核心知识点攻坚指南
- 如何更好面对VR遇到的难题?这里有一些Google分享的经验
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- android 8.1 9.0 10.0 Launcher3去掉默认的google搜索栏
- google pixel刷机+root记录
- Forget Guava: 5 Google Libraries Java Developers Should Know
- [RK3399平台开发系列讲解(系统修改记录篇)1.1、安卓界面如何去掉顶部Google搜索栏
- 【CSS】css弹性布局、CSS hack_08
- TensorFlow:实战Google深度学习框架(二)实现简单神经网络
- 如何看待 Google 最新的系统 Fuchsia?