一、内联式css样式
内联式css样式表就是把css代码直接写在现有的HTML标签中,css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如下代码:如下面代码:
<p style="color:red;font-size:12px">这里文字是红色。</p>
二、嵌入式css样式
嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>
标签之间。代码如下:
<head>
<meta charset="UTF-8">
<title>嵌入式css样式</title>
<style type="text/css">
span {
color:blue;
}
</style>
</head>
三、外联式css样式
就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>
内(不是在<style>
标签内),使用<link>
标签将css样式文件链接到HTML文件内,如下面代码:
<link href="style.css"
rel="stylesheet"
type="text/css" />
注意:
1、css样式文件名称以有意义的英文字母命名,如 style.css。且标签内href=“sytle.css(对应的样式文件名)”
2、rel=“stylesheet” type=“text/css” 是固定写法不可修改。
3、<link>
标签位置一般写在<head>
标签之内。
总结:内联式 > 嵌入式 > 外联式。但是嵌入式>外联式有一个前提:嵌入式css样式的位置一定在外联式的后面。