21
Tutorial 6 By Sam Tutorial 6 By Sam INE 1020 Introduction to Internet INE 1020 Introduction to Internet Engineering Engineering 1 DHTML & CSS DHTML & CSS Tutorial 6 Tutorial 6
Tutorial 6 By SamTutorial 6 By Sam INE 1020 Introduction to Internet EngineeringINE 1020 Introduction to Internet Engineering 11
DHTML & CSSDHTML & CSS
Tutorial 6Tutorial 6
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 2
DHTML – Intro(1)DHTML – Intro(1)
►DDynamic ynamic HHypertext ypertext MMarkup arkup LLanguageanguage►Combination of technologies to make Combination of technologies to make
Web pages dynamicWeb pages dynamic►Not a standardNot a standard►Marketing Term used by Microsoft and Marketing Term used by Microsoft and
NetscapeNetscape
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 3
DHTML – Intro(2)DHTML – Intro(2)
►Scripting Language e.g. JavaScript, VBScriScripting Language e.g. JavaScript, VBScriptpt
► IncompatibleIncompatibleMicrosoft Internet Explorer DHTMLMicrosoft Internet Explorer DHTMLhttp://msdn.microsoft.com/workshop/author/dhtml/dhtml.asphttp://msdn.microsoft.com/workshop/author/dhtml/dhtml.asp
Netscape DHTMLNetscape DHTMLhttp://developer.netscape.com/docs/manuals/communicator/dynhtml/index.http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htmhtm
►Object ModelObject Model
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 4
DHTML – Object ModelDHTML – Object Modelwindow
document
history
navigator
applets
all
anchors
body
embeds
forms
filters
images
links
plugins
styleSheets
scripts
location
screen
event
document
document
plugins
object
collection
Key
frames
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 5
CSS – IntroCSS – Intro
►CCascading ascading SStyle tyle SSheetsheets►W3C RecommendationW3C Recommendation►Specify the presentation of elements on a Specify the presentation of elements on a
Web page separately from the structure of Web page separately from the structure of the documentthe document
►XHTML, DreamweaverXHTML, Dreamweaver
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 6
CSS - BasicsCSS - Basics
<html><html>
<head><title>Testing</title></head><head><title>Testing</title></head>
<body><body>
<p>This is Testing</p><p>This is Testing</p>
</body></body>
</html></html>
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 7
CSS – Inline StylesCSS – Inline Styles
<html><html>
<head><title>Inline Styles</title></head><head><title>Inline Styles</title></head>
<body><body>
<p <p style = "color : red"style = "color : red">>
This is Testing, using CSS</p>This is Testing, using CSS</p>
</body></body>
</html></html>
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 8
CSS – Multiple PropertiesCSS – Multiple Properties
<html><html><head><title>Inline Styles</title></head><head><title>Inline Styles</title></head><body><body><p <p style = "font-size: 20pt; color : #0000ff"style = "font-size: 20pt; color : #0000ff">>This is Testing, using CSS</p>This is Testing, using CSS</p></body></body>
</html></html>
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 9
CSS – List of PropertiesCSS – List of Properties
PropertiesProperties Options / ExampleOptions / ExampleColorColor Blue, #8000ffBlue, #8000ff
Font-sizeFont-size pt, in, cm, mm, pc, em, expt, in, cm, mm, pc, em, exFont-familyFont-family Arial, sans-serifArial, sans-serif
Background-Background-colorcolor
Green, #0000ffGreen, #0000ff
Text-decorationText-decoration None, overline, underline, line-throughNone, overline, underline, line-throughFont-weightFont-weight Normal, bold, bolder, 300Normal, bold, bolder, 300
Margin-leftMargin-left pt, in, cm, mm, pc, em, expt, in, cm, mm, pc, em, exText-indentText-indent pt, in, cm, mm, pc, em, expt, in, cm, mm, pc, em, ex
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 10
CSS – Embedded Style CSS – Embedded Style SheetsSheets
<html><html><head><title>Embedded Style Sheets</title></head><head><title>Embedded Style Sheets</title></head><<style = "text/css">style = "text/css">
em { background-color: #8000ff }em { background-color: #8000ff }</style></style><body><body><p>This is Testing, using <em>CSS</em></p><p>This is Testing, using <em>CSS</em></p></body></body>
</html></html>
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 11
CSS – External Style SheetsCSS – External Style Sheets
Ex5.htmlEx5.html<html><html>
<head><title>Inline Styles</title><head><title>Inline Styles</title><link rel = <link rel = "stylesheet" type = "text/css" href = "styles.css" />"stylesheet" type = "text/css" href = "styles.css" /></head></head><body><p><body><p><a href = <a href = ""http://www.cuhk.edu.hk">CUHK Homepage</a>http://www.cuhk.edu.hk">CUHK Homepage</a></p></body></p></body>
</html></html>
styles.cssstyles.cssa { font-weight: bold }a { font-weight: bold }
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 12
CSS – Brief SummaryCSS – Brief Summary
Three types of Style SheetsThree types of Style Sheets
1.1. Inline Inline
2.2. EmbeddedEmbedded
3.3. ExternalExternal
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 13
More about CSS(1)More about CSS(1)<html><html>
<head><title>More about CSS</title><head><title>More about CSS</title><style type = "text/css"><style type = "text/css">
.p1 { color : blue }.p1 { color : blue }
.p2 { color : green; font-weight : bolder }.p2 { color : green; font-weight : bolder }a.nodec { background-color : red }a.nodec { background-color : red }a:hover { font-size : 30pt }a:hover { font-size : 30pt }
</style></head></style></head><body><body>
<p class = "p1"> This text is blue </p><p class = "p1"> This text is blue </p><p class = "p2"> This text is green and bold </p><p class = "p2"> This text is green and bold </p><p> This text is normal </p><p> This text is normal </p><a class = "nodec" href = "http://www.yahoo.com.hk"><a class = "nodec" href = "http://www.yahoo.com.hk"> This is a hyperlink, with red in background. When the mouse cursor is over This is a hyperlink, with red in background. When the mouse cursor is over
me, the font size will be larger</a>me, the font size will be larger</a></body></body>
</html></html>
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 14
More about CSS(1)More about CSS(1)
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 15
More about CSS(2)More about CSS(2)<html><html>
<head><title>More about CSS</title><head><title>More about CSS</title><style type = "text/css"><style type = "text/css">
.underlined { text-decoration: underline }.underlined { text-decoration: underline }ul { background-color : green; color : yellow}ul { background-color : green; color : yellow}ul ul { background-color : blue }ul ul { background-color : blue }
</style></head></style></head><body><body>
<p> The text at the end is <span class = "underlined"> underline </span><p><p> The text at the end is <span class = "underlined"> underline </span><p><ul><ul>
<li>Milk</li><li>Milk</li><li>Bread<li>Bread<ul><ul>
<li>White Bread</li><li>White Bread</li><li>Rye Bread</li><li>Rye Bread</li>
</ul></ul></ul></ul>
</body></body></html></html>
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 16
More about CSS(3)More about CSS(3)
►Positioning ElementsPositioning ElementsPosition: absolute/relativePosition: absolute/relativeTop, left : px …Top, left : px …Z-index : 1Z-index : 1►Text Flow & Box ModelText Flow & Box ModelMargin-right/left/top/bottom : px …Margin-right/left/top/bottom : px …Border-width/style/colorBorder-width/style/colorPadding-top/right/left/bottomPadding-top/right/left/bottom
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 17
CSS – Brief SummaryCSS – Brief Summary
►ClassClass►PseudoclassPseudoclass►SpanSpan► InheritanceInheritance►Other (Position Elements, Text flow, Box Other (Position Elements, Text flow, Box
Model)Model)
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 18
CSS - Cascading OrderCSS - Cascading Order
► In the order of specificityIn the order of specificityThe child styles are more specific than the styles foThe child styles are more specific than the styles fo
r that child’s parentr that child’s parentEg. ul ul is more specific than ulEg. ul ul is more specific than ul► In the same specificity, the order will be:In the same specificity, the order will be:
External Style Sheets (lower priority)External Style Sheets (lower priority) Embedded Style SheetsEmbedded Style Sheets Inline Style Sheets (the highest priority)Inline Style Sheets (the highest priority)
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 19
CSS - DreamweaverCSS - Dreamweaver
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 20
CSS – User Style SheetCSS – User Style Sheet
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 21
CSS - ReferenceCSS - Reference
Internet & World Wide Web How to programInternet & World Wide Web How to program22ndnd Edition, Deitel Deitel Nieto Edition, Deitel Deitel NietoChapter 6 Cascading Style SheetsChapter 6 Cascading Style Sheets
