列入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://hbruida.cn/article/dsgigdi.html