一、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属性)

 <%@ 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>

     <!-- 内嵌样式表放在<style>标签下 -->

     <style type="text/css">

        table.color{color:red;}

        p.color{color:yellow}

        body.color{color:green ;}

     </style>

   </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>  <!-- 显示为绿色 -->

   </body>

 </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>

3、CCS样式表的更多相关文章

  1. CCS样式表

    一.css样式表 1.样式表分类 1.内联式 <p style="font-size:18px;">This is an apple</p> 2.内嵌样式表 ...

  2. CCS样式表小结

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  3. CCS基础样式表

    一.css样式表 1.样式表分类 1.内联式 <p >This is an apple</p> 2.内嵌样式表 作为一个独立的区域 内嵌在网页里面,必须写在head标签里面 & ...

  4. CSS样式表分类

    1.内联样式表 <p  style="font-size:11px;">内联样式表</p> 2.内嵌样式表 写在head标签里 <style  typ ...

  5. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  7. CSS样式表基础

    CSS的样式表其实就是美观页面的,加一些样式. 一.样式表的三种分类: ①内联样式:写在某一个标签里面的样式. 优点:控制精确. 缺点:代码重用性差.(太多了不好写)页面代码乱.(太乱,后期不方便看) ...

  8. 深入理解脚本化CSS系列第四篇——脚本化样式表

    × 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...

  9. CSS：CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

随机推荐

  1. Web报表工具FineReport中JavaScript的使用

    报表软件FineReport采用的是jQuery v1.9.2框架,jQuery是一个快速的,简洁的JavaScript库,能让用户更方便地处理HTML documents.events,实现动画效果 ...

  2. 某中国500强企业BI系统成功应用案例

    随着某集团20多年的不断发展发展,现已成为中国500强.中国大企业集团竞争力前25强.中国信息化标杆企业和国家重点火炬高新技术企业.拥有总资产数十亿元.员工数万名,涉足电力.家电.能源.等多个行业,并 ...

  3. 【2016-11-15】【坚持学习】【Day26】【通用的SQLHelper】

    今天看DevDemo源码时候看到一个写得很好的SQLHelper 代码 public class SqlHelper<T, Command> where T : DbConnection ...

  4. 【2016-10-28】【坚持学习】【Day15】【MongoDB】【初识】

    其实公司产品一直有使用mongodb,只不过我一直没有接触这一块,也没有主动的了解.实在说不过去.于是,准备写几个文章,认真学习一下它. 今天花了几个小时学习了入门 定义: 非关系型数据库, NoSQ ...

  5. java操作Redis

    需要使用如下jar包 <!-- https://mvnrepository.com/artifact/redis.clients/jedis --> <dependency> ...

  6. 错题分析--ASP.NET

    解析:支架模板支持的类型包括Empty.Create.Delete.Details.Edit.List 解析:Spring支持4种依赖检查:默认的是none.因此说法不正确的结果是D 解析:各层之间不 ...

  7. Spring中的JDK动态代理

    Spring中的JDK动态代理 在JDK1.3以后提供了动态代理的技术,允许开发者在运行期创建接口的代理实例.在Sun刚推出动态代理时,还很难想象它有多大的实际用途,现在动态代理是实现AOP的绝好底层 ...

  8. 使用codemodel生成Java代码

    例子 JCodeModel cm = new JCodeModel(); JDefinedClass dc = cm._class("foo.Bar"); dc.annotate( ...

  9. Ubuntu14.04下配置固定IP

    实验室需要构建静态网站作为个人知识管理工具,每个人要求都有属于自己的静态网站进行知识积累和交流.但是实验室的路由有时候会关闭,重启后给每台机器重新分配ip,因此为了方便访问每台主机,需要设置静态ip. ...

  10. ubuntu系统下，gsl 库链接问题 -undefined reference to `cblas_xxx`

    今天在ubuntu系统下进行程序调试的时候出现以下错误信息: [ %] Linking CXX executable ../test_coco /usr/local/lib/libgsl.so: un ...