CSS学习（一）---使用CSS的四种方式

 

1. 行内样式

例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>Example inline</title>

</head>

<body bgcolor="#e0f1ff">

<p style="color: #0000FF; font-size: 18px; font-weight: bold;">CSS内容1</p>

<!--字体颜色为蓝色；字号大小为18px；粗体字-->

<p style="color: #000000; text-decoration: underline; font-style: italic;">正文CSS2</p>

<!--字体颜色为黑色；斜体；下划线-->

<P style="color: #FF33CC; font-size: 28px; font-weight: bold;">CSS正文内容3</P>

<!--字体颜色为紫红色；字号大小为28px；粗体字-->

</body>

</html>

运行效果：

总结：行内样式是最简单的CSS使用方法，但由于需要每一个标记设置style属性，后期维护维护成本很高，而且网页体积容易过胖，因此现在很多项目都不再使用该方式。

2. 内嵌式

例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>内嵌CSS</title>

<style type="text/css">

<!--

p{

color: #FF00FF;

text-decoration: underline;

font-weight: bold;

font-size: 25px;

}

-->

</style>

</head>

<body>

<p>紫色、下划线、粗体、字号25px的效果</p>

<p>紫色、下划线、粗体、字号25px的效果</p>

<p>紫色、下划线、粗体、字号25px的效果</p>

</body>

</html>

运行效果：

总结：相对于行内样式来讲，CSS的代码部分被集中在了一个区域，方便后期维护，页面也大大瘦身了。但如果同一个网站有很多页面，对于不同页面上的<p>标记都采用相同风格时，内嵌式的样式也显得略微麻烦，维护成本也是不低。因此内嵌式的方法仅适用于对于特殊页面设置单独的样式风格时使用。

知识点：可以看到上面的代码，<style>标签中间的代码部分使用了注释标记<!-- -->，这是因为在一些比较老的浏览器中，无法识别<style>标签，但它有可能会把<style>标签里面的部分当做正常的文本显示在页面上，所以为了防止这种情况发生，将<style>标签里面的内容用注释标记括起来。

3. 链接式

例：

Html代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>链接式</title>

<link rel="stylesheet" type="text/css" href="../css/1.css">

</head>

<body>

<h2>第一行标题</h2>

<p>紫红色、斜体、下划线、28px的效果1</p>

<h2>第二行标题</h2>

<p>紫红色、斜体、下划线、28px的效果2</p>

</body>

</html>

CSS代码：

/*css样式，仅做读书练习使用*/

h2{

color: #0000FF;

}

p{

color: #FF33CC;

text-decoration: underline;

font-style: italic;

font-size: 28px;

}

运行效果：

总结：链接式是项目中最常用的一种方式，它最大的优势在于CSS代码与HTML代码完全分离，并且同一个CSS文件可以被不同的HTML所链接使用。在设计整个网站时，可以将所有页面都链接到同一个CSS文件，使用相同的格式风格，如果后续需要更改网站的设计，则只需更改CSS文件即可。

4. 导入样式

与链接样式表的功能基本相同，只是语法和运作方式略有不同。运作区别：import方式导入的样式表会在HTML初始化时，被导入到HTML文件内，作为其中的一部分，类似于内嵌式的效果；而链接式则是在HTML的标记需要格式时才以链接的方式引入。语法区别：import的使用方法如下：

例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>导入样式</title>

<style type="text/css">

<!--

@import url(../css/1.css);

-->

</style>

</head>

<body>

<h2>第一行标题</h2>

<p>紫红色、斜体、下划线、28px的效果1</p>

<h2>第二行标题</h2>

<p>紫红色、斜体、下划线、28px的效果2</p>

<h3>浏览器默认效果</h3>

<p>紫红色、斜体、下划线、28px的效果3</p>

</body>

</html>

运行效果：

总结：@import方式其实和链接式在使用上还是有很大区别的，相比较而言，链接式更节省带宽，用时才会下载样式表，而@import则是只要启用了html文件，就会直接下载样式表。

知识点：由于样式表CSS文件中不能包含任何文档标记，如果有一个外部样式表1需要使用另外一个样式表2中的样式，那么我就可以在表1的顶部，也就是其他规则之前使用@import引入这个样式表2，直接写@import url(2.css);即可。