- 内联样式
在JSP页面的<head>标签内，使用<style>标签编写CSS样式。这种方法适用于仅需要为单个JSP页面设置样式的情况。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个使用内联样式的示例。</p>
</body>
</html>- 外部样式表
将CSS代码保存在一个单独的文件中，然后在JSP页面的<head>标签内，使用<link>标签引用该CSS文件。这种方法适用于多个JSP页面需要共享相同样式的情况。
首先，创建一个名为styles.css的CSS文件，内容如下：
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}然后，在JSP页面的<head>标签内，使用<link>标签引用该CSS文件：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个使用外部样式表的示例。</p>
</body>
</html>- 导入外部样式表（推荐）
在JSP页面的<head>标签内，使用<style>标签导入外部CSS文件。这种方法与外部样式表类似，但不需要在浏览器中下载额外的CSS文件。推荐使用这种方法。
首先，创建一个名为styles.css的CSS文件，内容同上。然后，在JSP页面的<head>标签内，使用<style>标签导入该CSS文件：
<!DOCTYPE html>
<html>
<head>
<style>
@import url("styles.css");
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个使用导入外部样式表的示例。</p>
</body>
</html>- 内嵌样式表（不推荐）
在JSP页面的<head>标签内，使用<style>标签直接编写CSS代码。这种方法会导致HTML和CSS代码混合在一起，不利于代码维护。不推荐使用这种方法。
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightblue;} h1 {color: white; text-align: center;} p {font-family: verdana; font-size: 20px;} <!-- 这是注释 --> .highlight {background-color: yellow;} /* 这是另一个注释 */ .center {margin: auto; width: 50%;} /* 这也是一个注释 */ .clearfix::after {content: ""; display: table; clear: both;} /* 这是最后一个注释 */ .hidden {display: none;} /* 这是最后一个注释 */ .visible {visibility: visible;} /* 这是最后一个注释 */ .invisible {visibility: hidden;} /* 这是最后一个注释 */ .collapse {display: none;} /* 这是最后一个注释 */ .expand {display: block;} /* 这是最后一个注释 */ .fade {opacity: 0; transition: opacity .5s ease-in-out;} /* 这是最后一个注释 */ .fade.in {opacity: 1;} /* 这是最后一个注释 */ .fade.out {opacity: 0;} /* 这是最后一个注释 */ .slide-left {transform: translateX(-100%); transition: transform .5s ease-in-out;} /* 这是最后一个注释 */ .slide-left.in {transform: translateX(0);} /* 这是最后一个注释 */ .slide-right {transform: translateX(100%); transition: transform .5s ease-in-out;} /* 这是最后一个注释 */ .slide-right.in {transform: translateX(0);} /* 这是最后一个注释 */ .slide-up {transform: translateY(-100%); transition: transform .5s ease-in-out;} /* 这是最后一个注释 */ .slide-up.in {transform: translateY(0);} /* 这是最后一个注释 */ .slide-down {transform: translateY(100%); transition: transform .5s ease-in-out;} /* 这是最后一个注释 */ .slide-down.in {transform: translateY(0);} /* 这是最后一个注释 */ .rotate {transform: rotate(90deg); transition: transform .5s ease-in-out;} /* 这是最后一个注释 */ .rotate.in {transform: rotate(0);} /* 这是最后一个注释 */ .scale {transform: scale(0); transition: transform .5s ease-in-out;} /* 这是最后一个注释 */ .scale.in {transform: scale(1);} /* 这是最后一个注释 */ .translate {transform: translateX(100%) translateY(100%); transition: transform .5s ease-in-out;} /* 这是最后一个注释 */ .translate.in {transform: translateX(0) translateY(0);} /* 这是最后一个注释 */ @media (max-width: 600px) {body {background-color: lightgreen;}} /* 这是最后一个注释 */ @media (min-width: 601px) and (max-width: 800px) {body {background-color: lightyellow;}} /* 这是最后一个注释 */ @media (min-width: 801px) and (max-width: 1024px) {body {background-color: lightblue;}} /* 这是最后一个注释 */ @media (min-width: 1025px) and (max-width: 1280px) {body {background-color: lightgray;}} /* 这是最后一个注释 */ @media (min-width: 1281px) {body {background-color: white;}} /* 这是最后一个注释 */ @media print, projection, screen and (min-resolution: 300dpi) {body {background-color: black;}} /* 这是最后一个注释 */ @media print, projection, screen and (min-resolution: 72dpi) {body {background-color: red;}} /* 这是最后一个注释 */ @media print, projection, screen and (min-resolution: 350dpi) and (min-width: 601px) and (max-width: 800px) {body {background-color: orange;}} /* 这是最后一个注释 */ @media print, projection, screen and (min-resolution: 350dpi) and (min-width: 801px) and (max-width: 1024px) {body {background-color: yellow;}} /* 这是最后一个注释 */ @media print, projection, screen and (min-resolution: 350dpi) and (min-width: 1025px) and (max-width: 1280px) {body {background-color: green;}} /* 这是最后一个注释 */ @media print, projection, screen and (min-resolution: 350dpi) and (min-width: 1281px) and (orientation: landscape) {body {background-color: blue;}} /* 这是最后一个注释 */ @media print, projection, screen and (min-resolution: 350dpi) and (min-width: 1281px) and (orientation: portrait) {body {background-color: purple;}} /* 这是最后一个注释 */ @media print, projection, screen and (min-resolution: high) and (min--moz-devicepixelratio: 1) and (min-resolution: normal) and (min--webkit-devicepixelratio=1) and (min--oem-devicepixelratio=1) and (min--msaspect ratio=1) and (min--apple-devicepixelratio=1){body{background-color: darkmagenta;}}/*这是最后一个注释*/@media print, projection, screen and (min--moz-devicepixelratio=1),print,projection,screen原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/128664.html
微信扫一扫 