列入css样式的四种方法,简述引入css样式的几种方法

引入CSS的方式有几种

三种方式：

创新互联公司联系热线：13518219792，为您提供成都网站建设网页设计及定制高端网站建设服务，创新互联公司网页制作领域十多年，包括成都办公窗帘等多个领域拥有多年的网站营销经验，选择创新互联公司，为企业锦上添花。

1、第一种行内样式，也就是给标签添加style属性，例子如下

div style="width:100px;height:100px;"/div

2、第二种，直接写在html页面中的style标签中，例子如下，

div class="box"/div

style

.box{

width:200px;

font-size:14px;

color:red;

}

/style

3、第三种，使用外链css样式表，单独保存为css文件，将css样式都写入css文件中，例子如下，

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleDocument/title

link rel="stylesheet" href="index.css"//这个地方写css文件的位置

/head

在网页中插入CSS样式表的几种方法

在网页中插入CSS样式表有四种方法

链入外部样式表

链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用link标记链接到这个样式表文件，这个link标记必须放到页面的head区内，如下：

head 

…… 

link href="mystyle.css" rel="stylesheet" type="text/css" media="all" 

…… 

/head

内部样式表

内部样式表是把样式表放到页面的head区里，这些定义的样式就应用到页面中了，样式表是用style标记插入的，从下例中可以看出style标记的用法：

head 

…… 

style type="text/css" 

hr {color: sienna} 

p {margin-left: 20px} 

body {background-image: url("images/back40.gif")} 

/style 

…… 

/head

导入外部样式表

导入外部样式表是指在内部样式表的style里导入一个外部样式表，导入时用@import，看下面这个实例：

head 

…… 

style type=”text/css” 

!-- 

@import “mystyle.css” 

其他样式表的声明 

-- 

/style 

…… 

/head

内嵌样式

内嵌样式的使用是直接将在HTML标记里加入style参数。

p style="color: sienna;margin-left: 20px;" 

这是一个段落 

/p

HTML中嵌入CSS的四种方式及优先级，如何选择

1. 行内样式

行内样式就是把 CSS 样式直接放在代码行内的标签中，一般都是放入标签的style属性中，由于行内样式直接插入标签中，故是最直接的一种方式，同时也是修改最不方便的样式。

p style="background-color: #999900"行内元素，控制段落-1/p

h2 style="background-color: #FF6633"行内元素，h2 标题元素/h2

p style="background-color: #999900"行内元素，控制段落-2/p

strong style="font-size:30px;"行内元素，strong 比 em 效果要强/strong

div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;"行内元素，div 块级元素/div

em style="font-size:2em;"行内元素，em 强调/em

2. 内嵌式

内嵌式通过将 CSS 写在网页源文件的头部，即在 head 和 head 之间，通过使用 HTML 标签中的 style 标签将其包围，其特点是该样式只能在此页使用，解决行内样式多次书写的弊端。

!doctype html

html

head

meta charset="utf-8"

title内嵌式/title

style type="text/css"

p{

text-align: left;  /*文本左对齐*/

font-size: 18px;  /*字体大小 18 像素*/

line-height: 25px;  /*行高 25 像素*/

text-indent: 2em;  /*首行缩进2个文字大小空间*/

width: 500px;  /*段落宽度 500 像素*/

margin: 0 auto;  /*浏览器下居中*/

margin-bottom: 20px;  /*段落下边距 20 像素*/

}

/style

/head

body

p“百度”这一公司名称便来自宋词“众里寻他千百度”。（百度公司会议室名为青玉案，即是这首词的词牌）。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。在这之后，由于在搜索引擎中，大都有动物形象来形象，如 SOHU 的狐，如 GOOGLE 的狗，而百度也便顺理成章称作了熊。百度熊也便成了百度公司的形象物。/p

p在百度那次更换 LOGO 的计划中，百度给出的 3 个新 LOGO 设计方案在网民的投票下，全部被否决，更多的网民将选票投给了原有的熊掌标志。/p

p此次更换 LOGO 的行动共进行了 3 轮投票，直到第 2 轮投票结束，新的笑脸 LOGO 都占据了绝对优势。但到最后一轮投票时，原有的熊掌标志却戏剧性地获得了最多的网民选票，从而把 3 个新 LOGO 方案彻底否决。/p

/body

/html

3. 链接式

链接式通过 HTML 的 link 标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。

!doctype html

html

head

meta charset="utf-8"

title/title

link href="lianjie.css" type="text/css" rel="stylesheet" /

link href="lianjie-2.css" type="text/css" rel="stylesheet" /

/head

body

p我是被 lianjie-2.css 文件控制的，楼下的你呢？？/p

h3楼上的，spanlianjie.css/span 文件给我穿的花衣服。/h3

/body

/html

4. 导入样式

style type="text/css"

@import url=("css路径名");

/style

这种方法一般不用，可以直接忽略。

一般都是采用链接样式，行内样式和内嵌样式 维护起来相对麻烦，

优先级(从高到底)

行内样式内嵌样式链接样式导入样式。

在HTML中使用CSS样式的几种方式

在html网页中引入引入css主要有以下四种方式：

（1）行内式

网页中css的导入方式

（2）嵌入式

嵌入式一般写在head中，对于单个页面来说，这种方式很方便。

（3）导入式

!-- 导入外部样式：在内部样式表的标记之间导入一个外部样式表，导入时用@import。 --

（4）链接式

导入式和链接式差不多，都是从外部引入css文件。但是链接式对于客户端用户浏览网站时，效果会好些。