CSS样式可以写在那些地方呢?从CSS样式代码插入的形式来看可以分三种,内联式,嵌入式,外部式。
内联式:
css样式就是把css代码直接写在HTML标签中:
eg:
<p style="color:blue">我才开始学CSS。</p>
结果:
我才开始学CSS。
<p>我才开始学CSS。</p style="color:blue">/*错误*/
注意:
1.要写在元素开始的标签里。
2.css样式代码要写在style=" "的双引号中,如果有多条css样式设置,可以写在一起,中间用分号 ; 隔开。
<p style="color:aquamarine; font-size:12px">慕课网!</p>
嵌入式
嵌入式写在当前的文件中,嵌入式css样式必须写在<style></style>之间,并且一般情况下,嵌入式css样式写在<head> </head>之间,
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{
color:blue;
}
</style>
</head></span>
<body>
<p>慕课网,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!</p>
</body>
</html>
结果:
慕课网,超酷的互联网、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!
外部式:
外部式css样式(也称为外联式),就是把css代码写到一个单独的外部文件中,这css样式文件以.css为扩展名,在<head>内,不是在<style>中,使用<link>标签将css样式文件链接到HTML文件中。
<link href = "base.css" rel = "stylesheet" type = "text/css"/>
讲解:
1.css样式文件名以有意义的英文字母命名,如 main.css
2. rel = "stylesheet" type = "text/css" 是固定的,不可以修改
3. <link> 标签一般写在<head>标签中
eg:
结果:
慕课网,超酷的互联网、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!
三种方法的优先级: 就近原则:离被设置元素越近优先级越高,这是在三者权值相同的情况下,什么是权值,以后会讲解。