Html中引入css的主要方式有四种,分别是外部样式、内部样式、内联样式、导入式。
一、外部样式
(一) 使用外部样式的好处
1.减少代码量 ,网站中相同部分的样式只需要编写一次,我们只需要把css文件引入到不同的html页面中即可实现展示效果。
2.更改网站风格方便,我们可以通过修改一个css文件就可以实现整个网站的外观修改。
3.Html页面渲染时,css文件能够被同时加载。
4.结构与表现分离,便于后期维护。
(二) 适用于多个页面需要相同样式内容的时候使用
(三) 书写位置:新建单独的后缀名为.css文件,使用link标签引入到html页面中,将link标签放到Html页面的head标签中
例:
rel:规定当前文档与被连接文档之间的关系.
href:规定为连接文档的位置
type:规定被连接文档的MIME类型
二、内部样式
(一) 使用内部样式的好处
1.结构与表现分离,便于后期维护。
2.所有的CSS控制都是针对单独的面,没有多余的CSS代码。
3.同样页面中相同的样式可以重复使用。
(二) 使用内部样式的缺点
1.只能在一个页面中使用
2.网站更换风格麻烦
3.Css在html页面中,页面显得臃肿
(三) 适用于个别页面需要特殊样式时
(四) 书写位置:写在html页面的head标签之间,在head标签之间书写style标签
例:
三、行间样式
(一) 使用内部样式的好处
1. 单独修改单个标签的样式
(二) 使用内部样式的缺点
1. 结构与表现没有分类,不利于后期维护。
2. 只能修改单个标签的样式,代码重复利用率不高,代码冗长。
(三) 适用于个别标签需要特殊样式时
(四) 书写位置:在标签的开始标签内部书写style=””
例:
四. 导入式
(一) 使用导入的好处
1.减少代码量,网站中相同的部分的样式只需要书写一次,后续只需要把css文件引入到不同的Html页面中即可。
2.更改网站风格方便,我们可以通过修改一个css文件,就可以修个整个网站的外观。
3.结构与表现分离,便于后期维护。
(二) 使用导入的缺点
1.需要等Html页面全部加载完才能加载css文件。
(三) 适用于多个页面需要展示相同样式的时候
(四) 书写位置:写在Html页面的head标签中的style表现中,用@import导入css文件
1、直接在html标签元素内嵌入css样式,如
<div style="font-size:14pxcolor:#FF0000">2、在html头部head部分内style声明插入代码如下:
<style type="text/css"><!--
.ceshi {font-size:14px color:#FF0000}
-->
</style>
3、在html头部head部分内使用@import引用外部CSS文件方法
<style type="text/css"><!--
@import url(wcss.css)
-->
</style>
Wcss.css文件内代码.ceshi {font-size:14pxcolor:#FF0000}
4、在html头部head部分内使用link来调用外部的css文件
在head放置<linkrel="stylesheet" href="wcss.css" type="text/css"/>来调用外部的wcss.css文件来实现html引用css文件
<linkrel="stylesheet" href="wcss.css" type="text/css"/>css用于控制html的样式和布局。主要分内联样式,内部样式,外部样式。
内联样式就是在html的元素里直接使用css,比如:
<p style="background-color:green">这是一个段落。</p>
这就是直接在元素中用css设置背景颜色。适用于单元素,不会影响其他元素。
内部样式则是把css放在head部分用 <style>标签来定义,比如:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}</style>
</head>
其中body {background-color:yellow}定义了整个body的背景颜色。
p {color:blue}</style>则是定义了页面里面所有文本的文字颜色。
优点是整个html页面都能调用。
第三种则是外部样式,就是把css部分做成单独的css文件,然后再html页面里面引用,比如
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
相当于内部样式的代码部分放入mystyle.css这个文件,然后在此处引用。
外部样式最大的优点是其他html页面也能直接用link直接调用,比如你好几个页面需要类似的风格,那么把相同的布局内容放入CSS文件里面就会非常合适。