004.前端开发知识，前端基础CSS（2020-01-09）

一、CSS字体样式属性

1.font-size:字号大小

2.font-family:字体

　　font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。

    * {
        /*font-family: "微软雅黑";*/
        font-family: "microsoft yahei",  Arial;
        /*font-family: Arial;*/
    }
    p {
        font-size: 16px;  /*千万别忘了带px 单位*/
        line-height: 28px;  /*  行高  行与行之间的距离*/  
        text-indent: 2em;  /*段落首行缩进2个字  em  也是一个单位  1em 就是一个字的距离 */
    }

1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

3.CSS Unicode字体

4.font-weight:字体粗细

5.font-style:字体风格

    a {
        /*font-weight: bold;    字体加粗*/
        font-weight: 700;  /*   字体加粗   700 == bold  */  
    }
    h1 {
        /*font-weight: normal;  让粗体不加粗*/
        font-weight: 400;     /*让粗体不加粗400 == normal 建议用数值*/
        text-align: center; /*让h1 里面的文字水平居中*/
    }
    span {
        /*color: #ff0000;*/
        color: #FDD000;
    }
    div {
        text-align: center;
    }
    .nub {
        color: #f00;
        font-weight: 400;  /*不加粗*/
    }

6.em标签

    em {
        color: skyblue;
        font-style: normal;  /*让斜体不倾斜*/
    }

　　7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛

7.font:综合设置字体样式

字体连写是有顺序的。其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

    /*选择器{font: font-style  font-weight  font-size/line-height  font-family;}*/
    h1 {
        /*font: 400 25px "宋体";*/
        font: 12px "微软雅黑";
    }

二、CSS外观属性

1.color:文本颜色

2.line-height:行间距

3.text-align:水平对齐方式

4.text-indent:首行缩进

综合案例:

<!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>

5.text-decoration 文本的装饰

text-decoration : none || underline || blink || overline || line-through

　　　　　　　无装饰下划线闪烁上划线删除线

    div {
         font-size: 40px;
          /*text-decoration: none;           取消装饰*/
          /*text-decoration: underline;      下划线*/
          /*text-decoration: line-through;    删除线*/
          font-style: italic;                /*设置倾斜*/
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>    s {
        text-decoration: none; /* 取消删除线*/
    }
     em {
         font-style: normal;   /*取消倾斜*/
     }
     strong {
         font-weight: 400;     /*取消加粗*/ 
     }
     ins {
         text-decoration: none;/*取消下划线*/
     }
    </style>
</head>
<body>
    <div>装饰自己</div>
    <s>现价： 188</s>
    <em>倾斜</em>  <i>倾斜</i>
    <strong>加粗</strong> b
    u  <ins>下划线</ins>
    s  del
</body>
</html>

posted on 2020-01-09 13:31 闪亮的金子阅读(205) 评论(0) 编辑收藏举报