运行效果：

源代码：

 1 <!DOCTYPE html>

 2 <html lang="zh">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>Google</title>

 6     <style type="text/css">

 7

 8         body{

 9             font-family: "宋体";

10         }

11

12         .container{

13             margin-top: 20px;

14             margin-left: 20px;

15         }

16

17         .big-font{

18             font-size: 60px;

19         }

20

21         .blue{

22             color: blue;

23         }

24

25         .bolder{

26             font-weight: bolder;

27         }

28

29         .red{

30             color: red;

31         }

32

33         .yellow{

34             color: yellow;

35         }

36     </style>

37 </head>

38 <body>

39 <div class="container">

40     <font class="blue big-font bolder">G</font>

41     <font class="red big-font bolder">o</font>

42     <font class="yellow big-font bolder">o</font>

43     <font class="blue big-font bolder">g</font>

44     <font>l</font>

45     <font>e</font>

46 </div>

47 </body>

48 </html>

CSS简单样式练习（四）的更多相关文章

  1. CSS常用样式（四）之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  2. css添加样式的四种方式

    1. 导入样式:在 .css文件中使用@import url("...")来引入另一个css样式表 2. 外部样式:在html页面中的head中使用 link 标签引入,如< ...

  3. CSS简单样式练习（七）

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  4. CSS简单样式练习（六）

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  5. CSS简单样式练习（五）

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  6. CSS简单样式练习（三）

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  7. CSS简单样式练习（二）

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  8. CSS简单样式练习（一）

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  9. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

随机推荐

  1. 全面解读 AWS Private 5G 的革新理念

    目录 目录 目录 前言 近几年 AWS 在 5G ICT 领域的部署 AWS 与 Verizon 合作推出的 Private MEC 解决方案 AWS 与 Vodafone Business 合作推出 ...

  2. 一文详解Redis键过期策略

    摘要:Redis采用的过期策略:惰性删除+定期删除. 本文分享自华为云社区<Redis键过期策略详解>,作者:JavaEdge. 1 设置带过期时间的 key # 时间复杂度:O(1),最 ...

  3. count()用法

  4. 打靶笔记-01-vulnhub-moneybox

    打靶笔记-01-vulnhub-moneybox 本篇笔记根据苑老师视频进行学习记录 https://www.bilibili.com/video/BV1Lv411n7Lq/?spm_id_from= ...

  5. Redis常见延迟问题定位与分析

    Redis作为内存数据库,拥有非常高的性能,单个实例的QPS能够达到10W左右.但我们在使用Redis时,经常时不时会出现访问延迟很大的情况,如果你不知道Redis的内部实现原理,在排查问题时就会一头 ...

  6. ZYNQ 双CPU裸机运行例程

    vivado 2014.4 特殊情况:总DDR内存大于512MB,且CPU0已经占用了超过512MB,这时按以下步骤CPU1无法启动. 原因:启动入口地址限制.更改方法如下: 打开cpu1_bsp\p ...

  7. C++设计模式 - 命令模式（Command）

    行为变化模式 在组件的构建过程中,组件行为的变化经常导致组件本身剧烈的变化."行为变化" 模式将组件的行为和组件本身进行解耦,从而支持组件行为的变化,实现两者之间的松耦合. 典型模 ...

  8. Spring 和 SpringBoot 有什么不同？

    Spring 框架提供多种特性使得 web 应用开发变得更简便,包括依赖注入.数据绑定.切面编程.数据存取等等. 随着时间推移,Spring 生态变得越来越复杂了,并且应用程序所必须的配置文件也令人觉 ...

  9. spring学习四：springMVC

    ref:http://www.cnblogs.com/ysocean/tag/SpringMVC%E5%85%A5%E9%97%A8%E7%B3%BB%E5%88%97/ Spring MVC的处理流 ...

  10. docker-compose配置django web项目容器和EMQX容器

    1.Dockerfile FROM gatewayserver_null:v1.1 ADD ./GatewayServer /code ADD ./entrypoint.sh /code# 给entr ...