IMSC 文档样式

IMSC 提供了多种文档样式选项，并且大多数 IMSC 样式属性都有直接的 CSS 等效项，因此对 Web 开发人员来说很熟悉。在本指南中，您将更多地了解 IMSC 样式，包括内联样式和引用样式之间的区别，以及使用继承和区域样式的有效样式。

内联样式

对内容元素（如 <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> 元素 - 每个元素定义一组可以在其他地方重用的样式。这在下面进行了说明

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"/>

然后可以在文档中的其他地方引用它

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>