从前端小白到大佬第九天

最新推荐文章于 2024-09-16 23:39:36 发布

一只琳娜

最新推荐文章于 2024-09-16 23:39:36 发布

阅读量182

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/my_prince/article/details/107821217

版权

CSS上

1.css简介
2.css语言规范
3.css代码风格
4.css基础选择器
5.css字体属性
6.css文本属性
7.css样式
①内部样式
②行内样式
③外部样式
8.综合案例-新闻页面
9.Chrome调试工具

7.css样式
①内部样式
写在html页面内部，将所有的css代码抽出来，单独放到<style>中，就像是我们前面一直书写的那些。<style>标签理论上可以放在html文档的任何地方，但一般约定放在<head>中。方便控制整个页面中的元素样式设置，代码结构清晰，但并没有实现结构与样式完全分离。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网站</title>
    <style>
        li {
            /*font:font-style font-weight font-size/line-height font-family*/
            font: italic 700 16px '宋体';
        }
        
        h4 {
            font-family: '微软雅黑', serif;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h4>5.css字体属性 css fonts</h4>
    <ol>
        <li>各种字体之间必须使用英文状态下的逗号隔开</li>
        <li>一般情况下，如果有空格隔开的多个单词组成的字体，要加引号</li>
        <li>尽量使用系统默认自带字体，保证兼容</li>
        <li>书写多个字体时，以第一个字体为最高优先级标准，如果系统里面没有这个字体，则以第二字体为优先，以此类推</li>
        <li>字体设计可写在body标签内</li>
    </ol>
</body>

</html>

②行内样式
在元素标签内部的style属性中设定css样式。适合于修改简单的样式，只可以控制当前的标签设置样式，给谁写就控制了谁，没有实现结构与样式完全分离。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网站</title>
</head>

<body>
    <h4>5.css字体属性 css fonts</h4>
    <ol>
        <li style="font-family: '微软雅黑';font-size: 50px;">书写多个字体时，以第一个字体为最高优先级标准，如果系统里面没有这个字体，则以第二字体为优先，以此类推</li>

        <li style="color: brown;">字体设计可写在body标签内</li>
    </ol>
</body>

</html>

③外部样式
实际开发使用的都是链接式，适用于样式比较多的情况，核心是将样式单独写到css文件中，之后把css文件引入到html也弥漫中使用。
新建一个后缀名为.css的文件，把所有css代码都放在此文件中，再再HTML页面中使用link标签引入css文件。

<link rel="stylesheet" href="style.css">

在这里插入图片描述
01.html：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网站</title>
    <link rel="stylesheet" href="01style.css">
</head>

<body>
    <h4>5.css字体属性 css fonts</h4>
    <ol>
        <li>各种字体之间必须使用英文状态下的逗号隔开</li>
        <li>一般情况下，如果有空格隔开的多个单词组成的字体，要加引号</li>
        <li>尽量使用系统默认自带字体，保证兼容</li>
        <li>书写多个字体时，以第一个字体为最高优先级标准，如果系统里面没有这个字体，则以第二字体为优先，以此类推</li>
        <li>字体设计可写在body标签内</li>
    </ol>
</body>

</html>

01style.css：

li {
    /*font:font-style font-weight font-size/line-height font-family*/
    font: 700 16px '宋体';
}

body {
    color: sandybrown;
}

h4 {
    font-family: '微软雅黑', serif;
    font-size: 20px;
}

效果：
在这里插入图片描述
8.综合案例-新闻页面

新闻页面.css

body {
    /* 全局字体大小，行间距 */
    font: 16px/28px '微软雅黑';
}

h1 {
    /* 标题另外设置：行高，居中，不加粗 */
    line-height: 40px;
    text-align: center;
    font-weight: 400;
}

div {
    /* 盒子内设置字体灰色，字体大小，居中 */
    color: gray;
    font-size: 12px;
    text-align: center;
}

.xiahuaxian {
    /* 链接不要下划线 */
    text-decoration: none;
}

.sousuo {
    /* 搜索框内的文字设置为灰色，设置搜索框的宽度 */
    color: gray;
    width: 170px;
}

.anniu {
    /* 按钮的搜索加粗 */
    font-weight: 700;
}

p {
    /* 首行缩进 */
    text-indent: 2em;
}

.juzhong {
    /* 图片居中对齐，注意，直接给img标签加center是无效的 */
    text-align: center;
}

.dibu {
    /* 底部注释灰色，字体变小 */
    color: gray;
    font-size: 12px;
}

新闻页面.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻页面</title>
    <link rel="stylesheet" href="新闻页面.css">
</head>

<body>
    <h1>华北东北黄淮及西南地区多降雨<br> 华南江南等地有高温天气</h1>
    <div>2019-07-03 16:31:47 来源：
        <a href="#" class="xiahuaxian">中国天气网 </a>
        <input type="text" value="请输入查询条件" class="sousuo">
        <button class="anniu">搜索</button>
    </div>
    <!-- 横线 -->
    <hr>
    <p>
        昨日，强降雨主要集中在四川盆地中北部，出现暴雨或大暴雨，四川遂宁和内江、重庆合川局地降雨量200～242毫米（最大小时降雨量50～120毫米）；河南东南部、安徽西北部、湖北中西部、湖南东部和南部、江西南部、广西东部、云南东部等地出现分散性大雨或暴雨，安徽亳州、湖南长沙等局地大暴雨（100～133毫米，最大小时降雨量50～95毫米）；内蒙古中东部、黑龙江中西部、吉林中东部、陕西中南部、山西北部、河北北部、山东南部及新疆沿天山一带的部分地区出现中到大雨，山西大同、河北张家口局地暴雨（50～87毫米）。
    </p>
    <p>未来三天，华北、东北地区、黄淮等地多阵雨或雷阵雨，降水量分布不均，局地有大雨或暴雨，并伴有短时强降水、雷暴大风或冰雹等强对流天气；四川、云南、西藏等地多降雨，四川盆地中部和西部局地有暴雨或大暴雨。
    </p>
    <p>
        未来三天，华南西部和北部、江南大部、江淮、江汉等地将先后出现35℃以上的高温天气，部分地区最高温度可达37～39℃。2日开始，华南高温天气自南向北缓解。
    </p>
    <p>
        受热带扰动影响，未来三天，广东南部、广西南部、海南岛等地的部分地区将有大雨或暴雨，局地大暴雨
    </p>
    <h4>未来三天具体预报 </h4>
    <p>7月31日08时至8月1日08时，东北地区北部、华北北部、黄淮、江淮北部以及河南东南部、湖北东南部、湖南西部、四中部和南部、广东南部沿海、海南、新疆西南部和青藏高原东南部等地的部分地区有中到大雨，其中，山东中东部、江苏北部、四川盆地中部、广东南部沿海等地部分地区有暴雨（50～80毫米）。内蒙古中部和西北部、新疆南疆盆地、江苏南部、浙江南部等地部分地区有4～6级及以上风。南海北部、琼州海峡将有6～7级、阵风8～9级大风，南海中部和南部将有6～7级、阵风8～9级大风，部分海域风力可达8级，阵风9～10级。
    </p>
    <p class="juzhong">
        <img src="imgs/1.jpg" alt="">
    </p>

    <p>
        8月1日08时至2日08时，东北地区北部、华北中部和西部、黄淮、广东南部、广西南部、海南、四川中部和北部、云南西部和北部、甘肃东南部、陕西西南部、西藏东南部等地部分地区有中到大雨，其中，广东南部沿海和中南部等地部分地区有暴雨或大暴雨（100～150毫米）。内蒙古中部、辽东半岛、浙江北部和南部、福建东南部、广西东南部沿海等地部分地区有4～6级及以上风。南海北部将有6～7级、阵风8～9级大风，南海中部和南部将有6～7级、阵风8～9级大风，部分海域风力可达8级，阵风9～10级。
    </p>
    <p class="juzhong">
        <img src="imgs/2.jpg" alt="">
    </p>

    <P>
        8月2日08时至3日08时，内蒙古东北部、东北地区西部和东南部、华北东北部和南部、黄淮、华南南部沿海以及四川盆地西南部、新疆西部和西藏东南部等地部分地区有中到大雨，其中，内蒙古东北部、黑龙江西部、吉林西北部、四川盆地西南部、广西南部、广东西南部等地部分地区有暴雨或大暴雨（100～130毫米）。北部湾、南海西北部将有6～7级、阵风8级大风，南海东北部、南海中部和西南部将有6～7级、阵风8级大风，其中北部湾北部、南海部分海域风力可达8级，阵风9～10级。
    </P>
    <p class="juzhong">
        <img src="imgs/1.jpg" alt="">
    </p>

    <p class="dibu">本文来源：中国天气网 责任编辑：XX_NO123</p>

</body>

</html>

效果：
在这里插入图片描述
9.Chrome调试工具
①打开调试工具方法
-快捷键f12
-右键->检查