新书推介：《语义网技术体系》
作者：瞿裕忠，胡伟，程龚
   XML论坛     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
    		•   Add to Google

    >> 本版讨论XSL,XSLT,XSL-FO,CSS等技术
    [返回] 中文XML论坛 - 专业的XML技术讨论区 → XML.ORG.CN讨论区 - XML技术 → 『 XSL/XSLT/XSL-FO/CSS 』 → [原创]精通样式表技术笔记（一） ◇查看新帖 ◇ 用户列表 ◇

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 16610 个阅读者浏览上一篇主题  刷新本主题   树形显示贴子　浏览下一篇主题
     * 贴子主题： [原创]精通样式表技术笔记（一） 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     卷积内核 帅哥哟，离线，有人找我吗？
      
      
      威望：8
      头衔：总统
      等级：博士二年级(版主)
      文章：3942
      积分：27590
      门派：XML.ORG.CN
      注册：2004/7/21

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给卷积内核发送一个短消息 把卷积内核加入好友 查看卷积内核的个人资料 搜索卷积内核在『 XSL/XSLT/XSL-FO/CSS 』的所有贴子 访问卷积内核的主页 引用回复这个贴子 回复这个贴子 查看卷积内核的博客楼主
    发贴心情 [原创]精通样式表技术笔记（一）

    1、第一个例子：
    <HTML>
    <HEAD>
    <TITLE>My First Stylesheet</TITLE>
    </HEAD>
    <BODY>
    <H1>Stylesheets: The Tool of the Web Design Gods</H1>
    <P>Amaze your friends! Squash your enemies!</P>
    </BODY>
    </HTML>

    现在，让我们给它加一些样式表。只需在最初的<HTML>和 <BODY>标签之间插入以下代码：

    <STYLE TYPE="text/css">
    <!--
    H1 { color: green; font-size: 37px; font-family: impact }
    P { text-indent: 1cm; background: yellow; font-family: courier }
    -->
    </STYLE>

    2、串接样式表的核心是规则。最简单的规则就象这样：  

    H1 { color: green }

    整个规则告诉浏览器将所有<H1></H1>包围的文字以绿色显示。

    每一条规则包含一个选择及说明。在上述例子中，H1就是选择，
    它是一个附带样式功能的HTML标签。说明用于定义实际的样式，
    包括两部分：属性（本例中即color）和参数（green）。


    3、任何HTML标签都可用作标签。
    所以你可以将样式表的信息附加到任何要素。
    从通常 的<P>到<CODE>及<TABLE>内容。
    你甚至可以通过将样式表用于<IMG>将串接样式表的属性用于图象。

    从我们的第1个样式表实例中可以发现，你可以归类样式表的规则。
    我们将3种不同的说明都用于<P>。

    与之类似，你也可以归类选择：

    H1, P, BLOCKQUOTE
    { font-family: arial }

    这项规则设定所以位于<H1>、<P>和<BLACKQUOTE>的标签将用Arial字体显示。


    4、继承性

    样式表的规则可从母体延续到子体。下面是一个例子：

    B { color: blue }

    这项规则告诉浏览器将所有<B>之内的文字用蓝色显示。但是在下列情况下，浏览器该如何处理呢？

    <B>All my Web pages will use cascading stylesheets within <I>four</I> weeks.</B>

    对于<I>标签并没有设定样式，但因为<I>位于<B>之中，所以它将继承母体<B>设定的样式，也以蓝色显示。


    5、将样式表加到网页的四种方法：

       将样式表植入HTML文件中。
       将一个外部样式表链接到HTML文件上。
       将一个外部样式表输入到HTML文件中。
       将样式表加入到HTML文件行中。


       收藏   分享  
    顶(1)
      




    ----------------------------------------------
    事业是国家的，荣誉是单位的，成绩是领导的，工资是老婆的，财产是孩子的，错误是自己的。

    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2004/9/2 8:21:00
     
     ADOM 帅哥哟，离线，有人找我吗？
      
      
      等级：大一新生
      文章：4
      积分：76
      门派：XML.ORG.CN
      注册：2004/9/30

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给ADOM发送一个短消息 把ADOM加入好友 查看ADOM的个人资料 搜索ADOM在『 XSL/XSLT/XSL-FO/CSS 』的所有贴子 引用回复这个贴子 回复这个贴子 查看ADOM的博客第2楼
    发贴心情 
    讲解得好,顶@
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2004/10/13 9:21:00
     
     qanyy 帅哥哟，离线，有人找我吗？
      
      
      等级：大一(高数修炼中)
      文章：16
      积分：128
      门派：XML.ORG.CN
      注册：2004/10/9

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给qanyy发送一个短消息 把qanyy加入好友 查看qanyy的个人资料 搜索qanyy在『 XSL/XSLT/XSL-FO/CSS 』的所有贴子 引用回复这个贴子 回复这个贴子 查看qanyy的博客第3楼
    发贴心情 
    雖然我沒有看完，但我頂一下!!!

    ----------------------------------------------
    Every day, every hour and every minute is special; 每一天, 每一小时, 每一分钟都是那么特别;

    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2004/10/17 15:11:00
     
     理你才怪 美女呀，离线，快来找我吧！
      
      
      等级：大一新生
      文章：0
      积分：54
      门派：XML.ORG.CN
      注册：2004/10/25

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给理你才怪发送一个短消息 把理你才怪加入好友 查看理你才怪的个人资料 搜索理你才怪在『 XSL/XSLT/XSL-FO/CSS 』的所有贴子 引用回复这个贴子 回复这个贴子 查看理你才怪的博客第4楼
    发贴心情 
    我好像明白了一些什么
    谢谢你啊......
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2004/10/25 17:10:00
     
     mailtolily 帅哥哟，离线，有人找我吗？
      
      
      等级：大二期末(数据结构考了98分!)
      文章：67
      积分：329
      门派：XML.ORG.CN
      注册：2004/5/2

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给mailtolily发送一个短消息 把mailtolily加入好友 查看mailtolily的个人资料 搜索mailtolily在『 XSL/XSLT/XSL-FO/CSS 』的所有贴子 引用回复这个贴子 回复这个贴子 查看mailtolily的博客第5楼
    发贴心情 
    谢谢！
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2004/10/26 11:17:00
     
     ljc1527 帅哥哟，离线，有人找我吗？
      
      
      等级：大一新生
      文章：0
      积分：60
      门派：XML.ORG.CN
      注册：2006/4/13

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给ljc1527发送一个短消息 把ljc1527加入好友 查看ljc1527的个人资料 搜索ljc1527在『 XSL/XSLT/XSL-FO/CSS 』的所有贴子 引用回复这个贴子 回复这个贴子 查看ljc1527的博客第6楼
    发贴心情 
    谢了
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2006/4/29 15:34:00
     
     GoogleAdSense
      
      
      等级：大一新生
      文章：1
      积分：50
      门派：无门无派
      院校：未填写
      注册：2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 XSL/XSLT/XSL-FO/CSS 』的所有贴子 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2025/9/20 7:41:47

    本主题贴数6，分页： [1]

    管理选项： 修改tag | 锁定 | 解锁 | 提升 | 删除 | 移动 | 固顶 | 总固顶 | 奖励 | 惩罚 | 发布公告
    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    		 109.375ms