CSS样式表的使用

最新推荐文章于 2023-07-24 09:05:28 发布

！YI

最新推荐文章于 2023-07-24 09:05:28 发布

阅读量253

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_53469581/article/details/123075152

版权

CSS样式表的使用

1、行内式样式表

<div style="color: pink;font-size: 50px;">你好</div>

位置：标签内部

2、内嵌式样式表

<!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>Document</title>
    <style>
        div{
            color: pink;
            font-size: 50px;
        }
    </style>
</head>
<body>
  <div>你好</div>
</body>
</html>

位置：head标签内部，title标签下面，一对style标签中

3、外链式样式表

<!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>Document</title>
    <link rel="stylesheet" href="1.css">
</head>
<body>
  <div>你好</div>
</body>
</html>

1.css文件

div{
    color: blue;
    font-size: 50px;
}

link标签作用：引入外部文件， href属性的值是文件地址

如果rel属性值是stylesheet，代表引入样式表

css文件内部不需要写标签，只需写选择器和代码（css文件内部不允许写HTML骨架）

4、导入式样式表

<!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>Document</title>
    <style>
        @import url(1.css);
    </style>
</head>
<body>
  <div>你好</div>
</body>
</html>

位置：head标签内部，title标签下面，style标签里面

4种样式表的区别与优缺点

样式表名称	权重	优点	缺点
行内式样式表	最高	样式设置最精确	结构和样式没有分离，不能批量修改样式
内嵌式样式表	大于导入式，等于外链式	结构和样式分离，可批量修改	样式和骨架没有完全分离，多个html文件不能使用同一套css代码
外链式样式表	大于导入式，等于内嵌式	样式和骨架完全分离，一份css代码可以重复使用	需要多建一个文件
导入式样式表	最低	样式和骨架完全分离，一份css代码可以重复使用	导入式有样式问题，引入导入式涉及加载顺序，会出现短暂的空白页面