使用CSS样式的几种方式
CreateTime--2017年10月11日16:45:26
Author:Marydon
a.外部样式
a1.链接式（推荐使用）
<link href="path+*.css" type="text/css" rel="stylesheet"/>
说明：
link标签的rel属性用于规定当前文档与被链接文档之间的关系；
只有rel属性的"stylesheet"值得到了所有浏览器的支持，指示被链接的文档是一个样式表。
a2.导入式
<style type="text/css"> @import url(path+*.css); </style>
区别：链接式-先加载CSS样式，后加载页面（先布局，后加载内容），导入式-先加载页面，后加载CSS样式（先加载内容，后布局）
b.内部样式
在<head></head>标签体内，声明：
<style type="text/css"> /*设置CSS样式*/ div{ background-color:#fff; } </style>
c.行内样式
直接在标签上声明style属性
<span style="color:yellow;">CSS设置字体颜色</span>
小结：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="keywords" content="关键词,关键词"> <meta name="description" content="本网页内容描述"> <title>请输入网页标题</title> <!-- css外联样式 --> <link href="css样式文件URL" type="text/css" rel="stylesheet"/> <!-- css内联样式 --> <style type="text/css"> *{padding:0;margin:0;} </style> </head> <body> <div style="500px;height:500px;border:1px solid red;">css行内样式</div> </body> </html>
综合运用：
在jsp页面上，使用EL表达式获取后台数据，根据不同的值引用不同的css文件
<c:choose> <c:when test="${!empty cookie.theme}"> <c:set var="theme" value="${cookie.theme.value}" /> <link id="ThemeStyle" type="text/css" rel="stylesheet" href="<c:url value="/commons/theme/${cookie.theme.value}/style.css"/>" /> </c:when> <c:otherwise> <c:set var="theme" value="default" /> <link id="ThemeStyle" type="text/css" rel="stylesheet" href="<c:url value="/commons/theme/default/style.css"/>" /> </c:otherwise> </c:choose>
注：
关于CSS样式优先级的说明请移步至文章：CSS知识点集锦