dynamic html: cascading style sheets (css)dynamic html: cascading style sheets (css) ... 3

of 23 /23
484 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook. 14 Dynamic HTML: Cascading Style Sheets(CSS) 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 4 <!-- Fig. 14.1: inline.html --> 5 <!-- Using inline styles --> 6 7 <HEAD><TITLE>Inline Styles</TITLE></HEAD> 8 9 <BODY> 10 11 <P>Here is some text</P> 12 13 <!-- The STYLE attribute allows you to declare inline --> 14 <!-- styles. Separate multiple styles with a semicolon. --> 15 <P STYLE = "font-size: 20pt">Here is some more text</P> 16 <P STYLE = "font-size: 20pt; color: #0000FF">Even more text</P> 17 18 </BODY> 19 </HTML> Fig. 14.1 Inline styles .

Upload: others

Post on 01-Jun-2020

56 views

Category:

Documents


8 download

TRANSCRIPT

Page 1: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

484 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

14Dynamic HTML: Cascading Style Sheets™ (CSS)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 <!-- Fig. 14.1: inline.html -->5 <!-- Using inline styles -->67 <HEAD><TITLE>Inline Styles </TITLE></HEAD>89 <BODY>

1011 <P>Here is some text </P>1213 <!-- The STYLE attribute allows you to declare inline -->14 <!-- styles. Separate multiple styles with a semicolon. -->15 <P STYLE = "font-size: 20pt" >Here is some more text </P>16 <P STYLE = "font-size: 20pt; color: #0000FF" >Even more text </P>1718 </BODY>19 </HTML>

Fig. 14.1 Inline styles .

Page 2: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

Chapter 14 Dynamic HTML: Cascading Style Sheets™ (CSS) 485

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 <!-- Fig. 14.2: declared.html -->5 <!-- Declaring a style sheet in the header section. -->67 <HEAD>8 <TITLE> Style Sheets </TITLE>9

10 <!-- This begins the style sheet section. -->11 <STYLE TYPE = "text/css" >1213 EM { background-color: #8000FF ;14 color: white } 1516 H1 { font-family: Arial, sans-serif }1718 P { font-size: 18pt }1920 .blue { color: blue } 2122 </STYLE>23 </HEAD>2425 <BODY>2627 <!-- This CLASS attribute applies the .blue style -->28 <H1 CLASS = "blue" >A Heading </H1>29 <P>Here is some text. Here is some text. Here is some text.30 Here is some text. Here is some text. </P>3132 <H1>Another Heading </H1>33 <P CLASS = "blue" >Here is some more text. Here is some more text.34 Here is some <EM>more</EM> text. Here is some more text. </P>3536 </BODY>37 </HTML>

Fig. 14.2 Declaring styles in the header section of a document (part 1 of 2).

Page 3: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

486 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 14.2 Declaring styles in the header section of a document (part 2 of 2).

Page 4: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

Chapter 14 Dynamic HTML: Cascading Style Sheets™ (CSS) 487

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 <!-- Fig 14.3: advanced.html -->5 <!-- More advanced style sheets -->67 <HEAD>8 <TITLE> More Styles </TITLE>9 <STYLE TYPE = "text/css" >

1011 A.nodec { text-decoration: none }1213 A:hover { text-decoration: underline ;14 color: red ;15 background-color: #CCFFCC }1617 LI EM { color: red ;18 font-weight: bold }1920 UL { margin-left: 75px }2122 UL UL { text-decoration: underline ;23 margin-left: 15px }2425 </STYLE>26 </HEAD>2728 <BODY>2930 <H1>Shopping list for <EM>Monday</EM>: </H1>31 <UL>32 <LI> Milk </LI>33 <LI> Bread34 <UL>35 <LI> White bread </LI>36 <LI> Rye bread </LI>37 <LI> Whole wheat bread </LI>38 </UL></LI>39 <LI> Rice </LI>40 <LI> Potatoes </LI>41 <LI> Pizza <EM>with mushrooms </EM></LI>42 </UL>4344 <P><A CLASS = "nodec" HREF = "http://food.com" >Go to the Grocery45 store </A></P>4647 </BODY>48 </HTML>

Fig. 14.3 Inheritance in style sheets (part 1 of 2).

Page 5: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

488 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 A { text-decoration: none }23 A:hover { text-decoration: underline ;4 color: red ;5 background-color: #CCFFCC }67 LI EM { color: red ;8 font-weight: bold }9

10 UL { margin-left: 2cm }1112 UL UL { text-decoration: underline ;13 margin-left: .5cm }

Fig. 14.4 An external style sheet (styles.css ).

Fig. 14.3 Inheritance in style sheets (part 2 of 2).

Hovering over a link

Page 6: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

Chapter 14 Dynamic HTML: Cascading Style Sheets™ (CSS) 489

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 <!-- Fig. 14.5: imported.html -->5 <!-- Linking external style sheets -->67 <HEAD>8 <TITLE> Importing style sheets </TITLE>9 <LINK REL = "stylesheet" TYPE = "text/css" HREF = "styles.css" >

10 </HEAD>1112 <BODY>1314 <H1>Shopping list for <EM>Monday</EM>: </H1>15 <UL>16 <LI> Milk </LI>17 <LI> Bread18 <UL>19 <LI> White bread </LI>20 <LI> Rye bread </LI>21 <LI >Whole wheat bread </LI>22 </UL></LI>23 <LI> Rice </LI>24 <LI> Potatoes </LI>25 <LI> Pizza <EM>with mushrooms </EM></LI>26 </UL>2728 <A HREF = "http://food.com" >Go to the Grocery store </A>2930 </BODY>31 </HTML>

Fig. 14.5 Linking an external style sheet.

Page 7: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

490 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 <!-- Fig 14.6: positioning.html -->5 <!-- Absolute positioning of elements -->67 <HEAD>8 <TITLE> Absolute Positioning </TITLE>9 </HEAD>

1011 <BODY>1213 <IMG SRC = "i.gif" STYLE = "position: absolute; top: 0px; 14 left: 0px; z-index: 1" >15 <H1 STYLE = "position: absolute; top: 50px; left: 50px; 16 z-index: 3" >Positioned Text </H1>17 <IMG SRC = "circle.gif" STYLE = "position: absolute; top: 25px;18 left: 100px; z-index: 2" >1920 </BODY>21 </HTML>

Fig. 14.6 Positioning elements with CSS .

Page 8: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

Chapter 14 Dynamic HTML: Cascading Style Sheets™ (CSS) 491

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 <!-- Fig 14.7: positioning2.html -->5 <!-- Relative positioning of elements -->67 <HEAD>8 <TITLE> Relative Positioning </TITLE>9

10 <STYLE TYPE = "text/css" >1112 P { font-size: 2em;13 font-family: Verdana, Arial, sans-serif }1415 SPAN { color: red ;16 font-size: .6em ; 17 height: 1em }1819 .super { position: relative ;20 top: -1ex }2122 .sub { position: relative ;23 bottom: -1ex }2425 .shiftl { position: relative ;26 left: -1ex }2728 .shiftr { position: relative ;29 right: -1ex }30 </STYLE>31 </HEAD>3233 <BODY>3435 <P> 36 Text text text text <SPAN CLASS = "super" >superscript </SPAN>37 text text text text <SPAN CLASS = "sub" >subscript </SPAN>38 text Text text <SPAN CLASS = "shiftl" >left-shifted </SPAN> 39 text text text <SPAN CLASS = "shiftr" >right-shifted </SPAN>40 Text text text text text 41 </P>4243 </BODY>44 </HTML>

Fig. 14.7 Relative positioning of elements (part 1 of 2).

Page 9: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

492 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 14.7 Relative positioning of elements (part 2 of 2).

Page 10: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

Chapter 14 Dynamic HTML: Cascading Style Sheets™ (CSS) 493

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 <!-- Fig. 14.8: background.html -->5 <!-- Adding background images and indentation -->67 <HEAD>8 <TITLE> Background Images </TITLE>9

10 <STYLE TYPE = "text/css" >1112 BODY { background-image: url(watermark.gif) ;13 background-position: bottom right ;14 background-repeat: no-repeat ;15 background-attachment: fixed }1617 P { font-size: 2em;18 color: #AA5588;19 text-indent: 1em;20 font-family: Arial, sans-serif }2122 .dark { font-weight: bold }2324 </STYLE>25 </HEAD>2627 <BODY>2829 <P>30 This is some sample text to fill in the page. 31 <SPAN CLASS = "dark" >This is some sample 32 text to fill in the page. </SPAN>33 This is some sample text to fill in the page.34 This is some sample text to fill in the page.35 This is some sample text to fill in the page.36 This is some sample text to fill in the page.37 </P>3839 </BODY>40 </HTML>

Fig. 14.8 Adding a background image with CSS (part 1 of 2).

Page 11: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

494 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 14.8 Adding a background image with CSS (part 2 of 2).

Background image

Page 12: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

Chapter 14 Dynamic HTML: Cascading Style Sheets™ (CSS) 495

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 <!-- Fig. 14.9: width.html -->5 <!-- Setting box dimensions and aligning text -->67 <HEAD>8 <TITLE> Box Dimensions </TITLE>9 <STYLE TYPE = "text/css" >

1011 DIV { background-color: #FFCCFF;12 margin-bottom: .5em }1314 </STYLE>15 </HEAD>1617 <BODY>1819 <DIV STYLE = "width: 20%" >Here is some20 text that goes in a box which is21 set to stretch across twenty precent 22 of the width of the screen. </DIV>2324 <DIV STYLE = "width: 80%; text-align: center" >25 Here is some CENTERED text that goes in a box 26 which is set to stretch across eighty precent of 27 the width of the screen. </DIV>2829 <DIV STYLE = "width: 20%; height: 30%; overflow: scroll" >30 This box is only twenty percent of31 the width and thirty percent of the height.32 What do we do if it overflows? Set the33 overflow property to scroll! </DIV>3435 </BODY>36 </HTML>

Fig. 14.9 Setting box dimensions and aligning text (part 1 of 2).

Page 13: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

496 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 14.9 Setting box dimensions and aligning text (part 2 of 2).

Page 14: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

Chapter 14 Dynamic HTML: Cascading Style Sheets™ (CSS) 497

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 <!-- Fig. 14.10: floating.html -->5 <!-- Floating elements and element boxes -->67 <HEAD>8 <TITLE> Flowing Text Around Floating Elements </TITLE>9 <STYLE TYPE = "text/css" >

1011 DIV { background-color: #FFCCFF;12 margin-bottom: .5em ;13 font-size: 1.5em ;14 width: 50% }1516 </STYLE>17 </HEAD>1819 <BODY>2021 <DIV STYLE = "text-align: center" >Centered text </DIV>22 <DIV STYLE = "text-align: right" >Right-aligned text </DIV>2324 <DIV STYLE = "float: right; margin: .5em" >This is some floated25 text, floated text, floated text, floated text. </DIV>26 <P>27 Here is some flowing text, flowing text, flowing text.28 Here is some flowing text, flowing text, flowing text.29 Here is some flowing text, flowing text, flowing text.30 Here is some flowing text, flowing text, flowing text.31 Here is some flowing text, flowing text, flowing text.32 Here is some flowing text, flowing text, flowing text.33 Here is some flowing text, flowing text, flowing text.34 Here is some flowing text, flowing text, flowing text.35 </P>3637 <P><DIV STYLE = "float: right; padding: .5em" >This is some floated38 text, floated text, floated text, floated text. </DIV>39 Here is some flowing text, flowing text, flowing text.40 Here is some flowing text, flowing text, flowing text.41 Here is some flowing text, flowing text, flowing text.42 <SPAN STYLE = "clear: right" >Here is some unflowing text.43 Here is some unflowing text. </SPAN>44 </P>4546 </BODY>47 </HTML>

Fig. 14.10 Floating elements, aligning text and setting box dimensions (part 1 of 2).

Page 15: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

498 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 14.10 Floating elements, aligning text and setting box dimensions (part 2 of 2).

.5 em margin

.5 em padding

Page 16: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

Chapter 14 Dynamic HTML: Cascading Style Sheets™ (CSS) 499

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 14.11 Box model for block-level elements.

Margin

Border

Padding

Page 17: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

500 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 <!-- Fig. 14.12: borders.html -->5 <!-- Setting borders of an element -->67 <HEAD>8 <TITLE> Borders </TITLE>9 <STYLE TYPE = "text/css" >

1011 BODY { background-color: #CCFFCC }1213 DIV { text-align: center ;14 margin-bottom: 1em;15 padding: .5em }1617 .thick { border-width: thick }1819 .medium { border-width: medium }2021 .thin { border-width: thin }2223 .groove { border-style: groove }2425 .inset { border-style: inset }2627 .outset { border-style: outset }2829 .red { border-color: red }3031 .blue { border-color: blue }3233 </STYLE>34 </HEAD>3536 <BODY>3738 <DIV CLASS = "thick groove" >This text has a border </DIV>39 <DIV CLASS = "medium groove" >This text has a border </DIV>40 <DIV CLASS = "thin groove" >This text has a border </DIV>4142 <P CLASS = "thin red inset" >A thin red line... </P>43 <P CLASS = "medium blue outset" >And a thicker blue line </P>4445 </BODY>46 </HTML>

Fig. 14.12 Applying borders to elements (part 1 of 2).

Page 18: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

Chapter 14 Dynamic HTML: Cascading Style Sheets™ (CSS) 501

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 14.12 Applying borders to elements (part 2 of 2).

Page 19: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

502 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 <!-- Fig. 14.13: borders2.html -->5 <!-- Various border-styles -->67 <HEAD>8 <TITLE> Borders </TITLE>9

10 <STYLE TYPE = "text/css" >1112 BODY { background-color: #CCFFCC }1314 DIV { text-align: center ;15 margin-bottom: .3em ;16 width: 50%;17 position: relative ; 18 left: 25%;19 padding: .3em }20 </STYLE>21 </HEAD>2223 <BODY>2425 <DIV STYLE = "border-style: solid" >Solid border </DIV>26 <DIV STYLE = "border-style: double" >Double border </DIV>27 <DIV STYLE = "border-style: groove" >Groove border </DIV>28 <DIV STYLE = "border-style: ridge" >Ridge border </DIV>29 <DIV STYLE = "border-style: inset" >Inset border </DIV>30 <DIV STYLE = "border-style: outset" >Outset border </DIV>31 </BODY>32 </HTML>

Fig. 14.13 Various border-style s.

Page 20: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

Chapter 14 Dynamic HTML: Cascading Style Sheets™ (CSS) 503

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 <!-- Fig. 14.14: user.html -->5 <!-- User styles -->67 <HEAD>8 <TITLE> User Styles </TITLE>9

10 <STYLE TYPE = "text/css" >1112 .note { font-size: 1.5em }1314 </STYLE>15 </HEAD>1617 <BODY>1819 <P>Thanks for visiting my Web site. I hope you enjoy it. </P>20 <P CLASS = "note" >Please Note: This site will be moving soon.21 Please check periodically for updates. </P>2223 </BODY>24 </HTML>

Fig. 14.14 Modifying text size with the em measurement.

Page 21: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

504 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 14.15 Adding a user style sheet in Internet Explorer 5.

Page 22: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

Chapter 14 Dynamic HTML: Cascading Style Sheets™ (CSS) 505

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 BODY { font-size: 20pt ;2 background-color: #CCFFCC }3 A { color: red }

Fig. 14.16 A sample user style sheet.

Page 23: Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

506 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 14.17 A Web page with user styles enabled.