1. CSS Евгения Ковачева

2. BODY { PADDING-RIGHT: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-LEFT: 0px; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 11pt; FONT-SIZE: 11pt; BACKGROUND: #ffffff; BACKGROUND: #ffffff; PADDING-BOTTOM: 0px; PADDING-BOTTOM: 0px; MARGIN: 10px; MARGIN: 10px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #800080; SCROLLBAR-SHADOW-COLOR: #800080; COLOR: #cccccc; COLOR: #cccccc; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #800080; SCROLLBAR-ARROW-COLOR: #800080; PADDING-TOP: 0px; PADDING-TOP: 0px; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; FONT-FAMILY: "Verdana", sans-serif; FONT-FAMILY: "Verdana", sans-serif; SCROLLBAR-DARKSHADOW-COLOR: #ffffff SCROLLBAR-DARKSHADOW-COLOR: #ffffff }

3. TABLE { BORDER-RIGHT: gray 0px solid; BORDER-RIGHT: gray 0px solid; BORDER-TOP: gray 0px solid; BORDER-TOP: gray 0px solid; MARGIN: 0px; MARGIN: 0px; BORDER-LEFT: gray 0px solid; BORDER-LEFT: gray 0px solid; BORDER-BOTTOM: gray 0px solid; BORDER-BOTTOM: gray 0px solid; border-spacing: 0px; border-spacing: 0px; hight: 95% hight: 95% }

4. TD { BORDER-RIGHT: gray 0px solid; BORDER-RIGHT: gray 0px solid; PADDING-RIGHT: 10px; PADDING-RIGHT: 10px; BORDER-TOP: gray 0px solid; BORDER-TOP: gray 0px solid; PADDING-LEFT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: gray 0px solid; BORDER-LEFT: gray 0px solid; BORDER-BOTTOM: gray 0px solid; BORDER-BOTTOM: gray 0px solid; border-spacing: 0px border-spacing: 0px }

5. IMG { BORDER-RIGHT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-TOP: 0px; MARGIN: 3px; MARGIN: 3px; BORDER-LEFT: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px BORDER-BOTTOM: 0px }

6. fonts h1 { h1 { color: #800080; color: #800080; font-family : verdana, arial; font-family : verdana, arial; font-size: 14px; font-size: 14px; } h2 { h2 { color: #333333; color: #333333; font-family :verdana, arial; font-family :verdana, arial; font-size: 12px; font-size: 12px; } P { P { color: #006600; color: #006600; font-family : arial, verdana; font-family : arial, verdana; font-size: 12px; font-size: 12px; text-align : left; text-align : left; }

7. lists OL { OL { color: #006600; color: #006600; font-family : arial, verdana; font-family : arial, verdana; font-size: 12px; font-size: 12px; } UL { UL { color: #006600; color: #006600; font-family : arial, verdana; font-family : arial, verdana; font-size: 12px; font-size: 12px; }

8. links A:link { color: #800080; font-family: verdana, arial; font- size: 12px; text-decoration: none;} A:link { color: #800080; font-family: verdana, arial; font- size: 12px; text-decoration: none;} A:visited { color: #800080; font-family: verdana, arial; font-size: 12px; text-decoration: none;} A:visited { color: #800080; font-family: verdana, arial; font-size: 12px; text-decoration: none;} A:active { color: #000000; font-family: verdana, arial; font-size: 12px; text-decoration: none;} A:active { color: #000000; font-family: verdana, arial; font-size: 12px; text-decoration: none;} A:hover { color: #006600; font-family: verdana, arial; font-size: 12px; text-decoration: none;} A:hover { color: #006600; font-family: verdana, arial; font-size: 12px; text-decoration: none;}

9. Примери

10. Span 1 Listing 15-4 Listing 15-4 SPAN {position:absolute} SPAN {position:absolute} function moveSpans(){ function moveSpans(){ Span1.style.top=15 Span1.style.top=15 Span2.style.posTop=Span2.style.posTop+1 Span2.style.posTop=Span2.style.posTop+1 Span3.style.left=10 Span3.style.left=10 Span4.style.top=window.event.y Span4.style.top=window.event.y Span5.style.posLeft=window.event.x Span5.style.posLeft=window.event.x Span6.style.pixelTop=window.event.x Span6.style.pixelTop=window.event.x Span6.style.posLeft=window.event.y Span6.style.posLeft=window.event.y } First Span First Span Second Span Second Span Third Span Third Span Fourth Span Fourth Span Fifth Span Fifth Span Sixth Span Sixth Span

11. Span 2 Listing 15-1 Listing 15-1 <!-- <!-- function changeIt(oClicked){ function changeIt(oClicked){ oCS=oClicked.style oCS=oClicked.style alert("You clicked the element named "+oClicked.id+".") alert("You clicked the element named "+oClicked.id+".") alert("It is "+oCS.fontWeight+". Click OK to change it.") alert("It is "+oCS.fontWeight+". Click OK to change it.") if (oCS.fontWeight=='bold'){oCS.fontWeight='normal'} if (oCS.fontWeight=='bold'){oCS.fontWeight='normal'} else {oCS.fontWeight='bold'} else {oCS.fontWeight='bold'} } //--> //--> Click me! Then click me again! Click me! Then click me again!

12. Дърво Listing 15-2 Listing 15-2 SPAN {font-size: 18pt; cursor: hand} SPAN {font-size: 18pt; cursor: hand}.on {display: on}.on {display: on} A {text-decoration: none} A {text-decoration: none} A:hover {color: red; text-decoration: underline} A:hover {color: red; text-decoration: underline} <!-- <!-- // Set bSupportsDHTML to true for Internet Explorer 4 or later // Set bSupportsDHTML to true for Internet Explorer 4 or later var bDoesDHTML = ( (navigator.userAgent.indexOf("MSIE") >= 0) && var bDoesDHTML = ( (navigator.userAgent.indexOf("MSIE") >= 0) && (navigator.appVersion.substring(0,1) >= 4) ) (navigator.appVersion.substring(0,1) >= 4) ) // Only hide menu items if browser supports DHTML // Only hide menu items if browser supports DHTML if(bDoesDHTML){document.write(".off{display:none} ")} if(bDoesDHTML){document.write(".off{display:none} ")} function doSection(secNum){ function doSection(secNum){ if (bDoesDHTML){ if (bDoesDHTML){ //display the section if hidden; hide it if it is displayed //display the section if hidden; hide it if it is displayed if (secNum.className=="off"){secNum.className="on"} if (secNum.className=="off"){secNum.className="on"} else{secNum.className="off"} else{secNum.className="off"} } } } //--> //-->

13. дърво Section 1 Section 1 Chapter 1 Chapter 1 Section 2 Section 2 Chapter 2 Chapter 2 Chapter 3 Chapter 3 Chapter 4 Chapter 4 Chapter 5 Chapter 5 Section 3 Section 3 Chapter 6 Chapter 6 Chapter 7 Chapter 7 Chapter 8 Chapter 8 Chapter 9 Chapter 9 Chapter 10 Chapter 10

14. Разстояние – редове – без стил No-Style Demonstration No-Style Demonstration Absolute Positioning Absolute Positioning Welcome to Dynamic Styles Welcome to Dynamic Styles Letter Spacing Letter Spacing

15. Разстояние – редове – със стил Style Demonstration Style Demonstration <DIV STYLE=" <DIV STYLE=" position:absolute; position:absolute; top:30; top:30; left:60; left:60; color:yellow; color:yellow; font: bold italic 24pt Verdana;"> font: bold italic 24pt Verdana;"> Absolute Positioning Absolute Positioning <DIV STYLE=" <DIV STYLE=" position:absolute; position:absolute; top:50; top:50; left:80; left:80; color:white; color:white; font: bold italic 25pt Verdana; font: bold italic 25pt Verdana; filter:glow(color=#996666, strength=6)"> filter:glow(color=#996666, strength=6)"> Welcome to Dynamic Styles Welcome to Dynamic Styles <DIV STYLE=" <DIV STYLE=" position:absolute; position:absolute; top:100; top:100; left:90; left:90; color:red; color:red; font: bold italic 20pt Verdana; font: bold italic 20pt Verdana; letter-spacing: 14pt"> letter-spacing: 14pt"> Letter Spacing Letter Spacing

16. Iframe 1 Iframe 1 Iframe 1 Iframe 1 Iframe 2 Iframe 2 Iframe 2 Iframe 2 Iframe 3 Iframe 3 Iframe 3 Iframe 3

17. край