樣式化 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 文件樣式