CSS样式的引入方式内嵌方式样式行内样式外部样式表导入样式

卡夫卡的baby

已于 2022-06-28 11:49:06 修改

阅读量2.1k

点赞数

文章标签： css 前端

于 2022-06-28 11:46:47 首次发布

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125499475

版权

CSS样式的引入方式

（1）内嵌方式写样式，写在style标签中。
     内嵌样式特点：只能修饰当前这个html文件。也就是说它里面的样式规则，不能作用到其他页面的标签上。
（2）行内样式，写在标签中的style属性上的。
     行内样式的特点：它里面的样式规则，只能修饰当前你指定的这个标签
（3）外部样式表，通过定义保存在外部.css文件中。外部样式表文件的后缀名是.css。文件名，必须是以字母开头。
     注意：文件名，不能以数字开头。不能以汉字开头。(如果你这样写了，它不会报错，但是我们不推荐你在实际项目中这样操作。)
     外部样式表，需要使用link标签引入到指定的html网页文件中
（4）导入样式
     a.首先创建一个main.css文件，写上相关的css样式规则
     b.然后再base.css文件中，把main.css样式，使用@import 导入到 base.css样式表中 
     
  HTML:
   
    <!-- 3、外部样式表 -->
    <link rel="stylesheet" href="./css/main.css">
    <!-- 样式的引入方式 -->
    <!-- 1、内嵌样式 -->
    <style>
        p{
            color: blue;
            font-size: 120px;
        }
    </style>
</head>
<body>


    <br><br><br>


    <p>平凡的世界</p>、
    <!-- 2、行内样式 -->
    <!-- 行内样式 写在指定标签的 style属性中的  写在这里的样式，只修饰当前的标签-->
    <!-- 一般来说，在标签上 都可以加style属性，有一个标签例外：br换行标签，不能加style属性 -->
    <p style="color:red;">平凡的世界</p>
    <p>平凡的世界</p>

    <div style="color:orange; font-size:50px;">你好，世界</div>
    <div>你好，世界</div>
    
    MAIN.CSS:
    
    /* 4、导入样式 */
    @import 'base.css';
    body{
         background-color: lightskyblue;

    }
    
    BASE.CSS:
    
    *{
        /* 外边距 */
        margin: 0;
        /* 内边距 */
        padding: 0;
    }

    p{
        text-decoration: underline;
    }