Top Banner
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 .
23

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

Jun 01, 2020

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
  • 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 2 34 5 67 Inline Styles 89

    1011

    Here is some text

    1213 14 15

    Here is some more text

    16

    Even more text

    1718 19

    Fig. 14.1 Inline styles .

  • 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 2 34 5 67 8 Style Sheets 9

    10 11 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 23 2425 2627 28 A Heading 29

    Here is some text. Here is some text. Here is some text.30 Here is some text. Here is some text.

    3132 Another Heading 33

    Here is some more text. Here is some more text.34 Here is some more text. Here is some more text.

    3536 37

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

  • 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).

  • 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 2 34 5 67 8 More Styles 9

    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 26 2728 2930 Shopping list for Monday: 31 32 Milk 33 Bread34 35 White bread 36 Rye bread 37 Whole wheat bread 38 39 Rice 40 Potatoes 41 Pizza with mushrooms 42 4344

    Go to the Grocery45 store

    4647 48

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

  • 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

  • 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 2 34 5 67 8 Importing style sheets 9

    10 1112 1314 Shopping list for Monday: 15 16 Milk 17 Bread18 19 White bread 20 Rye bread 21 Whole wheat bread 22 23 Rice 24 Potatoes 25 Pizza with mushrooms 26 2728 Go to the Grocery store 2930 31

    Fig. 14.5 Linking an external style sheet.

  • 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 2 34 5 67 8 Absolute Positioning 9

    1011 1213 15 Positioned Text 17 1920 21

    Fig. 14.6 Positioning elements with CSS .

  • 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 2 34 5 67 8 Relative Positioning 9

    10 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 31 3233 3435

    36 Text text text text superscript 37 text text text text subscript 38 text Text text left-shifted 39 text text text right-shifted 40 Text text text text text 41

    4243 44

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

  • 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).

  • 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 2 34 5 67 8 Background Images 9

    10 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 25 2627 2829

    30 This is some sample text to fill in the page. 31 This is some sample 32 text to fill in the page. 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

    3839 40

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

  • 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

  • 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 2 34 5 67 8 Box Dimensions 9

    1011 DIV { background-color: #FFCCFF;12 margin-bottom: .5em }1314 15 1617 1819 Here is some20 text that goes in a box which is21 set to stretch across twenty precent 22 of the width of the screen. 2324 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. 2829 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! 3435 36

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

  • 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).

  • 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 2 34 5 67 8 Flowing Text Around Floating Elements 9

    1011 DIV { background-color: #FFCCFF;12 margin-bottom: .5em ;13 font-size: 1.5em ;14 width: 50% }1516 17 1819 2021 Centered text 22 Right-aligned text 2324 This is some floated25 text, floated text, floated text, floated text. 26

    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

    3637

    This is some floated38 text, floated text, floated text, floated text. 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 Here is some unflowing text.43 Here is some unflowing text. 44

    4546 47

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

  • 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

  • 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

  • 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 2 34 5 67 8 Borders 9

    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 34 3536 3738 This text has a border 39 This text has a border 40 This text has a border 4142

    A thin red line...

    43

    And a thicker blue line

    4445 46

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

  • 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).

  • 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 2 34 5 67 8 Borders 9

    10 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 21 2223 2425 Solid border 26 Double border 27 Groove border 28 Ridge border 29 Inset border 30 Outset border 31 32

    Fig. 14.13 Various border-style s.

  • 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 2 34 5 67 8 User Styles 9

    10 1112 .note { font-size: 1.5em }1314 15 1617 1819

    Thanks for visiting my Web site. I hope you enjoy it.

    20

    Please Note: This site will be moving soon.21 Please check periodically for updates.

    2223 24

    Fig. 14.14 Modifying text size with the em measurement.

  • 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.

  • 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.

  • 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.