CSS Евгения Ковачева. BODY { PADDING-RIGHT: 0px; PADDING-RIGHT: 0px; PADDING-LEFT:...
17
CSS CSS Евгения Ковачева Евгения Ковачева
-
Upload
august-floyd -
Category
Documents
-
view
218 -
download
1
Transcript of CSS Евгения Ковачева. BODY { PADDING-RIGHT: 0px; PADDING-RIGHT: 0px; PADDING-LEFT:...
CSSCSS
Евгения КовачеваЕвгения Ковачева
BODYBODY
{{ 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: #ffffffSCROLLBAR-DARKSHADOW-COLOR: #ffffff }}
TABLETABLE
{{ 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% }}
TDTD
{{ 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: 0pxborder-spacing: 0px }}
IMGIMG
{{ BORDER-RIGHT: 0px;BORDER-RIGHT: 0px; BORDER-TOP: 0px;BORDER-TOP: 0px; MARGIN: 3px;MARGIN: 3px; BORDER-LEFT: 0px;BORDER-LEFT: 0px; BORDER-BOTTOM: 0pxBORDER-BOTTOM: 0px }}
fontsfonts
h1 { h1 { color: #800080;color: #800080; font-family : verdana, font-family : verdana,
arial;arial; font-size: 14px;font-size: 14px; }} h2 { h2 { color: #333333;color: #333333; font-family :verdana, font-family :verdana,
arial;arial; font-size: 12px;font-size: 12px; }}
P { P { color: #006600;color: #006600; font-family : arial, font-family : arial,
verdana;verdana; font-size: 12px;font-size: 12px; text-align : left;text-align : left; }}
listslists
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; }}
linkslinks
A:link { color: #800080; font-family: verdana, arial; font-A:link { color: #800080; font-family: verdana, arial; font-size: 12px; text-decoration: none;}size: 12px; text-decoration: none;}
A:visited { color: #800080; font-family: verdana, arial; A:visited { color: #800080; font-family: verdana, arial; font-size: 12px; text-decoration: none;}font-size: 12px; text-decoration: none;}
A:active { color: #000000; font-family: verdana, arial; A:active { color: #000000; font-family: verdana, arial; font-size: 12px; text-decoration: none;} font-size: 12px; text-decoration: none;}
A:hover { color: #006600; font-family: verdana, arial; A:hover { color: #006600; font-family: verdana, arial; font-size: 12px; text-decoration: none;}font-size: 12px; text-decoration: none;}
ПримериПримери
Span 1Span 1
<HTML><HTML> <HEAD><HEAD> <TITLE>Listing 15-4</TITLE><TITLE>Listing 15-4</TITLE> <STYLE>SPAN {position:absolute}</STYLE><STYLE>SPAN {position:absolute}</STYLE> <SCRIPT LANGUAGE="JavaScript"><SCRIPT LANGUAGE="JavaScript"> function moveSpans(){function moveSpans(){ Span1.style.top=15Span1.style.top=15 Span2.style.posTop=Span2.style.posTop+1Span2.style.posTop=Span2.style.posTop+1 Span3.style.left=10Span3.style.left=10 Span4.style.top=window.event.ySpan4.style.top=window.event.y Span5.style.posLeft=window.event.xSpan5.style.posLeft=window.event.x Span6.style.pixelTop=window.event.xSpan6.style.pixelTop=window.event.x Span6.style.posLeft=window.event.ySpan6.style.posLeft=window.event.y }} </SCRIPT></SCRIPT> </HEAD></HEAD> <BODY onmousemove="moveSpans()"><BODY onmousemove="moveSpans()"> <SPAN ID="Span1" STYLE="top: 0; left: 0">First Span</SPAN><SPAN ID="Span1" STYLE="top: 0; left: 0">First Span</SPAN> <SPAN ID="Span2" STYLE="top: 50; left: 50">Second 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="Span3" STYLE="top: 100; left: 100">Third Span</SPAN> <SPAN ID="Span4" STYLE="top: 150; left: 150">Fourth 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="Span5" STYLE="top: 200; left: 200">Fifth Span</SPAN> <SPAN ID="Span6" STYLE="top: 250; left: 250">Sixth Span</SPAN><SPAN ID="Span6" STYLE="top: 250; left: 250">Sixth Span</SPAN> </BODY></BODY> </HTML></HTML>
Span 2Span 2
<HTML><HTML> <HEAD><HEAD> <TITLE>Listing 15-1</TITLE><TITLE>Listing 15-1</TITLE> <SCRIPT LANGUAGE="JavaScript"><SCRIPT LANGUAGE="JavaScript"> <!--<!-- function changeIt(oClicked){function changeIt(oClicked){ oCS=oClicked.styleoCS=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'} }} //-->//--> </SCRIPT></SCRIPT> </HEAD></HEAD> <BODY><BODY> <SPAN ID=MySpan STYLE="font-weight: bold; cursor: hand" onclick="changeIt(this)"><SPAN ID=MySpan STYLE="font-weight: bold; cursor: hand" onclick="changeIt(this)"> Click me! Then click me again!Click me! Then click me again! </SPAN></SPAN> </BODY></BODY> </HTML></HTML>
ДървоДърво
<HTML><HTML> <HEAD><HEAD> <TITLE>Listing 15-2</TITLE><TITLE>Listing 15-2</TITLE> <STYLE><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></STYLE> <SCRIPT LANGUAGE="JavaScript"><SCRIPT LANGUAGE="JavaScript"> <!--<!-- // 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("<STYLE>.off{display:none}</STYLE>")}if(bDoesDHTML){document.write("<STYLE>.off{display:none}</STYLE>")}
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"} }} }} //-->//--> </SCRIPT></SCRIPT> </HEAD></HEAD>
дърводърво
<BODY><BODY> <SPAN onclick="doSection(Sec1)"><B>Section 1</B></SPAN><BR><SPAN onclick="doSection(Sec1)"><B>Section 1</B></SPAN><BR> <DIV CLASS="off" ID="Sec1"><DIV CLASS="off" ID="Sec1"> <A HREF="generic.htm">Chapter 1</A><BR> <A HREF="generic.htm">Chapter 1</A><BR> </DIV></DIV> <SPAN onclick="doSection(Sec2)"><B>Section 2</B></SPAN><BR><SPAN onclick="doSection(Sec2)"><B>Section 2</B></SPAN><BR> <DIV CLASS="off" ID="Sec2"><DIV CLASS="off" ID="Sec2"> <A HREF="generic.htm">Chapter 2</A><BR> <A HREF="generic.htm">Chapter 2</A><BR> <A HREF="generic.htm">Chapter 3</A><BR> <A HREF="generic.htm">Chapter 3</A><BR> <A HREF="generic.htm">Chapter 4</A><BR> <A HREF="generic.htm">Chapter 4</A><BR> <A HREF="generic.htm">Chapter 5</A><BR> <A HREF="generic.htm">Chapter 5</A><BR> </DIV></DIV> <SPAN onclick="doSection(Sec3)"><B>Section 3</B></SPAN><BR><SPAN onclick="doSection(Sec3)"><B>Section 3</B></SPAN><BR> <DIV CLASS="off" ID="Sec3"><DIV CLASS="off" ID="Sec3"> <A HREF="generic.htm">Chapter 6</A><BR> <A HREF="generic.htm">Chapter 6</A><BR> <A HREF="generic.htm">Chapter 7</A><BR> <A HREF="generic.htm">Chapter 7</A><BR> <A HREF="generic.htm">Chapter 8</A><BR> <A HREF="generic.htm">Chapter 8</A><BR> <A HREF="generic.htm">Chapter 9</A><BR> <A HREF="generic.htm">Chapter 9</A><BR> <A HREF="generic.htm">Chapter 10</A><BR> <A HREF="generic.htm">Chapter 10</A><BR> </DIV></DIV> </BODY></BODY> </HTML></HTML>
Разстояние – редовеРазстояние – редове – – без стилбез стил
<HTML><HTML> <HEAD><HEAD> <TITLE>No-Style Demonstration</TITLE><TITLE>No-Style Demonstration</TITLE> </HEAD></HEAD> <BODY BGCOLOR="#000000" <BODY BGCOLOR="#000000"
LEFTMARGIN=0 TOPMARGIN=0>LEFTMARGIN=0 TOPMARGIN=0>
<FONT COLOR="yellow" SIZE="6" <FONT COLOR="yellow" SIZE="6" FACE="verdana">FACE="verdana">
<B><I><B><I> Absolute PositioningAbsolute Positioning </I></B></I></B> </FONT></FONT>
<BR><BR> </HTML></HTML>
<FONT COLOR="white" SIZE="6" <FONT COLOR="white" SIZE="6" FACE="verdana">FACE="verdana">
<B><I><B><I> Welcome to Dynamic StylesWelcome to Dynamic Styles </I></B></I></B> </FONT></FONT>
<BR><BR>
<FONT COLOR="red" SIZE="5" <FONT COLOR="red" SIZE="5" FACE="verdana">FACE="verdana">
<B><I><B><I> Letter SpacingLetter Spacing </I></B></I></B> </FONT></FONT>
</BODY></BODY>
Разстояние – редове – със стилРазстояние – редове – със стил
<HTML><HTML> <HEAD><HEAD> <TITLE>Style Demonstration</TITLE><TITLE>Style Demonstration</TITLE> </HEAD></HEAD> <BODY BGCOLOR="#000000" LEFTMARGIN=0 <BODY BGCOLOR="#000000" LEFTMARGIN=0
TOPMARGIN=0>TOPMARGIN=0>
<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 PositioningAbsolute Positioning </DIV></DIV>
<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, filter:glow(color=#996666,
strength=6)">strength=6)"> Welcome to Dynamic StylesWelcome to Dynamic Styles </DIV></DIV>
<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 SpacingLetter Spacing </DIV></DIV>
</BODY></BODY> </HTML></HTML>
IframeIframe 1 1 IframeIframe 2 2 IframeIframe 3 3
крайкрай
