一、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. 关于域名系统DNS解析IP地址的一些总结

    关于域名系统DNS(Domain Name System) 从域名中解析出IP地址. DNS主要由3部分组成: ① 名称解析器(resolver) ② 域名空间(domain name space) ...

  2. 防SQL注入

    addslashes(); 一.SQL注入简介 SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编程时的疏忽,通过SQL语句,实现无帐号登录,甚至篡改数据库 ...

  3. 嵌入式Linux驱动学习之路(十六)输入子系统

    以前写的一些输入设备的驱动都是采用字符设备处理的.问题由此而来,Linux开源社区的大神们看到了这大量输入设备如此分散不堪,有木有可以实现一种机制,可以对分散的.不同类别的输入设备进行统一的驱动,所以 ...

  4. 只需2分钟，简单构建velocity web项目

    Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template language)来引用由java代码定义的对象 velocity ...

  5. iOS 底层框架的浅析

    1.简介 IOS是由苹果公司为iPhone.iPod touch和iPad等设备开发的操作系统. 2.知识点 iPhone OS(现在叫iOS)是iPhone, iPod touch 和 iPad 设 ...

  6. 【swift学习笔记】一.页面转跳的条件判断和传值

    在转跳页面之前我们可能会判断一下是否有输入正确的数据,如下图所示,如果没有数据输入则弹出提示,不进行转跳. 一:页面转跳 1.第一个页面的上放上一个Label一个textfield和一个按钮 2.在第 ...

  7. webpack --- 详解

    官网: http://webpack.github.io/docs/using-loaders.html 简书: http://www.jianshu.com/p/42e11515c10f

  8. 基于Emgu CV的人脸检测代码

    这个提供的代码例子是Emgu CV提供的源码里面自带的例子,很好用,基本不需要改,代码做的是人脸检测不是人脸识别,这个要分清楚.再就是新版本的Emgu CV可能会遇到系统32位和64位处理方式有区别的 ...

  9. bzoj4462: [Jsoi2013]编程作业

    KMP还是有点用处的嘛qwq 对于小写字母,修改其为前一个这个小写字母和它的距离 然后跑KMP就行了 跑得飞快 #include <iostream> #include <cstdi ...

  10. 微信签名算法的服务端实现(.net版本)

    一.概要 微信此次开放JS接口,开放了一大批api权限,即使在未认证的订阅号也可以使用图像接口,音频接口,智能接口,地理位置,界面操作,微信扫一扫等功能.要知道:以前订阅号只能接受和被动回复用户消息而 ...