The World Wide Web Consortium W3C has implemented three CSS recommendations-called CSSI, CSS-P, and CSS2 CSS-I allows you to implement basic style changes to a document, such as chan
Trang 1Style Sheets
Session 6
Trang 2► Describe Dynamic HTML
► Use Style Sheet
Trang 3What is DHTML ? (1)
► “Dynamic HTML” is typically used to describe the combination of HTML, style sheets and scripts that allows documents to be animated
► Script is a small program can be executed in the browser The advent of scripting added dynamism to the Web page
► What is a Dynamic Web Page ?
and content can be altered without the browser
Trang 4What is DHTML ? (2)
► Microsoft and Netscape each have their own way of implementing Dynamic HTML Microsoft focuses on the use of Cascading Style Sheets (CSS) Script code can be used to manipulate the elements of CSS
► Netscape also uses style sheets However, the approach to Dynamic HTML is based mainly on the used of layers The LAYER tag is used to
Trang 5What is DHTML ? (3)
in HTML 4.0 The World Wide Web Consortium
(W3C) has implemented three CSS
recommendations-called CSSI, CSS-P, and CSS2
CSS-I allows you to implement basic style changes to a document, such as changing its font styles
CSS-P gives you control over the position of page
elements, using a layers metaphor CSS-P layers can be transparent and absolutely positioned, and do not
necessary affect the elements on other layers
Trang 6Features of Dynamic HTML
► Dynamic Styles
► Dynamic Content
► Positioning and Animation
► Downloadable Fonts (for Netscape Navigator)
► Filter and Transitions
► Data binding
► Object Structure or
Dynamic HTML Object Model
Trang 7Introduction to Style Sheets
► A style sheet is the place where we manage and control styles
► The style sheet describes the appearance and presentation of an HTML document as
it will be presented on screen, or even in print
► We can also precisely specify the location and appearance of elements on a page
Trang 8Methods of changing Style of Web Page
Style information can be used inline
We can include it within the tag of the HTML element
The STYLE Attribute is used to apply style sheets to individual elements
Using the Style Attribute we can bypass the Style Element and put declarations directly into individual start tags
<H2 style="color: green; font-family: Arial"> /H2>
Uses Style Object
Style Object supports every property of CSS
Trang 9Advantages of Style Sheet
► Override the browser
► Page layout
► Style sheets can be re-used
► One time effort
Trang 10Style Sheet Terminology
► Style Rule
rule defines the style of the document.
► Style Sheet
embedded in the HTML document.
► Rules
Trang 11► A selector is a string that identifies what
elements the corresponding rule applies
to There are two basic types of selectors:
Trang 13Simple Selectors
► A simple selector describes an element irrespective of its position in the document structure The H1 heading identifier is a typical simple selector
H1 { color: blue }
Trang 15CLASS Selector
► These selectors use the CLASS attribute of HTML elements
► We can assign a class identifier to several elements
of a single type when we want to display variations from the norm
► The CLASS Selector is preceded with a dot (.) called the flag character, followed by the 'class name' of our choice.
Trang 17► A typical example is that of the <BODY> element When we add an element to
<BODY> each element contained within inherits the styles of <BODY>.
Trang 18Style Sheet combined with HTML
► STYLE element
► Style Attribute
► Link element
Trang 19Style Elements
► We can embed the required style information within the HTML document
► This is done using the STYLE element
► The STYLE element is inserted into the
<HEAD> element of a document with all of the rules placed between the opening and closing tags.
Trang 21Linking style sheets
► Style sheets can also be created as separate documents and linked to the required HTML document
► The LINK element is used to include a reference to the required style sheet
<LINK REL = stylesheet
HREF = “stylesmine.css"
Trang 22The box model
Trang 23Properties in Style Sheet
font-size font-style
text-indent vertical-align
border-width border-bottom border-color
height
Trang 24Properties in Style Sheet
(none, underline, overline,
Trang 25Properties in Style Sheet
(sBorder: width, style, color)
border
(none, dotted, dashed, solid) border-bottom-style borderBottomStyle
(groove, ridge, inset, outset) border-style borderStyle
(inline, block, none)
display
rect(top right bottom left)
Trang 26Properties in Style Sheet
(type, position, image)
listStyle
Trang 27Summary