CSS引入方式

MSL7141

于 2021-09-18 11:51:46 发布

阅读量141

点赞数

分类专栏：前端基础文章标签： css html html5

本文链接：https://blog.csdn.net/MSL7141/article/details/120360425

版权

前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS三种样式表（按书写位置）：

1.行内样式（行内式）

2.内部样式（嵌入式）

3.外部样式（链接式）

内部样式表

将所有的CSS代码嵌入到并全部放到一个style标签中，可放到HTML的任何地方

 <style>
        p {
            font-family:'Microsoft Yahei', Courier, monospace;
        }
        body {
            font-size:x-large;
        }
        div {
            font-weight: 400;
        }
       p {
           text-indent:10px;
       }

    </style>

行内样式表

在元素标签内的style属性中设置CSS样式

<div style="color: red; font-size:12px;">活力无限</div>

style是标签的属性，在双引号中间写法要符合CSS规范，可以控制当前的标签设置样式。

外部样式表

单独建立CSS文件，之后将文件引入到HTML页面中。

1.新建后缀名为.css的样式文本，该文本中不需要写<style></style>标签

2.在HTML页面中，使用<link>标签引入这个文件

语法：

<link rel="stylesheet" href="css文件的路径">

其中，

css文件

/* 在这个样式里面只有样式，没有style标签 */
div {
    background-color:rgb(17, 223, 223);
    width: 200px;
    height: 200px;

}
p {
    font-family:'Microsoft Yahei', Courier, monospace;
    text-indent:10px;
    color:brown;
}
body {
    font-size:x-large;
}

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="style.css">
</head>
<body>
    <p>当代年轻人的主要压力是物价飞涨，其次是同龄人压力</p>
    <div>加油啊，年轻人！ </div>
</body>
</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>The weather forecast</title>
    <style>
        .gray {
            color:rgb(102, 100, 100);
            font:12px;
            text-align: center;

        }
        .search {
            color:#666;
            width: 170px;


        }
        .btn {
            font-weight:700;
        }
        .center {
            text-align: center;

        }
        </style>
        <link rel="stylesheet" href="../CssProject/style.css">
</head>
<body>
    <h1> 广东中北部及东部高温出没 珠三角等地有分散性雷雨</h1>
    <div class="gray">10021-9-18 10:25:20 来源：<a href="#">来源中国天气网 </a>
        <input type="text" value="请输入查询条件" class="search"><button class="btn">搜索</button> 
        </div>
        <hr>
        <!-- <hr>实线标签 -->
        <p>
            今天（9月18日），广东中北部及东部地区仍有高温出没，暑热难消，当地小伙伴需注意及时补水，谨防中暑。此外，在粤西、珠三角等地有分散性雷阵雨，出行需带好雨具，注意防雷防风。</p>


<p>昨天，广东中北部和粤东多地遭遇高温侵袭，其中兴宁、梅县的最高气温都在37℃或以上。被雷雨光顾的地方则凉爽许多，像是雷州半岛和粤东沿海，昨天最高气温普遍在32℃左右。


广东省气象台预计，今天，粤西、珠江三角洲和粤东沿海市县多云，有分散（雷）阵雨，其余市县晴到多云，局部有（雷）阵雨。最高气温：中北部市县34℃～36℃，其余市县30℃～34℃。</p>
<p class="center">
    <img src="../CssProject/raining.jpg"  >
</p>
<p>

城市中，广州今天白天多云间晴，局部有雷阵雨,夜间多云间晴，局部有雷阵雨；气温介于25℃～34℃之间,相对湿度介于50%～95%之间,吹轻微的偏东风。

深圳今天多云，有短时（雷）阵雨，气温27℃～33℃，东南风2～3级，相对湿度55%～95%。</p>

<p>气象专家提醒，广东今天仍有分散性雷雨天气，需注意防御局地雷电、短时强降水的不利影响。此外，广东中北部地区和粤东天气仍较炎热，小伙伴们注意防暑防晒。</p>
<p class="gray">本文来源：中国天气网</p>
</body>
</html>

/* 在这个样式里面只有样式，没有style标签 */

body {
    font-size:x-large;
    font: 28px;
    font-family:'Microsoft Yahei'
}
h1 {
    /* 文字不加粗 */
    font-weight: 400;
    /* 文字水平居中对齐 */
    text-align: center;
}
a {
    text-decoration:none;
}

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

}