CSS——三种页面引入方法

时间:2022-11-15 21:20:27

目的:为了把样式和内容分开,并且使网页元素更加丰富,引入了CSS

CSS页面引入有三种方式:

1)内联式:比较不常用,因为内容和样式仍然在一起,不方便。示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--字体颜色、字体大小、字体类型、行高-->
    <div style="color: hotpink;font-size: 20px;font-family: 'Leelawadee UI Semilight';line-height: 50px">
        传统布局:使用table来做整体页面的布局
        总结:这种方式来制作页面现在也不是很多了,感觉并不是很高效。
        需要先用photoshop量出页面布局具体的尺寸位置,再将其划分为表格,
        对每个格子进行编辑。每个格子可以嵌套表格,这样有时候写着写着还有点迷糊,
        要重新找到编辑位置属于哪一个表格的哪个位置, 通常会将表格的border设置为1,
        方便检查
    </div>
    <div>
        博客园是一个面向开发者的知识分享社区。自创建以来,
        博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,
        推动并帮助开发者通过互联网分享知识,从而让更多
    </div>

</body>
</html>

2)嵌入式:由于这种方式速度快,一般用于首页加载。示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KID</title>
    <style type="text/css">
        div{
            color:hotpink;
            font-size:20px;
            font-family:'Microsoft YaHei UI';
            line-height:50px
        }
    </style>
</head>
<body>
    <div>
        博客园是一个面向开发者的知识分享社区。自创建以来,
        博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,
        推动并帮助开发者通过互联网分享知识,从而让更多
    </div>
    <div>
        博客园是一个面向开发者的知识分享sdgdhgfgjkhljsadsfxcvbnm社区。自创建以来,
        博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,
        推动并帮助开发者通过互联网分享知识,从而让更多
    </div>
</body>
</html>

3)外联式:样式单独保存在main.css文件中,样式与内容完全分离,用于大多数网页中。示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KID</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div>
        博客园是一个面向开发者的知识分享社区。自创建以来,
        博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,
        推动并帮助开发者通过互联网分享知识,从而让更多
    </div>
    <div>
        博客园是一个面向开发者的知识分享sdgdhgfgjkhljsadsfxcvbnm社区。自创建以来,
        博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,
        推动并帮助开发者通过互联网分享知识,从而让更多
    </div>
</body>
</html>

main.css:

div{
    color:hotpink;
    font-size:20px;
    font-family:'Microsoft YaHei UI';
    line-height:50px
}