一、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. cefsharp设置默认语言

    cefsharp是不错的浏览器内核封装版本之一,默认语言是en-US,这个一直困扰着项目,项目好多处需修改,后来经多次尝试,才发现,原来设置默认语言这么简单. CefSharp.Settings se ...

  2. Django 1.9 支持中文(转)

    昨天Django1.9发布了,今天我才刚开始学习Django,然后有一个问题就卡住了——如何支持中文?上网上查了好多资料都不好使,最后我搜索Django文件夹才发现,在1.9版本里,简体中文代码是zh ...

  3. C++系统预定义4个用于标准数据流对象

    C++系统预定义4个用于标准数据流对象 cin   cout   cerr   clog C++里关于cerr,clog,cout三者的区别: cerr(无缓冲标准错误)-----没有缓冲,发送给它的 ...

  4. 嵌入式Linux驱动学习之路(二十)USB设备驱动

    USB在接入系统的时候,以0的设备ID和主机通信,然后由主机为其分配新的ID. 在主机端,D+和D-都是下拉接地的.而设备端的D-接上拉时,表明此设备为高速设备:12M/s. D+接上拉时则是全速设备 ...

  5. Python黑客编程ARP欺骗

    Python灰帽编程 3.1 ARP欺骗 ARP欺骗是一种在局域网中常用的攻击手段,目的是让局域网中指定的(或全部)的目标机器的数据包都通过攻击者主机进行转发,是实现中间人攻击的常用手段,从而实现数据 ...

  6. python_面向对象编程

    一.编程范式 程序员通过特定的语法+数据结构+算法告诉计算机如果执行任务,实现这个过程有不同的编程方式,对这些不同的编程方式进行归纳总结得出来的编程方式类别,即为编程范式 编程范式:面向过程编程.面向 ...

  7. MySQL 常用的sql语句小结（待续）

    mysql 常用的sql语句 1.查看数据库各个表中的记录数 USE information_schema; SELECT table_name,table_rows FROM tables WHER ...

  8. IDEA 分享项目到 Git@OSC/GitHub

    前提:新开项目,需要在 Git@OSC 建立版本库管理. 1.当然是先在Git@OSC上创建仓库,拿到Git@OSC仓库的HTTP连接 https://git.oschina.net/*****/** ...

  9. Spark在Ubuntu中搭建开发环境

    一.在Windows7中安装Ubuntu双系统 工具/原料   windows7 64位 ubuntu 16.04 32位 UltraISO最新版(用来将镜像文件烤到U盘中) 空U盘(若有文件,请先备 ...

  10. 修改AssemblyInfo.cs自动生成版本号

    一. 版本号自动生成方法 1.把 AssemblyInfo.cs文件中的[assembly:AssemblyVersion("1.0.0.0")]改成[assembly:Assem ...