列入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文件。但是链接式对于客户端用户浏览网站时,效果会好些。


文章名称:列入css样式的四种方法,简述引入css样式的几种方法
新闻来源:http://myzitong.com/article/dsgigdi.html