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

　　　　　　　　　　　　　　　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>
二.浏览器打开以上代码渲染结果