CSS引入样式

来源：互联网发布：台湾谈大陆2016网络编辑：程序博客网时间：2024/04/30 09:36

一、内联样式，style属性
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>CSS学习</title></head><body><p style="color:#FF0000; font-size:20px; text-decoration:underline;">第一段</p><p style="color:#000000; font-style:italic;">第二段</p><p style="color:#FF00FF; font-size:25px; font-weight:bold;">第三段</p></body></html>
二、内嵌样式，嵌入在head中
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>CSS学习</title><style type="text/css">p{color:#FF00FF;text-decoration:underline;font-weight:bold;font-size:25px;}</style></head><body><p>第一段</p><p>第二段</p><p>第三段</p></body></html>
三、引入外部样式：link
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>CSS学习</title><link rel="stylesheet" type="text/css" href="CSS/1.css"></head><body><h2>CSS标题1</h2><p>段落</p><h2>CSS标题2</h2><p>段落2</p></body></html>
通过右键->properties查看index.jsp路径为：D:\workspace\first\WebRoot\index.jsp，1.css路径为：D:\workspace\first\WebRoot\CSS\1.css
注意：CSS文件夹放在WEB-INF文件夹下识别不了，放在IMA-G文件夹下也识别不了，但是ima-g路径下能识别，难道路径不能为大写字母加-？还是电脑问题？
四、导入外部样式文件import
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>CSS学习</title><style type="text/css">@import "CSS/1.css"</style></head><body><h2>CSS标题1</h2><p>段落</p><h2>CSS标题2</h2><p>段落2</p></body></html>
五、各种方式优先级

内联>内嵌>外部导入>外部链接

1 0