13518219792
1、html引入css文件之直接在div中使用css样式制作div+css网页
创新互联公司成立于2013年，公司以网站设计、做网站、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务，适用行业近百种。服务企业客户上千多家，涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格，为不同客户提供各种风格的特色服务。
div style="border:1px red solid;"html引入css文件/div
说明：html引入css文件的这种方法不建议使用，因为会让页面的标签很多，看起来很累赘，体现不了css的优势，当然如果你非常想用这种方法，在不经常更改的地方可以用一用，但是还是不推荐。
2、html引入css文件之html中使用style自带式
直接在header 里面写css
style type="text/css"
div{margin: 0;padding: 0;border:1px red solid;}
/style
说明：html引入css文件的这种方法适合在页面较少的情况下使用。优点：速度 快，所有的css控制都是针对本页面标签的，没有多余的css命令；再者不用外链css文件。直接在html文档中读取样式。缺点如果页面较多改版会很麻烦，单个页 面显得臃肿，css不能被其他html引用造成代码量相对较多，维护也麻烦些。但是采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进 行复杂的维护工作。
3、html引入css文件之使用@import引用外部CSS文件
将一个独立的.css文件引入HTML文件中，导入式使用css规则引入外部css文件，style标记也是写在head标记中，使用的语法如下：
style type="text/css"
@import"mystyle.css"; 此处要注意.css文件的路径
/style
4、html引入css文件之使用link引用外部CSS文件
在网页的head/head标签对中使用link标记来引入外部样式表文件，使用html规则引入外部css。
link href="./mystyle.css" rel="stylesheet" type="text/css"/
说明：html引入css文件的这种方法就不需要style标签，而是直接通过link一个样式来引用外部样式，推荐使用link来引用外部的css样式方法。
1
新建一个html文件，命名为test.html，用于讲解html中如何导入css。
请点击输入图片描述
2
在test.html文件内，使用div创建一个模块，下面将对该div进行css样式的定义。
请点击输入图片描述
3
在test.html文件内，设置div的class属性为mydiv，主要用于css文件对该类名进行样式定义。
请点击输入图片描述
4
新建一个css文件夹，在文件夹内创建一个css文件，命名为test.css，用于编写css样式。
请点击输入图片描述
5
在test.css文件内，使用div的类名进行样式定义，设置div的宽度、高度均为200px，背景颜色为黄色。
请点击输入图片描述
6
在test.html文件内，使用link标签导入test.css样式文件，href为css路径。
请点击输入图片描述
7
在浏览器打开test.html文件，查看实现的效果。
html引用css方法如下
1、直接在HTML标签中内嵌css样式
2、html中使用style自带式
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件 推荐此方法
方法说明：
1、直接在html标签元素内嵌入css样式
我是div css测试内容
效果如下图
1.jpg
2、在html头部head部分内style声明插入
代码如下：
!--
.ceshi {font-size:14px; color:#FF0000;}/*这里是设置CSS的样式内容*/
--
我是div css测试内容
效果同上。
3、使用@import引用外部CSS文件方法
HTML代码：
css引用方法实例
!--
@import url(wcss.css);/*这里是通过@import引用CSS的样式内容*/
--
我是div css测试内容
Wcss.css文件内代码.ceshi {font-size:14px; color:#FF0000;}
4、使用link来调用外部的css文件
在head放置
来调用外部的wcss.css文件来实现html引用css文件
此方法就不需要style标签，而是直接通过link一个样式来引用外部样式，一般推荐使用link来引用外部的css样式方法。
CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。
一、行内样式
使用style属性引入CSS样式。
示例：
h1 style="color:red;"style属性的应用/h1
p style="font-size:14px;color:green;"直接在HTML标签中设置的样式/p
实际在写页面时不提倡使用，在测试的时候可以使用。
例如：
!DOCTYPE
html
head
meta charset="utf-8" /
title行内样式/title
/head
body
!--使用行内样式引入CSS--
h1 style="color:red;"Leaping Above The Water/h1
p style="color:red;font-size:30px;"我是p标签/p
/body
/html
二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例：
head
style type="text/css"
h3{
color:red;
}
/style
/head
例如：
!DOCTYPE
html
head
meta charset="utf-8" /
title内部样式表/title
!--使用内部样式表引入CSS--
style type="text/css"
div{
background: green;
}
/style
/head
body
div我是DIV/div
/body
/html
三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：
1、链接式
link type="text/css" rel="styleSheet" href="CSS文件路径" /
2、导入式
style type="text/css"
@import url("css文件路径");
/style
例如：
!DOCTYPE
html
head
meta charset="utf-8" /
title外部样式表/title
!--链接式:推荐使用--
link rel="stylesheet" type="text/css" href="css/style.css" /
!--导入式--
style type="text/css"
@import url("css/style.css");
/style
/head
body
ol
li1111/li
li2222/li
/ol
/html
链接式和导入式的区别
link
1、属于XHTML
2、优先加载CSS文件到页面
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。
四、CSS中的优先级
1、样式优先级
行内样式内部样式外部样式(后两者是就近原则)
例如：
行内样式和内部样式比较优先级：
!DOCTYPE
html
head
meta charset="utf-8" /
title行内样式和内部样式表的优先级/title
!--内部部样式表--
style type="text/css"
p{
color: blue;
}
/style
/head
body
!--行内样式--
p style="color: red;"我是p段落/p
/html
浏览器运行效果：
结论：行内样式优先级高于内部样式表。
内部样式表和外部样式表比较优先级：
a、内部样式表在外部样式表上面
!DOCTYPE
html
head
meta charset="utf-8" /
title内部样式表和外部样式表的优先级/title
!--内部部样式表--
style type="text/css"
p{
color: blue;
}
/style
!--外部样式表--
link rel="stylesheet" type="text/css" href="css/style.css" /
/head
body
p我是p段落/p
div我是div/div
ol
li1111/li
li2222/li
/ol
/html
浏览器运行效果：
b、外部样式表在内部样式表上面
!DOCTYPE
html
head
meta charset="utf-8" /
title内部样式表和外部样式表的优先级/title
!--外部样式表--
link rel="stylesheet" type="text/css" href="css/style.css" /
!--内部部样式表--
style type="text/css"
p{
color: blue;
}
/style
/head
body
p我是p段落/p
div我是div/div
ol
li1111/li
li2222/li
/ol
/html
浏览器运行效果：
结论：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准。
注意：导入式和链接式的优先级也是使用就近原则。
2、选择器优先级
优先级：ID选择器类选择器标签选择器
!DOCTYPE
html
head
meta charset="utf-8" /
title选择器的优先级/title
style type="text/css"
#a{
color: green;
}
.b{
color: yellow;
}
h2{
color: red;
}
/style
/head
body
h2111/h2 !--红色--
h2 id="a" class="b"222/h2 !--绿色--
h2 class="b"333/h2!--黄色--
/html
浏览器运行效果：
1、使用链接式
link href="style.css" rel="stylesheet" type="text/css" /
2、使用导入式
style type="text/css"
@import "style.css"
/style
扩展资料：
二者的区别
导入式和链接式的目的都是将一个独立的css文件引入一个文件中，二者的区别不大，事实上，二者最大的区别在于链接式使用html的标记引入外部css文件，而使用导入式则是使用css规则引入外部css文件，因此它们的语法也不同。
采用这两种方式后的现实效果也略有区别。使用链接式时，会在装载页面主体部分 之前装载css文件，这样现实出来的页面从一开始就是带有样式效果的，而使用导入式时，会在整个页面装载完成之后再装载css文件，
对于有的浏览器来说， 在一些情况下，如果页面文件的体积比较大，则会出现先现实无样式的页面，闪烁一下之后再出现设置样式的效果。从浏览者的感受来说，这是使用导入式的一个缺陷。
在html网页中引入引入css主要有以下四种方式：
（1）行内式
网页中css的导入方式
（2）嵌入式
嵌入式一般写在head中，对于单个页面来说，这种方式很方便。
（3）导入式
!-- 导入外部样式：在内部样式表的标记之间导入一个外部样式表，导入时用@import。 --
（4）链接式
导入式和链接式差不多，都是从外部引入css文件。但是链接式对于客户端用户浏览网站时，效果会好些。
