黑马程序员_HTML中CSS使用的几种方法

来源：互联网发布：mac 终端设置时间编辑：程序博客网时间：2024/06/05 06:43

HTML中CSS使用的几种方法

“CSS”又叫层叠样式表, 作用是布局与美化网页的。

HTML中常见的CSS使用方法一共有三种：即内联式、页面嵌入式和外部引用式。下面我来浅谈一下三种使用方以及三种方法的优缺点。以便网友日后的使用。

1、内联式

内联引用可以把CSS样式直接作用在HTML标签中.

①、内联式代码：

<h3>.........内联试CSS效果.........</h3>

<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.........>

input{ background-color:Aqua; color:White;}

p{ color:Blue; font-size:xx-large; font-family:华文彩云;}

</style>

</head>

<h3>........页面嵌入式HTML.........</h3>

<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;

}

{

color:Maroon;

font-size:x-large;

font-style:oblique;

font-family:华文新魏;

}

<body>

<h3>........外部引用式HTML.........</h3>

<br />

<b>遗民泪尽胡尘里，南望王师又一年。 </b>

<br />

<b>眼中泪尽空啼血，忍辱负重谁人知? </b>

<br />

<b>郁孤台下清江水，中间多少行人泪。 </b>

<br />

<b>多少泪珠何限恨，倚阑干。 </b>

</body>

②、外部引用式效果

③、总结：外部引用式适用于多个页面共享CSS，复用性比嵌入式更强。由于独立设置CSS 页面，所以HTML页面非常干净整洁。缺点就是需要在CSS文件中设置多个ID，不然容易混淆。

概括：三种样式各有优劣，如果对页面要求较高，可以多种并用。控制更加严谨合理；效果也更加出众。

鄙人浅薄之见，如有不妥之处，还望指点。谢谢！

0 0