一、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. 无需FQ，自建本地CDN，秒上StackOverFlow！

    StackOverflow是一个面向程序员的技术问答平台.可是在不FQ的情况下,浏览StackOverflow是一件让人极不舒服的事情,常常需要等待数十秒页面才慢慢显示出来.本文我教大家一种能够流畅地 ...

  2. Caffe源码解析4： Data_layer

    转载请注明出处,楼燚(yì)航的blog,http://home.cnblogs.com/louyihang-loves-baiyan/ data_layer应该是网络的最底层,主要是将数据送给blo ...

  3. 洛谷P1372 又是毕业季I&&P1414 又是毕业季II[最大公约数]

    P1372 又是毕业季I 题目背景 “叮铃铃铃”,随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离别的不舍,憧憬着未来仍毋忘逝去的歌.1000多个日夜的欢笑和泪水,全凝聚 ...

  4. 使用JSP开发动态网站基础

    1. 什么是动态网页? 动态网页是指在服务器端运行的程序或者网页,它们会随不同客户.不同时间,返回不同的网页. 注意:在静态网页中插入flash ,虽然flash是在动的,但是并不是说这个网页就是动态 ...

  5. 《Java程序设计与数据结构教程（第二版）》学习指导

    <Java程序设计与数据结构教程(第二版)>学习指导 欢迎关注"rocedu"微信公众号(手机上长按二维码) 做中教,做中学,实践中共同进步! 原文地址:http:// ...

  6. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  7. JAVA的垃圾回收机制

    1. 垃圾回收的意义 在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之前不能分配给其它对象:而在Java中,当没有对象引用指向原先分配给某个对象的内存时,该内存便成为垃圾.JVM的 ...

  8. hibernate通过xml配置文件实现表与实体的映射

    这里讨论的是一对多的关系 在做公交卡系统,会涉及到两张表,忽略两种表的作用,只关心他们之间的关系 : 卡规格表和卡类表,一种卡规格会对应多个卡类 实体类: /** * 卡类型表的实体 */ publi ...

  9. EL表达式怎么获取Map的动态key？

    缘由 El表达式在调用Map的时候,后台传过来的Map的key不一定是一个固定的值,需要根据另外一个对象的id作为key来put,或者更加复杂的组合id+"string"作为一个k ...

  10. Html定位精要

    Html定位基础 Html的布局是文档流模型,块元素独占一行,内联元素并列一行. 相对定位 position: relative 相对于自己定位 不脱离文档流,元素原有位置被保留 绝对定位 posit ...