运行效果:

源代码:

 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. (转载)字符编码那点事:快速理解ASCII、Unicode、GBK和UTF-8

  2. python实现解析markdown文档中的图片,并且保存到本地~

    背景 前阵子简书好像说是凉了,搞得我有点小慌,毕竟我的大部分博客都是放在简书上面的,虽然简书提供了打包导出功能,但是只能导出文字,图片的话还是存在简书服务器上面,再加上我一直想要重新做一个个人博客,于 ...

  3. 前端面试题(js)

    js 基础面试题 css 面试题 js 面试题 JavaScript 有几种类型的值?,你能画一下他们的内存图吗 原始数据类型(Undefined,Null,Boolean,Number.String ...

  4. rsync同步文件到远程机器,卡住10多秒--问题解决过程

    背景 以前大体介绍过,我们这边是做运维平台的.如果要形象化理解,那么,比如jenkins这种喜闻乐见的软件大致了解吧,jenkins就经常需要同步文件/版本包到远程机器上,jenkins怎么实现的,没 ...

  5. Linux详解 --- 进程管理

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 进程管理一览 接下来的几篇博客,我将主要按照这个思维导图的划分去进行讲解. 管理 在理解什么是进程管理之前,我想我们可以先理解一下什么是管理! 问 ...

  6. react中使用截图组件Cropper组件

    --最近项目用react,学习react并使用cropper组件裁剪图片. (这里开发组件不够统一有用tsx(TypeScript + xml/html)写的组件,有用jsx(javascript+x ...

  7. APACHE ACTIVEMQ安装

    APACHE ACTIVEMQ安装 一.特点 支持各种语言和协议的客户端.如:Java.C.C++.C#.Ruby.Perl.Python及Php. 完全支持JMS的客户端及其他消息代理 完全支持JM ...

  8. Windows10运行Cura源代码,搭建环境教程

    参考官方文档 https://github.com/Ultimaker/Cura/wiki/Running-Cura-from-Source-on-Windows#python-3810 注意 这些说 ...

  9. 知识点简单总结——BSGS与EXBSGS

    知识点简单总结--BSGS与EXBSGS BSGS 给出 $ A,B,C,(A,C)=1 $ ,要你求最小的 $ x $ ,使得 $ A^x \equiv B(mod \ C) $ . 在数论题中经常 ...

  10. 【推理引擎】ONNX 模型解析

    定义模型结构 首先使用 PyTorch 定义一个简单的网络模型: class ConvBnReluBlock(nn.Module): def __init__(self) -> None: su ...