Download presentation
Presentation is loading. Please wait.
1
CSS Евгения Ковачева
2
BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 11pt; BACKGROUND: #ffffff; PADDING-BOTTOM: 0px; MARGIN: 10px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #800080; COLOR: #cccccc; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #800080; PADDING-TOP: 0px; SCROLLBAR-TRACK-COLOR: #ffffff; FONT-FAMILY: "Verdana", sans-serif; SCROLLBAR-DARKSHADOW-COLOR: #ffffff }
3
TABLE { BORDER-RIGHT: gray 0px solid; BORDER-TOP: gray 0px solid; MARGIN: 0px; BORDER-LEFT: gray 0px solid; BORDER-BOTTOM: gray 0px solid; border-spacing: 0px; hight: 95% }
4
TD { BORDER-RIGHT: gray 0px solid; PADDING-RIGHT: 10px; BORDER-TOP: gray 0px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; BORDER-LEFT: gray 0px solid; BORDER-BOTTOM: gray 0px solid; border-spacing: 0px }
5
IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN: 3px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px }
6
fonts h1 { color: #800080; font-family : verdana, arial; font-size: 14px; } h2 { color: #333333; font-family :verdana, arial; font-size: 12px; } P { color: #006600; font-family : arial, verdana; font-size: 12px; text-align : left; }
7
lists OL { color: #006600; font-family : arial, verdana; font-size: 12px; } UL { color: #006600; font-family : arial, verdana; font-size: 12px; }
8
links 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: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;}
9
Примери
10
Span 1 <HTML><HEAD> Listing 15-4 Listing 15-4 SPAN {position:absolute} SPAN {position:absolute} function moveSpans(){ Span1.style.top=15 Span1.style.top=15 Span2.style.posTop=Span2.style.posT op+1 Span2.style.posTop=Span2.style.posT op+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}</SCRIPT></HEAD> First Span First Span Second Span Second Span Third Span Third Span Fourth Span Fourth Span Fifth Span Fifth Span Sixth Span Sixth Span </BODY></HTML>
11
Span 2 <HTML><HEAD> Listing 15-1 Listing 15-1 <!-- 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.fontWeigh t='normal'} if (oCS.fontWeight=='bold'){oCS.fontWeigh t='normal'} else {oCS.fontWeight='bold'} else {oCS.fontWeight='bold'}}//--></SCRIPT></HEAD><BODY> Click me! Then click me again! </SPAN></BODY></HTML>
12
Дърво <HTML><HEAD> Listing 15-2 Listing 15-2 <STYLE> 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}</STYLE> <!-- // Set bSupportsDHTML to true for Internet Explorer 4 or later 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 if(bDoesDHTML){document.write(".off{display:none} ")} 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"} }}//--></SCRIPT></HEAD>
13
дърво <BODY> 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 </BODY></HTML>
14
Разстояние – редове – без стил <HTML><HEAD> No-Style Demonstration No-Style Demonstration </HEAD> <B><I> Absolute Positioning </I></B></FONT><BR></HTML> <B><I> Welcome to Dynamic Styles </I></B></FONT><BR> <B><I> Letter Spacing </I></B></FONT></BODY>
15
Разстояние – редове – със стил <HTML><HEAD> Style Demonstration Style Demonstration </HEAD> <DIV STYLE=" position:absolute;top:30;left:60;color:yellow; font: bold italic 24pt Verdana;"> Absolute Positioning </DIV> <DIV STYLE=" position:absolute;top:50;left:80;color:white; font: bold italic 25pt Verdana; filter:glow(color=#996666, strength=6)"> Welcome to Dynamic Styles </DIV> <DIV STYLE=" position:absolute;top:100;left:90;color:red; font: bold italic 20pt Verdana; letter-spacing: 14pt"> Letter Spacing </DIV></BODY></HTML>
16
край
Similar presentations
