【XHTML&CSS读书笔记】大小写、行高、粗体和斜体

最新推荐文章于 2024-06-15 19:58:23 发布

calf_man

最新推荐文章于 2024-06-15 19:58:23 发布

阅读量504

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/calf_man/article/details/8509600

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

读《HTML之路》第1、2章笔记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Case, line-height, bold and italics</title>
    <style type="text/css" media="all">
    
    body {
        /*
        font属性的快捷写法：这个属性的值是：
        font-style,font-variant,font-weight,font-size,line-height和font-family的组合，
        只有font-size和font-family是必须的  
        */
        font: 150% arial, helvetica, sans-serif;
    }

    /*
    id选择符用于唯一地标识文档某部分内容，在HTML文档中，同一个id只能使用一次
    这里的#p3是id选择符，通过id将样式绑定到相应的对象上
    */ 
    #p3 {
        font-variant: small-caps; /*将小写字母转为小个的大写字母*/
    }
    
    #p4 {
        text-transform: uppercase;/*将小写字母转为大个的大写字母*/
    }

    /*
    class选择符用于标识文档某部分内容，在HTML文档中，同一个class名可以被使用无数次
    这里的.p5是class选择符，通过class名将样式绑定到相应的对象上
    */
    .p5 {
        line-height: 5.5;
        color: blue;
        font-weight: bold; 
    }

    /*
    在这里em是HTML选择符，指定一个css规则应用到某个对象上
    */
    em { 
        font-style: italic; /* generally unnecessary because the default style of em tends to be italic */
    }
    
    strong {
        font-weight: bold; /* again unnecessary - the default style of strong tends to be bold */
    }
    
    </style>
</head>

<body>

<p id="p3">The <strong>green</strong> seed of the white-flowering climbing leguminous papilionaceous plant, <em>pisum sativum</em>, has become a dining-table favourite for good reason.</p>

<p id="p4">The <strong>perfect</strong> accompaniment to any meal, the diminutive spherical vegetable brings joy to billions worldwide, be they fresh, frozen, canned or dried.</p>

<p class="p5">This a wonderful day!</p>

</body>
</html>

运行结果：