dhtml and javascript copyright @ genetic computer school 2008 4-1 lesson 4 cascading style sheet g h...
TRANSCRIPT
Copyright @ Genetic Computer School 2008 4-1
DHTML AND JAVASCRIPT
LESSON 4
CASCADING STYLE SHEET
G H
E F
Copyright @ Genetic Computer School 2008 4-2
DHTML AND JAVASCRIPT
Cascading Style Sheet, CSS
A set of rules that determine how the
styles are applied to the HTML tags
in your documents.
Copyright @ Genetic Computer School 2008 4-3
DHTML AND JAVASCRIPT
Three Types Of Style Sheets
Embedded
Inline
Link
Copyright @ Genetic Computer School 2008 4-4
DHTML AND JAVASCRIPT
Embedded Style
The style properties are included (within the
<style> tags) at the top of the HTML
document. A style assigned to a
particular tag applies to all those tags in
this type of document.
Copyright @ Genetic Computer School 2008 4-5
DHTML AND JAVASCRIPT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Embedded Style</title></head>
<style type=text/css>Write the Style here.
</style>
<body>Here are some texts, those are applied by style.
</body></html>
Example: Embedded Style
Copyright @ Genetic Computer School 2008 4-6
DHTML AND JAVASCRIPT
Inline Style
The style properties are included
throughout the HTML page. Each HTML
tag receives its own style attributes as
they occur in the page.
The style properties are added to the HTML
tag as the tag is entered.
Copyright @ Genetic Computer School 2008 4-7
DHTML AND JAVASCRIPT
It is fine for documents in which you need
to apply styles to only one or two
elements, but you wouldn't want to do
all that work when you have a lot of
styles to add.
When You Should Apply Inline Style
Copyright @ Genetic Computer School 2008 4-8
DHTML AND JAVASCRIPT
The style properties are stored in a separate
file. That file can be linked to any HTML
document using a <link> tag placed within
the <head> tags.
Link Style
Copyright @ Genetic Computer School 2008 4-9
DHTML AND JAVASCRIPT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Link Style</title>
<link rel="stylesheet" href=“StyleSheetName.css" type="text/css">
</head><body>
Here are some texts, those are applied by style.</body>
</html>
Linked style sheets hold all the style properties in a separate file.
Example: Link Style
Copyright @ Genetic Computer School 2008 4-10
DHTML AND JAVASCRIPT
Cascading Precedence
1) Inline styles, which appear as attributes within the tag itself, are most important.
2) Embedded styles, which appear at the top of the HTML file, are applied next.
3) Linked styles, which appear in another file altogether, are applied last.
Web browsers give precedence to the style
that appears closest to the tag.
Copyright @ Genetic Computer School 2008 4-11
DHTML AND JAVASCRIPT
Working With Fonts
font-family
font-size
font-variant
font-weight
short hand property- font
Copyright @ Genetic Computer School 2008 4-12
DHTML AND JAVASCRIPT
Font-family PropertyA font family is simply a collection of fonts.
Use this property to assign a list of specific and generic font families to any HTML block or element.
Supply a list of specific fonts, separated from one another by commas, and end the list with a generic font that is to be used if none of the specific fonts are available
Example:
font-family: Helvetica, Arial, sans-serif;
If the name of a font family that you want to specify contains embedded spaces, you will need to enclose that family name in quotation marks
Example:
font-family: “New Century Schoolbook”, Baskerville, serif;
Copyright @ Genetic Computer School 2008 4-13
DHTML AND JAVASCRIPT
Font-size Property
Absolute Font Size
Relative Font Size
Copyright @ Genetic Computer School 2008 4-14
DHTML AND JAVASCRIPT
Absolute Font Size
xx-small
x-small
small
medium
large
x-large
xx-large.
Define absolute font sizes is to specify a length
value in units.
By using pixels to set font size, the visitors will be
unable to resize the font using the browser
setting in Internet Explorer.
Copyright @ Genetic Computer School 2008 4-15
DHTML AND JAVASCRIPT
Relative Font Size
It can be defined in three ways:
using the constants larger and smaller
using the relative measurement of ems
using a percentage value
Copyright @ Genetic Computer School 2008 4-16
DHTML AND JAVASCRIPT
What is the base measurement?In the case of text that is contained directly in the body of a
document, the base measurement is the browser’s default font size.
Example:
The default setting for text in a browser is 12 points
A font-size setting of 1.5em
Produces 18 point type
For text inside other elements, the base measurement used by relative font sizing is the font-size of the element’s parent container, rather than the size of the element’s default font, as you may have expected.
Copyright @ Genetic Computer School 2008 4-17
DHTML AND JAVASCRIPT
Font-style Property
The font-style property determines whether the
text inside an element is rendered in an italic,
oblique, or roman (or normal) font style.
Copyright @ Genetic Computer School 2008 4-18
DHTML AND JAVASCRIPT
font-variant property
The font- variant property has only one effect: it determines whether text should be displayed in small-caps format. The only other value this property can take is normal.
Copyright @ Genetic Computer School 2008 4-19
DHTML AND JAVASCRIPT
font-weight property
Here weight refers to the boldness of the characters. The font-weight property can take two types of values: relative and absolutes. Relative values are bolder or lighter. Absolute values range from 100 (lightest) to 900 (boldest) in 100 units increment, and also include the shortcut names normal (= 400) and bold (=700).
Copyright @ Genetic Computer School 2008 4-20
DHTML AND JAVASCRIPT
Shorthand property : font
This short hand property allows you to set multiple font-related properties in one CSS declaration, separating the values by spaces from one another and using commas in multiple-value situations.
Copyright @ Genetic Computer School 2008 4-21
DHTML AND JAVASCRIPT
Color
Use style sheet rules to control the colour of any HTML element that can be displayed in colour.
Copyright @ Genetic Computer School 2008 4-22
DHTML AND JAVASCRIPT
Elements That Can Be Displayed In Colour
Text
Headings
Page Backgrounds
Background Colour Of Text
Background Colour Of Headings
Borders
Links
Outlines
Copyright @ Genetic Computer School 2008 4-23
DHTML AND JAVASCRIPT
Methods To Specify Colour
Descriptive colour names
System colour names
RGB decimal values
RGB hexadecimal values
RGB percentage values
color: blue;
color: rgb(0, 0, 255);
color: #0000ff;
color: #00f;
color: rgb(0%, 0%, 100%);
Copyright @ Genetic Computer School 2008 4-24
DHTML AND JAVASCRIPT
The Selection Of Colours
It becomes an important issue primarily in two situations:
when you have adjacent objects with coloured backgrounds and you want to avoid a clash
when you have coloured text on coloured backgrounds and you want to ensure readability
Copyright @ Genetic Computer School 2008 4-25
DHTML AND JAVASCRIPT
Important
If you set a foreground colour,
always set a background colour,
and vice versa.
Copyright @ Genetic Computer School 2008 4-26
DHTML AND JAVASCRIPT
Colouring Alternative Rows in Data Tables
<html>
<head>
.....
<style type="text/css">
.odd { background-color: lightgrey; }
.even{background-color: yellow;}
</style>
....
</head>
<body>
......
<table>
<tr class="odd">
<td>This is 1,1</td>
<td>This is 1,2</td>
<td>This is 1,3</td>
</tr>
<tr class="even">
Copyright @ Genetic Computer School 2008 4-27
DHTML AND JAVASCRIPT
Background Images
body {
background-color: white;
color: black;
background-image: url(“money.jpg”);
}
Copyright @ Genetic Computer School 2008 4-28
DHTML AND JAVASCRIPT
It will appear underneath other content.
Background Image
You should specify an appropriate background colour.
This colour will display while the image is loading, and will
appear for site users who have disabled images in their
browsers.
If you define a graphic as the background for a page, that
graphic will repeat, or tile, itself to fill up the entire
browser viewport. As you scroll through the document,
the image will also scroll along. This is the normal
behaviour of backgrounds.
Copyright @ Genetic Computer School 2008 4-29
DHTML AND JAVASCRIPT
Background ImageNormal Behaviour
As you scroll through the
document, the image will
also scroll along.
Copyright @ Genetic Computer School 2008 4-30
DHTML AND JAVASCRIPT
Tiling And Scrolling Characteristics
Use CSS to change both the
tiling and scrolling
characteristics of images.
Copyright @ Genetic Computer School 2008 4-31
DHTML AND JAVASCRIPT
Fixed Background Image Position
You can instruct the background graphic to remain
in place while other objects that are placed on top
of it, including text, effectively scroll over it.
Copyright @ Genetic Computer School 2008 4-32
DHTML AND JAVASCRIPT
background-repeat:
no-repeat
stops the background image from tiling.
only one instance of the image will appear in the background.
repeat
is the default value
repeat-x and repeat-y
repeat the image horizontally and vertically respectively.
Copyright @ Genetic Computer School 2008 4-33
DHTML AND JAVASCRIPT
background-attachment:
Controls whether or not the background image scrolls with
the content.
By default, it is set to scroll
It can also be set to fix, background-attachment: fixed;.
Copyright @ Genetic Computer School 2008 4-34
DHTML AND JAVASCRIPT
background-position:
The background-position: (1st value)(2nd value) The first value controls the horizontal position and can
be left, center, or right The second value controls the vertical position, which
can be top, center, or bottom.
The default value is left top.
You can use percentage, instead of these keywords, for either value.
Example:background-position:right bottombackground-position: 80% 80%
Copyright @ Genetic Computer School 2008 4-35
DHTML AND JAVASCRIPT
How Inheritance Works In CSS
Copyright @ Genetic Computer School 2008 4-36
DHTML AND JAVASCRIPT
Parts Of CSS Style Rule
a selector, which defines the type(s) of HTML
element(s) to which the style rule applies
a series of declarations, consisting of properties and
values, those define the style
Copyright @ Genetic Computer School 2008 4-37
DHTML AND JAVASCRIPT
Selector
Universal Selector
Element Type Selector
Class Selector
ID Selector
Pseudo-element Selector
Pseudo-class Selector
Descendant Selector
Parent-child Selector
Adjacent Selector
Attribute Selectors
Copyright @ Genetic Computer School 2008 4-38
DHTML AND JAVASCRIPT
Universal Selector
It matches every element in the document.
Example:
*{color: red;}
All elements in the page are given a text colour of red.
Copyright @ Genetic Computer School 2008 4-39
DHTML AND JAVASCRIPT
Element Type Selector
It is the most common selector.
It specifies one HTML element type with no qualifiers.
In the absence of other style rules that might apply to the element type provided in the selector, this rule applies to all such elements on the page.
Example:
a{ color: white;
background-color: green;
}
All hyperlinks in the document will appear as white text on a green background.
Copyright @ Genetic Computer School 2008 4-40
DHTML AND JAVASCRIPT
Class Selector
To apply a style rule to a potential arbitrary group of elements in a web page
Define a class in the style sheet
Identify the HTML elements that belong to the class using the class attribute
Must precede the class name with a period. No space is permitted between the period and the name of the class.
Copyright @ Genetic Computer School 2008 4-41
DHTML AND JAVASCRIPT
Example:
.special {font-family: Verdana, Helvetica, Arial, sans-serif;}
<h1 class=”special”>A Special Heading</h1>
<p class=”special”>This is a special paragraph.</p>
Example:
p.special {font-family: Verdana, Helvetica, Arial, sans-serif;}
Create the same special class, but this time it applies only to paragraph elements.
Class Selector: Example
Copyright @ Genetic Computer School 2008 4-42
DHTML AND JAVASCRIPT
ID Selector
Used to target a single HTML element within a page.
Must be defined in the style sheet and included explicitly in
the HTML tag.
Use the # symbol to identify an ID selector in the style sheet,
and the id attribute to give an element an ID.
IDs must be unique within a document.
No two HTML elements in a single document should have the same id.
Copyright @ Genetic Computer School 2008 4-43
DHTML AND JAVASCRIPT
ID Selector: Example
Example:
#unique {font-size: 70%; }
<h4 id=”unique”> This will be a very tiny headline.</h4>
Copyright @ Genetic Computer School 2008 4-44
DHTML AND JAVASCRIPT
Pseudo-element And Pseudo-class
They are supported by some older browsers
Their implementations are not complete.
They are unique among the CSS selectors in that
they have no equivalent HTML tag or attribute
Copyright @ Genetic Computer School 2008 4-45
DHTML AND JAVASCRIPT
Pseudo-element Selector
Example:
p:first-letter{ font-face: serif;
font-size:500%;
float: left;
color: gray;}
A drop-caps effect for the first letter :
The first letter in each paragraph will be five times larger than the usual type used in paragraphs.
CSS specification has defined only three pseudo-
elements: first-letter, first-line and first-child.
To define a pseudo-element for a style rule, precede
the pseudo-element name with a colon.
Copyright @ Genetic Computer School 2008 4-46
DHTML AND JAVASCRIPT
Pseudo-class SelectorA pseudo-class selector applies to a whole element, but only
under certain condition.
The pseudo-class selector comes into play only when the user
interacts with the affected element.
CSS2 defines hover, active, focus, link, visited and lang.
Copyright @ Genetic Computer School 2008 4-47
DHTML AND JAVASCRIPT
Descendant Selector
All HTML elements (except the html element) are descendants of
at least one other HTML element.
A descendant selector restricts the applicability of the rule of
elements that are descendants of other elements.
The scope of the descendant selector is determined by reading
the rule from right to left.
Spaces separate the element types.
The descendant relationship need not be an immediate parent-
child connection.
Example:
li em{color: green;}
It will be applied to any text contained in an em, or
emphasis, element only when the emphasized
text is a descendant of a list item.
Copyright @ Genetic Computer School 2008 4-48
DHTML AND JAVASCRIPT
Parent-child Selector
To apply to element patterns that match a specific
sequence of parent and child elements.
It is a special case of the descendant selector .
It must be related directly to one another in a strict
inheritance sequence.
Copyright @ Genetic Computer School 2008 4-49
DHTML AND JAVASCRIPT
Adjacent Selector
Adjacency is not related to inheritance.
Adjacency refers to the sequence in which elements appear
in an HTML document.
Adjacent elements are always siblings, but it is their
placement in the document, rather than their inheritance
relationship.
The adjacent selector uses the +sign as its connector.
Copyright @ Genetic Computer School 2008 4-50
DHTML AND JAVASCRIPT
Adjacent Selector: Example
h1 + h2 {margin-top: 11px;}
Put 11 extra pixels of space between the bottom of an
h1 heading and an h2 heading that followed
immediately.
Copyright @ Genetic Computer School 2008 4-51
DHTML AND JAVASCRIPT
Attribute Selector
It declares that the rule with which it is associated is
applied only to elements that have a specific attribute
defined, or have that attribute defined with specific
value.
Copyright @ Genetic Computer School 2008 4-52
DHTML AND JAVASCRIPT
Attribute Selector
There are four levels of attribute matching:
[attribute] matches if the attribute attribute is defined at all for the element(s)
[attribute=”value”] matches only if attribute has a value of value
[attribute~=”value”] matches only if the attribute is defined with a space-separated list of values, one of which exactly matches value.
[attribute|=”value”] matches only if the attribute is defined with a hyphen-separated list of “words” and the first of these words begins with value.
Copyright @ Genetic Computer School 2008 4-53
DHTML AND JAVASCRIPT
Measurements
There are two types of measurements.
Absolute
Relative
Copyright @ Genetic Computer School 2008 4-54
DHTML AND JAVASCRIPT
Absolute Measurement
It tells the browser to render the affected content.
Copyright @ Genetic Computer School 2008 4-55
DHTML AND JAVASCRIPT
Relative Measurement
It instructs the browser to scale a value by some
percentage or multiple, relative to the size of the object
before the scaling take place.
Units are em and percentage.
Both the em and the percentage generate font sizes based
on the inherited or default size of the font for the object to
which they are applied.
ems and percentages are 1:100 in equivalent.
Copyright @ Genetic Computer School 2008 4-56
DHTML AND JAVASCRIPT
Relative Measurement
[an optional sign] [a number] [a unit of measurement]
[(+ or -)] [(integer or decimal point)] [(em or %)]
No spaces are permitted between the number and the unit
of measurement.
Copyright @ Genetic Computer School 2008 4-57
DHTML AND JAVASCRIPT
Layout
Copyright @ Genetic Computer School 2008 4-58
DHTML AND JAVASCRIPT
The display property
It determines how a browser displays an element, whether
it treats it as a block, an inline text fragment, or
something else.
Copyright @ Genetic Computer School 2008 4-59
DHTML AND JAVASCRIPT
Six Possible Values For The Display Property
block
inline
list-item
None
table-footer-group
table header-group
The default value varies from element to element.
Copyright @ Genetic Computer School 2008 4-60
DHTML AND JAVASCRIPT
The Box Model