03_CSS字符属性

最新推荐文章于 2024-07-31 14:38:53 发布

The Biggest

最新推荐文章于 2024-07-31 14:38:53 发布

阅读量313

点赞数

分类专栏：前端学习文章标签： css html css3

本文链接：https://blog.csdn.net/java_996/article/details/121137600

版权

前端学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS字符属性：

在字符属性中初步有以下四个属性

font-family：设置字符字体
font-size：设置字符大小
font-weight：设置字符粗细
font-style：设置字符分格

font-family属性

使用font-family：" "; 定义字体类型，可以给body标签设置来改变整个页面的文字字体

各种字体使用英文状态下的逗号隔开，浏览器会依次渲染，直到设置字体是系统有安装时，用当前字体显示，如果设置的字体电脑系统都没有安装则使用浏览器默认字体渲染显示

一种字体名称由多个单词组成时，使用引号引起来，中文也需要引起来（单引号）

例如：font-famliy: ‘Mircosoft yahei’,‘微软雅黑’,‘Times New Roman’, Times, serif;

一般使用英文，兼容性好

尽量使用系统自带字体，保证全部用户可以正确显示

标题标签比较特殊，自带大小和加黑加粗

font-size属性

使用 font-size: 16px; 定义字体大小，可以给body标签设置整个页面的文字大小

单位是像素PX，谷歌默认16px,我们尽量给一个明确的值，不要默认，在各个浏览器都可以显示

标题标签比较特殊，需要单独设置字体大小

font-weight属性

通过font-weight: ;设置字体粗细；

值：

normal: 正常,可以让加粗的字体变成正常，比如标题标签或者strong标签

bold：粗的如果文本比较重要，使用strong标签更合适，显得更重要

bolder：特粗体，效果不是很明显，一般使用strong标签

lighter:细体，效果不是很明显，使用较少

number：数字，实际开发中用的更多,这里的数字后面没有单位，不跟PX.700为bold，400为normal

font-style属性：

通过font-style: ; 设置文本字符风格

值：

normal：默认值，标准的字体样式,将倾斜的字体变得不倾斜

italic：斜体

em标签也可以让文本变成斜体

<!DOCTYPE html>
<html lang="en">
<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">
    <title>字符属性</title>
     <style>
          h2 {
             /* 标题标签本来就会加黑加粗加大，带有样式 */
             font-family: '微软雅黑';
             font-size: 16px;
             font-weight: 400;
         }

         body {
            font-family:'微软雅黑', Georgia, 'Times New Roman', Times, serif; 
            font-size: 16px;
         }

         .bold {
             font-weight: bold;
         }
         .bolder {
             font-weight: bolder;
         }
         .number{
             font-weight: 700;
         }

         #p {
             font-style: normal;
             font-weight: 700;
         }
         
         p {
             font-style: italic;
         }
         .normal {
            font-style: normal;
         }
         
     </style>
</head>
<body>
    <h2>回首叫、云飞风起。不恨古人吾不见，恨古人不见吾狂耳。</h2>
    <p class="bold">待到秋来九月八，我花开后百花杀。冲天香阵透长安，满城尽带黄金甲。</p>
    <strong><p>我是清都山水郎，天教分付与疏狂。诗万首，酒千觞，几曾着眼看侯王？</p></strong>
    <p class="bolder">我是清都山水郎，天教分付与疏狂。诗万首，酒千觞，几曾着眼看侯王？</p>
    <p class="lighter">兴酣落笔摇五岳，诗成笑傲凌沧洲。功名富贵若长在，汉水亦应西北流。</p>
    <p class="number">飒飒西风满院栽，蕊寒香冷蝶难来。他年我若为青帝，报与桃花一处开。</p>
    <!-- 当两个选择器指向同一个标签时，id选择器优先特有 -->
    <p id="p">我最怜君中宵舞，道“男儿到死心如铁”，看试手，补天裂。</p>
    <p>老夫聊发少年狂，左牵黄，右擎苍，锦帽貂裘，千骑卷平冈。会挽雕弓如满月，西北望，射天狼。</p>
    <p>大鹏一日同风起，扶摇直上九万里。宣父犹能畏后生，丈夫未可轻年少。</p>
    <em>我是斜体</em>
    <hr>
   <em class="normal">我是斜体，但是我不是斜的</em>
</body>
</html>