3、CCS样式表
一、CCS样式表的分类（优先级从低到高）：
1、浏览器默认样式表
2、外部样式表：在外部创建的.ccs文件中。使用外部样式表可以使样式应用于多个网页。通过这个方法只需改动一个文件就能改变整个网站的外观
使用<link>标签让每个页面都连接到样式表，<link>标签在head区域内使用
<link type="text/css" rel="stylesheet" href="css文件" />
注【意】不要在属性值和单位间加空格
3、内嵌样式表：在<head>标签内。只能用于当前页面
4、行内样式表：在<html>标签中的元素内。在元素上用style属性指定样式。如：
<p style="color:red; text-align:center">11111111</p>
二、CCS基本语法：
1、CSS的定义是由三个部分构成：选择器（selector），属性（properties）和属性的取值（value） selector{property:value}。
a）、选择器是你希望去定义的HTML元素
b）、可以将选择器组合，用逗号分隔每一个选择器 h1,h2,h3,h4{color:red}
b）、多个属性之间用分号链接。
c）、如果属性的值是多个单词组成，必须在值上加引号。
/*（段落排列居中，段落中文字为黑色，字体是sans serif）*/
p{ text-align: center; color: black; font-family: "sans serif" }
2、CCS注释：/*注释类容*/
三、选择器的分类：
1、类选择器：将同一类型的HTML元素定义出不同的样式，在HTML元素中使用类属性(class属性)
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 7 <html> 8 <head> 9 <title >CCS测试页面</title> 10 <!-- 内嵌样式表放在<style>标签下 --> 11 <style type="text/css"> 12 table.color{color:red;} 13 p.color{color:yellow} 14 body.color{color:green ;} 15 </style> 16 </head> 17 18 <body class="color"> 19 <table class="color"> 20 <tr> 21 <td><p >This is my JSP page1.</p></td> <!-- 显示为红色 --> 22 </tr> 23 <tr> 24 <td><p class="color">This is my JSP page2.</p></td> <!-- 显示为黄色 --> 25 </tr> 26 <tr> 27 <td><p class="color">This is my JSP page3.</p></td> <!-- 显示为黄色 --> 28 </tr> 29 </table> 30 <p >This is my JSP page4.</p> <!-- 显示为绿色 --> 31 </body> 32 </html>
【注】1、可以省略标签名称直接定义，这样就可以在所有的HTML元素中使用。如：.right {text-align: right}
2、个HTML元素只能有一个类属性，但一个类属性里可以指定多个选择器类，多个选择器类用空格来分隔。如：<p class="center redColor">22222</p>
2、ID选择器：可以为不同的HTML元素定义相同的样式。如：
定义：#redColor{color:red}
使用：<p id="redColor">111111</p>
<font id="redColor" >ID选择器</font>
五、外部样式表的使用
1、创建一个.ccs文件，在这个ccs文件中编写要实现的样式。如创建一个TestCCS.ccs文件--类容如下
table.color{ color:red; } p.color{ color:yellow } body.color{ color:green ; } input { background-color: blue; }
2、在相应jsp页面的<head>标签下利用<link>标签引入.ccs文件。代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title >CCS测试页面</title> <!-- 外部样式表 --> <!-- type="text/css"--指文件的类型是样式表文本 rel=”stylesheet”是指在页面中使用这个外部的样式表 href="TestCCS.css"是文件所在的位置 --> <link type="text/css" rel="stylesheet" href="TestCCS.ccs"> </head> <body class="color"> <table class="color"> <tr> <td><p >This is my JSP page1.</p></td> <!-- 显示为红色 --> </tr> <tr> <td><p class="color">This is my JSP page2.</p></td> <!-- 显示为黄色 --> </tr> <tr> <td><p class="color">This is my JSP page3.</p></td> <!-- 显示为黄色 --> </tr> </table> <p >This is my JSP page4.</p> <!-- 显示为绿色 --><font></font> </body> </html>
