2021-07-15 CSS的导入方式与语法

最新推荐文章于 2023-07-07 21:28:43 发布

前端畑鹿惊

最新推荐文章于 2023-07-07 21:28:43 发布

阅读量192

点赞数 1

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/m0_46522502/article/details/118766814

版权

笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.CSS的四种导入方式

<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>Document</title>
    <!-- 内部样式: 在head标签中, 使用style标签写的样式就是 内部样式 -->
    <style>
        /* 导入外部的样式, 不推荐使用, 浏览器不会立即导入 @import导入的样式, 但会直接加载link导入的样式*/
        @import url(./css/test2.css);
    </style>

    <!-- 用link标签引入外部样式 
            rel="指定文档的关系"  
            type="类型" -->
    <link rel="stylesheet" href="./css/test1.css" >
</head>
<body>
    <!-- 内联样式:  在标签的内部, 用style="" 写出来的样式，就是行内式 -->
    <div style="color: rgb(255, 68, 0);">内联样式:  在标签的内部, 用style="" 写出来的样式，就是行内式</div>

    <!-- 内部样式: 在head标签中, 使用style标签写的样式就是 内部样式 -->
    <p>内部样式: 在head标签中, 使用style标签写的样式就是 内部样式</p>

    <!-- 外部样式(最常用)：你可以创建一个后缀名为.css文件, 在文档head标签中使用link引用该文件 -->
    <span>外部样式：你可以创建一个后缀名为.css文件, 在文档中使用link引用该文件</span>

    <!-- 导入式(不建议使用): 将一个css文件，通过 @import关键字导入到另外一个css样式中 -->
    <li>导入式: 将一个css文件，通过 @import关键字导入到另外一个css中</li>
</body>

2.语法

选择器{
    样式: 值;
    样式: 值;
    样式: 值;
} 
例如：

html,body {
    /* 属性: 属性值 */
    width: 100%;
    height: 100%;
}
input{
    border: 1px solid #f00;    
}

#ipt{ （id选择器用#）
    border: 1px solid #ff0;    
}

.search{  （类选择器用.）
    border: 1px solid #0ff!important;    
}

前端畑鹿惊

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-07-15 CSS的导入方式与语法

1.CSS的四种导入方式<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>Document</title> <!--
复制链接

扫一扫