运行效果：

源代码：

 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. Triple Shift

    来源:Atcoder ARC 136 B - Triple Shift (atcoder.jp) 题解:这道题我们不可能去硬模拟(大多数这种题都不能这样去模拟的),然后我们就要去发现特性, 发现把 a ...

  2. yum安装zabbix-web-mysql出现[Errno 256] No more mirrors to try.

    yum安装zabbix-web-mysql出现[Errno 256] No more mirrors to try.报错在CentOS7.X 使用yum 安装软件的时候 出现错误[Errno 256] ...

  3. CF1385G口胡

    只能说很神秘??? 首先观察题面,假设给出的第一个序列为 \(a\),第二个序列为 \(b\).对于 \((a_i,b_i)\) 我们连一条边. 得到的是一个 \(n\) 个点 \(n\) 条边的不一 ...

  4. Linux环境下安装Maven

    最近在搞虚拟机,记录下虚拟机内Maven环境的搭建流程 一.选择合适的版本(由于Maven运行需要依赖于JDK,所以安装之前需要保证当前虚拟机下已经安装并配置好JDK环境,安装流程参见) https: ...

  5. mysql 创建临时表

      创建临时表 create TEMPORARY table SalesSummary( product_name VARCHAR(50) NOT NULL, total_sales DECIMAL( ...

  6. GitLab 常用命令

    1. 进入本地仓库访问位置之后执行命令 1) 远程仓库相关命令检出仓库:$ git clone git://github.com/jquery/jquery.git查看远程仓库:$ git remot ...

  7. C++设计模式 - 组合模式（Composite）

    数据结构模式 常常有一-些组件在内部具有特定的数据结构,如果让客户程序依赖这些特定的数据结构,将极大地破坏组件的复用.这时候,将这些特定数据结构封装在内部,在外部提供统一的接口,来实现与特定数据结构无 ...

  8. K8S原来如此简单（三）Pod+Deployment

    上篇我们已经安装好k8s1.23集群,现在我们开始使用k8s部署我们的项目 Pod Pod 是一组容器集合,是可以在 Kubernetes 中创建和管理的.最小的可部署的计算单元.这些容器共享存储.网 ...

  9. 超详细maven的卸载、重新安装与配置

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 一.maven的卸载 maven在使用时只是配置了环境变量和本地仓库,我们只需要删除本地仓库,在环境变量中移除maven的环境变量. 1.删除解 ...

  10. 4月9日 python学习总结 模块

    1.XML模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融 ...