运行效果：

源代码：

 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. Ubuntu 16.04.3 Server 版安装过程图文详解

    Ubuntu 16.04.3 Server 版安装过程图文详解 首先,我们会进入系统安装的第一个界面,开始系统的安装操作.每一步的操作,左下角都会提示操作方式! 1.选择系统语言-English2.选 ...

  2. Linux命令 之 “救命稻草”

    一.前言 虽然Linux操作系统图形界面已经退出,但由于大量的操作在终端操作比较快捷,所以,对linux命令的使用必不可少.在linux系统日常的学习和工作中,常常会出现有些命令忘记了或者该命令的参数 ...

  3. LGP1397题解

    并不是那么的有意思呢 首先,我们可以将题目给出的地推式看做一个一次函数 \(k * x+b\),来思考一个问题,如果给出两个一次函数 \(F(x)\) 和 \(G(x)\),那么 \(F(G(x))\ ...

  4. Java UDP 编程

    1.客户端代码 1 import java.io.IOException; 2 import java.net.DatagramPacket; 3 import java.net.DatagramSo ...

  5. python 模块之 selenium 自动化使用教程

    一.安装 pip install Selenium 二.初始化浏览器 Chrome 是初始化谷歌浏览器 Firefox 是初始化火狐浏览器 Edge 是初始化IE浏览器 PhantomJS 是一个无界 ...

  6. (一)【转】asp.net mvc生成验证码

    网站添加验证码,主要为防止机器人程序批量注册,或对特定的注册用户用特定程序暴力破解方式,以进行不断的登录.灌水等危害网站的操作.验证码被广泛应用在注册.登录.留言等提交信息到服务器端处理的页面中.   ...

  7. 网络编程 --安装wkhtmltopdf出现中文乱码的情况

    1 首先下载安装包 2安装依赖文件apt-get install libxfont1 xfonts-encodings xfonts-utils xfonts-base xfonts-75dpi su ...

  8. python 装饰器函数基础知识

    1.装饰器的本质--一个闭包函数 2.装饰器的功能--在不改变原函数及其调用方式情况下对原函数功能进行拓展 3.带参数和返回值的装饰器 def timer(func): @wraps(func) #使 ...

  9. 发现程序美----while+for冒泡实现的

    思想记录: 每一轮回的冒泡都将产生一个最大值,其后每次循环次数都将少一次,因为每次都会确定一个最大值. private void method(){ int[] list = {10,7,8,4,7, ...

  10. elasticsearch 索引数据多了怎么办，如何调优，部署 ？

    解答:索引数据的规划,应在前期做好规划,正所谓"设计先行,编码在后", 这样才能有效的避免突如其来的数据激增导致集群处理能力不足引发的线上客户 检索或者其他业务受到影响. 如何调优 ...