HTML中引入CSS文件的几种方法

概况来说有以下四种:

1.行内式：也称内联式，在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势；

2.嵌入式：将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中；

3.链接式：跟第4个的导入式都称外部式或者外联式，使用link引用外部CSS文件；

4.导入式：使用@import引用外部CSS文件；

-----------------------------------------------------A

对于行内式，是刚开始写最容易也最习惯的方式，但这种写法完全体现不出css的优势，如下：

<span style="font-size:14px;"><div id="demo" style="position:absoulte;left: 20px;top:50px;width:300px;height: 50px;border: solid 1px red;padding-left: 20px;color:gray;font-size: 20px;line-height: 50px;text-align: center;">我是行内式写法</div></span>

一个页面中如果标签很多，这种写法看起来不好并且显得很累赘，重复性太大，是很不建议的！

-----------------------------------------------------B

嵌入式如果页面比较少的情况下，也是挺不错的选择，但如果对应一个项目页面很多，这样无疑有点灾难性，要修改个样式，或许是大篇幅的相似页

面，但都得一个个的去修改，如下：

<span style="font-size:14px;"><style type="text/css"></span>

<span style="font-size:14px;">#demo{position:absoulte;left: 20px;top:50px;width:300px;height: 50px;border: solid 1px red;padding-left: 20px;color:gray;font-size: 20px;line-height: 50px;text-align: center;</span>

<span style="font-size:14px;">}
</style></span>

这种写法一定程度上避免了页面一种"无样式"现象，页面加载完css才去渲染页面...

-----------------------------------------------------CD

外部式css样式就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>标签内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，这样最大化的发挥了css出现的优势，当然".css"文件文件的命名要有一定的意义，方便后面的修改或增强其可读性，如"main.css"...

<link href="main.css" rel="stylesheet" style="text/css"/>

其中的 rel="stylesheet" type="text/css" 是固定写法不可修改

通过@import引入的格式如下：

<style type="text/css">@import url(demo.css);
</style>

这种方式会在整个页面加载完成时才引入css文件，很明显的问题就是页面的"裸奔"现象，这个当然从交互和体验的角度考虑是绝对不能接受的

以上的两种外部引入方式从直观看语法结构的区别：

<span style="font-size:14px;"><link href="CSS路径" rel="stylesheet" type="text/css" /></span>

<span style="font-size:14px;">@import + 空格+ url(CSS文件路径地址);</span>

@import这种方式还应注意下载HTML和CSS文件中的不同，在HTML中需要加上<style type="text/css"></style>，而在css文件中就可以直接@import

来添加路径使用了，这就出现了一个点：对应样式文件较多的项目，我们可以选择先主后次，把主要的样式先渲染出来，一些次要的可以放在css文件

中进行import,这样也可一定程度上缓解服务器的压力，虽然文件不大，但能优化还是好的。本质上这两种外部引入方式并没太多区别，但有时为了项

目中编辑站点的样式方便，较多的使用link的方式。

当然还有一些以XML为编辑要求的引入方式，但不常用....

HTML中引入CSS文件的几种方法相关推荐

HTML引入css文件（四种方法）
一.内嵌样式表在HTML的<head>标签中的<style>标签中添加css样式,使用内嵌样式表定义的 CSS 样式只能在当前网页内使用. <!DOCTYPE html ...
html如何引入css文件？HTML引入外部css文件的四种方法
在学习前端的时候,我们应该知道css给html标记添加各种样式,用来告诉浏览器,因该如何显示这些标记里面的内容.既然css是用来给html添加各种样式的,那么,html中如何引入外部的css文呢?本篇 ...
加载css文件的几种方法,CSS 引入方式
HTML 中引入 CSS 的方式有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入外部 CSS 文件.下面我们就来看看这 ...
jsp中引入css文件不起作用
jsp中引入css文件不起作用笔者遇到的问题所在是jsp页面引入css文件后,样式无法加载,在SpringMVC的配置文件dispatcherServlet.xml中引入如下代码后解决: <m ...
Linux系统中运行.sh文件的几种方法
在Linux系统中执行.sh文件的几种方法: 1. cd到.sh文件所在的目录,然后执行./xxx.sh [前提:该./sh文件要有可执行的权限,chmod u+x xxx.sh] 2. 在任何 ...
matlab中读文件的行数_Matlab中读取txt文件的几种方法
Matlab中读取txt文件的几种方法一.纯数据文件(没有字母和中文,纯数字) 对于这种txt文档,从matalb中读取就简单多了例如test.txt文件,内容为"17.901 -1.1 ...
matlab中如何读写txt,Matlab中读取txt文件的几种方法
Matlab中读取txt文件的几种方法 matlab读取文本文件的几种函数: 1.load--适合读取纯数据文本: 2.importdata--只读取数据,自动省略数据格式前后的字符,超大文件不适合: ...
HTML中写CSS代码的两种方法
在HTML中写CSS代码也两种方法. 写在HTML标签里使用CSS前 <h1>这是一个标题 </h1> 使用CSS后 <h1 style="color:red ...
spark 读取ftp_在 Shell 中下载 ftp 文件的几种方法
FTP 是 File Transfer Protocol(文件传输协议)的英文简称,而中文简称为"文传协议".用于 Internet 上的控制文件的双向传输.同时,它也是一个应用程 ...

HTML中引入CSS文件的几种方法

HTML中引入CSS文件的几种方法相关推荐

最新文章

热门文章