HTML中CSS使用的几种方法
“CSS”又叫层叠样式表, 作用是布局与美化网页的。
HTML中常见的CSS使用方法一共有三种:即内联式、页面嵌入式和外部引用式。下面我来浅谈一下三种使用方以及三种方法的优缺点。以便网友日后的使用。
1、内联式
内联引用可以把CSS样式直接作用在HTML标签中.
①、内联式代码:
<body bgcolor="gray">
<h3>.........内联试CSS效果.........</h3>
<input type="button" value="注册" style="background-color:Red"/>
<input type="password" value="********" style="background-color:Blue"/>
<input type="text" value="不知风雨几时休,已教泪洒窗纱湿。 " style="background-color:Yellow"/>
<input type="submit" style="background-color:Green"/>
<br />
<font size="2" color="red">还君明珠双泪垂,恨不相逢未嫁时。</font>
<br />
<font size="4" color="Blue">泪眼问花花不语,乱红飞过秋千去。</font>
<br />
<font size="6" color="Yellow">晓来谁染霜林醉,总是离人泪。</font>
<br />
<font size="8"color="Green">角色寒,也阑珊,怕人寻问咽泪装欢。</font>
<br />
</body>
注意:标红处即为内联样式代码
②、内联式效果:
③、总结:内联式适用于没有可复用性的场合,灵活性强。但是只能对某个控件进行设置,太局限了。另外,如果样式太多的话,界面会比较杂乱。
2、页面嵌入式
可以使用style标签直接把CSS文件中的内容加载到HTML文档的<head>标签内部.
①、嵌入式代码
<head>
<title>CSS使用方法</title>
<!........页面嵌入式CSS.........>
<style type="text/css">
input{ background-color:Aqua; color:White;}
p{ color:Blue; font-size:xx-large; font-family:华文彩云;}
</style>
</head>
<h3>........页面嵌入式HTML.........</h3>
<input type="button" value="按钮"/>
<input type="password" value="********" />
<input type="text" value="不知风雨几时休,已教泪洒窗纱湿。 " />
<input type="submit" />
<p>抱得秋情不忍眠,自向秋屏移泪烛。 </p>
<p>泪烛摇摇爇短檠,牵愁照恨动离情。 </p>
<p>花之颜色人之泪,若将人泪比桃花 。 </p>
<p>教坊犹奏别离歌,垂泪对宫娥。 </p>
<br />
②、嵌入式效果
③、总结:嵌入式中的每个标签都可以采用样式自己命名、复用性较强、减少HTML页面的体积;但是灵活性较低、如果CSS文件较多的话,页面也将会很混乱。
3、外部引用式
需要单独建立一个以.css后缀命名的文件,把所有HTML中所需要的样式都写进去,然后用在<head>中写入<link type="text/css" rel="Stylesheet" href="文件名.css" />连接代码进行引用。
①、外部引用式代码
input
{
background-color:Fuchsia;
}
b
{
color:Maroon;
font-size:x-large;
font-style:oblique;
font-family:华文新魏;
}
<body>
<h3>........外部引用式HTML.........</h3>
<input type="button" value="登录"/>
<input type="password" value="********" />
<input type="text" value="花之颜色人之泪,若将人泪比桃花 。 " />
<input type="submit" />
<br />
<b>遗民泪尽胡尘里,南望王师又一年。 </b>
<br />
<b>眼中泪尽空啼血,忍辱负重谁人知? </b>
<br />
<b>郁孤台下清江水,中间多少行人泪。 </b>
<br />
<b>多少泪珠何限恨,倚阑干。 </b>
</body>
②、外部引用式效果
③、总结:外部引用式适用于多个页面共享CSS,复用性比嵌入式更强。由于独立设置CSS 页面,所以HTML页面非常干净整洁。缺点就是需要在CSS文件中设置多个ID,不然容易混淆。
概括:三种样式各有优劣,如果对页面要求较高,可以多种并用。控制更加严谨合理;效果也更加出众。
鄙人浅薄之见,如有不妥之处,还望指点。谢谢!