运行效果：

源代码：

 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. 『德不孤』Pytest框架 — 11、Pytest中Fixture装饰器（一）

    目录 1.Fixture装饰器的用途 2.Fixture参数说明 3.Fixture装饰器简单应用 4.yield执行后置函数 1.Fixture装饰器的用途 做测试前后的初始化设置,如测试数据准备, ...

  2. Redis集群-Cluster模式

    我理解的此模式与哨兵模式根本区别: 哨兵模式采用主从复制模式,主和从数据都是一致的.全量数据: Cluster模式采用数据分片存储,对每个 key 计算 CRC16 值,然后对 16384 取模,可以 ...

  3. think php 验证器及验证场景的使用

    1:在需要验证的模块名下建一个validate文件夹 ,文件夹下建议个验证的 名称   Goods.php 2:打开Goods.php <?php namespace app\api\valid ...

  4. VS Code配置Python环境

    Visual Studio Code配置Python环境 目录 Visual Studio Code配置Python环境 1.安装Python环境 2.安装VS Code 2.1 下载 2.2 配置中 ...

  5. BSOJ6310题解

    互不相同,太困难啦!!!!!! 考虑可以相同的情况.可以容斥. \[ans=(1+1+1+1)-(2+1+1)+(3+1)+(2+2)-(4) \] 有点抽象,看看就好() \[ans=(a,b,c, ...

  6. CF492E题解

    屑题. 考虑对于每一个 \((x,y)\),将其与 \(((x+dx) \mod n,(y+dy) \mod n)\) 连边. 答案就是连通块中权值最大的那个. 考虑对于 \((x_1,y_1)\) ...

  7. 报错----运行springboot项目出现：Type javax.xml.bind.JAXBContext not present

    目的:运行springboot项目出现:Type javax.xml.bind.JAXBContext not present 环境: 问题:运行springboot项目出现:Type javax.x ...

  8. 《前端运维》二、Nginx--3静态资源服务、跨域与其他

    一.静态资源服务 首先,静态资源一般是指客户端发送请求到Web服务器,web服务器从内存中取得相应的文件,返回给客户端,客户端解析并渲染出来.动态资源呢,则是由客户端发起请求,先交由web容器,web ...

  9. Python通过snap7库与西门子S7-1200建立S7通信，读写存储器数据，顺便写个流水灯

    1.snap7 简介 snap7 是一个基于以太网与S7系列的西门子PLC通讯的开源库. 支持包括S7系列的S7-200.S7-200 Smart.S7-300.S7-400.S7-1200以及S7- ...

  10. 渲染一个react?

    分为首次渲染和更新渲染 生命周期, 建立虚拟DOM, 进行diff算法 对比新旧DOM, 节点对比, 将算法复杂度从O(n^3)降低到O(n) key值优化, 避免用index作为key值, 兄弟节点 ...