Styling IMSC documents - Web-related technologies 编辑
IMSC offers many options for styling documents, and most of the IMSC styling properties have direct CSS equivalents, making them familiar to web developers. In this guide you'll learn a bit more about IMSC styling including the difference between inline and referential styling, and efficient styling using inheritance and region styling.
Inline styling
The simplest way of styling content elements like <p> or <span> is by specifying one or more style attributes, such as tts:color, on them. For instance, the following
<p tts:textAlign="center" tts:fontSize="64px" tts:color="red" tts:fontFamily="proportionalSansSerif" tts:fontStyle="italic"> Hello, I am Mork from Ork </p>
yields:
Referential styling
Inline styling is usually avoided since it generates duplication.
Take for example the following two <span> elements, which have exactly the same style attributes:
<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>
In referential styling, styles are defined once and reused throughout the document — in a similar way to how CSS rules can be declared once and then applied to multiple HTML elements via for example, element or class selectors. In IMSC this is achieved by defining a <styling> element inside the document <head>, inside which is placed one or more <style> elements — each one of which defines a set of styles that you can reuse elsewhere. This is illustrated below:
<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>
Each <style> element is given an id ("s1" in this example):
<style xml:id="s1" tts:color="yellow" tts:backgroundColor="black"/>
which can then be referred to later in the document:
<span style="s1">Hello, I am Mork from Ork.</span>
this is equivalent to:
<span tts:color="yellow" tts:backgroundColor="black"> Hello, I am Mork from Ork </span>
In other words, referencing a <style> element via its id and the style attribute is equivalent to copying the style properties of the <style> element onto the referencing element, as if the style properties had been specified using inline styling.
Style inheritance
If a style property is inheritable, like tts:color, then the style property will apply to all the descendants of an element it is specified on — again, this is similar to CSS and HTML. In the following example, the color "yellow" is applied to the text of both <p> elements because they are descendants of the <body> element.
<body tts:color="yellow">
<div>
<p>Hello, I am Mork from Ork.</p>
<p>I come from another planet.</p>
</div>
</body>
Specifying a style on an element overrides any style specified on an ancestor, for example in the following snippet, the color of the second <p>'s text would be set to "aqua":
<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>Region styling
Region styling plays a special role in IMSC since a style property specified on a region is inherited by all elements that are selected to the region, starting with the <body> element, as if the <region> element was the parent of the <body>element. For example, in the following example, the text "Hello, I am Mork from Ork" will appear in yellow.
<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>Combining styles
Referential styling can be applied to style elements themselves:
<styling>
<style xml:id="s1"
tts:color="yellow"
tts:backgroundColor="black"/>
<style xml:id="s2"
style="s1"
tts:textAlign="left"/>
</styling>Multiple styles can be also applied simultaneously on an element. For example, in the snippet below the style properties of both styles s1 and s2 are applied to the same <p> element.
<p style=”s1 s2”>Hello, I am Mork from Ork</p>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论