1 / 16

CSS

CSS. Евгения Ковачева. 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;

abeni
Download Presentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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. 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; } fonts

  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. <HTML> <HEAD> <TITLE>Listing 15-4</TITLE> <STYLE>SPAN {position:absolute}</STYLE> <SCRIPT LANGUAGE="JavaScript"> function moveSpans(){ Span1.style.top=15 Span2.style.posTop=Span2.style.posTop+1 Span3.style.left=10 Span4.style.top=window.event.y Span5.style.posLeft=window.event.x Span6.style.pixelTop=window.event.x Span6.style.posLeft=window.event.y } </SCRIPT> </HEAD> <BODY onmousemove="moveSpans()"> <SPAN ID="Span1" STYLE="top: 0; left: 0">First Span</SPAN> <SPAN ID="Span2" STYLE="top: 50; left: 50">Second Span</SPAN> <SPAN ID="Span3" STYLE="top: 100; left: 100">Third Span</SPAN> <SPAN ID="Span4" STYLE="top: 150; left: 150">Fourth Span</SPAN> <SPAN ID="Span5" STYLE="top: 200; left: 200">Fifth Span</SPAN> <SPAN ID="Span6" STYLE="top: 250; left: 250">Sixth Span</SPAN> </BODY> </HTML> Span 1

  11. <HTML> <HEAD> <TITLE>Listing 15-1</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeIt(oClicked){ oCS=oClicked.style alert("You clicked the element named "+oClicked.id+".") alert("It is "+oCS.fontWeight+". Click OK to change it.") if (oCS.fontWeight=='bold'){oCS.fontWeight='normal'} else {oCS.fontWeight='bold'} } //--> </SCRIPT> </HEAD> <BODY> <SPAN ID=MySpan STYLE="font-weight: bold; cursor: hand" onclick="changeIt(this)"> Click me! Then click me again! </SPAN> </BODY> </HTML> Span 2

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

  13. дърво <BODY> <SPAN onclick="doSection(Sec1)"><B>Section 1</B></SPAN><BR> <DIV CLASS="off" ID="Sec1"> &nbsp;&nbsp;&nbsp;<A HREF="generic.htm">Chapter 1</A><BR> </DIV> <SPAN onclick="doSection(Sec2)"><B>Section 2</B></SPAN><BR> <DIV CLASS="off" ID="Sec2"> &nbsp;&nbsp;&nbsp;<A HREF="generic.htm">Chapter 2</A><BR> &nbsp;&nbsp;&nbsp;<A HREF="generic.htm">Chapter 3</A><BR> &nbsp;&nbsp;&nbsp;<A HREF="generic.htm">Chapter 4</A><BR> &nbsp;&nbsp;&nbsp;<A HREF="generic.htm">Chapter 5</A><BR> </DIV> <SPAN onclick="doSection(Sec3)"><B>Section 3</B></SPAN><BR> <DIV CLASS="off" ID="Sec3"> &nbsp;&nbsp;&nbsp;<A HREF="generic.htm">Chapter 6</A><BR> &nbsp;&nbsp;&nbsp;<A HREF="generic.htm">Chapter 7</A><BR> &nbsp;&nbsp;&nbsp;<A HREF="generic.htm">Chapter 8</A><BR> &nbsp;&nbsp;&nbsp;<A HREF="generic.htm">Chapter 9</A><BR> &nbsp;&nbsp;&nbsp;<A HREF="generic.htm">Chapter 10</A><BR> </DIV> </BODY> </HTML>

  14. <HTML> <HEAD> <TITLE>No-Style Demonstration</TITLE> </HEAD> <BODY BGCOLOR="#000000" LEFTMARGIN=0 TOPMARGIN=0> <FONT COLOR="yellow" SIZE="6" FACE="verdana"> <B><I> Absolute Positioning </I></B> </FONT> <BR> </HTML> <FONT COLOR="white" SIZE="6" FACE="verdana"> <B><I> Welcome to Dynamic Styles </I></B> </FONT> <BR> <FONT COLOR="red" SIZE="5" FACE="verdana"> <B><I> Letter Spacing </I></B> </FONT> </BODY> Разстояние – редове – без стил

  15. <HTML> <HEAD> <TITLE>Style Demonstration</TITLE> </HEAD> <BODY BGCOLOR="#000000" LEFTMARGIN=0 TOPMARGIN=0> <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. край

More Related