CSS的四种引入方式

来源：互联网发布：linux 强制复制文件夹编辑：程序博客网时间：2024/05/25 19:58

CSS的引入方式

一.style页内式

*较少使用这种形式缺点很明显,这种CSS的引入方式会导致代码冗杂,不利于维护.代码如下:

<!DOCTYPE html><html>    <head>    <title>CSS引入方式--style行内</title>        <style>            body{                background: green;            }        </style>    </head>    <body>    </body></html>

效果图:

CSS引入方式--style行内式

二.style嵌入式

*使用频率一般优缺点分析:优点:速度快,CSS直接控制本页面标签,无多余的CSS.缺点:代码维护困难,单个页面冗长.代码如下:

<!DOCTYPE html><html><head>    <title></title></head><body style="background: green">    <div style=" border: 2px solid red;background: gray; height: 500px; width: 500px;"></div></body></html>

效果图:

CSS引入方式--style嵌入式

三.CSS文件链接式

*最多使用优缺点分析优点:体现出div与CSS分离的思想,代码清晰美观,有利于后期的代码维护工作.缺点:如果网页较大会导致div加载不出来.代码如下:1.CSS文件(文件名test.css)

#test{    background:gray;    width:500px;    height: 500px;    border:2px solid red;}

2.html文件(用来链接test.css)

<!DOCTYPE html><html><head>    <title>CSS引入方式--CSS文件链接</title>    <link rel="stylesheet" type="text/css" href="test.css"></head><body style="background: green">    <div id="test"></div></body></html>

效果图:

CSS引入方式--CSS文件连接式

四.import导入式

*使用较少代码如下:1.CSS文件(test.css)

#test{    background:gray;    width:500px;    height: 500px;    border:2px solid red;}

2.html文件(导入test.css)

<!DOCTYPE html><html><head>    <title>CSS引入方式--import导入式</title>    <style>        @import "test.css";    </style></head><body style="background: green">    <div id="test"></div></body></html>

效果图:

这里写图片描述

阅读全文

1 0