1 introduction to web application introduction to cascading style sheet
TRANSCRIPT
1
Introduction to Web Application
Introduction to Cascading Style Sheet
2
Topics• Introduction• Inline Styles• Embedded Style Sheets• Conflicting Styles• Linking External Style Sheets• Positioning Elements• Element Dimensions• Text Flow and the Box Model• User Style Sheets
3
Objectives• In this lesson, you will learn:
– To control the appearance of a Web site by creating style sheets.
– To use a style sheet to give all the pages of a Web site the same look and feel.
– To use the class attribute to apply styles.
– To specify the precise font, size, color and other properties of displayed text.
– To specify element backgrounds and colors.
– To understand the box model and how to control the margins, borders and padding.
– To use style sheets to separate presentation from content.
4
Introduction
• Cascading Style Sheets (CSS)– Separation of structure from presentation
• Relationship with HTML
5
Different between HTML tags and CSS
<font size=“7”>Hello</font>
<div style=“font-size:18pt”>Hello</div>
6
Ways to Change HTML Default Presentation
• Presentation Elements or Properties– Font, bgcolor, etc.
• Using some Elements to control the page layout– Table, img, etc.
• Cascading style Sheets (CSS) !!
7
Why CSS?
• HTML is primarily concerned with content, rather than style
• Power, Flexibility, Rendering, Accessibility…
• http://www.macromedia.com/devnet/mx/dreamweaver/articles/why_css.html
8
Evolution of CSS
• 1996 W3C Bert Bos&Hakon Lie CSS Level1
• 1998 CSS2
• 2001 CSS Mobile Profile
• Now CSS2.1 CSS3
9
CSS Grammar
p {font-size: 12pt; font-style: italic; color: green}
Selector
Property list separated by semicolons
Property Property value
Colon
10
• Relative units:– em height of letter m– en height of letter n– ex height of letter x– px pixels– % percent
Units
11
Units
• Absolute units:– in inch
– cm centimeter
– mm millimeter
– pt point(1pt=1/72inch)
– pc 12points(1pc=12pt)
12
Inline Styles
• Declare an individual element’s format– Attribute style– CSS property
• Followed by a colon and a value
– Example:• <p style=“font-size: 20pt”> hello
world</p>• <p style=“font-size: 20pt; background-
color: #8000ff; color:red”> hello world</p>
13
14
Embedded Style Sheets • Embed an entire CSS document in an
XHTML document’s head section– Multipurpose Internet Mail Extensions (MIME)
type• Describes a file’s content
– Property background-color• Specifies the background color
– Property font-family• Specifies the name of the font to use
– Property font-size• Specifies a 14-point font
15
Example of Embedded CSS<html>
<head><style type="text/css">
p {font-size: 14 pt; color:red}.special {color: blue}
</style></head><body>
<p>Hello World!</p><h1 class="special">School of Software</h1>
</body></html>
16
17
Conflicting Styles
• Inheritance– Descendant’s properties have greater
specificity than ancestor’s properties
18
Example of Conflicting Styles<html><head>
<style type = "text/css">li em {color: red;
font-weight: bold}ul {margine-left:75pt}ul ul {text-decoration: underline;
margine-left:15pt}</style>
</head><body>
<ul><li>Milk</li><ul><li>White bread</li></ul><li> Pizza <em> with mushrooms</em></li>
</ul></body></html>
19
20
Example of Conflicting Styles (cont.)<html>
<head>
<style type = "text/css">a.nodec {text-decoration: none;
font-size: 18pt}a:hover {text-decoration:
underline; color: red; background-color:
#ccffcc;}
</style></head><body>
<a class="nodec" href="#"> hello world</a></body>
</html>
noneoverline
line-throughunderline
blink
noneoverline
line-throughunderline
blink
21
22
Linking External Style Sheets
• External style sheets– Can provide uniform look and feel to entire site
• Example:<html>
<head><link rel=“stylesheet” type=“text/css”
href=“styles.css”></head><body></body>
</html>
23
Content of styles.css/* An external stylesheet */a { text-decoration: none }a:hover { text-decoration: underline; color: red; background-color: #ccffcc }li em { color: red; font-weight: bold; background-color: #ffffff }ul { margin-left: 2cm }ul ul { text-decoration: underline; margin-left: .5cm }
24
Positioning Elements • Absolute positioning
– z-index attribute• Layer overlapping elements properly
• Relative positioning– Elements are positioned relative to other
elements
25
Example of Position<html><head><title>Absolute Positioning</title></head> <body>
<p><img src = "i.gif" style = "position: absolute; top: 0px; left: 0px; z-index: 1" alt = "First
positioned image" /></p> <p style = "position: absolute;
top: 50px; left: 50px; z-index: 3; font-size: 20pt">Positioned Text</p>
<p><img src = "circle.gif" style = "position: absolute; top: 25px; left: 100px; z-index:
2" alt = "Second positioned image" /></p>
</body></html>
26
27
Example of Position (cont.)
<html><head> <title>Relative Positioning</title>
<style type = "text/css"> p { font-size: 1.3em; font-family: verdana, arial, sans-serif } span { color: red; font-size: .6em; height: 1em } .super { position: relative; top: -1ex } .sub { position: relative; bottom: -1ex } .shiftleft { position: relative; left: -1ex } .shiftright { position: relative; right: -1ex } </style> </head>
28
<body> <p>The text at the end of this sentence <span class = "super">is in superscript</span>.
</p> <p>The text at the end of this sentence <span class = "sub">is in subscript</span>. </p> <p>The text at the end of this sentence <span class = "shiftleft">is shifted left</span>
. </p> <p>The text at the end of this sentence <span class = "shiftright">is shifted right</span>.
</p> </body></html>
29
<span class = "super">is in superscript</span>
<span class = "super">is in superscript</span>
<span class = "sub">is in subscript</span>.
<span class = "sub">is in subscript</span>.
<span class = "shiftleft">is shifted left</span>
<span class = "shiftleft">is shifted left</span>
<span class = "shiftright">is shifted right</span>.
<span class = "shiftright">is shifted right</span>.
30
Backgrounds • background-image
– Specifies the image URL• background-position
– Places the image on the page• background-repeat
– Controls the tiling of the background image• background-attachment
– fixed– scroll
• font-weight– Specify the “boldness” of text
31
Example of Backgrounds<html> <head> <title>Background Images</title> <style type = "text/css"> body { background-image: url(logo.gif); background-position: bottom right; background-repeat: no-repeat; background-attachment: fixed; } p { font-size: 18pt; color: #aa5588; text-indent: 1em; font-family: arial, sans-serif; } .dark { font-weight: bold } </style> </head>
32
<body>
<p>
This example uses the background-image, background-position and background-attachment styles to place the <span class = "dark">Deitel
& Associates, Inc.</span> logo in the bottom, right corner of the page. Notice how the logo stays in the proper position when you resize the browser window.
</p>
</body>
</html>
33
34
Element Dimensions
• CSS rules can specify the actual dimensions of each page element
35
Example of Element Dimension P 158
<html><head>
<title>Box Dimensions</title> <style type = "text/css"> div { background-color: #ffccff; margin-bottom: .5em } </style> </head> <body> <div style = "width: 20%"></div> <div style = "width: 80%; text-align: center"/> <div style = "width: 20%; height: 30%; overflow: scroll“/> </body></html>
36
37
Text Flow and the Box Model • Floating
– Move an element to one side of the screen
38
Text flow p160
<html> <head> <title>Flowing Text Around Floating Elements</title> <style type = "text/css"> div { background-color: #ffccff; margin-bottom: .5em; font-size: 1.5em; width: 50% } p { text-align: justify } </style> </head> <body>
<p></p> <div style = "text-align: center"></div> <div style = "float: right; margin: .5em; text-align: right"></div> <div style = "float: right; padding: .5em; text-align: right"></div> <p></p> <p style = "clear: right"></p>
</body></html>
39
40
Text Flow and the Box Model • Box model
– Margins• margin-top, margin-right, margin-left, margin-bottom
– Padding• padding-top, padding-right, padding-left, and padding-bottom
– Border• border-width
– thin, medium, thick
• border-color– Sets the color
• border-style– none, hidden, dotted, dashed, solid, double, groove, ridge, inset
and outset
41
Text Flow and the Box Model
Content
Margin
Border
Padding
Fig. 6.13 Box model for block-level elements.
42
43
44
User Style Sheets • Format pages based on preferences
• User style sheets are not linked to a document;
• Rather, they are set in the browser’s options
45
References
46
Boxes and Layout
• border– border
• Group property, the same below
– border-color– border-width– border-style– example
47
Boxes and Layout
• margin– margin-top, margin-bottom, margin-right,
margin-left– example
• padding– padding-top, padding-bottom, padding-right,
padding-left– example
48
Fonts and Texts
• Fonts– font:
• Group property
– font-family• Sets or retrieves the name of the font used for text in the object
– font-size• Sets or retrieves a value that indicates the font size used for text
in the object
– font-style• Sets or retrieves the font style of the object as italic, normal, or
oblique
49
Fonts and Texts
• Fonts– font-variant
• Sets or retrieves the font style of the object as italic, normal, or oblique
– font-weight• Sets or retrieves the weight of the font of the object
– example
50
Fonts and Texts
• Generic Fonts:– serif Times New Roman– sans-serif Arial– cursive Script– fantasy Comic– monospace Courier New– example
51
Fonts and Texts
• Texts:– letter-spacing
• Sets or retrieves the amount of additional space between letters in the object
– word-spacing• Sets or retrieves the amount of additional space between
words in the object
– white-space• Sets or retrieves a value that indicates whether lines are
automatically broken inside the object
52
Fonts and Texts
• Texts:– line-height
• Sets or retrieves the distance between lines in the object
– text-align• Sets or retrieves whether the text in the object is
left-aligned, right-aligned, centered, or justified
– vertical-align• Sets or retrieves the vertical alignment of the object
53
Fonts and Texts
• Texts– text-decoration
• Sets or retrieves a value that indicates whether the text in the object has blink, line-through, overline, or underline decorations
– text-indent• Sets or retrieves the indentation of the first line of
text in the object
54
Fonts and Texts
• Texts– text-transform
• Sets or retrieves the rendering of the text in the object
– example
55
Lists
• Lists– list-style
• Sets or retrieves up to three separate listStyle properties of the object
– list-style-image• Sets or retrieves up to three separate listStyle
properties of the object
56
Lists
• Lists– list-style-position
• Sets or retrieves a variable that indicates how the list-item marker is drawn relative to the content of the object.
– list-style-type• Sets or retrieves a variable that indicates how the list-
item marker is drawn relative to the content of the object.
– example
57
Hypertext
• Hypertext– a:link
• Sets the style of an a element when the link has not been visited recently.
– a:visited• Sets the style of an a element when the link has been
visited recently
– a:active• Sets the style of an a element when the link is engaged or
active
– example
58
Position• Absolute position
– position=absolute– example
• Relative position– position=relative– example
59
Position
• Layer– z-index
• Sets or retrieves the stacking order of positioned objects
• top, bottom, left, right
• other examples
60
Position• Floating
– floating– example
61
Filters
• Filters:– 翻转 : flipv fliph example– 透明 : chroma example– 反转 : invert– 灰度 : gray– x 光 : xray example– 阴影 : shadow example– 发光 : glow example– 渐变 : alpha example
62
Filters
• Filters:– 模糊 : blur example– 弦波 : wave example– … example
63
Filters
• Transition– Transition event happens when visibility
property value change from hidden to visible– example1– example2
64
Web Resources • http://www.w3.org/TR/css3-roadmap
• http://www.ddj.com/webreview/style• http://tech.irt.org/articles/css.htm