目录
1.行内样式
我们要某个 HTML 标签中去书写样式,它需要使用 style 属性来指定。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内样式的使用</title> </head> <body> <div>这是第一个样式的<span style="color: red; font-weight: bold; text-decoration: underline;">使用</span>,<span style="color: red; font-weight: bold; text-decoration: underline;">采用的是行内样式</span></div> </body> </html>
注意
这种写法有什么问题?
问题就是不利于我们的代码维护。
如何解决?
我们就可以使用内嵌样式来解决。
2.内嵌样式
内嵌样式又叫页面样式,它的作用是对当前整个页面有效。使用它需要把样式写在一个叫 style 的标签,一般这个标签会放在 head 部分。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内嵌样式</title> <style> span { /*color: #ff0000;*/ color: #f00; font-weight: bold; /*text-decoration: underline;*/ } </style> </head> <body> <div>这是第一个样式的<span>使用</span>,<span>采用的是行内样式</span></div> </body> </html>
注意
这种方式有问题吗?
有问题,如果很多文件中都需要这个样式,那么,我们仍然需要在各个文件中来编写一次。如何解决?
可以采用外链样式。
3.外链样式
外链样式也叫外部样式,我们把需要的公共的样式编写在一个单独的文件,这个文件的后缀必须是 .css,然后在需要引入的文件中通过 link 标签来使用这个外部样式文件。
首先定义外部样式:通常我们需要把外部样式放到一个名为 css 的目录下。
/* div的样式:颜色为蓝色,字体为微软雅黑,字体大小为 14 像素 span的样式:字体为斜体,绿色 */ div { color: #0000ff; font-family: '微软雅黑'; font-size: 14px; } span { font-style: italic; color: green; }
然后编写页面,并使用外部样式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外链样式</title> <link rel="stylesheet" href="css/outer.css"> </head> <body> <div>这是第一个样式的<span>使用</span>,<span>采用的是行内样式</span></div> </body> </html>
通过 link 标签来使用外部样式,在 link 标签中需要指定 rel 属性,它的值是 stylesheel,并通过 href 属性来引入外部的样式文件地址。
注意
这种方式有问题吗?
有可能会浪费内存空间。
4.@import
还可以使用 @import 语句来引入外部的样式,它需要放到 style 标签中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外链样式</title> <!--<link rel="stylesheet" href="css/outer.css">--> <style> @import "css/outer.css"; </style> </head> <body> <div>这是第一个样式的<span>使用</span>,<span>采用的是行内样式</span></div> </body> </html>
5.注意
加载顺序
假设我们的页面既用到外部样式,也用到内嵌样式,还用到行内样式,那么谁起作用?
1.外部样式编写
/*outer2.css*/ div { color: red; font-size: 16px; }
2.编写页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>几种使用方式的加载顺序</title> <link rel="stylesheet" href="css/outer2.css"> <style> div { color: blue; } </style> </head> <body> <div style="color: green;">这是一个块元素</div> </body> </html>
通过上面的案例我们发现,当几个样式中有相同部分时,行内样式优先于页面样式,而页面样式优先于外部样式。简单来说:就近原则。