在HTML中引入CSS

喜欢ヅ旅行 2022-07-15 13:48 285阅读 0赞

本文原创地址链接：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/52913051][http_blog.csdn.net_zhou_xiao_cheng_article_details_52913051]，未经博主允许不得转载。  
在HTML中引入CSS的方法一共有四种，其中有两种书写在HTML中，另外两种是从外部引入CSS文件。  
**书写在HTML中的两种方式**  
1. 行内式  
听这名字就知道，它是跟标签写在一起的,语法就是在标签里的style属性中添加CSS样式，每个样式之间用`;`隔开。这种写法真的很恶心，它只对当前标签有效，当你有成百上千个标签需要同样的样式时，你要写到吐血，并且带来的副作用就是，你写的代码存在大量冗余的现象，很难维护。一般而言，看你代码的漂亮程度，就知道你是不是一只合格的程序猿了。

效果图：  
![这里写图片描述][20161024145353819]  
2. 嵌入式  
所谓的嵌入，就是把程序猿这三个字烙在你额头上的意思，所以它也是写在了HTML文件里的。语法就是在`<head>`标签下，书写`<style>`标签，然后在`<style>`标签里添加CSS样式。  
这种写法通常在写模板，或者只有单个简单页面的情况下使用得比较多。

<head>
        <style> .header{ font-size: 30px; background-color: gray; } .container{ background-color: greenyellow; } </style>
    </head>
    <body>
        <div class="header">
            嵌入式
        </div>
        <div class="container">
            嵌入式
        </div>
    </body>

效果图：  
![这里写图片描述][20161024164723358]  
**从外部引入的两种方式**  
1. 导入式  
语法：在`<head>`标签下，书写`<style>`标签，然后在`<style>`标签里使用`@import url(style.css);`或者`@import "style.css";`引入外部CSS文件。  
这种写法和链接式相比较而言，就是会等待整个网页全部加载完成后，再导入CSS样式，所以可能会有一些不好的用户体验，比如说，会先给用户显示没有CSS样式的网页等。  
HTML:

<head>
        <style type="text/css"> /* H5里，type="text/css"可省略，默认为该值 */ @import url(style.css); /* 或 @import "style.css" */ </style>
    </head>
    <body>
        <div class="header">
            导入式
        </div>
        <div class="container">
            导入式
        </div>
    </body>

style.css:

.header{ font-size: 30px; background-color: gray; }
    .container{ background-color: greenyellow; }

效果图：  
![这里写图片描述][20161024163852253]  
2. 链接式  
语法：在`<head>`标签下，书写`<link>`标签，再通过`<link>`标签的属性`rel`与`href`引入外部CSS文件。`rel`代表当前文档与链接文档的关系，其值除了`stylesheet`(表明是文档外部CSS样式表)，还有其它很多，有兴趣的可以自行翻阅资料；`href`指明了被链接文档的位置。  
这种写法在实际的运用中，使用是最广的。有时，根据需要，还会将它与导入式结合在一起使用。  
HTML：

style.css:

.header{ font-size: 30px; background-color: gray; }
    .container{ background-color: greenyellow; }

效果图：  
![这里写图片描述][20161024164417260]

[http_blog.csdn.net_zhou_xiao_cheng_article_details_52913051]: http://blog.csdn.net/zhou_xiao_cheng/article/details/52913051
[20161024145353819]: /images/20220715/c35a6fef0942415aa12cf2d5e9e2fd45.png
[20161024164723358]: /images/20220715/57812f2ccb7f4b4fad91b3c5afae068b.png
[20161024163852253]: /images/20220715/655ec7707e9a496e93e88122cb8bc346.png
[20161024164417260]: /images/20220715/b941d58cab004b53bfbdc825b91427bc.png