样式化 IMSC 文档 - Web 相关技术

内联样式

样式化内容元素（如 <p> 或 <span>）的最简单方法是在其上指定一个或多个样式属性，例如 tts:color。例如，以下内容

xml

<p tts:textAlign="center"
   tts:fontSize="64px"
   tts:color="red"
   tts:fontFamily="proportionalSansSerif"
   tts:fontStyle="italic">
 Hello, I am Mork from Ork
</p>

生成

引用样式

内联样式通常被避免，因为它会产生重复。

例如，考虑以下两个 <span> 元素，它们具有完全相同的样式属性

xml

<p>
  <span tts:color="yellow" tts:backgroundColor="black">
   Hello, I am Mork from Ork.
  </span>
</p>
<p>
  <span tts:color="yellow" tts:backgroundColor="black">
    I come from another planet.
  </span>
</p>

在引用样式中，样式被定义一次并在整个文档中重用 — 类似于 CSS 规则可以定义一次，然后通过元素或类选择器等方式应用于多个 HTML 元素。在 IMSC 中，这是通过在文档 <head> 内定义一个 <styling> 元素来实现的，在该元素内部放置一个或多个 <style> 元素 — 每个 <style> 元素定义一组可以在其他地方重用的样式。下面对此进行了说明

xml

<tt xmlns="http://www.w3.org/ns/ttml"
    xmlns:tts="http://www.w3.org/ns/ttml#styling"
    xml:lang="en">
  <head>
   <styling>
     <style xml:id="s1" tts:color="yellow" tts:backgroundColor="black"/>
   </styling>
  </head>
  <body>
    <div>
      <p>
        <span style="s1">Hello, I am Mork from Ork.</span>
      </p>
      <p>
        <span style="s1">I come from another planet.</span>
      </p>
    </div>
  </body>
  </tt>

每个 <style> 元素都会被赋予一个 id（本例中为 "s1"）

xml

<style xml:id="s1" tts:color="yellow" tts:backgroundColor="black"/>

稍后可以在文档中引用该 id

xml

<span style="s1">Hello, I am Mork from Ork.</span>

这等同于

xml

<span tts:color="yellow" tts:backgroundColor="black">
  Hello, I am Mork from Ork
</span>

换句话说，通过 id 和 style 属性引用 <style> 元素，相当于将 <style> 元素的样式属性复制到引用元素上，就像使用内联样式指定样式属性一样。

样式继承

如果一个样式属性是可继承的，例如 tts:color，那么该样式属性将应用于指定该属性的元素的所有后代 — 这与 CSS 和 HTML 类似。在下面的示例中，颜色 "yellow" 应用于两个 <p> 元素的文本，因为它们是 <body> 元素的后代。

xml

<body tts:color="yellow">
  <div>
    <p>Hello, I am Mork from Ork.</p>
    <p>I come from another planet.</p>
  </div>
</body>

在元素上指定样式会覆盖在祖先上指定的任何样式，例如在以下代码片段中，第二个 <p> 文本的颜色将被设置为 "aqua"

xml

<body tts:color="yellow">
  <div>
     <p>Hello, I am Mork from Ork.</p>
     <p tts:color="aqua">I come from another planet.</p>
  </div>
</body>

区域样式

区域样式在 IMSC 中扮演着特殊角色，因为在区域上指定的样式属性会被选择到该区域的所有元素继承，从 <body> 元素开始，就好像 <region> 元素是 <body> 元素的父元素一样。例如，在下面的示例中，“Hello, I am Mork from Ork”这段文字将显示为黄色。

xml

<tt
  xmlns="http://www.w3.org/ns/ttml"
  xmlns:tts="http://www.w3.org/ns/ttml#styling"
  xml:lang="en">
  <head>
    <layout>
      <region xml:id="r1" tts:color="yellow" />
    </layout>
 </head>
 <body>
   <div>
     <p region="r1">Hello, I am Mork from Ork</p>
   </div>
 </body>
</tt>

组合样式

引用样式可以应用于样式元素本身

xml

<styling>
  <style xml:id="s1"
         tts:color="yellow"
         tts:backgroundColor="black"/>
  <style xml:id="s2"
         style="s1"
         tts:textAlign="left"/>
</styling>

多个样式也可以同时应用于一个元素。例如，在下面的代码片段中，样式 s1 和 s2 的样式属性都应用于同一个 <p> 元素。

xml

<p style="s1 s2">Hello, I am Mork from Ork</p>

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025 年 7 月 15 日，作者为 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题

设置 IMSC 文档样式