css 字体样式的使用(自学中)

字体大小

  • font-size 属于设置字体大小 属性值有相对长度单位、绝对长度单位 相对长度单位比较常用 一般推荐使用
    见下表:
    image.png
    一般常用px进行表示字体的大小,另外也有百分比的使用方式
    image.png
    image.png

    大家只要记住最常用的方式即可 记得一定要带单位px或em

字体

font-family 常用字体有宋体 微软雅黑....记得带上双引号
例如: font-family: "宋体";

字体粗细

font-weight 用于定义字体的粗细 属性值有:normal、bold、bolder、lighter;也可以用数字代替100-900(100的整数倍)
数字 400 等价于 normal,而 700 等价于 bold

字体风格

font-style 属性用于定义字体风格,像设置斜体、倾斜或正常字体,属性值如下:
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。(倾斜字体使用比较少)

Font综合

如果一个元素标签设置多个font的属性 会使得代码冗余,不方便阅读,我们也可以使用连写
具体语法顺序如下:
选择器{font: font-style font-wei**ght font-size/line-height font-family;}

注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

下边是一个小例子:
image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        /*font-family: "微软雅黑";*/
        font-family: "microsoft yahei",  Arial;
        /*font-family: Arial;*/
    }
    p {
        font-size: 16px;  /*千万别忘了带px 单位*/
        line-height: 28px;  /*  行高  行与行之间的距离*/  
        text-indent: 2em;  /*段落首行缩进2个字  em  也是一个单位  1em 就是一个字的距离 */
    }
    a {
        /*font-weight: bold;    字体加粗*/
        font-weight: 700;  /* 700 没有单位  ==  bold  */  
    }
    h1 {
        /*font-weight: normal;  让粗体不加粗思密达*/
        font-weight: 400;  /*让粗体不加粗思密达  400 == normal 建议用数值*/
        text-align: center; /*让h1 里面的文字水平居中*/
    }
    em {
        color: skyblue;
        font-style: normal;  /*让斜体不倾斜*/
    }
    span {
        /*color: #ff0000;*/
        color: #FDD000;
    }
    div {
        text-align: center;
    }
    .nub {
        color: #f00;
        font-weight: 400;  /*不加粗*/
    }
    </style>
</head>
<body>
    <h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>

<div>2017年07月16日20:11 <span>新浪体育 评论中大奖</span> (<a href="#" class="nub">11</a>人参与) <a href="#">收藏本文</a></div>
<hr />
<p>新浪体育讯 7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛,丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午,丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈,并且收拾行囊准备离开。在这样的情况下,丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
<p>
在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会,当时俱乐部给出的解释是李虎由于身体欠佳,去医院接受治疗。然而今日李虎出现在俱乐部时,向记者否认了这一说法,并且坦言已经向俱乐部提出了辞呈。</p>

<p>据记者多方了解的情况,李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力,在联赛间歇期期间,教练组曾向俱乐部提出能够多引进有实力的球员补强球队,然而由于和俱乐部在投入以及成绩指标上的分歧,李虎最终和教练组一起在比赛日辞职。</p>

<p>这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员,在比赛中丽江队在主场拼的非常凶,在暴雨之中仍然发挥出了体能充沛的优势,最终凭借点球击败了中超球队哈尔滨毅腾,顺利晋级下一轮比赛。根据中国足协杯的赛程,丽江嘉云昊队将在本月23日迎战江苏舜天队。</p>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章