3、CCS样式表

一、CCS样式表的分类（优先级从低到高）：

　　1、浏览器默认样式表

　　2、外部样式表：在外部创建的.ccs文件中。使用外部样式表可以使样式应用于多个网页。通过这个方法只需改动一个文件就能改变整个网站的外观　

使用<link>标签让每个页面都连接到样式表，<link>标签在head区域内使用
　　　　<link type="text/css" rel="stylesheet" href="css文件" />
　　　　注【意】不要在属性值和单位间加空格

3、内嵌样式表：在<head>标签内。只能用于当前页面

4、行内样式表：在<html>标签中的元素内。在元素上用style属性指定样式。如：

11111111

二、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元素只能有一个类属性，但一个类属性里可以指定多个选择器类，多个选择器类用空格来分隔。如：22222

　　2、ID选择器：可以为不同的HTML元素定义相同的样式。如：

定义：#redColor{color:red}
　　　　使用：111111

ID选择器

五、外部样式表的使用

　　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>

posted @ 2016-09-04 18:28 陈泽俊阅读(1307) 评论(0) 编辑收藏举报

刷新页面返回顶部

陈泽俊

3、CCS样式表

公告