3、CCS样式表

  

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

 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 7 <html>
 8   <head>
 9     <title >CCS测试页面</title>
10     <!-- 内嵌样式表放在<style>标签下 -->
11     <style type="text/css">
12        table.color{color:red;}
13        p.color{color:yellow}
14        body.color{color:green ;}
15     </style>
16   </head>
17
18   <body class="color">
19      <table class="color">
20         <tr>
21            <td><p >This is my JSP page1.</p></td>   <!-- 显示为红色 -->
22         </tr>
23         <tr>
24            <td><p class="color">This is my JSP page2.</p></td>   <!-- 显示为黄色 -->
25         </tr>
26         <tr>
27            <td><p class="color">This is my JSP page3.</p></td>   <!-- 显示为黄色 -->
28         </tr>
29      </table>
30      <p >This is my JSP page4.</p>  <!-- 显示为绿色 -->
31   </body>
32 </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>
时间: 2024-10-12 22:42:38

3、CCS样式表的相关文章

html ccs样式表

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css">

css样式表

样式表主要分为三类:内联式.内嵌式和外部样式表. 内联式样式表是跟html联合显示,写在body标签里边,属于控制精确,但是可用性差.在三种样式中会优先显示作用. 内嵌式是作为独立区域写在head标签里边.body标签中有对应的标签:<div id/name/class="  "></div>. 外部样式表是新建一个css文件,用来放样式表,在html中用link链接. <link type="text/css" rel="s

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

css002 创建样式和样式表

创建样式和样式表 一个样式表包含多个样式 样式表的种类 1.内部样式表,存放在<head></head>之间.如: <head> <style>   (该标签是html的标签,不是css的) h1{color: red} </style> </head> 2.外部样式表 Html5 <link rel=”stylesheet” href=”style.css”> Html4.01 <link rel=”stylesh

通过Qt4.2样式表定制程序外观

通过Qt4.2样式表定制程序外观 1. 何为Qt样式表2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. 处理伪状态8. 使用子部件定义微观样式 8.1. 相对定位    8.2. 绝对定位 摘要 由于Qt样式表的引入,定制Qt部件的外观样式变得非常简单. 无论你是想仅仅修改一个现有部件的外观,还是想从零开始设计一套全新的界面风格, 现在都有了一种新的方法而不必再去继承并实现一个QStyle的子类. 1. 何为Qt样式表 Qt 样式表的思想很大程度上是来自于

WebService错误:使用 XSL 样式表无法查看 XML 输入

在浏览器中输入URL: 'http://localhost/test.aspx'  出现下面错误提示信息: 无法显示 XML 页. 使用 XSL 样式表无法查看 XML 输入.请更正错误然后单击 刷新按钮,或以后重试. -------------------------------------------------------------------------------- 名称以无效字符开头.处理资源 'http://localhost/test.aspx' 时出错.第 1 行,位置: 2

css概述、css样式表分类、选择器分类、css基础样式

1 . 样式表  Cascading Style Sheet css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省网络带宽 使用独立于网页的CSS,有利于网页被搜索引擎收录 嵌入ID>外部ID>嵌入class>外部class>嵌入标签>外部标签     1.1  引入方式 四种 style=""  行内样式表 <style>   内部样式表 <link rel=&

样式表(选择器))(样式)

一.选择器(样式表用来选取元素的) .标签:根据标签名选取元素 .class(.点)(根据class名来选取元素) .id(#井号)(根据id名来筛选出唯一元素) .复合:(逗号并列div,span)(空格后代#list li)(点筛选div·s) 二.样式 1.大小(width宽度)(height高度) 2.背景(background-color:背景颜色)(background-image:背景图片)(background-repeat:背景图的平铺方式)(background-positi

样式表 格式布局

一.样式表 1.分类 (1)内联样式表 即在body里面设置style. (2)内嵌样式表 即在head里面设置style. (3)外部样式表 即在CSS里面设置style. 2.选择器 (1)标签选择器.用标签名做选择器. (2)class选择器.都是以“.”开头. (3)ID选择器.以“#”开头. (4)复合选择器   用“,”隔开,表示并列. 用空格隔开,表示后代.相当于共有的. 筛选“.”. 二.样式属性 (一)背景与前景 2.前景字体: (二)边界和边框 (三) 链接的style: