一、内联样式,style属性
二、内嵌样式,嵌入在head中<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>
三、 引入外部样式:link<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>
通过右键->properties查看index.jsp路径为:D:\workspace\first\WebRoot\index.jsp,1.css路径为:D:\workspace\first\WebRoot\CSS\1.css<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>
注意: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>
五、 各种方式优先级
内联>内嵌>外部导入>外部链接