css字体属性,字符实体和符号

149 阅读1分钟

css字体属性

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 外部引入谷歌字体 :https://googlefonts.cn/?selection.family=Roboto -->
    <link href="https://fonts.googlefonts.cn/css?family=Roboto" rel="stylesheet">
    <title>css字体属性</title>
    <style>
        body {
            /* 默认字体 */
            font-family: Arial, Helvetica, sans-serif;
            /* 字体大小 */
            font-size: 20px;
            /* 行高 */
            line-height: 1.6em;

        }

        /* 嵌套选择器 */
        #welcome p span {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="welcome">
        <h2 class="green-heading">欢迎来到我的博客</h2>
        <p>Lorem ipsum <span>dolor sit amet</span> consectetur adipisicing elit. Neque repellendus sequi minima aliquam
            blanditiis,
            inventore <span>cum sint doloremque</span> possimus ducimus error reiciendis eligendi natus facere amet non
            voluptate
            tempora
            tenetur.</p>
    </div>
    <div>
        <h2 id="about">关于我们</h2>
        <p>Lorem ipsum <span>dolor sit amet</span> consectetur adipisicing elit. Modi, suscipit.</p>
    </div>
</body>

字符实体和符号

  <!-- 连续空格(不间断空格) -->
    <p>Lorem, ipsum dolor sit amet consectetur&nbsp; &nbsp;&nbsp;&nbsp;adipisicing elit. Maiores, quasi.</p>
    <!-- 大于小于符号 -->
    <!-- 大于符号 &lt; -->
    <p>3 &gt; 2</p>
    <!-- 对应的大于符号数字62 -->
    <p>3 &#62; 2</p>
    <!-- 小于符号 &lt; -->
    <!-- 对应的小于符号60 -->
    <p>1 &lt; 2</p>
    <p>1 &#60; 2</p>

    <!-- 版权和注册商标 -->
    <!-- 版权字符 &copy; -->
    <p>&copy;</p>
    <!-- 注册商标 &reg; -->
    <p>&reg;</p>

    <!-- 货币字符 -->
    <p>&cent;</p>
    <p>&pound;</p>
    <p>&euro;</p>

    <!-- 扑克 -->
    <p>&spades;</p>
    <p>&clubs;</p>
    <p>&hearts;</p>
    <p>&diams;</p>

    <!-- 计算机代码 -->
    <code>&lt;?php echo 'Hllo world' ?&gt;</code>
    <P>保存文件可以按住键盘中的<kbd>Ctrl+s</kbd></P>