HTML&CSS基础-字体的其它样式

                                          作者:尹正杰

版权声明:原创作品,谢绝转载!否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体的其它样式</title> <style type="text/css">
.hello{
/**
* 设置字体颜色,使用color来设置文字的颜色
*/
color: red;
/**
* 设置文字的大小,浏览器中一般默认的文字大小都是16px
*/
font-size: 30px;
/**
* 通过font-family可以指定文字的字体
*/
font-family: arial,"华文彩云","微软雅黑",serif;
/**
* font-style可以用来设置文字的斜体,有以下可选值:
* normal:
* 默认值,文字正常显示
* italic:
* 文字会以斜体显示
* oblique:
* 文字会以倾斜的效果显示
*
* 大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique它们的效果往往是一样的,一般我们只会使用italic
*
*/
font-style: oblique; /**
* font-weight可以用来设置文本的加粗效果,有以下可选值:
* normal:
* 默认值,文字正常显示
* bold:
* 文字加粗显示
*
* 该样式也可以看指定100-900之间的9个值,但是由于用户计算机往往没有这么多级别的字体,所以达到为我们想要的效果也就是200有可能比100粗,300有可能比200粗,但是也可能是一样的。
*/
font-weight: bold; /**
* font-variant可以用来设置小型大写字母,可选值:
* normal:
* 默认值,文字正常显示
* small-caps:
* 文本以小型大写字母显示
*
* 小型大写字母:
* 所有的字母都以大写形式显示,但是小写字母的大写要比大写字母的大写要小一些。
*
*/
font-variant: small-caps;
} .world{
/**
* 设置文字的大小,浏览器中一般默认的文字大小都是16px
*/
font-size: 50px;
/**
* 通过font-family可以指定文字的字体
*/
font-family:"华文彩云",serif;
/**
* 设置文字的斜体
*/
font-style: italic;
/**
* 设置文字的加粗
*/
font-weight: bold;
/**
* 设置一个小型大写字母
*/
font-variant: small-caps;
} .python{
/**
* 在CSS中还为我们提供了一个样式叫font,使用该样式可以同时设置字体相关的样式
* 可以将字体样式的值,统一写在font样式中,不同的值之间使用空格隔开
*
* 使用font设置字体样式时,斜体,加粗,小型大写字母,没有顺序要求,甚至可以不写。
* 如果不写则使用默认值,但是要求文字的大小和字体必须写,而且字体必须是最后一个样式,小型大写字母不写则已,若写则必须是倒数第二个样式
*
* 实际上使用简写属性也会有一个比较好的性能,因为使用font-size,font-family,font-style,font-weight,font-variant设置时需要解析5次,而font则需要解析一次即可。
*/
font: italic small-caps bold 70px "微软雅黑";
}
</style> </head>
<body> <p class="hello">我是p标签,ABCDEFGabcdefg</p> <p class="world">我是p标签,ABCDEFGabcdefg</p> <p class="python">我是p标签,ABCDEFGabcdefg</p>
</body>
</html>

二.浏览器打开以上代码渲染结果

strace常用参数详解的更多相关文章

  1. chattr的常用参数详解

    chattr的常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在实际生产环境中,有的运维工程师不得不和开发和测试打交道,在我们公司最常见的就是部署接口.每天每个人部署的 ...

  2. find常用参数详解

    find常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在linux系统中,在init 3模式情况下都是命令行模式,这个时候我们想要找到一个文件的就得依赖一个非常好用的 ...

  3. cat常用参数详解

    cat常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 最近,我的一个朋友对linux特别感兴趣,于是我觉得每天交给他一个命令的使用,这样一个月下来也会使用30个命令,基 ...

  4. rsync常用参数详解

    rsync常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在linux中,一切皆是文件,包括你的终端,硬件设备信息,目录,内核文件等等.所以工作中我们难免会遇到拷贝文件 ...

  5. Nginx核心配置文件常用参数详解

    Nginx核心配置文件常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 关于Nginx权威文档的话童鞋们可以参考Nginx官方文档介绍:http://nginx.org/ ...

  6. nmap常用参数详解

    nmap常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 借用英雄联盟的一个英雄赵信的一句话:“即使敌众我寡,末将亦能万军丛中取敌将首级!”.三国关羽,万军丛中斩了颜良, ...

  7. free命令常用参数详解

    free命令常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在运维期间我们会经常去查看服务器硬件信息,比如说内存,大家可能知道看内存用“[root@yinzhengji ...

  8. tcpdump常用参数详解

    tcpdump常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 好久没有更新我的博客了,看来自己最近还没有在放假中回过神来啊,哈哈~是不是也有小伙伴跟我一样呢?回归正题, ...

  9. DB2创建数据库常用参数详解

    转自http://czmmiao.iteye.com/blog/1335801 DB2创建数据库常用参数详解 本文只介绍DB2 create database语法中的常用参数http://publib ...

随机推荐

  1. nginx+tpmcat+redis实现session共享

    nginx+tpmcat+redis实现session共享 版本:nginx nginx-1.8.0.tar.gztomcat apache-tomcat-7.0.78.tar.gzredis  re ...

  2. java计算器项目

    简单的java计算器项目   题目:java计算器项目 一. 题目简介: 一个能进行加减乘除四则运算的小程序 Github链接:https://github.com/lizhenbin/test/tr ...

  3. HDU 2053 Switch Game

    http://acm.hdu.edu.cn/showproblem.php?pid=2053 Problem Description There are many lamps in a line. A ...

  4. Expanded encryption and decryption signature algorithm SM2 & SM3

    Expanded encryption and decryption signature algorithm supports multiple signature digest algorithms ...

  5. java mail session使用Properties的clone方法

    /* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreem ...

  6. C语言ODBC数据库操作

    今天我们来介绍一下C语言操作数据库的方法,这里我们使用的是ODBC方式.环境是WIN7+VC6.其他环境也差不多,具体情况具体分析. 首先是环境的配置以及数据源的添加.这里就不去解释了,相关资料网上有 ...

  7. 二叉搜索树(BST)

    (第一段日常扯蛋,大家不要看)这几天就要回家了,osgearth暂时也不想弄了,毕竟不是几天就能弄出来的,所以打算过完年回来再弄.这几天闲着也是闲着,就掏出了之前买的算法导论看了看,把二叉搜索树实现了 ...

  8. Mysql性能优化二:索引优化

    1 索引的类型 UNIQUE唯一索引 不可以出现相同的值,可以有NULL值. INDEX普通索引 允许出现相同的索引内容. PRIMARY KEY主键索引 不允许出现相同的值,且不能为NULL值,一个 ...

  9. 国产首款5G手机抢先亮相:如此给力的说!

    5G网络是接下来移动互联网发展的主旋律,各家都在努力跟进,目前最积极的当属手机厂商,而2019年我们就能看到多款5G手机降临了. 在11月27日的未来信息通信技术国际研讨会上,vivo展示了他们正在研 ...

  10. PHP 判断浏览器语言

    详情请参看代码 作用:判断当前的浏览器语言.接收传入参数.拼接字符串 <?php $lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'],0,2); if ...