一、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. docker

    docker pull centos docker images docker run -ti centos cat /etc/redhat-release ##################### ...

  2. WPFTookit Chart 入门

    如何使用WPFToolKit Chart private void button1_Click(object sender, EventArgs e) { var s = new Series(); ...

  3. 数据库SQL基本操作

    1.查询表结构 desc 表名 2.显示当前连接用户 show user 3.查看系统拥有哪些用户 select * from all_users; 4.查询当前用户下所有对象 select * fr ...

  4. 机器学习库shark安装

    经过两天的折腾,一个对c++和机器学习库的安装都一知半解的人终于在反复安装中,成功的将shark库安装好了,小小纪念一下,多亏了卡门的热心帮忙. shark的安装主要分为以下几个部分: (1)下载 s ...

  5. Android与Struts2简单json通信

    具体要求是: 服务器端得到客户端传递来的数据,并返回给客户端一条json格式的字符串 闲话不多说,直接上代码 首先是服务器端代码:建立一个web工程,导入struts2和json的jar包,并在web ...

  6. SQL高级查询：嵌套和分页

    1.嵌套子查询 --查询最近一次oop考试没有参加考试的学生 select StudentName from Student where StudentNo not in( select Studen ...

  7. webpack中alias别名配置

    resolve:{ alias:{ bootcss:__dirname + '/node_modules/.3.3.7@bootstrap/dist/css/bootstrap.min.css' } ...

  8. linux swap 分区那点事儿

    前言 前段时间在用程序对较大数据进行处理时,发现自己电脑原有内存不够用而经常行卡死,于是想到了利用swap分区来扩容内存的方式.现在做一个简要的总结: swap分区的概念 初试swap分区是在进入实验 ...

  9. 玩 perf

    有一个进程happy在执行,另一个进程spy发送了一个信号把happy给杀死了 我怎么能通过perf抓到spy进程? happy进程一直执行 在spy进程中调用kill(happy's pid) ,发 ...

  10. caffe的python接口学习（6）：用训练好的模型（caffemodel）来分类新的图片

    经过前面两篇博文的学习,我们已经训练好了一个caffemodel模型,并生成了一个deploy.prototxt文件,现在我们就利用这两个文件来对一个新的图片进行分类预测. 我们从mnist数据集的t ...