首页 > 代码库 > 3、CCS样式表

3、CCS样式表

  

一、CCS样式表的分类(优先级从低到高):

  1、浏览器默认样式表

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

    使用<link>标签让每个页面都连接到样式表,<link>标签在head区域内使用
    <link type="text/css" rel="stylesheet" href="http://www.mamicode.com/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="http://www.mamicode.com/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>

3、CCS样式表