╩α±ΩαΣφ√σ ≥αßδΦ÷√ ±≥ΦδσΘ (Cascad Style Sheets)

1.8. ╩α±ΩαΣφ√σ ≥αßδΦ÷√ ±≥ΦδσΘ (Cascad Style Sheets)

╩α±ΩαΣφ√σ ≥αßδΦ÷√ ±≥ΦδσΘ ß√δΦ ∩≡σΣδεµσφ√ w3c(WWW Consorcium) Γ ≡α∞Ωα⌡ ≡ατ≡αßε≥ΩΦ ±∩σ÷Φ⌠ΦΩα÷ΦΦ HTML 3.0. ╬ΣφαΩε, ≡σαδΦτεΓαφ√ Γ ≡σαδⁿφε ΣσΘ±≥Γ≤■∙Φ⌡ φαΓΦπα≥ε≡α⌡ εφΦ ß√δΦ ≥εδⁿΩε Γ 1997 πεΣ≤. ╘αΩ≥Φ≈σ±ΩΦ, Γ Ωα≈σ±≥Γσ ∩≡Φ∞σφ σ∞εΘ HTML-≡ατ∞σ≥ΩΦ εφΦ ±≥αδΦ Σε±≥≤∩φ√ ≥εδⁿΩε ± Γσ≡±ΦΘ Netscape Navigator 4.0 Φ Internet Explorer 4.0.

╚Σσ ∩εδεµσφφα Γ ε±φεΓ≤ ≥αßδΦ÷ Σε±≥α≥ε≈φε ∩≡ε±≥α. ╩ Γσ≡±ΦΦ 4.0 HTML ∩≡σΓ≡α∙σ≥± Γ τ√Ω ≡ατ∞σ≥ΩΦ, ε∩Φ≡α■∙ΦΘ± φα Ωεφ≥σΘφσ≡φεσ ∩≡σΣ±≥αΓδσφΦσ ΣεΩ≤∞σφ≥α, ≥.σ. ΣεΩ≤∞σφ≥ - ²≥ε ∞φεµσ±≥Γε Γδεµσφφ√⌡ Γ Σ≡≤π Σ≡≤πα Ωεφ≥σΘφσ≡εΓ, ΩαµΣ√Θ Φτ Ωε≥ε≡√⌡ Φ∞σσ≥ ±ΓεΦ ±ΓεΘ±≥Γα ∩ε ∩≡σΣ±≥αΓδσφΦ■ Φφ⌠ε≡∞α÷ΦΦ. ╠φεπΦσ Ωεφ≥σΘφσ≡√ ∞εµφε ±π≡≤∩∩Φ≡εΓα≥ⁿ Γ Ωδα±±√ εΣφε≥Φ∩φ√⌡ Ωεφ≥σΘφσ≡εΓ, φα∩≡Φ∞σ≡, ταπεδεΓΩΦ ΦδΦ ∩α≡απ≡α⌠√. ╤ΓεΘ±≥Γα Ωεφ≥σΘφσ≡α, ∩σ≡σ≈Φ±δ ■≥± Γ Ωα≈σ±≥Γσ α≥≡Φß≤≥εΓ ≥απα φα≈αδα Ωεφ≥σΘφσ≡α. ╧≡Φ ²≥ε∞ ≤ ßεδⁿ°Φφ±≥Γα Ωεφ≥σΘφσ≡εΓ, φα≈Φφα ± Γσ≡±ΦΦ HTML 3.0 φαßε≡ ²≥Φ⌡ α≥≡Φß≤≥εΓ ≥Φ∩ΦτΦ≡εΓαφ.

╩εφ≥σΘφσ≡√ Γε ∞φεπε∞ ∩ε⌡εΣ ≥ φα ßδεΩΦ Γ ≤φΦΓσ≡±αδⁿφ√Θ τ√Ωα⌡ ∩≡επ≡α∞∞Φ≡εΓαφΦ . ╧≡Φ ²≥ε∞ ±ΓεΘ±≥Γα Ωεφ≥σΘφσ≡εΓ ∞εµφε Φφ≥σ≡∩≡σ≥Φ≡εΓα≥ⁿ ΩαΩ ∩σ≡σ∞σφφ√σ, Ωε≥ε≡√σ ∩≡ΦφΦ∞α■≥ ε∩≡σΣσδσφφ√σ τφα≈σφΦ Γ ∩≡σΣσδα⌡ ΩαµΣεπε Φτ Ωεφ≥σΘφσ≡εΓ. ╩αΩ Φ Γ τ√Ωα⌡ ∩≡επ≡α∞∞Φ≡εΓαφΦ , φα∩≡Φ∞σ≡ Γ ╧α±Ωαδⁿ, ε∩Φ±αφΦσ ±ΓεΘ±≥Γ ∞εµφε Γ√φσ±≥Φ Γ ±∩σ÷Φαδⁿφ≤■ ±σΩ÷Φ■ Σαφφ√⌡ Γ φα≈αδσ ΣεΩ≤∞σφ≥α. ╥αΩεΘ ±σΩ÷ΦσΘ Φ Γδ σ≥± ±σΩ÷Φ ε∩Φ±αφΦ Ωα±ΩαΣφ√⌡ ±≥ΦδσΘ. ╬ß√≈φε ±≥Φδⁿ ε∩Φ±√Γασ≥± Γφ≤≥≡Φ Ωεφ≥σΘφσ≡α STYLE:

	<style type="text/css">
	<!-- ╬∩Φ±αφΦσ ±≥ΦδσΘ -->
	</style>

┬εεß∙σ πεΓε≡ , Γ Netscape ∩εΣΣσ≡µΦΓα■≥ σ∙σ εΣφ≤ φε≥α÷Φ■ ε∩Φ±αφΦσ ≥αßδΦ÷ ±≥ΦδσΘ - φε≥α÷Φ JavaScript:

	<style type="text/javascript">
	<!-- ╬∩Φ±αφΦσ ±≥ΦδσΘ -->
	</style>

╧≡Φ ε∩Φ±αφΦΦ ≥αßδΦ÷ ±≥ΦδσΘ ∞√ ß≤Σσ∞ ε∩Φ≡α≥ⁿ± φα ΣεΩ≤∞σφ≥α÷Φ■ Netscape, ≥.Ω. - ²≥ε φαΦßεδσσ ∩ε∩≤δ ≡φ√Θ ß≡α≤τσ≡ Internet. Internet Explorer ∩εΣΣσ≡µΦΓασ≥ ≥εδⁿΩε ±∩σ÷Φ⌠ΦΩα÷Φ■ w3c.

═α≈φσ∞ ± ∩≡ε±≥επε ∩≡Φ∞σ≡α. ═≤µφε ε∩Φ±α≥ⁿ ±≥ΦδΦ ε≥εß≡αµσφΦ ≥σΩ±≥α Γ ∩α≡απ≡α⌠σ Φ ταπδαΓΦΦ ΣεΩ≤∞σφ≥α:

╧≡Φ∞σ≡ 1.28

	<html>
	<head>
	style type="text/css">
	p {color:blue; font-family: times; font-size:10pt;}
	h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;}
	</style>
	</head>
	<body>
	<h1>Test Style Shits in Communicator</h1>
	<p> This is a first part of the document
	</body>
	</html>

╥ε µσ ±α∞εσ φε Γ JavaScript-φε≥α÷ΦΦ ß≤Σσ≥ Γ√πδ Σσ≥ⁿ ±δσΣ≤■∙Φ∞ εß≡ατε∞:

╧≡Φ∞σ≡ 1.29

	<html>
	<head>
	<style type="text/javascript">	tags.p.color="blue";
	tags.p.fontFamily="times";
	tags.p.fontSize="10pt";
	tags.h1.color="black";
	tags.h1.fontSize="12pt";
	tags.h1.fontStyle="Arial";
	tags.h1.textAlign-"center";
	</style>
	</head>
	<body>
	<h1>Test Style Shits in Communicator</h1>
	<p> This is a first part of the document
	</body>
	</html>

╤oτΣαφφ√Θ ≥αΩΦ∞ εß≡ατε∞ ΣεΩ≤∞σφ≥ ß≤Σσ≥ ε≥εß≡αµα≥ⁿ± ±δσΣ≤■∙Φ∞ εß≡ατε∞:

╨Φ±. 1.28. ╧≡Φ∞σ≡ ε≥εß≡αµσφΦ ΣεΩ≤∞σφ≥α ± Ωα±ΩαΣφ√∞Φ ε∩Φ±α≥σδ ∞Φ ±≥ΦδσΘ

╨ατßσ≡σ∞ ≥σ∩σ≡ⁿ ε∩Φ±α≥σδΦ ±≥ΦδσΘ ßεδσσ ∩εΣ≡εßφε. ╬∩≡σΣσδΦ∞ εßδα±≥ⁿ Φ⌡ ∩≡Φ∞σφσφΦ Φ ±∩ε±εß√ Γ±≥≡αΦΓαφΦ Γ ΣεΩ≤∞σφ≥.

═εΓ√σ HTML-Ωεφ≥σΘφσ≡√

╤ ∩ε ΓδσφΦσ∞ ≥αßδΦ÷ ±≥ΦδσΘ Γ τ√Ωσ ∩ε ΓΦδε±ⁿ ≥≡Φ φεΓ√⌡ Ωεφ≥σΘφσ≡α: STYLE, LINK, SPAN. ┬εεß∙σ πεΓε≡ LINK - ²≥ε φσ φεΓ√Θ ≥απ, α φεΓεσ ∩≡Φ∞σφσφΦσ ±≥α≡επε ≥απα.

╩εφ≥σΘφσ≡ STYLE(<style type="...">......</style>) ±δ≤µΦ≥ Σδ ε∩≡σΣσδσφΦ ≥αßδΦ÷√ ε∩Φ±αφΦ ±≥ΦδσΘ. ╒ε≥ Γ ±∩σ÷Φ⌠ΦΩα÷ΦΦ CSS ∩≡ ∞ε φσ πεΓε≡Φ≥± , Γ ΩαΩε∞ Ωεφ≥σΘφσ≡σ ΣεΩ≤∞σφ≥α ±δσΣ≤σ≥ ∩≡Φ∞σφ ≥ⁿ STYLE, ≥σ∞ φσ ∞σφσσ, Γ ∩≡Φ∞σ≡α⌡ ≈α∙σ Γ±σπε ∩≡ΦΓεΣΦ≥± ²≥ε≥ Ωεφ≥σΘφσ≡ Γφ≤≥≡Φ Ωεφ≥σΘφσ≡α HEAD.

╩εφ≥σΘφσ≡ LINK Γ Ωεφ≥σΩ±≥σ ε∩Φ±α≥σδσΘ ±≥ΦδσΘ ∩≡Φ∞σφ σ≥± Σδ ε∩≡σΣσδσφΦ Γφσ°φσπε ⌠αΘδα ± ε∩Φ±αφΦ ∞Φ ±≥ΦδσΘ Σδ Σαφφεπε ΣεΩ≤∞σφ≥α. ═α∩≡Φ∞σ≡, Γφσ°φΦΘ ⌠αΘδ ∞εµσ≥ ±εΣσ≡µα≥ⁿ ±δσΣ≤■∙σσ ε∩Φ±αφΦσ ±≥ΦδσΘ:

	/* contents of the external style sheets file  css.htm*/
	p {color:blue; font-family: times; font-size:10pt;}
	h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;}
	/* the end of style sheets definition */

─δ ∩≡Φ∞σφσφΦ ²≥επε ε∩Φ±α≥σδ ±≥ΦδσΘ Γ ταπεδεΓεΩ ΣεΩ≤∞σφ≥α φσεß⌡εΣΦ∞ε ΓΩδ■≈Φ≥ⁿ ±δσΣ≤■∙ΦΘ ≥απ:

╧≡Φ∞σ≡ 1.30

	<html>
	<head>
	<link REL=STYLESHEET TYPE="text/css" HREF=http://localhost/css.htm>
	</head>
	<body>
	The body of the document should be here.
	</body>
	</html>

╚τ Σαφφεπε ∩≡Φ∞σ≡α ΓΦΣφε, ≈≥ε ∩Φ±αφΦσ ±≥ΦδσΘ Γ ⌠αδσ css.htm ∩εδφε±≥ⁿ■ ±εΓ∩αΣασ≥ ± ε∩Φ±αφΦσ∞ Γ Ωεφ≥σΘφσ≡σ STYLE. ┬ ≥σΩ±≥σ ⌠αΘδα ε∩Φ±αφΦ ±≥ΦδσΘ φσ φ≤µφε ≤Ωατ√Γα≥ⁿ ≥απΦ Ωεφ≥σΘφσ≡α STYLE.

╩εφ≥σΘφσ≡ SPAN ∩≡Φ∞σφ σ≥± Σδ ∩σ≡σε∩≡σΣσδσφΦ ±≥Φδ ε≥εß≡αµσφΦ ≥σΩ≤∙σπε ⌠≡απ∞σφ≥α ≥σΩ±≥α Φ Γ φσΩε≥ε≡ε∞ ±∞√±δσ αφαδεπΦ≈σφ Ωεφ≥σΘφσ≡≤ FONT. ╫α±≥ε SPAN ∩≡Φ∞σφ ■≥ Σδ Σε±≥ΦµσφΦ ≥Φ∩επ≡α⌠±ΩΦ⌡ ²⌠⌠σΩ≥εΓ, ≥αΩΦ⌡ φα∩≡Φ∞σ≡, ΩαΩ Γ√ΣσδσφΦσ ταπδαΓφεΘ ß≤ΩΓ√ αßτα÷α:

╧≡Φ∞σ≡ 1.31

	<HTML>
	<!--
	Author:	Paul Khramtsov
	Date:	September 19, 1997
	URL:	http://polyn.kiae.su/Internet/intro.html
	-->
	<HEAD>
	<style TYPE="text/css">
	FS.all { color:red; font-size: 24pt; font-family: times;}
	H1 {color:navy; text-transform: uppercase;font-size: 18pt; 
	font-weight: bold; font-family: times;}
	H2 {color:navy; font-size: 14pt; font-weight: bold; font-style: italic; 
	font-family: times;}
	H3 {color:navy; font-size: 10pt; font-weight: bold; font-family: times;}
	P  {color:navy; font-size: 12pt; font-family: times; text-align: justify}
	P.HELP {color:darkgreen; font-size: 10pt; font-family: times; 
	text-align: justify;}
	P.LEFT {color:navy; font-size: 12pt; font-family: times; text-align: right;}
	</style>
	</HEAD>
	<BODY bgcolor=lightyellow>
	<center>
	<h3>╓σφ≥≡ Φφ⌠ε≡∞α÷Φεφφ√⌡ ≥σ⌡φεδεπΦΘ</h3>
	<h1>╚φ⌠ε≡∞α÷Φεφφ√σ ╨σ±≤≡±√ Internet</h1>
	<h3>(╙≈σßφεσ ∩ε±εßΦσ Σδ  Ωε∞∩ⁿ■≥σ≡φ√⌡ φσ∩≡ε⌠σ±±ΦεφαδεΓ)</h3>
	<h3>╒≡α∞÷εΓ ╧.┴.</h2>
	<h3>╠ε±ΩΓα, 1997</h2>
	<hr>
	</center>
	<p><span class=FS>C</span>εß∙σ±≥Γ≤ πδεßαδⁿφ√⌡ Ωε∞∩ⁿ■≥σ≡φ√⌡ ±σ≥σΘ 
	Internet Γ 1995 πεΣ≤ Φ±∩εδφΦδε±ⁿ 25 δσ≥. ═α φα±≥ε ∙ΦΘ ∞ε∞σφ≥ - ²≥ε ±α∞√Θ
	ßεδⁿ°εσ Φφ⌠ε≡∞α÷Φεφφ√Θ ≡σ±≤≡± ∞Φ≡α. ╬ΣφεΓ≡σ-∞σφφε Internet - ²≥ε ±α∞α  
	∩ε∩≤δ ≡φα  Φ ∞α±±εΓα  Ωε∞∩ⁿ■≥σ≡φα  ±σ≥ⁿ ∩δαφσ≥√. ╧ε ε÷σφΩα∞ ∞σµΣ≤φα≡εΣφεπε 
	÷σφ≥≡α Ωεε≡ΣΦφα÷ΦΦ ±σ≥σΓεΘ Σσ ≥σδⁿφε±≥Φ Γ ≡α∞Ωα⌡ Internet(Internic-Internet 
	Information Center) φα 1997 πεΣ Γ ±σ≥Φ φα±≈Φ≥√Γαδε±ⁿ φσ±ΩεδⁿΩε Σσ± ≥ΩεΓ 
	∞ΦδδΦεφεΓ ∩ε±≥ε φφε τα≡σπΦ±≥≡Φ≡εΓαφφ√⌡ Ωε∞∩ⁿ■≥σ≡εΓ-±σ≡Γσ≡εΓ, Ωε≥ε≡√σ 
	ε≥ΩδΦΩα■≥±  φα τα∩≡ε±√ ∩εδⁿτεΓα≥σδσΘ 365 ΣφσΘ Γ πεΣ≤ Φ 24 ≈α±α Γ ±≤≥ΩΦ. ▌≥ε≥ 
	επ≡ε∞φ√Θ Φφ⌠ε≡∞α÷Φεφφ√Θ ≡σ±≤≡± ∩εδφε±≥ⁿ■ Σσ÷σφ≥≡αδΦτεΓαφ Φ φσ ∩εΣ≈Φφ σ≥±  φΦ 
	εΣφε∞≤ ∩≡αΓΦ≥σδⁿ±≥Γ≤ ΦδΦ Ω≡≤∩φεΘ ⌠Φφαφ±εΓεΘ Ωε∞∩αφΦΦ ∞Φ≡α.
	</BODY>
	</HTML>

┬ Σαφφε∞ ∩≡Φ∞σ≡σ, Ωεφ≥σΘφσ≡ SPAN ∩≡Φ∞σφσφ ±≡ατ≤ ∩ε±δσ ≥απα φα≈αδα ∩α≡απ≡α⌠α <p>, ≈≥ε ∩ετΓεδ σ≥ Γ√ΣσδΦ≥ⁿ ∩σ≡Γ≤■ ß≤ΩΓ≤ Γ ε≥εß≡αµασ∞ε∞ αßτα÷σ:

╨Φ±. 1.29. ▌⌠⌠σΩ≥ ε≥ ∩≡Φ∞σφσφΦ Ωεφ≥σΘφσ≡α SPAN

╩≡ε∞σ φεΓ√⌡ Ωεφ≥σΘφσ≡εΓ ≥αßδΦ÷√ ε∩Φ±αφΦ ±≥ΦδσΘ ∩≡ΦΓφσ±δΦ σ∙σ Φ φεΓ√σ α≥≡Φß≤≥√ Γ ΦτΓσ±≥φ√σ ≥απΦ.

═εΓ√σ ±ΓεΘ±≥Γα Ωεφ≥σΘφσ≡εΓ HTML

╧σ≡σ≈σφⁿ φεΓ√⌡ α≥≡Φß≤≥εΓ ≤ ≥απεΓ HTML ±δσΣ≤σ≥ φα≈α≥ⁿ ± α≥≡Φß≤≥α STYLE. ▌≥ε≥ α≥≡Φß≤≥ Φ±∩εδⁿτ≤σ≥± Σδ ε∩≡σΣσδσφΦ ±≥Φδ ε≥εß≡αµασ∞επε Ωεφ≥σΘφσ≡α φσ∩ε±≡σΣ±≥Γσφφε Γφ≤≥≡Φ ≥απα φα≈αδα Ωεφ≥σΘφσ≡α:

	<h3 style="line-hieght:24pt; font-weight:bold; color: blue">The blue text
	<h3 style="lineHeight='24pt'; fontWeght='bold'; color='blue'">The blue text

╠εµφε ≥αΩµσ ε∩≡σΣσδΦ≥ⁿ Ωδα±± ±≥ΦδσΘ Φ Φ±∩εδⁿτεΓα≥ⁿ σπε ∩≡Φ ∩ε∞ε∙Φ α≥≡Φß≤≥α CLASS:

	<style type="text/css">
	h3.class1 {font-size:12pt;color=blue}
	</style>
	.....
	<h3 class="class1">This is a blue text

┬ Σαφφε∞ ±δ≤≈ασ ∞√ ε∩≡σΣσδΦδΦ Ωδα±± ταπεδεΓΩεΓ ≥≡σ≥ⁿσπε ≤≡εΓφ , φε ∞εµφε ε∩≡σΣσδΦ≥ⁿ Ωδα±±, Ωε≥ε≡√Θ ∞εµφε ß≤Σσ≥ ∩≡Φ∞σφ ≥ⁿ Ω δ■ß√∞ Ωεφ≥σΘφσ≡α∞, α φσ ≥εδⁿΩε Ω ταπεδεΓΩα∞:

	<style type="text/css">
	all.class1 {font-size:12pt;color=blue}
	</style>

K≡ε∞σ ε∩≡σΣσδσφΦ Ωδα±±εΓ ±≤∙σ±≥Γ≤σ≥ σ∙σ Γετ∞εµφε±≥ⁿ ±ετΣαφΦ ∩εΦ∞σφεΓαφφ√⌡ ±≥ΦδσΘ. ╧εΦ∞σφεΓαφφ√Θ ±≥Φδⁿ ±ετΣασ≥± ΩαΩ ≤≥ε≈φσφΦσ ΩαΩεπε-δΦßε Ωδα±±α:

	<style type="text/css">
	all.class1 {font-size:12pt;color=blue}
	#C1 { font-size: 20;}
	</style>
	....
	<h3 class="class1">This is a blue text
	<h3 class="class1" id="C1">This is a blue text

╥αΩΦ∞ εß≡ατε∞, α≥≡Φß≤≥√ Ωεφ≥σΘφσ≡εΓ ∩ετΓεδ ■≥ ±Γ τα≥ⁿ ε∩Φ±α≥σδΦ ±≥ΦδσΘ ± ±εΣσ≡µαφΦσ∞ Ωεφ≥σΘφσ≡εΓ Φ ≤∩≡αΓδ ≥ⁿ ⌠ε≡∞εΘ ε≥εß≡αµασ∞εΘ Φφ⌠ε≡∞α÷ΦΦ.

╤ΓεΘ±≥Γα Ωεφ≥σΘφσ≡εΓ, ≤∩≡αΓδ σ∞√σ ε∩Φ±α≥σδ ∞Φ ±≥ΦδσΘ

╧σ≡Γ≤■ π≡≤∩∩≤ ±ΓεΘ±≥Γ ±ε±≥αΓδ ■≥ ±ΓεΘ±≥Γα °≡Φ⌠≥εΓ:

font-size, font-family, font-weight, font-style.

┬≥ε≡≤■ π≡≤∩∩≤ ±ΓεΘ±≥Γ ±ε±≥αΓδ ■≥ ±ΓεΘ±≥Γα ≥σΩ±≥α:

line-height, text-decoration, text-transform, text-align, text-indent.

╥≡σ≥ⁿ■ π≡≤∩∩≤ ±ΓεΘ±≥Γ ±ε±≥αΓδ ■≥ ±ΓεΘ±≥Γα ßδεΩεΓ ≥σΩ±≥α:

margin-left, margin-right, margin-top, margin-bottom, margin, padding-top, padding-right, padding-bottom, padding-left, paddings, border-top-width, border-bottom-width, border-left-width, border-right-width, border-width, border-style, border-color

╫σ≥Γσ≡≥≤■ π≡≤∩∩≤ ±ε±≥αΓδ ■≥ ε∩Φ±α≥σδΦ ÷Γσ≥α ⌠εφα Φ ÷Γσ≥α ≥σΩ±≥α:

color, background-image, background-color.

╩≡ε∞σ ≥επε, ±≤∙σ±≥Γ≤■≥ ±ΓεΘ±≥Γα ε∩≡σΣσδ ■∙Φσ ≥Φ∩ ∩≤δⁿΩΦ ≤ ²δσ∞σφ≥εΓ ±∩Φ±Ωα Φ ≡ Σ Σ≡≤πΦ⌡ ±ΓεΘ±≥Γ ²δσ∞σφ≥εΓ HTML-≡ατ∞σ≥ΩΦ.

═αταΣ | ╤εΣσ≡µαφΦσ | ┬∩σ≡σΣ