Cascading Style Sheets™ (CSS)paramesh/COMP0011/5-Handout-for-Lect5-CSS.pdf · 5.3 Embedded Style Sheets •Styles that are placed in a style element use selectors to apply style
Post on 01-Jun-2020
9 Views
Preview:
Transcript
1
� 2008 Pearson Education, Inc. All rights reserved.
1
55
Cascading Style Sheets™ (CSS)
� 2008 Pearson Education, Inc. All rights reserved.
2
5.1 Introduction
• Cascading Style Sheets (CSS)
– Used to specify the presentation of elements separately
from the structure of the document
• CSS validator
jigsaw.w3.org/cssjigsaw.w3.org/cssjigsaw.w3.org/cssjigsaw.w3.org/css----validator/validator/validator/validator/
2
� 2008 Pearson Education, Inc. All rights reserved.
3
5.2 Inline Styles
• Inline style
– declare a style for an individual element by using the
stylestylestylestyle attribute in the element’s start tag
• Each CSS property is followed by a colon and the
value of the attribute
– Multiple property declarations are separated by a
semicolon
� 2008 Pearson Education, Inc. All rights reserved.
4
5.2 Inline Styles (Cont.)
•colorcolorcolorcolor property sets text color
– Color names and hexadecimal codes may be used as the
value
3
� 2008 Pearson Education, Inc. All rights reserved.
5
Good Programming Practice 5.1
Inline styles do not truly separate presentation from content. To apply similar styles to multiple elements, use embedded styles sheets or external style sheets, introduced later in this chapter.
� 2008 Pearson Education,
Inc. All rights reserved.
6
Fig. 5.1 | Using
inline styles
(Part 1 of 2).
1 <?xml version =<?xml version =<?xml version =<?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.1: inline.html 5.1: inline.html 5.1: inline.html 5.1: inline.html -------->>>>
6 <!<!<!<!-------- Using inline styles Using inline styles Using inline styles Using inline styles -------->>>>
7 <html xmlns <html xmlns <html xmlns <html xmlns ==== "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Inline StylesInline StylesInline StylesInline Styles</title></title></title></title>
10 </head></head></head></head>
11 <body><body><body><body>
12 <p><p><p><p>This text does not have any style applied to it.This text does not have any style applied to it.This text does not have any style applied to it.This text does not have any style applied to it.</p></p></p></p>
13
14 <!<!<!<!-------- The style attribute allows you to declare The style attribute allows you to declare The style attribute allows you to declare The style attribute allows you to declare -------->>>>
15 <!<!<!<!-------- inline styles. Separate multiple style properties inline styles. Separate multiple style properties inline styles. Separate multiple style properties inline styles. Separate multiple style properties -------->>>>
16 <!<!<!<!-------- with a semicolon. with a semicolon. with a semicolon. with a semicolon. -------->>>>
17 <p style =<p style =<p style =<p style = "font"font"font"font----size: 20pt"size: 20pt"size: 20pt"size: 20pt">This text has theThis text has theThis text has theThis text has the
18 <em><em><em><em>fontfontfontfont----sizesizesizesize</em></em></em></em> style applied to it, making it 20pt.style applied to it, making it 20pt.style applied to it, making it 20pt.style applied to it, making it 20pt.
19 </p></p></p></p>
20
21 <p style = <p style = <p style = <p style = "font"font"font"font----size: 20pt; color: #6666ff"size: 20pt; color: #6666ff"size: 20pt; color: #6666ff"size: 20pt; color: #6666ff">>>>
22 This text has theThis text has theThis text has theThis text has the <em><em><em><em>fontfontfontfont----sizesizesizesize</em></em></em></em> andandandand
23 <em><em><em><em>colorcolorcolorcolor</em></em></em></em> styles applied to it, making itstyles applied to it, making itstyles applied to it, making itstyles applied to it, making it
24 20pt. and light blue.20pt. and light blue.20pt. and light blue.20pt. and light blue.</p></p></p></p>
25 </body></body></body></body>
26 </html></html></html></html>
Style attribute
Sets the paragraph’s
font size to 20ptSets the paragraph’s
color to light blue
4
� 2008 Pearson Education, Inc. All rights reserved.
7
Fig. 5.1 | Using inline styles (Part 2 of 2).
� 2008 Pearson Education, Inc. All rights reserved.
8
5.3 Embedded Style Sheets
• Styles that are placed in a stylestylestylestyle element use
selectors to apply style elements throughout the
entire document
•stylestylestylestyle element attribute typetypetypetype specifies the
MIME type (the specific encoding format) of the
style sheet. Style sheets use text/csstext/csstext/csstext/css
• Each rule body in a style sheet begins and ends
with a curly brace ({{{{ and }}}}).
5
� 2008 Pearson Education, Inc. All rights reserved.
9
5.3 Embedded Style Sheets (Cont.)
• Style-class declarations are preceded by a period
and are applied to elements of the specific class
– The class attribute applies a style class to an element
• CSS rules in a style sheet use the same format as
inline styles:
– The property is followed by a colon (:) and the value of
that property
– Multiple properties are separated by semicolons (;)
� 2008 Pearson Education, Inc. All rights reserved.
10
5.3 Embedded Style Sheets (Cont.)
•fontfontfontfont----weightweightweightweight property specifies the “boldness” of text. Possible values are:
– boldboldboldbold
– normalnormalnormalnormal (the default)
– bolderbolderbolderbolder (bolder than bold text)
– lighterlighterlighterlighter (lighter than normal text)
– Boldness also can be specified with multiples of 100, from
100 to 900 (e.g., 100, 200, …, 900). Text specified as normal
is equivalent to 400, and bold text is equivalent to 700
6
� 2008 Pearson Education, Inc. All rights reserved.
11
5.3 Embedded Style Sheets (Cont.)
•backgroundbackgroundbackgroundbackground----colorcolorcolorcolor attribute specifies the
background color of the element
•fontfontfontfont----familyfamilyfamilyfamily attribute names a specific font
that should be displayed
– Generic font families allow authors to specify a type of font
instead of a specific font, in case a browser does not
support a specific font
•fontfontfontfont----sizesizesizesize property specifies the size used to
render the font
� 2008 Pearson Education,
Inc. All rights reserved.
12
Fig. 5.2 |
Embedded
style sheets
(Part 1 of 2).
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.2: embedded.html 5.2: embedded.html 5.2: embedded.html 5.2: embedded.html -------->>>>
6 <!<!<!<!-------- Embedded style sheets. Embedded style sheets. Embedded style sheets. Embedded style sheets. -------->>>>
7 <html x<html x<html x<html xmlns = mlns = mlns = mlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Style SheetsStyle SheetsStyle SheetsStyle Sheets</title></title></title></title>
10
11 <!<!<!<!-------- this begins the style sheet section this begins the style sheet section this begins the style sheet section this begins the style sheet section -------->>>>
12 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
13 emememem { { { { fontfontfontfont----weiweiweiweight:ght:ght:ght: boldboldboldbold;;;;
14 color: blackcolor: blackcolor: blackcolor: black }}}}
15 h1h1h1h1 { { { { fontfontfontfont----family:family:family:family: tahoma, helvetica, sanstahoma, helvetica, sanstahoma, helvetica, sanstahoma, helvetica, sans----serifserifserifserif }}}}
16 pppp { { { { fontfontfontfont----size:size:size:size: 12pt12pt12pt12pt;;;;
17 fontfontfontfont----family:family:family:family: arial, sansarial, sansarial, sansarial, sans----serifserifserifserif }}}}
18 .special.special.special.special { { { { color:color:color:color: #6666ff#6666ff#6666ff#6666ff }}}}
19 </style></style></style></style>
20 </head></head></head></head>
21 <body><body><body><body>
22 <!<!<!<!-------- this clathis clathis clathis class attribute applies the .special style ss attribute applies the .special style ss attribute applies the .special style ss attribute applies the .special style -------->>>>
23 <h1 class = <h1 class = <h1 class = <h1 class = "special""special""special""special">>>>Deitel & Associates, Inc.Deitel & Associates, Inc.Deitel & Associates, Inc.Deitel & Associates, Inc.</h1></h1></h1></h1>
24
25 <p><p><p><p>Deitel & Associates, Inc. is an internationally Deitel & Associates, Inc. is an internationally Deitel & Associates, Inc. is an internationally Deitel & Associates, Inc. is an internationally
26 recognized corporate training and publishing organization recognized corporate training and publishing organization recognized corporate training and publishing organization recognized corporate training and publishing organization
27 specializing in programming languages, Internet/World specializing in programming languages, Internet/World specializing in programming languages, Internet/World specializing in programming languages, Internet/World
28 Wide Web technology and object technology education. Wide Web technology and object technology education. Wide Web technology and object technology education. Wide Web technology and object technology education.
29 The company provides courses on Java, C++, Visual Basic, The company provides courses on Java, C++, Visual Basic, The company provides courses on Java, C++, Visual Basic, The company provides courses on Java, C++, Visual Basic,
30 C#, C, Internet and World Wide Web programmingC#, C, Internet and World Wide Web programmingC#, C, Internet and World Wide Web programmingC#, C, Internet and World Wide Web programming, Object , Object , Object , Object
31 Technology, and more.Technology, and more.Technology, and more.Technology, and more.</p></p></p></p>
Sets the MIME type to
text/css
Sets the properties for all
elements in the document
within em tags
Style sheet begins
Sets the properties for all
h1 elements in the document
Sets the properties for all
p elements in the document
Creates a special class
Style sheet ends
7
� 2008 Pearson Education,
Inc. All rights reserved.
13
Fig. 5.2 |
Embedded
style sheets
(Part 2 of 2).
32
33 <h1<h1<h1<h1>Clients>Clients>Clients>Clients</h1></h1></h1></h1>
34 <p class = <p class = <p class = <p class = "special""special""special""special">>>> The company's clients include many The company's clients include many The company's clients include many The company's clients include many
35 <em><em><em><em>Fortune 1000 companiesFortune 1000 companiesFortune 1000 companiesFortune 1000 companies</em></em></em></em>, government agencies, , government agencies, , government agencies, , government agencies,
36 branches of the military and business organizations. branches of the military and business organizations. branches of the military and business organizations. branches of the military and business organizations.
37 Through its Through its Through its Through its publishing partnership with Prentice Hall, publishing partnership with Prentice Hall, publishing partnership with Prentice Hall, publishing partnership with Prentice Hall,
38 Deitel & Associates, Inc. publishes leading Deitel & Associates, Inc. publishes leading Deitel & Associates, Inc. publishes leading Deitel & Associates, Inc. publishes leading----edge edge edge edge
39 programming textbooks, professional books, interactive programming textbooks, professional books, interactive programming textbooks, professional books, interactive programming textbooks, professional books, interactive
40 web web web web----based multimedia Cyber Classrooms, satellite based multimedia Cyber Classrooms, satellite based multimedia Cyber Classrooms, satellite based multimedia Cyber Classrooms, satellite
41 courses courses courses courses and World Wide Web courses.and World Wide Web courses.and World Wide Web courses.and World Wide Web courses.</p></p></p></p>
42 </body> </body> </body> </body>
43 </html></html></html></html>
The special class is applied to this p element
� 2008 Pearson Education, Inc. All rights reserved.
14
5.4 Conflicting Styles
• Styles defined by the user take precedence over
styles defined by the user agent
• Styles defined by authors take precedence over
styles defined by the user
• Most styles are inherited from parent elements.
Styles defined for children have higher specificity
and take precedence over the parent’s styles
• Conflicts are resolved in favor of properties with
a higher specificity
8
� 2008 Pearson Education, Inc. All rights reserved.
15
5.4 Conflicting Styles (Cont.)
•texttexttexttext----decorationdecorationdecorationdecoration property applies
decorations to text in an element
underlineunderlineunderlineunderline
overlineoverlineoverlineoverline
linelinelineline----throughthroughthroughthrough
blinkblinkblinkblink
� 2008 Pearson Education, Inc. All rights reserved.
16
5.4 Conflicting Styles (Cont.)
• Pseudoclasses give the author access to content
not specifically declared in the document
• Pseudoclasses are separated by a colon (with no
surrounding spaces) from the name of the
element to which they are applied
•hoverhoverhoverhover pseudoclass is activated when the user moves the mouse cursor over an element
9
� 2008 Pearson Education, Inc. All rights reserved.
17
5.4 Conflicting Styles (Cont.)
• To apply rules to multiple elements, separate the
elements with commas in the style sheet
• To apply rules to only a certain type of element
that is a child of another type, separate the
element names with spaces
� 2008 Pearson Education, Inc. All rights reserved.
18
5.4 Conflicting Styles (Cont.)
• Relative length measurements:
– pxpxpxpx (pixels – size varies depending on screen resolution)
– emememem (usually the height of a font’s uppercase M)
– exexexex (usually the height of a font’s lowercase x)
– Percentages (of the font’s default size)
• Absolute-length measurements (units that do not vary in size):
– in (inches)
– cm (centimeters)
– mm (millimeters)
– pt (points; 1 pt = 1/72 in)
– pc (picas; 1 pc = 12 pt)
10
� 2008 Pearson Education,
Inc. All rights reserved.
19
Fig. 5.3 |
Inheritance
in style
sheets (Part
1 of 3).
1 <?xml version =<?xml version =<?xml version =<?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.3: advanced.html 5.3: advanced.html 5.3: advanced.html 5.3: advanced.html -------->>>>
6 <!<!<!<!-------- Inheritance in style sheets. Inheritance in style sheets. Inheritance in style sheets. Inheritance in style sheets. -------->>>>
7 <<<<html xmlns =html xmlns =html xmlns =html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>More StylesMore StylesMore StylesMore Styles</title></title></title></title>
10 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
11 bodybodybodybody { { { { fontfontfontfont----family:family:family:family: arial, helvetica, sansarial, helvetica, sansarial, helvetica, sansarial, helvetica, sans----serifserifserifserif }}}}
12 a.nodeca.nodeca.nodeca.nodec { { { { texttexttexttext----decoration:decoration:decoration:decoration: nonenonenonenone }}}}
13 a:hovera:hovera:hovera:hover { { { { texttexttexttext----decoration:decoration:decoration:decoration: underlineunderlineunderlineunderline }}}}
14 li emli emli emli em { { { { fontfontfontfont----weight:weight:weight:weight: boldboldboldbold }}}}
15 h1, emh1, emh1, emh1, em { { { { texttexttexttext----decoration:decoration:decoration:decoration: underlineunderlineunderlineunderline }}}}
16 ulululul { { { { marginmarginmarginmargin----left:left:left:left: 20px20px20px20px }}}}
17 ul ulul ulul ulul ul { { { { fontfontfontfont----size:size:size:size: .8em.8em.8em.8em }}}}
18 </style></style></style></style>
19 </head></head></head></head>
20 <body><body><body><body>
21 <h1><h1><h1><h1>Shopping list for Monday:Shopping list for Monday:Shopping list for Monday:Shopping list for Monday:</h1></h1></h1></h1>
22
Defines the class nodec that can only be used by
anchor elements
Sets the properties for the hoverpseudoclass for the a element, which is activated when the user moves the
cursor over an anchor element
All em elements that are children of lielements set to bold
Applies underline style to
all h1 and em elements
� 2008 Pearson Education,
Inc. All rights reserved.
20
Fig. 5.3 |
Inheritance
in style
sheets (Part
2 of 3).
23 <ul><ul><ul><ul>
24 <li><li><li><li>MilkMilkMilkMilk</li></li></li></li>
25 <li><li><li><li>BreadBreadBreadBread
26 <ul><ul><ul><ul>
27 <li><li><li><li>White breadWhite breadWhite breadWhite bread</li></li></li></li>
28 <li><li><li><li>Rye breadRye breadRye breadRye bread</li></li></li></li>
29 <li><li><li><li>Whole wheat breadWhole wheat breadWhole wheat breadWhole wheat bread</li></li></li></li>
30 </ul> </ul> </ul> </ul>
31 </l</l</l</li>i>i>i>
32 <li><li><li><li>RiceRiceRiceRice</li></li></li></li>
33 <li><li><li><li>PotatoesPotatoesPotatoesPotatoes</li></li></li></li>
34 <li><li><li><li>Pizza Pizza Pizza Pizza <em><em><em><em>with mushroomswith mushroomswith mushroomswith mushrooms</em></li></em></li></em></li></em></li>
35 </ul> </ul> </ul> </ul>
36
37 <p><em><p><em><p><em><p><em>Go to theGo to theGo to theGo to the</em></em></em></em>
38 <a class = <a class = <a class = <a class = "nodec""nodec""nodec""nodec" href =href =href =href = "http://www.deitel.com""http://www.deitel.com""http://www.deitel.com""http://www.deitel.com">>>>
39 GrGrGrGrocery storeocery storeocery storeocery store</a></a></a></a>
40 </p> </p> </p> </p>
41 </body></body></body></body>
42 </html></html></html></html>
11
� 2008 Pearson Education, Inc. All rights reserved.
21
Fig. 5.3 | Inheritance in style sheets (Part 3 of 3).
� 2008 Pearson Education, Inc. All rights reserved.
22
Portability Tip 5.1
To ensure that your style sheets work in various web browsers, test them on all the client web browsers that will render documents using your styles, as well as using the W3C CSS Validator.
12
� 2008 Pearson Education, Inc. All rights reserved.
23
Common Programming Error 5.1
Including a space before or after the colon separating a pseudoclass from the name of the element to which it is applied is an error that prevents the pseudoclass from being applied properly.
� 2008 Pearson Education, Inc. All rights reserved.
24
Good Programming Practice 5.2
Whenever possible, use relative-length measurements. If you use absolute-length measurements, your document may not be readable on some client browsers (e.g., wireless phones).
13
� 2008 Pearson Education, Inc. All rights reserved.
25
5.5 Linking External Style Sheets
• External style sheets are separate documents that
contain only CSS rules
• Help create a uniform look for a website
– separate pages can all use the same styles
– Modifying a single style-sheet file makes changes to styles
across an entire website
� 2008 Pearson Education, Inc. All rights reserved.
26
Software Engineering Observation 5.1
Always use an external style sheet when developing a website with multiple pages. External style sheets separate content from presentation, allowing for more consistent look-and-feel, more efficient development, and better performance.
14
� 2008 Pearson Education, Inc. All rights reserved.
27
5.5 Linking External Style Sheets (Cont.)
•linklinklinklink element
– Uses relrelrelrel attribute to specify a relationship between two
documents
– relrelrelrel attribute declares the linked document to be a
stylesheet for the document
•typetypetypetype attribute specifies the MIME type of the
related document
•hrefhrefhrefhref attribute provides the URL for the
document containing the style sheet
� 2008 Pearson Education,
Inc. All rights reserved.
28
Fig. 5.4 |
External
style sheet.
1 /* Fig./* Fig./* Fig./* Fig. 5.4: styles.css */5.4: styles.css */5.4: styles.css */5.4: styles.css */
2 /* External stylesheet *//* External stylesheet *//* External stylesheet *//* External stylesheet */
3
4 bodybodybodybody { fontfontfontfont----family:family:family:family: arial, helvetica, sansarial, helvetica, sansarial, helvetica, sansarial, helvetica, sans----serifserifserifserif }
5
6 a.nodeca.nodeca.nodeca.nodec { { { { texttexttexttext----decoration:decoration:decoration:decoration: nonenonenonenone } } } }
7
8 a:hovera:hovera:hovera:hover { { { { texttexttexttext----decoration:decoration:decoration:decoration: underlineunderlineunderlineunderline } } } }
9
10 li em li em li em li em { { { { fontfontfontfont----weight:weight:weight:weight: boldboldboldbold } } } }
11
12 h1, emh1, emh1, emh1, em { { { { texttexttexttext----decoration:decoration:decoration:decoration: underlineunderlineunderlineunderline } } } }
13
14 ulululul { { { { marginmarginmarginmargin----left:left:left:left: 20px20px20px20px } } } }
15
16 ul ulul ulul ulul ul { fontfontfontfont----size:size:size:size: .8em.8em.8em.8em; }
15
� 2008 Pearson Education,
Inc. All rights reserved.
29
Fig. 5.5 |
Linking an
external
style sheet
(Part 1 of 2).
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.6: external.html 5.6: external.html 5.6: external.html 5.6: external.html -------->>>>
6 <!<!<!<!-------- Linking an external style sheet. Linking an external style sheet. Linking an external style sheet. Linking an external style sheet. -------->>>>
7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Linking External Style SheetsLinking External Style SheetsLinking External Style SheetsLinking External Style Sheets</title></title></title></title>
10 <link rel =<link rel =<link rel =<link rel = "stylesheet""stylesheet""stylesheet""stylesheet" type =type =type =type = "text/css""text/css""text/css""text/css"
11 href =href =href =href = "styles.css""styles.css""styles.css""styles.css" />/>/>/>
12 </head></head></head></head>
13 <body><body><body><body>
14 <h1><h1><h1><h1>Shopping list for <em>Monday</em>:Shopping list for <em>Monday</em>:Shopping list for <em>Monday</em>:Shopping list for <em>Monday</em>:</h1></h1></h1></h1>
15
16 <ul><ul><ul><ul>
17 <li><li><li><li>MilkMilkMilkMilk</li></li></li></li>
18 <li><li><li><li>BreadBreadBreadBread
19 <ul><ul><ul><ul>
20 <li><li><li><li>White breadWhite breadWhite breadWhite bread</li></li></li></li>
21 <li><li><li><li>Rye breadRye breadRye breadRye bread</li></li></li></li>
22 <li><li><li><li>Whole wheat breadWhole wheat breadWhole wheat breadWhole wheat bread</li></li></li></li>
23 </ul></ul></ul></ul>
24 </li></li></li></li>
25 <li><li><li><li>RiceRiceRiceRice</li></li></li></li>
26 <li><li><li><li>PotatoesPotatoesPotatoesPotatoes</li></li></li></li>
27 <li><li><li><li>PizzaPizzaPizzaPizza <em><em><em><em>with mushroomswith mushroomswith mushroomswith mushrooms</em></li></em></li></em></li></em></li>
28 </ul></ul></ul></ul>
29
The linked document is declared to be
the current one’s stylesheet
The linked document’s MIME type is
text/css
The linked document’s URL is
styles.css
� 2008 Pearson Education,
Inc. All rights reserved.
30
Fig. 5.5 |
Linking an
external
style sheet
(Part 2 of 2).
30 <p><em><p><em><p><em><p><em>Go to theGo to theGo to theGo to the</em></em></em></em>
31 <a class = <a class = <a class = <a class = "nodec""nodec""nodec""nodec" href =href =href =href = """"http://www.deitel.com"http://www.deitel.com"http://www.deitel.com"http://www.deitel.com">>>>
32 Grocery storeGrocery storeGrocery storeGrocery store</a></a></a></a>
33 </p> </p> </p> </p>
34 </body> </body> </body> </body>
35 </html></html></html></html>
16
� 2008 Pearson Education, Inc. All rights reserved.
31
Software Engineering Observation 5.2
External style sheets are reusable. Creating them once and reusing them reduces programming effort.
� 2008 Pearson Education, Inc. All rights reserved.
32
Performance Tip 5.1
Reusing external style sheets reduces load time and bandwidth usage on a server, since the style sheet can be downloaded once, stored by the web browser, and applied to all pages on a website.
17
� 2008 Pearson Education, Inc. All rights reserved.
33
5.6 Positioning Elements
• CSS positionpositionpositionposition property
– Allows absolute positioning, which provides greater
control over where on a page elements reside
– Normally, elements are positioned on the page in the order
that they appear in the XHTML document
– Specifying an element’s position as absolute removes it
from the normal flow of elements on the page and positions
it according to distance from the top, left, right or bottom
margin of its parent element
� 2008 Pearson Education, Inc. All rights reserved.
34
5.6 Positioning Elements (Cont.)
• The z-index property allows a developer to layer
overlapping elements
• Elements that have higher z-index values are
displayed in front of elements with lower z-index
values
18
� 2008 Pearson Education,
Inc. All rights reserved.
35
Fig. 5.6 |
Absolute
positioning
of elements
(Part 1 of 2).
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.6: positioning.html 5.6: positioning.html 5.6: positioning.html 5.6: positioning.html -------->>>>
6 <!<!<!<!-------- Absolute positioning of elements. Absolute positioning of elements. Absolute positioning of elements. Absolute positioning of elements. -------->>>>
7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Absolute PositioningAbsolute PositioningAbsolute PositioningAbsolute Positioning</title></title></title></title>
10 <style type =<style type =<style type =<style type = "text/css""text/css""text/css""text/css">>>>
11 .bgimg.bgimg.bgimg.bgimg { { { { position:position:position:position: absoluteabsoluteabsoluteabsolute;;;;
12 top:top:top:top: 0px0px0px0px;;;;
13 left:left:left:left: 0px0px0px0px;;;;
14 zzzz----index:index:index:index: 1111 }}}}
15 .fgimg .fgimg .fgimg .fgimg { { { { position:position:position:position: absoluteabsoluteabsoluteabsolute;;;;
16 top:top:top:top: 25px25px25px25px;;;;
17 left:left:left:left: 100px100px100px100px;;;;
18 zzzz----index:index:index:index: 2222 }}}}
19 .text.text.text.text { { { { position:position:position:position: absoluteabsoluteabsoluteabsolute;;;;
20 top:top:top:top: 25px25px25px25px;;;;
21 left:left:left:left: 100px100px100px100px;;;;
22 zzzz----index:index:index:index: 3333;;;;
23 fontfontfontfont----size:size:size:size: 20pt20pt20pt20pt;;;;
24 fontfontfontfont----familyfamilyfamilyfamily:::: tahoma, geneva, sanstahoma, geneva, sanstahoma, geneva, sanstahoma, geneva, sans----serif serif serif serif } } } }
25 </style></style></style></style>
26 </head></head></head></head>
27 <body><body><body><body>
28 <p><img src = <p><img src = <p><img src = <p><img src = "bgimg.gif""bgimg.gif""bgimg.gif""bgimg.gif" class = class = class = class = "bgimg""bgimg""bgimg""bgimg"
29 alt =alt =alt =alt = "First positioned image""First positioned image""First positioned image""First positioned image" /></p>/></p>/></p>/></p>
30
Class that sets an element’s
absolute position at the top
left of the containing element
Lowest z-index, so this element is
behind all the others
Set element’s position 25px from the
top and 100 from the leftThis element will appear on top of the
first one, since it has a higher z-index
This element will appear on top of all
others, since it has the highest z-index
� 2008 Pearson Education,
Inc. All rights reserved.
36
Fig. 5.6 |
Absolute
positioning
of elements
(Part 2 of 2).
31 <p><img src = <p><img src = <p><img src = <p><img src = "fgimg.gif""fgimg.gif""fgimg.gif""fgimg.gif" class = class = class = class = "fgimg""fgimg""fgimg""fgimg"
32 alt = alt = alt = alt = "Second positioned image""Second positioned image""Second positioned image""Second positioned image" /></p> /></p> /></p> /></p>
33
34 <p class = <p class = <p class = <p class = "text""text""text""text">>>>Positioned TextPositioned TextPositioned TextPositioned Text</p></p></p></p>
35 </body> </body> </body> </body>
36 </html></html></html></html>
19
� 2008 Pearson Education, Inc. All rights reserved.
37
5.6 Positioning Elements (Cont.)
• Relative positioning keeps elements in the general
flow on the page and offsets them by the specified
top, left, right or bottom value
� 2008 Pearson Education, Inc. All rights reserved.
38
5.6 Positioning Elements (Cont.)
• Inline-level elements
– Do not change the flow of the document
– Examples:
• imgimgimgimg
• aaaa
• emememem
• strongstrongstrongstrong
• spanspanspanspan
– Grouping element
– Does not apply any formatting to its contents
– Creates a container for CSS rules or idididid attributes to be applied to a section
20
� 2008 Pearson Education, Inc. All rights reserved.
39
5.6 Positioning Elements (Cont.)
• Block-level elements
– Displayed on their own line
– Have virtual boxes around them
– Examples:
• pppp
• all headings (h1h1h1h1 through h6h6h6h6)
• divdivdivdiv
– A grouping element like spanspanspanspan
� 2008 Pearson Education,
Inc. All rights reserved.
40
Fig. 5.7 |
Relative
positioning
of elements
(Part 1 of 2).
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.7: positioning2.html 5.7: positioning2.html 5.7: positioning2.html 5.7: positioning2.html -------->>>>
6 <!<!<!<!-------- Relative positioning of elements. Relative positioning of elements. Relative positioning of elements. Relative positioning of elements. -------->>>>
7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Relative PositioningRelative PositioningRelative PositioningRelative Positioning</title></title></title></title>
10 <style type =<style type =<style type =<style type = "text/css""text/css""text/css""text/css">
11 pppp { { { { fontfontfontfont----sizesizesizesize: : : : 1.3em1.3em1.3em1.3em;;;;
12 fontfontfontfont----family:family:family:family: verdana, arial, saverdana, arial, saverdana, arial, saverdana, arial, sansnsnsns----serifserifserifserif }}}}
13 spanspanspanspan { { { { color:color:color:color: redredredred;;;;
14 fontfontfontfont----size:size:size:size: .6em.6em.6em.6em; ; ; ;
15 height:height:height:height: 1em1em1em1em }}}}
16 .super.super.super.super { { { { position:position:position:position: relativerelativerelativerelative;;;;
17 top:top:top:top: ----1ex1ex1ex1ex }}}}
18 .sub.sub.sub.sub { { { { position:position:position:position: relativerelativerelativerelative;;;;
19 bottom:bottom:bottom:bottom: ----1ex1ex1ex1ex }}}}
20 .shiftleft.shiftleft.shiftleft.shiftleft { { { { position:position:position:position: relativerelativerelativerelative;;;;
21 left:left:left:left: ----1ex1ex1ex1ex }}}}
22 .shiftright.shiftright.shiftright.shiftright { { { { position:position:position:position: relativerelativerelativerelative;;;;
23 right:right:right:right: ----1111exexexex }}}}
24 </style></style></style></style>
25 </head></head></head></head>
26 <body><body><body><body>
27 <p><p><p><p>The text at the end of this sentence The text at the end of this sentence The text at the end of this sentence The text at the end of this sentence
28 <span class = <span class = <span class = <span class = "super""super""super""super">>>>is in superscriptis in superscriptis in superscriptis in superscript</span></span></span></span>....</p></p></p></p>
29
Positions element 5 ex upwards
Positions element 1 ex downwards
Positions element 1 ex to the left
Positions element 1 ex to the right
Apply the super class to this span element
21
� 2008 Pearson Education,
Inc. All rights reserved.
41
Fig. 5.7 |
Relative
positioning
of elements
(Part 2 of 2).
30 <p><p><p><p>The text at the end of this sentenceThe text at the end of this sentenceThe text at the end of this sentenceThe text at the end of this sentence
31 <span class = <span class = <span class = <span class = "sub""sub""sub""sub">>>>is in subscriptis in subscriptis in subscriptis in subscript</span></span></span></span>....</p></p></p></p>
32
33 <p><p><p><p>The text at the end of this sentenceThe text at the end of this sentenceThe text at the end of this sentenceThe text at the end of this sentence
34 <span class = <span class = <span class = <span class = "shiftleft""shiftleft""shiftleft""shiftleft">>>>is shifted leftis shifted leftis shifted leftis shifted left</span></span></span></span>....</p></p></p></p>
35
36 <p><p><p><p>ThThThThe text at the end of this sentencee text at the end of this sentencee text at the end of this sentencee text at the end of this sentence
37 <span class = <span class = <span class = <span class = "shiftright""shiftright""shiftright""shiftright">>>>is shifted rightis shifted rightis shifted rightis shifted right</span></span></span></span>....</p></p></p></p>
38 </body></body></body></body>
39 </html></html></html></html>
Apply the sub class to this span element
Apply the shiftleft class to this span element
Apply the shiftrightclass to this span element
� 2008 Pearson Education, Inc. All rights reserved.
42
Common Programming Error 5.2
Because relative positioning keeps elements in the flow of text in your documents, be careful to avoid unintentionally overlapping text.
22
� 2008 Pearson Education, Inc. All rights reserved.
43
5.7 Backgrounds
• CSS can control the backgrounds of block-level
elements by adding:
– Colors
– Images
� 2008 Pearson Education, Inc. All rights reserved.
44
5.7 Backgrounds (Cont.)
• Property backgroundbackgroundbackgroundbackground----imageimageimageimage
– Specifies the URL of the image, in the format
url(fileLocation)
• Property backgroundbackgroundbackgroundbackground----positionpositionpositionposition
– Places the image on the page using the values toptoptoptop, bottombottombottombottom, centercentercentercenter, leftleftleftleft and rightrightrightright individually or in combination for vertical and horizontal positioning. You
can also position by using lengths
23
� 2008 Pearson Education, Inc. All rights reserved.
45
5.7 Backgrounds (Cont.)
• Property backgroundbackgroundbackgroundbackground----imageimageimageimage specifies the
URL of the image
– Use the format url(url(url(url(fileLocation))))
• Property backgroundbackgroundbackgroundbackground----positionpositionpositionposition places the
image on the page
– Use the values toptoptoptop, bottombottombottombottom, centercentercentercenter, leftleftleftleft and rightrightrightrightindividually or in combination for vertical and horizontal
positioning
– You can also position by specifying horizontal then vertical
distances from the top-left corner of the screen
� 2008 Pearson Education, Inc. All rights reserved.
46
5.7 Backgrounds (Cont.)
•backgroundbackgroundbackgroundbackground----repeatrepeatrepeatrepeat property controls the
tiling of the background image
– Setting the tiling to nononono----repeatrepeatrepeatrepeatdisplays one copy of the background image on screen
– Setting to repeatrepeatrepeatrepeat (the default) tiles the image vertically
and horizontally
– Setting to repeat-x tiles the image only horizontally
– Setting to repeat-y tile the image only vertically
24
� 2008 Pearson Education, Inc. All rights reserved.
47
5.7 Backgrounds (Cont.)
• Property setting
backgroundbackgroundbackgroundbackground----attachment: fixedattachment: fixedattachment: fixedattachment: fixed
– fixes the image in the position specified by background-
position. Scrolling the browser window will not move the
image from its set position. The default value, scroll, moves
the image as the user scrolls the window
� 2008 Pearson Education, Inc. All rights reserved.
48
5.7 Backgrounds (Cont.)
•texttexttexttext----indentindentindentindent property indents the first line of text in the element by the specified amount
•fontfontfontfont----stylestylestylestyle property allows you to set text to
nonenonenonenone, italicitalicitalicitalic or obliqueobliqueobliqueoblique
25
� 2008 Pearson Education,
Inc. All rights reserved.
49
Fig. 5.8 |
Adding
background
images and
indentation
(Part 1 of 2).
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.8: background.html 5.8: background.html 5.8: background.html 5.8: background.html -------->>>>
6 <!<!<!<!-------- Adding background images and indentaAdding background images and indentaAdding background images and indentaAdding background images and indentation. tion. tion. tion. -------->>>>
7 <html xmlns =<html xmlns =<html xmlns =<html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Background ImagesBackground ImagesBackground ImagesBackground Images</title></title></title></title>
10 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
11 body body body body {{{{ backgroundbackgroundbackgroundbackground----image: image: image: image: url(logo.gif)url(logo.gif)url(logo.gif)url(logo.gif);;;;
12 backgroundbackgroundbackgroundbackground----position: position: position: position: bobobobottom rightttom rightttom rightttom right;;;;
13 backgroundbackgroundbackgroundbackground----repeat: repeat: repeat: repeat: nononono----repeatrepeatrepeatrepeat;;;;
14 backgroundbackgroundbackgroundbackground----attachment: attachment: attachment: attachment: fixedfixedfixedfixed;;;;
15 backgroundbackgroundbackgroundbackground----color: color: color: color: #eeeeee #eeeeee #eeeeee #eeeeee }}}}
16 p p p p {{{{ fontfontfontfont----size: size: size: size: 18pt18pt18pt18pt;;;;
17 color: color: color: color: #1144#1144#1144#1144AAAAAAAA;;;;
18 texttexttexttext----indent: indent: indent: indent: 1em1em1em1em;;;;
19 fontfontfontfont----family: family: family: family: arial, sansarial, sansarial, sansarial, sans----serifserifserifserif;;;; }}}}
20 .dark.dark.dark.dark { { { { fontfontfontfont----weight:weight:weight:weight: boldboldboldbold }}}}
21 </style></style></style></style>
22 </head></head></head></head>
Inserts the image at
logo.gif as the background
Places the image at the
bottom right of the page
Displays only one copy of the
image
Keeps the image in place
when the user scrolls in the
browser window
Fills the remainder of the
window with a light gray
background
Indents the first line of text in
the element by 1 em
� 2008 Pearson Education,
Inc. All rights reserved.
50
Fig. 5.8 |
Adding
background
images and
indentation
(Part 2 of 2).
23 <body><body><body><body>
24 <p><p><p><p>
25 This example uses the background This example uses the background This example uses the background This example uses the background----image, image, image, image,
26 background background background background----position and backgroundposition and backgroundposition and backgroundposition and background----attachmentattachmentattachmentattachment
27 styles to place the styles to place the styles to place the styles to place the <span class = <span class = <span class = <span class = "dark""dark""dark""dark">>>>Deitel Deitel Deitel Deitel
28 & Associates, Inc. & Associates, Inc. & Associates, Inc. & Associates, Inc.</span></span></span></span> logo in the botto logo in the botto logo in the botto logo in the bottom, m, m, m,
29 right corner of the page. Notice how the logo right corner of the page. Notice how the logo right corner of the page. Notice how the logo right corner of the page. Notice how the logo
30 stays in the proper position when you resize the stays in the proper position when you resize the stays in the proper position when you resize the stays in the proper position when you resize the
31 browser window. The background browser window. The background browser window. The background browser window. The background----color fills in wherecolor fills in wherecolor fills in wherecolor fills in where
32 there is no image. there is no image. there is no image. there is no image.
33 </p> </p> </p> </p>
34 </body> </body> </body> </body>
35 </h</h</h</html>tml>tml>tml>
26
� 2008 Pearson Education, Inc. All rights reserved.
51
5.8 Element Dimensions
• Dimensions of elements on a page can be set with
CSS by using properties heightheightheightheight and widthwidthwidthwidth
– Their values can be relative or absolute
• Text in an element can be centered using texttexttexttext----align: centeralign: centeralign: centeralign: center; other values for the text-align property are leftleftleftleft and rightrightrightright
� 2008 Pearson Education, Inc. All rights reserved.
52
5.8 Element Dimensions (Cont.)
• Problem with setting both vertical and horizontal
dimensions of an element
– Content might sometimes exceed the set boundaries, in which case the
element must be made large enough for all the content to fit
– Can set the overflowoverflowoverflowoverflowproperty to scrollscrollscrollscroll, which adds scroll bars if the text overflows the boundaries set for it
27
� 2008 Pearson Education,
Inc. All rights reserved.
53
Fig. 5.9 |
Element
dimensions
and text
alignment
(Part 1 of 2).
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.9: width.html 5.9: width.html 5.9: width.html 5.9: width.html -------->>>>
6 <!<!<!<!-------- Element dimensions and text alignment. Element dimensions and text alignment. Element dimensions and text alignment. Element dimensions and text alignment. -------->>>>
7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Box DimensionsBox DimensionsBox DimensionsBox Dimensions</title></title></title></title>
10 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
11 divdivdivdiv { { { { backgroundbackgroundbackgroundbackground----color:color:color:color: #aaccff#aaccff#aaccff#aaccff;;;;
12 marginmarginmarginmargin----bottom:bottom:bottom:bottom: .5em.5em.5em.5em;;;;
13 fontfontfontfont----family:family:family:family: arial, helvetica, sansarial, helvetica, sansarial, helvetica, sansarial, helvetica, sans----serifserifserifserif }}}}
14 </style></style></style></style>
15 </head></head></head></head>
16 <body><body><body><body>
17 <div style = <div style = <div style = <div style = "width: 20%""width: 20%""width: 20%""width: 20%">>>>Here is someHere is someHere is someHere is some
18 text that goes in a box which istext that goes in a box which istext that goes in a box which istext that goes in a box which is
19 set to stretch across twenty percent set to stretch across twenty percent set to stretch across twenty percent set to stretch across twenty percent
20 of the widthof the widthof the widthof the width of the screen.of the screen.of the screen.of the screen.</div></div></div></div>
21
22 <div style =<div style =<div style =<div style = "width: 80%; text"width: 80%; text"width: 80%; text"width: 80%; text----align: center"align: center"align: center"align: center">>>>
23 Here is some CENTERED text that goes in a box Here is some CENTERED text that goes in a box Here is some CENTERED text that goes in a box Here is some CENTERED text that goes in a box
24 which is set to stretch across eighty percent of which is set to stretch across eighty percent of which is set to stretch across eighty percent of which is set to stretch across eighty percent of
25 the width of the screen.the width of the screen.the width of the screen.the width of the screen.</div></div></div></div>
26
Sets the width of the element
to 20% of the browser’s
screen’s size
Sets the width of the element
to 80% of the browser’s
screen’s size and centers it
� 2008 Pearson Education,
Inc. All rights reserved.
54
Fig. 5.9 |
Element
dimensions
and text
alignment
(Part 2 of 2).
27 <div style = <div style = <div style = <div style = "width: 20%; height: 150px; overflow: scroll""width: 20%; height: 150px; overflow: scroll""width: 20%; height: 150px; overflow: scroll""width: 20%; height: 150px; overflow: scroll">>>>
28 This box is only twenty percent of This box is only twenty percent of This box is only twenty percent of This box is only twenty percent of
29 the width and has a fixed height. the width and has a fixed height. the width and has a fixed height. the width and has a fixed height.
30 What do we do if it overflows? Set the What do we do if it overflows? Set the What do we do if it overflows? Set the What do we do if it overflows? Set the
31 overflow property to scroll! overflow property to scroll! overflow property to scroll! overflow property to scroll!</div></div></div></div>
32 </body> </body> </body> </body>
33 </html></html></html></html>
Sets the width of the element
to 20% of the browser’s
screen’s size, the height to 150
px, and allows the element to
scroll if the text overflows the
allotted size
28
� 2008 Pearson Education, Inc. All rights reserved.
55
5.9 Box Model and Text Flow
• Block-level XHTML elements have a virtual box drawn around them based on the box model
• When the browser renders using the box model, each element is surrounded by:
– Padding
• The padding property determines the distance between the content inside an element and the edge of the element
• Padding be set for each side of the box by using paddingpaddingpaddingpadding----toptoptoptop, paddingpaddingpaddingpadding----rightrightrightright, paddingpaddingpaddingpadding----leftleftleftleft and paddingpaddingpaddingpadding----bottombottombottombottom
– Margin
• Determines the distance between the element’s edge and any outside text
• Margins for individual sides of an element can be specified by using marginmarginmarginmargin----toptoptoptop, marginmarginmarginmargin----rightrightrightright, marginmarginmarginmargin----leftleftleftleft and marginmarginmarginmargin----bottombottombottombottom
– Border
� 2008 Pearson Education, Inc. All rights reserved.
56
5.9 Box Model and Text Flow (Cont.)
• The border is controlled using the properties:
– borderborderborderborder----widthwidthwidthwidth
• May be set to any of the CSS lengths or to the predefined
value of thinthinthinthin, mediummediummediummedium or thickthickthickthick
– borderborderborderborder----colorcolorcolorcolor
• Sets the color used for the border
– borderborderborderborder----stylestylestylestyle
• Options are: nonenonenonenone, hiddenhiddenhiddenhidden, dotteddotteddotteddotted, dasheddasheddasheddashed, solidsolidsolidsolid,doubledoubledoubledouble, groovegroovegroovegroove, ridgeridgeridgeridge, insetinsetinsetinset and outsetoutsetoutsetoutset
29
� 2008 Pearson Education, Inc. All rights reserved.
57
5.9 Box Model and Text Flow (Cont.)
•classclassclassclass attribute
– allows more than one class to be assigned to an XHTML
element by separating each class name from the next with
a space
� 2008 Pearson Education, Inc. All rights reserved.
58
Fig. 5.10 | Box model for block-level elements.
30
� 2008 Pearson Education,
Inc. All rights reserved.
59
Fig. 5.11 |
Borders of
block-level
elements
(Part 1 of 2).
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.11: borders.html 5.11: borders.html 5.11: borders.html 5.11: borders.html -------->>>>
6 <!<!<!<!-------- Borders of blockBorders of blockBorders of blockBorders of block----level elements. level elements. level elements. level elements. -------->>>>
7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>BordersBordersBordersBorders</title></title></title></title>
10 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
11 divdivdivdiv { { { { texttexttexttext----align:align:align:align: centercentercentercenter;;;;
12 width:width:width:width: 50%50%50%50%;;;;
13 position:position:position:position: relativerelativerelativerelative;;;;
14 left:left:left:left: 25%25%25%25%;;;;
15 borderborderborderborder----width:width:width:width: 4px4px4px4px } } } }
16 .medium.medium.medium.medium { { { { borderborderborderborder----width:width:width:width: mediummediummediummedium }}}}
17 .thin.thin.thin.thin { { { { borderborderborderborder----width:width:width:width: thin thin thin thin }}}}
18 .solid .solid .solid .solid { { { { borderborderborderborder----style:style:style:style: solidsolidsolidsolid }}}}
19 .double.double.double.double { { { { borderborderborderborder----style:style:style:style: doubledoubledoubledouble }}}}
20 .groove.groove.groove.groove { { { { borderborderborderborder----style:style:style:style: groovegroovegroovegroove }}}}
21 .inset.inset.inset.inset { { { { borderborderborderborder----style:style:style:style: insetinsetinsetinset }}}}
22 .outset.outset.outset.outset { { { { borderborderborderborder----style:style:style:style: outsetoutsetoutsetoutset }}}}
23 .dashed.dashed.dashed.dashed { { { { borderborderborderborder----style:style:style:style: dasheddasheddasheddashed }}}}
24 .red.red.red.red {{{{ borderborderborderborder----color:color:color:color: redredredred }}}}
25 .blue.blue.blue.blue { { { { borderborderborderborder----color:color:color:color: blueblueblueblue }}}}
26 </style></style></style></style>
27 </head></head></head></head>
Defines several border classes
� 2008 Pearson Education,
Inc. All rights reserved.
60
Fig. 5.11 |
Borders of
block-level
elements
(Part 2 of 2).
28 <body><body><body><body>
29 <div class = <div class = <div class = <div class = "solid""solid""solid""solid">Solid border>Solid border>Solid border>Solid border</div><hr /></div><hr /></div><hr /></div><hr />
30 <div class = <div class = <div class = <div class = "double""double""double""double">Double border>Double border>Double border>Double border</div><hr /></div><hr /></div><hr /></div><hr />
31 <div class = <div class = <div class = <div class = "groove""groove""groove""groove">Groove border>Groove border>Groove border>Groove border</div><hr /></div><hr /></div><hr /></div><hr />
32 <div class = <div class = <div class = <div class = "inset""inset""inset""inset">Inset border>Inset border>Inset border>Inset border</div><hr /></div><hr /></div><hr /></div><hr />
33 <div class = <div class = <div class = <div class = "dashed"dashed"dashed"dashed">Dashed borderDashed borderDashed borderDashed border</div><hr /></div><hr /></div><hr /></div><hr />
34 <div class = <div class = <div class = <div class = "thin red solid""thin red solid""thin red solid""thin red solid">Thin Red Solid borderThin Red Solid borderThin Red Solid borderThin Red Solid border</div><hr /></div><hr /></div><hr /></div><hr />
35 <div class =<div class =<div class =<div class = "medium blue outset""medium blue outset""medium blue outset""medium blue outset">Medium Blue Outset border>Medium Blue Outset border>Medium Blue Outset border>Medium Blue Outset border</div></div></div></div>
36 </body></body></body></body>
37 </html></html></html></html>
Applies several
classes to the same
element
31
� 2008 Pearson Education, Inc. All rights reserved.
61
5.9 Box Model and Text Flow (Cont.)
• Browsers normally place text and elements on
screen in the order in which they appear in the
XHTML file.
• Elements can be removed from the normal flow
of text.
• Floating allows you to move an element to one
side of the screen; other content in the document
will then flow around the floated element
� 2008 Pearson Education,
Inc. All rights reserved.
62
Fig. 5.12 |
Floating
elements
(Part 1 of 3).
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.12: floating.html 5.12: floating.html 5.12: floating.html 5.12: floating.html -------->>>>
6 <!<!<!<!-------- Floating elements. Floating elements. Floating elements. Floating elements. -------->>>>
7 <html xmln<html xmln<html xmln<html xmlns = s = s = s = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Flowing Text Around Floating ElementsFlowing Text Around Floating ElementsFlowing Text Around Floating ElementsFlowing Text Around Floating Elements</title></title></title></title>
10 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
11 div.headingdiv.headingdiv.headingdiv.heading { { { { backgroundbackgroundbackgroundbackground----color:color:color:color: #bbddff#bbddff#bbddff#bbddff;;;;
12 texttexttexttext----align:align:align:align: centercentercentercenter;;;;
13 fontfontfontfont----family:family:family:family: arial, helvetica, sansarial, helvetica, sansarial, helvetica, sansarial, helvetica, sans----serifserifserifserif;;;;
14 padding:padding:padding:padding: .2em.2em.2em.2em }}}}
15 pppp { { { { texttexttexttext----align:align:align:align: justifyjustifyjustifyjustify;;;;
16 fontfontfontfont----family:family:family:family: verdana, geneva, sansverdana, geneva, sansverdana, geneva, sansverdana, geneva, sans----serifserifserifserif;;;;
17 margin:margin:margin:margin: .5em.5em.5em.5em }}}}
18 div.floateddiv.floateddiv.floateddiv.floated { { { { backgroundbackgroundbackgroundbackground----color:color:color:color: #eeeeee#eeeeee#eeeeee#eeeeee;;;;
19 fontfontfontfont----size:size:size:size: 1.5em1.5em1.5em1.5em;;;;
20 fontfontfontfont----family:family:family:family: arial, helvetica, sansarial, helvetica, sansarial, helvetica, sansarial, helvetica, sans----serifserifserifserif;;;;
21 padding:padding:padding:padding: .2em.2em.2em.2em;;;;
22 marginmarginmarginmargin----left:left:left:left: .5em.5em.5em.5em;;;;
23 marginmarginmarginmargin----bottom:bottom:bottom:bottom: .5em.5em.5em.5em;;;;
24 float:float:float:float: rightrightrightright;;;;
25 texttexttexttext----align:align:align:align: rightrightrightright;;;;
26 width:width:width:width: 50%50%50%50% }}}}
27 div.sectiondiv.sectiondiv.sectiondiv.section { { { { border:border:border:border: 1p1p1p1px solid #bbddffx solid #bbddffx solid #bbddffx solid #bbddff }}}}
28 </style></style></style></style>
29 </head></head></head></head>
Sets a spacing of .5 em from
the outside of the border to
all other content
Sets a spacing of .2 em from
the inside of the border to
the element’s content
Define left and right margins
Moves element to the right,
and lets other content flow
around it
Defines the border for this
div class
32
� 2008 Pearson Education,
Inc. All rights reserved.
63
Fig. 5.12 |
Floating
elements
(Part 2 of 3).
30 <body> <body> <body> <body>
31 <div class = <div class = <div class = <div class = "heading""heading""heading""heading"><img src = ><img src = ><img src = ><img src = "deitel.png""deitel.png""deitel.png""deitel.png" alt = alt = alt = alt = "Deitel""Deitel""Deitel""Deitel" /> /> /> />
32 </div></div></div></div>
33 <div class = <div class = <div class = <div class = "section""section""section""section">>>>
34 <div class =<div class =<div class =<div class = "floated" "floated" "floated" "floated">>>>Corporate Training and PublishingCorporate Training and PublishingCorporate Training and PublishingCorporate Training and Publishing</div></div></div></div>
35 <p><p><p><p>Deitel & AssDeitel & AssDeitel & AssDeitel & Associates, Inc. is an internationally ociates, Inc. is an internationally ociates, Inc. is an internationally ociates, Inc. is an internationally
36 recognized corporate training and publishing organization recognized corporate training and publishing organization recognized corporate training and publishing organization recognized corporate training and publishing organization
37 specializing in programming languages, Internet/World specializing in programming languages, Internet/World specializing in programming languages, Internet/World specializing in programming languages, Internet/World
38 Wide Web technology and object technology education. Wide Web technology and object technology education. Wide Web technology and object technology education. Wide Web technology and object technology education.
39 The company provides courses on Java, C++, Visual Basic, C#, The company provides courses on Java, C++, Visual Basic, C#, The company provides courses on Java, C++, Visual Basic, C#, The company provides courses on Java, C++, Visual Basic, C#,
40 C, Internet and web programming, Object C, Internet and web programming, Object C, Internet and web programming, Object C, Internet and web programming, Object
41 Technology, and more. Technology, and more. Technology, and more. Technology, and more.</p></p></p></p>
42 </div> </div> </div> </div>
43 <div class = <div class = <div class = <div class = "section""section""section""section">>>>
44 <div class =<div class =<div class =<div class = "floated""floated""floated""floated">>>>LeadinLeadinLeadinLeadingggg----Edge Programming TextbooksEdge Programming TextbooksEdge Programming TextbooksEdge Programming Textbooks</div></div></div></div>
45 <p><p><p><p>Through its publishing Through its publishing Through its publishing Through its publishing
46 partnership with Prentice Hall, Deitel & Associates, partnership with Prentice Hall, Deitel & Associates, partnership with Prentice Hall, Deitel & Associates, partnership with Prentice Hall, Deitel & Associates,
47 Inc. publishes leading Inc. publishes leading Inc. publishes leading Inc. publishes leading----edge programming textbooks, edge programming textbooks, edge programming textbooks, edge programming textbooks,
48 professional books, interact professional books, interact professional books, interact professional books, interactive CDive CDive CDive CD----ROMROMROMROM----based multimedia based multimedia based multimedia based multimedia
49 Cyber Classrooms, satellite courses and DVD and web Cyber Classrooms, satellite courses and DVD and web Cyber Classrooms, satellite courses and DVD and web Cyber Classrooms, satellite courses and DVD and web----based based based based
50 video courses. video courses. video courses. video courses.</p></p></p></p>
51 </div></div></div></div>
52 </body> </body> </body> </body>
53 </html></html></html></html>
� 2008 Pearson Education, Inc. All rights reserved.
64
Fig. 5.12 | Floating elements (Part 3 of 3).
33
� 2008 Pearson Education, Inc. All rights reserved.
65
5.10 Media Types
• CSS media types
– allow a programmer to decide what a page should look like
depending on the kind of media being used to display the
page
– Most common media type for a web page is the screenscreenscreenscreenmedia type, which is a standard computer screen
� 2008 Pearson Education, Inc. All rights reserved.
66
5.10 Media Types (Cont.)
• A block of styles that applies to all media types is
declared by @media all@media all@media all@media all and enclosed in curly
braces
• To create a block of styles that apply to a single
media type such as printprintprintprint, use @media print@media print@media print@media printand enclose the style rules in curly braces
34
� 2008 Pearson Education, Inc. All rights reserved.
67
5.10 Media Types (Cont.)
• Other media types in CSS 2 include:
– handheldhandheldhandheldhandheld
• Designed for mobile Internet devices
– braillebraillebraillebraille
• For machines that can read or print web pages in braille
– aural aural aural aural
• Allow the programmer to give a speech-synthesizing web
browser more information about the content of the web page
– printprintprintprint
• Affects a web page’s appearance when it is printed
� 2008 Pearson Education,
Inc. All rights reserved.
68
Fig. 5.13 |
CSS media
types (Part 1
of 2).
1 <?xml version =<?xml version =<?xml version =<?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.13: mediatypes.html 5.13: mediatypes.html 5.13: mediatypes.html 5.13: mediatypes.html -------->>>>
6 <!<!<!<!-------- CSS media types. CSS media types. CSS media types. CSS media types. -------->>>>
7 <html xmln<html xmln<html xmln<html xmlns =s =s =s = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Media TypesMedia TypesMedia TypesMedia Types</title></title></title></title>
10 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
11 @me@me@me@mediadiadiadia allallallall
12 {{{{
13 bodybodybodybody { { { { backgroundbackgroundbackgroundbackground----color:color:color:color: #4488aa#4488aa#4488aa#4488aa }}}}
14 h1h1h1h1 { { { { fontfontfontfont----family:family:family:family: verdana, helvetica, sansverdana, helvetica, sansverdana, helvetica, sansverdana, helvetica, sans----serifserifserifserif;;;;
15 color:color:color:color: #aaffcc#aaffcc#aaffcc#aaffcc } } } }
16 p p p p { { { { fontfontfontfont----size:size:size:size: 12pt12pt12pt12pt;;;;
17 color:color:color:color: whitewhitewhitewhite;;;;
18 fontfontfontfont----family:family:family:family: arial, sansarial, sansarial, sansarial, sans----serifserifserifserif }}}}
19 } } } } /* end @media all declarat/* end @media all declarat/* end @media all declarat/* end @media all declaration. */ion. */ion. */ion. */
20 @media @media @media @media printprintprintprint
21 {{{{
22 bodybodybodybody { { { { backgroundbackgroundbackgroundbackground----color:color:color:color: white white white white }}}}
23 h1h1h1h1 { { { { color:color:color:color: #008844#008844#008844#008844}}}}
24 pppp { { { { fontfontfontfont----size:size:size:size: 14pt14pt14pt14pt;;;;
25 color:color:color:color: #4488aa#4488aa#4488aa#4488aa;;;;
26 fontfontfontfont----family:family:family:family: "times new roman", times, serif"times new roman", times, serif"times new roman", times, serif"times new roman", times, serif }}}}
27 } } } } /* end @media print declaration. *//* end @media print declaration. *//* end @media print declaration. *//* end @media print declaration. */
28 </style></style></style></style>
29 </head></head></head></head>
30 <body><body><body><body>
31 <h1><h1><h1><h1>CSS Media Types ExampleCSS Media Types ExampleCSS Media Types ExampleCSS Media Types Example</h1></h1></h1></h1>
Sets properties for all media
types
Sets properties for a page if
it is being printed
35
� 2008 Pearson Education,
Inc. All rights reserved.
69
Fig. 5.13 |
CSS media
types (Part 2
of 2).
32
33 <p> <p> <p> <p>
34 This example uses CSS media types to vary how the page This example uses CSS media types to vary how the page This example uses CSS media types to vary how the page This example uses CSS media types to vary how the page
35 appears in print and how it appears on any other media. appears in print and how it appears on any other media. appears in print and how it appears on any other media. appears in print and how it appears on any other media.
36 This text will appear one font on the screen and a This text will appear one font on the screen and a This text will appear one font on the screen and a This text will appear one font on the screen and a
37 different font on paper or different font on paper or different font on paper or different font on paper or in a print preview. To seein a print preview. To seein a print preview. To seein a print preview. To see
38 the difference in Internet Explorer, go to the Print the difference in Internet Explorer, go to the Print the difference in Internet Explorer, go to the Print the difference in Internet Explorer, go to the Print
39 menu and select Print Preview. In Firefox, select Print menu and select Print Preview. In Firefox, select Print menu and select Print Preview. In Firefox, select Print menu and select Print Preview. In Firefox, select Print
40 Preview from the File menu. Preview from the File menu. Preview from the File menu. Preview from the File menu.
41 </p> </p> </p> </p>
42 </body> </body> </body> </body>
43 </html></html></html></html>
� 2008 Pearson Education, Inc. All rights reserved.
70
Look-and-Feel Observation 5.1
Pages with dark background colors and light text use a lot of ink and may be difficult to read when printed, especially on a black-and white-printer. Use the printprintprintprintmedia type to avoid this.
36
� 2008 Pearson Education, Inc. All rights reserved.
71
Look-and-Feel Observation 5.2
In general, sans-serif fonts look better on a screen, while serif fonts look better on paper. The printprintprintprintmedia type allows your web page to display sans-serif font on a screen and change to a serif font when it is printed.
� 2008 Pearson Education, Inc. All rights reserved.
72
5.11 Building a CSS Drop-Down Menu
•:hover:hover:hover:hover pseudoclass
– used to apply styles to an element when the mouse cursor is
over it
•displaydisplaydisplaydisplay property
– allows a programmer to decide if an element is displayed
as a block element, inline element, or is not rendered at all
(nonenonenonenone)
37
� 2008 Pearson Education,
Inc. All rights reserved.
73
Fig. 5.14 |
CSS drop-
down menu
(Part 1 of 2).
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.14: dropdown.html 5.14: dropdown.html 5.14: dropdown.html 5.14: dropdown.html -------->>>>
6 <!<!<!<!-------- CSS dropCSS dropCSS dropCSS drop----down menu. down menu. down menu. down menu. -------->>>>
7 <html xml<html xml<html xml<html xmlns = ns = ns = ns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>
10 DropDropDropDrop----Down MenuDown MenuDown MenuDown Menu
11 </title></title></title></title>
12 <style type =<style type =<style type =<style type = "text/css""text/css""text/css""text/css">>>>
13 body body body body { { { { fontfontfontfont----family:family:family:family: arial, sansarial, sansarial, sansarial, sans----serifserifserifserif }}}}
14 div.menudiv.menudiv.menudiv.menu { { { { fontfontfontfont----weight:weight:weight:weight: boldboldboldbold;;;;
15 color:color:color:color: whitewhitewhitewhite;;;;
16 border:border:border:border: 2px solid #2255992px solid #2255992px solid #2255992px solid #225599;;;;
17 texttexttexttext----align:align:align:align: centercentercentercenter;;;;
18 width:width:width:width: 10em10em10em10em;;;;
19 backgroundbackgroundbackgroundbackground----color:color:color:color: #225599#225599#225599#225599 }}}}
20 div.menu:hover adiv.menu:hover adiv.menu:hover adiv.menu:hover a { { { { display:display:display:display: blockblockblockblock }}}}
21 div.menu adiv.menu adiv.menu adiv.menu a { { { { display:display:display:display: nonenonenonenone;;;;
22 borderborderborderborder----top:top:top:top: 2px solid #2255992px solid #2255992px solid #2255992px solid #225599;;;;
23 backgroundbackgroundbackgroundbackground----color:color:color:color: whwhwhwhiteiteiteite;;;;
24 width:width:width:width: 10em10em10em10em;;;;
25 texttexttexttext----decoration:decoration:decoration:decoration: nonenonenonenone;;;;
26 color: color: color: color: blackblackblackblack }}}}
27 div.menu a:hoverdiv.menu a:hoverdiv.menu a:hoverdiv.menu a:hover { { { { backgroundbackgroundbackgroundbackground----color:color:color:color: #dfeeff#dfeeff#dfeeff#dfeeff }}}}
28 </style></style></style></style>
29 </head></head></head></head>
30 <body><body><body><body>
Sets anchor elements in a
menu div to be displayed as block-level when the
menu is moused-overPrevents the browser from
rendering the links inside
the menu div
Sets anchor elements in a
menu div to have a light-blue background when they
are moused-over
� 2008 Pearson Education,
Inc. All rights reserved.
74
Fig. 5.14 |
CSS drop-
down menu
(Part 2 of 2).
31 <div class = <div class = <div class = <div class = "menu""menu""menu""menu">>>>MenuMenuMenuMenu
32 <a href = <a href = <a href = <a href = "#""#""#""#">>>>HomeHomeHomeHome</a></a></a></a>
33 <a href = <a href = <a href = <a href = "#" "#" "#" "#">>>>NewsNewsNewsNews</a></a></a></a>
34 <a href = <a href = <a href = <a href = "#""#""#""#">>>>ArticlesArticlesArticlesArticles</a></a></a></a>
35 <a href = <a href = <a href = <a href = "#""#""#""#">>>>BlogBlogBlogBlog</a></a></a></a>
36 <a href = <a href = <a href = <a href = "#""#""#""#">>>>ContactContactContactContact</a></a></a></a>
37 </div> </div> </div> </div>
38 </b </b </b </body>ody>ody>ody>
39 </html></html></html></html>
38
� 2008 Pearson Education, Inc. All rights reserved.
75
5.12 User Style Sheets
• Users can define their own user style sheets to
format pages based on their preferences
• Absolute font size measurements override user
style sheets, while relative font sizes will yield to a
user-defined style
• User style sheets are not linked to a document;
rather, they are set in the browser’s options
� 2008 Pearson Education,
Inc. All rights reserved.
76
Fig. 5.15 | ptptptptmeasurement for
text size.
1 <?xml version =<?xml version =<?xml version =<?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.15: user_absolute.html 5.15: user_absolute.html 5.15: user_absolute.html 5.15: user_absolute.html -------->>>>
6 <!<!<!<!-------- pt measurement for text size. pt measurement for text size. pt measurement for text size. pt measurement for text size. -------->>>>
7 <html xmlns =<html xmlns =<html xmlns =<html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>User StylesUser StylesUser StylesUser Styles</title></title></title></title>
10 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
11 .note.note.note.note {{{{ fontfontfontfont----size:size:size:size: 9pt9pt9pt9pt }}}}
12 </style></style></style></style>
13 </head></head></head></head>
14 <body><body><body><body>
15 <p><p><p><p>Thanks for vThanks for vThanks for vThanks for visiting my website. I hope you enjoy it.isiting my website. I hope you enjoy it.isiting my website. I hope you enjoy it.isiting my website. I hope you enjoy it.
16 </p><p class = </p><p class = </p><p class = </p><p class = "note""note""note""note">>>>Please Note: This site will bePlease Note: This site will bePlease Note: This site will bePlease Note: This site will be
17 moving soon. Please check periodically for updates.moving soon. Please check periodically for updates.moving soon. Please check periodically for updates.moving soon. Please check periodically for updates.</p></p></p></p>
18 </body></body></body></body>
19 </html></html></html></html>
A class defined by the
author with absolute
measurements: a font-size
of 9 pt
39
� 2008 Pearson Education,
Inc. All rights reserved.
77
Fig. 5.16 |
User style
sheet.
1 /* Fig./* Fig./* Fig./* Fig. 5.16: userstyles.css */5.16: userstyles.css */5.16: userstyles.css */5.16: userstyles.css */
2 /* A user stylesheet *//* A user stylesheet *//* A user stylesheet *//* A user stylesheet */
3 bodybodybodybody { { { { fontfontfontfont----size:size:size:size: 20pt20pt20pt20pt;;;;
4 color:color:color:color: yellowyellowyellowyellow;;;;
5 backgroundbackgroundbackgroundbackground----color:color:color:color: #000080#000080#000080#000080 }
A different font-size of 20
pt is defined by the user for
all body elements
� 2008 Pearson Education, Inc. All rights reserved.
78
Fig. 5.17 | User style sheet in Internet Explorer 7.
40
� 2008 Pearson Education, Inc. All rights reserved.
79
Fig. 5.18 | User style sheet applied with ptptptpt measurement.
The author’s style has
higher precedence than the
user’s, so the font is 9 pt
� 2008 Pearson Education,
Inc. All rights reserved.
80
Fig. 5.19 | emememem
measurement
for text size.
1 <?xml version =<?xml version =<?xml version =<?xml version = "1.0" "1.0" "1.0" "1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 5.19: user_relative.html 5.19: user_relative.html 5.19: user_relative.html 5.19: user_relative.html -------->>>>
6 <!<!<!<!-------- em measurement for text size.em measurement for text size.em measurement for text size.em measurement for text size. -------->>>>
7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>User StylesUser StylesUser StylesUser Styles</title></title></title></title>
10 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
11 .note.note.note.note { { { { fontfontfontfont----size:size:size:size: .75em.75em.75em.75em }}}}
12 </style></style></style></style>
13 </head></head></head></head>
14 <body><body><body><body>
15 <p><p><p><p>Thanks forThanks forThanks forThanks for visiting my website. I hope you enjoy it.visiting my website. I hope you enjoy it.visiting my website. I hope you enjoy it.visiting my website. I hope you enjoy it.
16 </p><p class = </p><p class = </p><p class = </p><p class = "note""note""note""note">>>>Please Note: This site will be Please Note: This site will be Please Note: This site will be Please Note: This site will be
17 moving soon. Please check periodically for updates.moving soon. Please check periodically for updates.moving soon. Please check periodically for updates.moving soon. Please check periodically for updates.</p></p></p></p>
18 </body></body></body></body>
19 </html></html></html></html>
A relative measurement of
.75 em is used by the author
for the font size
41
� 2008 Pearson Education, Inc. All rights reserved.
81
Fig. 5.20 | User style sheet applied with emememem measurement.
The user style sheet is
considered, so the font-size
is 15 pt (.75 em for 20 pt)
� 2008 Pearson Education, Inc. All rights reserved.
82
5.13 CSS 3
• While CSS 2 is the current W3C
Recommendation, CSS 3 is in development, and
some browsers are beginning to implement some
of the new features that will be in the CSS 3
specification
• CSS 3 will introduce new features related to
borders, backgrounds, text effects, layout, and
more
top related