（5）css样式导入

样式的组成

1、选择器：将样式与页面中的某一个或某些标签建立联系，就要使用选择器，在head标签下写一个style标签，将需控制参数的标签名写在这个style标签下，设置属性即可通过css来控制html的样式，这就是选择器

2、作用域：作用域就是style标签下需要控制的标签名后面的{}，这个{}内的参数就是作用域参数

3、样式块：作用域里面的参数语句就是样式语句，这个作用域就是样式块

css的引入方式

1、行间式样式导入，直接将css样式写在标签的style属性中

优点：对样式操作简单粗暴

缺点：可读性差，如果区域标签有很多条，那么也要写很多条，随着页面增大标签越来越多越来越复杂，复用性差

PS：只想修改单独的标签，使用这个比较方便

2、内联式，将css样式书写在style标签中,style标签写在head标签中

优点：可读性强，复用性强

缺点：延展性差（不适合团队开发，只有写的人看得懂）

PS:单文件使用，比较方便

3、外联式，在head里面写一个链接标签做导入即可

优点：延展性强（适合团队开发），复用性强，可读性强

缺点：必须要多文件

PS:团队开发时候使用外联式，因为很多文件都要引用

样式实例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>样式引入</title>
    <!--这个是外联式需要导入的写法，用link标签在href里面用相对路径导入外联css样式文件-->
    <link rel="stylesheet" href="./css/index.css">

    <style>
        /*这属于css语言，采用css语法，所以备注的方式和html不一样，采用这条的格式*/
        /*将样式与页面中的某一个或某些标签建立联系，只要使用选择器，将需要的标签写在这个style标签下，设置属性即可，这就是选择器*/
        /*作用域就是h1后面的{}，这个{}内的参数就是作用域参数*/
        /*作用域里面的参数语句就是样式语句，这个作用域就是样式块*/
        h1{
            width: 150px;
            height: 150px;
            background-color: hotpink;
        }
    </style>

</head>
<!--行间式样式导入，直接将css样式写在标签的style属性中-->
<!--优点：对样式操作简单粗暴，缺点：可读性差，如果区域标签有很多条，那么也要写很多条，随着页面增大标签越来越多越来越复杂，复用性差-->
<body style="background-color:black">
    <!--上面的style是设置整个页面的背景色，下面的div里面的style是设置区域的背景色包括区域的大小-->
    <div style="background-color: white; width:200px; height:200px;" >这是一个区域</div>
    <div style="background-color: darkslategrey; width: 200px; height: 200px;">这是一个区域</div>


    <!--内联式，将css样式书写在style标签中,style标签写在head标签中-->
    <!--优点：可读性强，复用性强，缺点：延展性差（不适合团队开发，只有写的人看得懂）-->
    <h1>这里是内联式区域</h1>
    <h1>这里是内联式区域</h1>

    <!--外联式，在head里面写一个链接标签做导入即可-->
    <!--优点：延展性强（适合团队开发），复用性强，可读性强 缺点：必须要多文件-->
    <p>这里是外联式区域</p>
    <p>这里是外联式区域</p>
</body>
</html>

猜你喜欢