运行效果：

源代码：

 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. 对SQL中游标的认识

    游标用于按顺序遍历结果集.但一般情况下,应尽量避免使用游标.原因: 1. 游标违背了关系模型,即按集合来考虑问题的思想: 2. 游标逐行对纪录进行操作,会带来额外的开销,使用游标的解决方案通常比使用集 ...

  2. SQL从零到迅速精通【查询利器】

    1.[列选取]从fruits表中获取f_name和f_price两列,T-SQL语句如下. SELECT f_name,f_price FROM fruits; 2.[去重]查询fruits表中s_i ...

  3. php 数组汇总

    PHP 5 Array 函数 函数 描述 array() 创建数组. array_change_key_case() 返回其键均为大写或小写的数组. array_chunk() 把一个数组分割为新的数 ...

  4. think php 公共目录common.php json封装

    <?php function getJsonData($code,$massage,$data){ $result=[ 'code'=>$code, 'massage'=>$mass ...

  5. Linux常用文件管理命令详解

    cat cat命令用于连接文件并打印到标准输出设备上. 命令语法:cat [参数] [文件名] 参数说明: 参数 说明 -n 由1开始对所有输出的行数进行编号. -b 由1开始对所有输出的行数进行编号 ...

  6. tensorflow源码解析之framework-function

    目录 什么是function FunctionDef 函数相关类 关系图 涉及的文件 迭代记录 1. 什么是function 在讲解function的概念之前,我们要先回顾下op.op是规定了输入和输 ...

  7. Java运算符 算术运算法

    运算符 算术运算法:+,-,*,/,%,++,– 复制运算符:= 关系运算符:>,<,>=,<=,==,!= instanceof 逻辑运算符:&&,||,! ...

  8. CF1117G题解

    题意:区间建笛卡尔树,求每个节点的siz之和. 首先看到笛卡尔树,就应该想到,因为这是一个排列,可以找到通过左边和右边第一个比自己大的元素来"建立"笛卡尔树. 设 \(l(u)\) ...

  9. Docker 容器、镜像、日志相关操作

    一. 容器操作 新建并启动 命令:docker run 查看容器 命令:docker ps 查看终止状态的容器 命令:docker ps -a 启动已终止容器 命令:docker start 终止容器 ...

  10. web服务器-Nginx下载限速

    web服务器-Nginx下载限速 一. 限速介绍 在生产环境中,为了保护WEB服务器的安全,我们都会对用户的访问做出一些限制,保证服务器的安全及资源的合理分配. 限流(rate limiting)是N ...