在HTML中引入CSS

来源：互联网发布：简易描述linux内核编辑：程序博客网时间：2024/05/17 04:20

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

<div style="font-size: 30px; background-color: gray">    行内式</div><div style="background-color: greenyellow">    行内式</div>

效果图：
这里写图片描述
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>

效果图：
这里写图片描述
从外部引入的两种方式
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;}

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

<head>    <link rel="stylesheet" href="style.css"></head><body>    <div class="header">        链接式    </div>    <div class="container">        链接式    </div></body>

style.css:

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

效果图：
这里写图片描述

0 0