CSS嵌入HTML的三种方法

2017-05-12 本文已影响27人曾基锟

HTML大家都非常熟悉了,每天打开电脑HTML都会与大家见面,大家看到的HTML都很美观,其实呢,大部分功德还是CSS的,那CSS到底是什么东西呢?CSS真有这么大的本事让网页变得非常美观吗?下面就带大家熟悉下,CSS的魔法。

首先,弄清楚,CSS具体是什么东西,它是Cascading Style Sheet的缩写,也就是样式的意思,即网页的样式。

那么,我们怎样把CSS嵌入到网页中呢,共三种方式:

1.行内式, 代码写在具体网页中的一个元素内,如下：

<body>

<p style = "color:red, font-weight:600">行内样式例子</p>

</body>

！！每一个HTML元素都包含一个style属性，写在开始标签里，可以直接定义样式。该样式仅能用于该元素的内容，对于另一个同名的元素则不起作用。！！

2.嵌入式, 使用HTML的style元素，在文档中定义CSS样式。如下：中,示例如下:

<html>

<head>

<title>嵌入式</title>

<style>

.p{ color:yellow, font-weight:normal }

</style>

</head>

</html>

3.外联式，外部引用，指HTML文档本身不含有CSS样式，而是 link 动态引用外部的CSS文件定义文档的表现形式，可以使用多个link，从而链接多个样式表如下：

<html>

<head>

<title>外联式测试</title>

<link href = "index.css", rel = "stylesheet">

<link href = "style.css", rel = "stylesheet">

</head>

<body>

<div id="box"></div>

</body>

</html>

这三个样式可以用任何中的一个,不过外联式用得最多,其中, 它们三个权重优先顺序是:行内式——嵌入式——外部样式表。最后,希望大家在CSS上面越走越远。