Web中CSS的基础与引入方式

最新推荐文章于 2024-09-27 21:21:45 发布

《独自往前》

最新推荐文章于 2024-09-27 21:21:45 发布

阅读量564

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/singe_lq/article/details/131438715

版权

1.css的基础

<!--

css（Cascading Style Sheet, 层叠样式表）的优势：

1、内容与表现分离；

2、网页的表现统一，容易修改；

3、丰富的样式，使页面布局更加灵活；

4、减少网页代码量，增加网页的浏览速度；

5、有利于网页被搜索引擎收录

-->

<!--

css语法：

选择器 {

声明1;====属性: 属性值;

声明2;

·····

}

选择器：选择要设置样式的对象（标签）

-->

2.引入方式

<!--

css文件就是后缀名是css

-->

<!--

1.行内引入：在标签内部通过style属性设置，内容与样式不分离，不推荐使用

2.内部引入：在head标签中，通过style标签设置，内容与样式不是完全分离，不推荐使用

3.外部引入：

3.1 在head标签中通过link标签引入css文件

3.2 在head标签中的style标签中通过@import url()设置，注意在style中是第一行

-->

<!--

link&@import的区别

1.本质区别：link是属于XHTML标签，@import是CSS提供的一种方式

2.加载顺序不同：link引用的CSS先加载，@import是当页面加载过后再加载css文件

3.兼容性：@import是CSS2.1.提出，不兼容老浏览器，IE5以上才能识别

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入方式</title>
    <style>
        /* 在style第一行 */
        @import url(./外部引入2.css);
        a {
            /* 取消下划线 */
            text-decoration: none;
        }
         /* 位置错误
         @import url(./外部引入2.css); */
    </style>
    <link rel="stylesheet" href="./基础.css">
</head>
<body>
     <p>出要光罪。</p>
     <p style="color: blue;font-size: 20px;line-height: 1.5;">侯罪皇派。</p>
     <a href="#">Lorem ipsum dolor sit.</a>
     <span>Lorem, ipsum.</span>
     <h2>道人不。</h2>
</body>
</html>