slide môn học HDJ bài 6 style sheets
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (401.98 KB, 27 trang )
Style Sheets
Session 6
1
Objectives
► Describe
► Use
Dynamic HTML
Style Sheet
2
What 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 ?
A dynamic web page is one whose appearance
and content can be altered without the browser
making a new request to the web server, even
after page has fully loaded
3
What 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
provide most of the features of Dynamic HTML.
4
What is DHTML ? (3)
► Cascading
Style Sheets are a feature implemented
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
CSS-2 combines both CSS-I and CSS-P and introduces
several new features, such as electronic audio
5
Features of Dynamic HTML
► Dynamic
Styles
► Dynamic
Content
► Positioning
and Animation
► Downloadable Fonts (for Netscape Navigator)
► Filter
► Data
and Transitions
binding
► Object
Structure or
Dynamic HTML Object Model
► Scripting
6
Introduction 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
and create special effects.
7
Methods of changing Style of Web Page
► Inline
style
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>
► Writing
Script
Uses Style Object
Style Object supports every property of CSS
8
Advantages of Style Sheet
► Override
the browser
► Page layout
► Style sheets can be re-used
► One time effort
9
Style Sheet Terminology
► Style
Rule
A cascading style sheet is a set of rules. A
rule defines the style of the document.
► Style
Sheet
It is a list of style rules and can be
embedded in the HTML document.
► Rules
A style sheet can contain one or more rules.
RuleSelector {Declarations property: value;
property: value; …}
10
Selectors
►
A selector is a string that identifies what
elements the corresponding rule applies
to. There are two basic types of selectors:
Simple selectors
► HTML
element selectors
► Class selectors
► ID
selectors
Contextual selector
11
<html>
<head>
<style type="text/css">
border:silver thick solid;
background-color:turquoise;
padding:10px;
text-align:center;
</style>
</head>
<body>
<P>
</P>
</body>
</html>
Not every paragraph has a silver lining with a
<B>bold</B> outlook.
Simple 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 }
13
HTML Selector
► These
selectors use the names of HTML
elements.
► The
only difference is that we remove the
brackets. So, the HTML <P> tag become
P.
14
CLASS 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.
15
ID Selector
► An
ID selector uses the ID attribute of an
HTML element.
► It
is used to apply a style to an individual
element on the Web page.
► An
ID selector is preceded by a hash (#)
mark.
16
Contextual Selectors
►A
contextual selector refers to the context of
elements.
► It
is based on the concept of inheritance,
where the child element inherits the style
assigned to the parent element.
►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>.
17
Style Sheet combined with HTML
►
►
►
STYLE element
Style Attribute
Link element
18
Style Elements
► We
can embed the required style information
within the HTML document.
► This
► The
is done using the STYLE element.
STYLE element is inserted into the
<HEAD> element of a document with all of
the rules placed between the opening and
closing tags.
19
Style Attribute
► 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
20
Linking 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.
HREF = “stylesmine.css"
Type = "text/css">
21
The box model
22
Properties in Style Sheet
Attribute
CSS name
Font properties
font
font-size
font-style
Text properties
text-align
text-indent
vertical-align
Box properties
border
border-width
border-bottom
border-color
Positioning properties
clip
height
left
top
z-index
23
Properties in Style Sheet
Attributes
CSS Name
Scripting Name
Font Properties
font-family
fontFamily
font-size
fontSize
font-style
fontStyle
(normal, bold)
font-weight
fontWeight
Text Properties
text-align
textAlign
text-indent
textIndent
vertical-align
verticalAlign
(none, underline, overline, linethrough)
text-decoration
textDecoration
Color and Background
background-attachment
backgroundAttachment
(scroll, fixed)
(repeat, no-repeat, repeat-x..)
background-color
backgroundColor
background-repeat
backgroundRepeat
24
Properties in Style Sheet
Box Properties
border
border
(sBorder: width, style, color)
border-width
borderWidth
border-bottom
borderBottom
(none, dotted, dashed, solid)
border-bottom-style
borderBottomStyle
(groove, ridge, inset, outset)
border-style
borderStyle
border-color
borderColor
display
display
Display Properties
(inline, block, none)
Positioning Properties
clip
clip
rect(top right bottom left)
height
height
width
width
top
top
left
left
z-index
zIndex
(visible, hidden)
visibility
visibility
(absolute, relative, static)
position
position
(visible, scroll, hidden, auto)
overflow
overflow
25
