因为软件工程要交课设，而且近段时间我对前端学习也挺感兴趣的，所以就尝试着学一些前端知识。这样的话，以后搭建小项目的时候就可以自己搭建前端和写算法。
因为刚开始学习前端，所以用这个系列记录自己学习到的操作和小技巧。这篇博文主要记录了如何在HTML中使用css样式。
在HTML中加载css样式的方法目前来讲有三种：
外部样式（外联样式）
内部样式（内嵌式）
行内样式
下面将详细介绍这三种方法。
外部样式
“外部”顾名思义就是独立在html文件外部的css文件，为了使用外部css文件内的样式，需要在html的<head> </head>里写上：
<link> href="./style.css" rel="stylesheet" type="text/css"/>
在href="./style.css"这里可以写上你的css文件路径。这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。
外部样式例子：
style.css文件：
p.tip span {
font-weight:bold;
color:#ff9955;
}
test.html文件：
<html>
<head>
<title>css测试</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<p class="tip"><span>提示：</span>... ... ...</p>
</body>
</html>
这样就可以在html中使用外部css文件的样式了。
内部样式
如果是内部样式，即在html文件中定义css样式，具体是在<head> </head>中使用<style> </style>标签定义css格式。
比如：
<head>
<style type="text/css">
p.tip span {
font-weight:bold;
color:#ff9955;
}
</style>
</head>
这样就在html中定义了css样式。但是这样的样式表只能针对本页有效。不能作用于其它页面。
内部样式例子：
<html>
<head>
<title>css测试</title>
<style type="text/css">
p.tip span {
font-weight:bold;
color:#ff9955;
}
span.color{
color:#ff9955;
}
</style>
</head>
<body>
<p><span class="color">some text.</span>some other text.</p>
<p class="tip"><span>提示：</span>... ... ...</p>
</body>
</html>
行内样式
除了以上两种方式，还可以在html标签上直接写css样式。
比如：
<span style="font-weight:bold;color:#ff9955;">提示：</span>
这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，重用率不高，所以不建议使用。
行内样式例子:
<html>
<head>
<title>css测试</title>
</head>
<body>
<p><span>some text.</span>some other text.</p>
<p class="tip"><span style="font-weight:bold;color:#ff9955;">提示：</span>... ... ...</p>
</body>
</html>
导入样式（追加）
导入样式并不是从html中导入css使用，而是在一个css文件中导入另外一个css文件中的样式，以达到代码的重用性。导入样式是以@import url(“xxx.css”)标记所链接的外部样式表，他一般常用在一个样式表内部。
如index.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个public.css的文件中，然后在index.css中以@import url("/public.css")的形式链接全局样式，这样就使代码达到很好的重用性。