因为软件工程要交课设,而且近段时间我对前端学习也挺感兴趣的,所以就尝试着学一些前端知识。这样的话,以后搭建小项目的时候就可以自己搭建前端和写算法。
因为刚开始学习前端,所以用这个系列记录自己学习到的操作和小技巧。这篇博文主要记录了如何在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>
样式的优先级
多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。
一般情况下,优先级如下:
(内联样式)Inline style >(内部样式)Internal style sheet >(外部样式)External style sheet
有个例外的情况,就是如果外部样式放在内部样式的后面引入,则外部样式将覆盖内部样式。
导入样式(追加)
导入样式并不是从html中导入css使用,而是在一个css文件中导入另外一个css文件中的样式,以达到代码的重用性。导入样式是以@import url(“xxx.css”)标记所链接的外部样式表,他一般常用在一个样式表内部。
如index.css为主页所用样式,那么我们可以把全局都需要用的公共样式放到一个public.css的文件中,然后在index.css中以@import url("/public.css")的形式链接全局样式,这样就使代码达到很好的重用性。