甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
三种方式：
创新互联公司联系热线：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样式表有四种方法
链入外部样式表
链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用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
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主要有以下四种方式：
（1）行内式
网页中css的导入方式
（2）嵌入式
嵌入式一般写在head中，对于单个页面来说，这种方式很方便。
（3）导入式
!-- 导入外部样式：在内部样式表的标记之间导入一个外部样式表，导入时用@import。 --
（4）链接式
导入式和链接式差不多，都是从外部引入css文件。但是链接式对于客户端用户浏览网站时，效果会好些。