source: www/manuals/HTML_Reference/text_formatting/span.htm@ 1

Last change on this file since 1 was 1, checked in by george, 17 years ago

Prvotní import všeho
File size: 13.3 KB
Line 
1<HTML>
2<!-- This file is part of the HTML Reference Library ('HTMLib') -->
3<!-- It should not be used outside of the HTMLib package -->
4<!-- The HTMLib is © 1995-1998 Stephen Le Hunte -->
5<!-- htmlib@htmlib.demon.co.uk -->
6<HEAD>
7<LINK REL="stylesheet" HREF="../style.css" TYPE="text/css">
8<TITLE>&lt;SPAN&gt;</TITLE>
9</HEAD>
10<BODY TOPMARGIN="0" BGCOLOR="#FFFFE0" TEXT="#000000">
11
12<CENTER>
13<SPAN CLASS="NSRtitle">&lt;SPAN...&gt;</SPAN>
14</CENTER>
15
16<P>The <CODE>&lt;SPAN&gt;</CODE> element is used to apply a style to text which doesn't play any structural role, or where use of standard HTML elements is not desirable. For example, it may be useful for text to be highlighted by rendering it with a different background colour. For text such as this, using a standard HTML element such as <CODE><A HREF="../Text_Formatting/em.htm" TITLE="View the &lt;EM&gt; topic">&lt;EM&gt;</A></CODE> with an applied style, would possibly be inappropriate, because browsers that don’t support style sheets would render the text as italicised. The <CODE>&lt;SPAN&gt;</CODE> element is recommended in such situations as other browsers simply ignore it.
17<P>The <CODE>&lt;SPAN&gt;</CODE> element can be used within text blocks to apply a style as defined in a style sheet, according to a <SPAN CLASS="attr">CLASS</SPAN> or <SPAN CLASS="attr">ID</SPAN> attribute, or the <SPAN CLASS="attr">STYLE</SPAN> can be specified within the <CODE>&lt;SPAN&gt;</CODE> attribute. As with other elements used within the <CODE><A HREF="../Document_Structure_Elements/body.htm">&lt;BODY&gt;</A></CODE> of a HTML document, <CODE>&lt;SPAN&gt;</CODE> can also have a certain style applied to it in the style sheet definition.
18
19<P>e.g. If
20
21<SPAN CLASS="egcode">
22<BLOCKQUOTE>
23<CODE>.redtext : { color : #FF0000}
24</CODE>
25</BLOCKQUOTE>
26</SPAN>
27
28<P>has been defined in a style sheet, then the following :
29
30<SPAN CLASS="egcode">
31<BLOCKQUOTE>
32<CODE>some text&lt;SPAN <STRONG>CLASS</STRONG>="redtext"&gt; some red text&lt;/SPAN&gt; some more text
33</CODE>
34</BLOCKQUOTE>
35</SPAN>
36
37would render the <CODE>some red text</CODE> section in red.
38
39<SPAN CLASS="egcode">
40<BLOCKQUOTE>
41<CODE>&lt;SPAN <STRONG>STYLE="{color : #FF0000}"</STRONG>&gt;some red text&lt;/SPAN&gt;
42</CODE>
43</BLOCKQUOTE>
44</SPAN>
45
46would do exactly the same
47
48<P><A NAME="DIR"><STRONG>Internet Explorer</STRONG></A> also supports the use of the <SPAN CLASS="attr">DIR</SPAN> attribute for specifying the reading direction of the text. Using :
49
50<SPAN CLASS="egcode">
51<BLOCKQUOTE>
52<CODE>&lt;SPAN <STRONG>DIR</STRONG>="rtl"&gt;some right-to-left text&lt;/SPAN&gt;
53</CODE>
54</BLOCKQUOTE>
55</SPAN>
56
57<P>causes the text to be rendered, reading from right to left, instead of the standard left to right. Note that this only occurs on systems that support right to left text rendering, for example, Arabic and Hebrew systems.
58
59<P>See the <A HREF="../Style_Sheets/ov.htm">Style Sheets</A> topic for more information about style sheets.
60<P>Viewing the source of any page of this reference may also provide some clues. The <CODE>&lt;SPAN&gt;</CODE> element is used quite extensively for setting the styles of various text.
61
62<P><A NAME="TITLE"><SPAN CLASS="attr">TITLE</SPAN></A>="informational ToolTip"<BR>
63The <STRONG>Internet Explorer</STRONG> 4.0 (and above) specific <CODE>TITLE</CODE> attribute is used for informational purposes. If present, the value of the <CODE>TITLE</CODE> attribute is presented as a ToolTip when the users mouse hovers over the <CODE>&lt;SPAN&gt;</CODE> section.
64
65<P><A NAME="LANG"><SPAN CLASS="attr">LANG</SPAN></A>="language setting"<BR>
66The <CODE>LANG</CODE> attribute can be used to specify what language the <CODE>&lt;SPAN&gt;</CODE> element is using. It accepts any valid ISO standard language abbreviation (for example <CODE>"en"</CODE> for English, <CODE>"de"</CODE> for German etc.) For more details, see the <A HREF="../Document_Localisation/ov.htm" TITLE="View the HTML localisation topic">Document Localisation</A> section for more details.
67
68<P><A NAME="LANGUAGE"><SPAN CLASS="attr">LANGUAGE</SPAN></A>="Scripting language"<BR>
69The <CODE>LANGUAGE</CODE> attribute can be used to expressly specify which scripting language <STRONG>Internet Explorer</STRONG> 4.0 uses to interpret any scripting information used in the <CODE>&lt;SPAN&gt;</CODE> element. It can accept values of <CODE>vbscript</CODE>, <CODE>vbs</CODE>, <CODE>javascript</CODE> or <CODE>jscript</CODE>. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no <CODE>LANGUAGE</CODE> attribute is set.
70
71<P><A NAME="CLASS"><SPAN CLASS="attr">CLASS</SPAN></A>="Style Sheet class name"<BR>
72The <CODE>CLASS</CODE> attribute is used to specify the <CODE>&lt;SPAN&gt;</CODE> element as using a particular style sheet class. See the <A HREF="../Style_Sheets/ov.htm" TITLE="View the Style Sheets overview">Style Sheets</A> topic for details.
73
74<P><A NAME="STYLE"><SPAN CLASS="attr">STYLE</SPAN></A>="In line style setting"<BR>
75As well as using previously defined style sheet settings, the <CODE>&lt;SPAN&gt;</CODE> element can have in-line stylings attached to it. See the <A HREF="../Style_Sheets/ov.htm" TITLE="View the Style Sheets overview">Style Sheets</A> topic for details.
76
77<P><A NAME="ID"><SPAN CLASS="attr">ID</SPAN></A>="Unique element identifier"<BR>
78The <CODE>ID</CODE> attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <CODE>&lt;SPAN&gt;</CODE> element for scripting purposes. Any <CODE>&lt;SPAN&gt;</CODE> element with an <CODE>ID</CODE> attribute can be directly manipulated in script by referencing its <CODE>ID</CODE> attribute, rather than working through the <A HREF="../Scripting_Reference/allcol.htm" TITLE="View the All collection topic">All collection</A> to determine the element. See the <A HREF="../Scripting_Reference/ov.htm" TITLE="View the Scripting Introduction topic">Scripting introduction</A> topic for more information.
79
80<P><A NAME="DATAFLD"><SPAN CLASS="attr">DATAFLD</SPAN></A><BR>
81The <CODE>DATAFLD</CODE> attribute can be used to specify a data column name from the Data source (see <CODE>DATASRC</CODE>) that the <CODE>&lt;SPAN&gt;</CODE> is bound to. For more information on the <CODE>DATAFLD</CODE> attribute, see the <A HREF="../Dynamic_HTML/ddata.htm" TITLE="View the Data Binding topic">Data Binding</A> topic.
82
83<P><A NAME="DATAFORMATAS"><SPAN CLASS="attr">DATAFORMATAS</SPAN></A><BR>
84When the <CODE>&lt;SPAN&gt;</CODE> element is data-bound, it can accept straight text, or HTML from the data source. The <CODE>DATAFORMATAS</CODE> attribute should be set to "<CODE>TEXT</CODE>" or "<CODE>HTML</CODE>" accordingly. with <CODE>DATAFORMATAS="HTML"</CODE>, the data provided for the <CODE>&lt;SPAN&gt;</CODE> element is parsed and rendered when its displayed.<BR>
85For more information on the <CODE>DATAFORMATAS</CODE> attribute, see the <A HREF="../Dynamic_HTML/ddata.htm" TITLE="View the Data Binding topic">Data Binding</A> topic.
86
87<P><A NAME="DATASRC"><SPAN CLASS="attr">DATASRC</SPAN></A><BR>
88The <CODE>DATASRC</CODE> attribute can be used to specify a data source that the <CODE>&lt;SPAN&gt;</CODE> is bound to. For more information on the <CODE>DATASRC</CODE> attribute, see the <A HREF="../Dynamic_HTML/ddata.htm" TITLE="View the Data Binding topic">Data Binding</A> topic.
89
90<P><HR WIDTH="75%" ALIGN="center">
91
92<P><A NAME="SCRIPTING">Every</A> <CODE>&lt;SPAN&gt;</CODE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <CODE>&lt;SPAN&gt;</CODE> element/object is only supported by <STRONG>Internet Explorer</STRONG> 4.0 in its <A HREF="../Dynamic_HTML/dhtml.htm" TITLE="View the Dynamic HTML Overview">Dynamic HTML</A> object model. <STRONG>Netscape</STRONG> does not support direct scripting of the <CODE>&lt;SPAN&gt;</CODE> element at all.
93
94<P><A NAME="SPAN_Properties" TITLE=""><STRONG><CODE>&lt;SPAN...&gt;</CODE> Properties</STRONG></A><BR>
95The <CODE>&lt;SPAN...&gt;</CODE> element/object supports <EM>all</EM> of the standard <A HREF="../Dynamic_HTML/dhtml.htm" TITLE="View the Dynamic HTML overview topic">Dynamic HTML</A> properties (i.e. <SPAN CLASS="attr">className</SPAN>, <SPAN CLASS="attr">document</SPAN>, <SPAN CLASS="attr">id</SPAN>, <SPAN CLASS="attr">innerHTML</SPAN>, <SPAN CLASS="attr">innerText</SPAN>, <SPAN CLASS="attr">isTextEdit</SPAN>, <SPAN CLASS="attr">lang</SPAN>, <SPAN CLASS="attr">language</SPAN>, <SPAN CLASS="attr">offsetHeight</SPAN>, <SPAN CLASS="attr">offsetLeft</SPAN>, <SPAN CLASS="attr">offsetParent</SPAN>, <SPAN CLASS="attr">offsetTop</SPAN>, <SPAN CLASS="attr">offsetWidth</SPAN>, <SPAN CLASS="attr">outerHTML</SPAN>, <SPAN CLASS="attr">outerText</SPAN>, <SPAN CLASS="attr">parentElement</SPAN>, <SPAN CLASS="attr">parentTextEdit</SPAN>, <SPAN CLASS="attr">sourceIndex</SPAN>, <SPAN CLASS="attr">style</SPAN>, <SPAN CLASS="attr">tagName</SPAN> and <SPAN CLASS="attr">title</SPAN>). Details of these can be found in the <A HREF="../Dynamic_HTML/dhtmlp.htm" TITLE="View the standard Dynamic HTML Properties topic">standard Dynamic HTML properties</A> topics.<BR>
96The <CODE>&lt;SPAN&gt;</CODE> element also supports the following properties:
97
98<P><A NAME="propclientHeight"><SPAN CLASS="attr">clientHeight</SPAN></A><BR>
99The <CODE>clientHeight</CODE> property reflects the height (in pixels) of the contents of the <CODE>&lt;SPAN&gt;</CODE> element.
100
101<P><A NAME="propclientWidth"><SPAN CLASS="attr">clientWidth</SPAN></A><BR>
102The <CODE>clientWidth</CODE> property reflects the width (in pixels) of the contents of the <CODE>&lt;SPAN&gt;</CODE> element.
103
104<P><A NAME="propdataFld"><SPAN CLASS="attr">dataFld</SPAN></A><BR>
105
106<P><A NAME="propdataFormatAs"><SPAN CLASS="attr">dataFormatAs</SPAN></A><BR>
107
108<P><A NAME="propdataSrc"><SPAN CLASS="attr">dataSrc</SPAN></A><BR>
109
110<P><A NAME="propscrollHeight"><SPAN CLASS="attr">scrollHeight</SPAN></A><BR>
111The <CODE>scrollHeight</CODE> property reflects the contents of the <CODE>&lt;SPAN&gt;</CODE> elements total scrollable height (in pixels).
112
113<P><A NAME="propscrollLeft"><SPAN CLASS="attr">scrollLeft</SPAN></A><BR>
114The <CODE>scrollLeft</CODE> property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <CODE>&lt;SPAN&gt;</CODE> element are totally visible on the screen, the <CODE>scrollLeft</CODE> property is 0, only increasing if the left-most edge of the <CODE>&lt;SPAN&gt;</CODE> elements contents are scrolled off the left hand edge of the current viewing window.
115
116<P><A NAME="propscrollTop"><SPAN CLASS="attr">scrollTop</SPAN></A><BR>
117The <CODE>scrollTop</CODE> property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <CODE>&lt;SPAN&gt;</CODE> element, the <CODE>scrollTop</CODE> property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <CODE>&lt;SPAN&gt;</CODE> element are visible, then the <CODE>scrollTop</CODE> property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.
118
119<P><A NAME="propscrollWidth"><SPAN CLASS="attr">scrollWidth</SPAN></A><BR>
120Like the <CODE>scrollHeight</CODE> property, the <CODE>scrollWidth</CODE> property reflects a value that represents the total scrollable width of the contents of the <CODE>&lt;SPAN&gt;</CODE> element.
121
122<P><A NAME="SPAN_Methods" TITLE=""><STRONG><CODE>&lt;SPAN...&gt;</CODE> Methods</STRONG></A><BR>
123The <CODE>&lt;SPAN...&gt;</CODE> element/object supports <EM>all</EM> of the standard <A HREF="../Dynamic_HTML/dhtml.htm" TITLE="View the Dynamic HTML overview topic">Dynamic HTML</A> methods (i.e. <SPAN CLASS="attr">click</SPAN>, <SPAN CLASS="attr">contains</SPAN>, <SPAN CLASS="attr">getAttribute</SPAN>, <SPAN CLASS="attr">insertAdjacentHTML</SPAN>, <SPAN CLASS="attr">insertAdjacentText</SPAN>, <SPAN CLASS="attr">removeAttribute</SPAN>, <SPAN CLASS="attr">scrollIntoView</SPAN> and <SPAN CLASS="attr">setAttribute</SPAN>). Details of these can be found in the <A HREF="../Dynamic_HTML/dhtmlm.htm" TITLE="View the standard Dynamic HTML Methods topic">standard Dynamic HTML Methods</A> topics.<BR>
124
125<P><A NAME="SPAN_Events" TITLE=""><STRONG><CODE>&lt;SPAN...&gt;</CODE> Events</STRONG></A><BR>
126The <CODE>&lt;SPAN...&gt;</CODE> element/object supports <EM>all</EM> of the standard <A HREF="../Dynamic_HTML/dhtml.htm" TITLE="View the Dynamic HTML overview topic">Dynamic HTML</A> events (i.e. <SPAN CLASS="attr">onclick</SPAN>, <SPAN CLASS="attr">ondblclick</SPAN>, <SPAN CLASS="attr">ondragstart</SPAN>, <SPAN CLASS="attr">onfilterchange</SPAN>, <SPAN CLASS="attr">onhelp</SPAN>, <SPAN CLASS="attr">onkeydown</SPAN>, <SPAN CLASS="attr">onkeypress</SPAN>, <SPAN CLASS="attr">onkeyup</SPAN>, <SPAN CLASS="attr">onmousedown</SPAN>, <SPAN CLASS="attr">onmousemove</SPAN>, <SPAN CLASS="attr">onmouseout</SPAN>, <SPAN CLASS="attr">onmouseover</SPAN>, <SPAN CLASS="attr">onmouseup</SPAN> and <SPAN CLASS="attr">onselectstart</SPAN>). Details of these can be found in the <A HREF="../Dynamic_HTML/dhtmle.htm" TITLE="View the standard Dynamic HTML Events topic">standard Dynamic HTML events</A> topics.<BR>
127
128<P>
129
130<P ALIGN="right" CLASS="copyright">© 1995-1998, Stephen Le Hunte</P>
131</BODY>
132</HTML>
Note: See TracBrowser for help on using the repository browser.