• 有问题请联系QQ:2374146085
  • 有问题请联系QQ:2374146085

css引入方式

1年前 (2021-07-31) 1022次浏览 已收录 0个评论

css样式表可以分为三大类。

  • 行内样式表(行内式)
  • 内部样式表(嵌入式)
  • 外部样式表(链接式)

内部样式表

定义:将所有css代码单独放在style标签中。

<!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>
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <div>内部样式表</div>
</body>
</html>
结果演示

行内样式表

<div style="color: red;">内部样式表</div>
</body>

外部样式表(重点)

css文件

/*只有样式,没有标签*/
div{
    color: red;
}

html代码

<!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>
    <link rel="stylesheet" href="s.css">
</head>
<body>
    <div>我是外部样式表</div>
</body>
</html>
结果演示

新闻页面综合案例

css代码

.juzhong{
    text-align: center;
}
.riqicolor{
    color: rgba(100, 82, 82, 0.89);
}
.riqiziti{
    font-size: 13px;
}
.shanchuxian{
    text-decoration: none;
}
body{
    line-height: 30px;
}
h1{
    font-weight: normal;
}
p{
    text-indent: 2em;
}

html代码

<!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>
    <link rel="stylesheet" href="NewsStyle.css">
</head>
<body>
    <h1 class="juzhong">北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
    <div class="riqicolor riqiziti juzhong">
        2019-07-03 16:31:47 来源:
        <a class="shanchuxian" target="_blank" href="https://www.wangxuelong.vip">
            中国天气网
        </a>
        &nbsp;
        <input class="riqicolor" type="text" name="sousuo" value="请输入查询条件...">
        <button>搜索</button>
    </div>
    <hr>
    <div>
        <p>
            中国天气网讯 今天(3日),华北、黄淮多地出现高温天气,截至下午2点,北京、天津、郑州等地气温突破35℃。预报显示,今后三天(3-5日),这一带的高温天气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃,其中北京和石家庄的最高气温还有望创今年以来的新高。 
        </p>
        <h4>气温41.4℃!地温66.5!北京强势迎七月首个高温日</h4> 
    </div>
    <div class="juzhong" >
        <img src="images/pic.jpeg">
    </div>
    <div>
        <p>
            今天,华北、黄淮一带的高温持续发酵,截至今天下午2点,陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中,北京、天津、郑州均迎来高温日。
        </p>
        <p>
            在阳光暴晒下,地表温度也逐渐走高。今天下午2点,华北黄淮大部地区的地表温度都在50℃以上,部分地区地表温度甚至超过60℃。其中,河北衡水地表温度高达68.3℃,天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
        </p>
        <h4>
            明日热度再升级!京津冀携手冲击38℃+
        </h4>
        <p>
            中国天气网气象分析师王伟跃介绍,明天(4日),华北、黄淮地区35℃以上的高温天气还将继续升级,并进入鼎盛阶段,高温强度和范围都将发展到最强。 明天,北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。 
        </p>
        <p>
            不过,专家提醒,济南被雨水天气完美绕开,因此未来一周,当地的高温还会天天上岗。在此提醒当地居民注意防暑降温,防范持续高温带来的各种不利影响。(文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)
        </p>
        <p class="riqicolor riqiziti">
            本文来源:中国天气网 责任编辑:王先生_NO5631 
        </p>
    </div>
</body>
</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:css引入方式
喜欢 (2)

您必须 登录 才能发表评论!