DHTML

DHTML
Stylesheet History
As early as 1993, people have been interested in adding more layout control to HTML.
Because of their theoretical benefits, style sheets have been the favorite solution of the
standard bodies. However it wasn’t until 1995 when bert bos of the W3C wrote chapter to
work on the introduction of a style sheet standard for the web.
Style sheet Basics
What does a style sheet do?Here is an example.consider the following:
Here is a simple text
To write this short sentence in HTML, you have to use many commands, such as
CENTER, FONT COLOR, FONT SIZE etc. Suppose you need to write this sentence 10
times, won’t it be easier to specify what you want only one time and simply write one
command instead of six. This is possible with style sheets
A style sheet is definition of how content should be rendered on the page. The purpose of
a style sheet is to create a presentation for a particular element or set of elements. Binding
an element to a style sheet specification is very simple. It consists of an element followed
by its associated style information within curly braces
Element {style specification}

Suppose that you want to bind a style to the <h1> element so that a 12-point courier font
with bold style is always used. The following rule would result in the desired display:
<style type=”text/css”>
h1 {
font- size:12pt;
font-style:bold;
font-family:courier
}
</style>
Embedding and importing style sheets
<html>
<head>
<title>Document-wide style sheets</title>
body{background:white;
margin-left:1in;
margin-right:1.5in
}
h1
{
font-size:24pt;
font-family:san-serif;
color:red;
}
p{
text-align:center;
font-size:12pt;
font-family:arial black;
text-indent:0.5in;
color:black;
}
</style>
</head>
<body>
<p>content affected by style sheet…..</p>
</body>
</html>
Linking to a style sheet (cascading style sheet)
An external style sheet is simply a plain text file containing the style specifications for
HTML tags or classes.The common extensions indicating that it is a style sheet file is .css
for CSS style sheet. By this method, we can use one style sheet for multiple pages.The
following steps explain you on creating a .css file.
Create a style sheet document(Notepad)
Body
{
font:10pt;
font-family:serif;
fcolor:black;
background:white
}
h1
{font :24pt;
font-family: sans-serif;
color:black
}
h2
{font :16pt;
color:black
}
p
{text-indent:0.5in
margin-left:50px;
margin-right:50px
}
A:link
{
color:blue;
text-decoration:none
}
A:visisted
{
color:blue;
}
A:active:
{
color:red;
}
Save it as style.css.Remember:the extension has to be .css nad NOT .htm or .html
Now to use this style sheet,all you have to do is paste
<link rel=”stylesheet” href=”style.css” type=”text/css”>
is the HEAD part of your document.When the browser is started it will start looking for a
CSS and will go this URL.
Embedding and importing style sheets

The second way to include an external style sheet is to embed it.When you embed a
style,you write rules directly within the HTML document.Document-wide style is a very
easy way to began using style sheets.It involves the use of<STYLE> element found
within the <STYLE> the<HEAD> element of an HTML document.Enclose the style
rules within the<STYLE> and </STYLE> tag pair and place these within the head
section of HTML document.A complete example of a document-wide style
sheet,including hiding rules from older browsers is shown below.
<html>
<head>
Body
{
font:10pt;
font-family:serif;
fcolor:black;
background:white
}
h1
{font :24pt;
color:black
}
h2
{font :16pt;
color:black
}
p
{text-indent:0.5in
margin-left:50px;
margin-right:50px
}
</style>
</head>
<body>
<p>Content affected by style sheet</p>
</body>
</html>
Using Inline style sheet
Other than using style sheet for the whole document, it is possible to add style
information right down to single element. The simplest way to add style information, but
not necessarily the best, is to add style rules to particular HTML element element.This is
how it works.Consider an example.Let’s say you want to set one particular<h1> tag to
render 48-point,green,arial font.than you need to apply that style to <H1> elements or to
a class of them(discussed later) by applying a document-wide style.
<h1 style=”font-size:48pt;font-family:arial;color:green”>CSS1 Test</h1>
Using CLASS
<html>
<head>
.important
{
Background-color: yellow
}
</style>
</head>
<Body>
<h1 class=”important”>this is the first paragraph</h1>
<h1 class=”important”>example</h1>
<p>this is second paragraph</p>
<p class=”important”>this is the third paragraph</p>
</body>
</html>
Using ID
<html>
<head>
# important
{
Background-color: yellow
}
</style>
</head>
<Body>
<p>this is the first paragraph</p>
<p id=”important”>example</p>
<p>this is the third paragraph</p>
</body>
</html>
Other Style sheet properties

Font Properties
1) Font-family-denotes font
2) Font-size-denotes the size of the text
3) Font-style-denotes the style of the text for example normal, bold, italic etc.
4) Font-weight-denotes the weight or darkness of the font. This value ranges from
100 to 900 increments of 100
5) Font-variant:small-caps/normal
6) Font-stretch:normal/wider/narrower/ultra-condensed/extra-condensed/expanded
7) Color:red
8) Background-color:green
9) Background-image:url(“abc.gif”)
10) Background-repeat:repeat-x,repeat-y,none,no-repeat
11) Background-attachment:fixed/scroll
12) Background-position:center top
13) Cursor:crosshair/default/pointer/move/e-resize/n-resize
14) Padding:5px
15) Border:2px double/solid/dotted black
16) Height
17) Width
18) Margin-top:
19) Margin-right
20) Margin-bottom
21) Margin-left
22) Border-top-width:5px
23) Border-right-width:5px
24) Border-bottom-width:5px;
25) Border-left-width:5px
26) Border-top-color:green
Text Properties:
1) Letter-spacing-denotes the space between letters.the default value A variety of
measurements like inches(in),centimeters(cm),millimeter(mm),points(pt) etc can
be used
2) Word-spacing-denotes the space between words.Mesurements can be used similar
to letter spacing.
3) Vertical align-denotes the vertical positioning of the text and images,with respect
to the baseline.The possible values include baseline,sub,super,top,text-top,middle
paercentage values etc.
4) Text-align-specifies the alignment of the text.the possible values are center,justify
etc.text-align:center
5) Text-indent:denotes margins this property sets the indentation for text in first line
of a block level element.ex:text-indent:2.5em
6) Text-transform:denotes the transformation of the text.The possible values are
capitalize,uppercase,lowercase etc.
7) Text-decorate-denotes the text’s decoration.The standard values for this property
include blink,line-through,overline,underline etc
Absolute versus relative positioning
There are four different position types.The first is static,which is the current method that
HTML uses.The next type is absolute.this allows you offset elements based on the
browser borders.Another positioning type is relative.this lets you offset elements based
on the above element.The final type is fixed,which is similar to absolute,except the
element doesn’t move when the page is scrolled
H1
{position:absolute;
Top:20px;
Left:20px;
Right:20px;
Bottom:20px
}
Overflow property
Pre
{overflow:visible/hidden/scroll/auto;
Height:200px;
Width:200px
}
Visibility Property
H1{visibility:visible/hidden/collapse(only for table)
Layering a webpage
Z-index property
<html>
<head>
<style>
p
{background-color:blue;
position:absolute;
left:40px;
top:40px;
width:300px;
height:260px;
z-index:1
}
blockquote
{
background-color:yellow;
position:absolute;
left:80px;
top:80px;
width:300px;
height:200px;
z-index:2
}
</style>
</head>
<body>
<blockquote><font size=7>Do you ant to play hide and seek</font></blockquote>
<p><font size=7>count to ten</font></p>
</body>
</html>
Object referencing
The simplest way to reference an element is by its ID attribute.The element is represented
as an object,a nd its various HTML attributes become properties that can be manipulated
by scripting.
<html>
<head>
<script language=”javascript”>
function a1()
{
alert(p.innertext)
p.innertext=”thanks for coming”
}
</script>
</head>
<body onload=”a1()”>
<p id=”p”>welcome to our web page</p>
</body>
</html>
Filters
Microsoft has added a variety of multimedia filters and transitions that can be accessed
via a style sheet.The basic form of a filter rule is shown below:
Filtername Description
Alpha sets a uniform transparency level
Blur Creates the impression of moving at high speed
Chroma Makes a specific color transparent
DropShadow Creates a solid shadow of the object
FlipH Creates horizontal mirror image
FlipV Creates vertical mirror image
Glow Add radiance around the outside edges of the object
Grayscale Drops color information from the image
Invert Reverses the hue,saturation and brightness values
Light Projects a light source onto an object
Mask Creates a transparent mask from an object
Shadow Creates an offset solid
Wave Creates a sine wave distortion along the x-alix
Xray: Shows just the edges of the object
Example:
<html>
<head>
<style text=”text/css”>
.glow{
height:10;width:400;filter:glow(color=red,strength=4)
}
.blur{
height:10;width:400;filter:blur(add=1,direction=90,strength=10)
}
.dropshadow
{
height:10;width:400;filter:dropshadow(color=green,offx=2,offy=2,positive=1)
}
.fliph
{
height:10;width:400;filter:fliph()
}
.flipv
{
height:10;width:400;filter:flipv()
}
.shadow
{
height:10;width:400;filter:shadow(color:blue)
}
.wave
{
height:10;width:400;filter:wave(add=1,freq=4,lightstrength=50,phase=50,strength=10)
}
</style>
</head>
<body>
<div class=”blur”>This is a blur filter</div>
<div class=”dropshadow”>This is dropshadow</div>
<div class=”fliph”>This is the flip horizontal filter</div>
<div class=”flipv”>This is the flip vertical filter</div>
<div class=”glow”>This is a glow filter</div>
<div class=”shadow”>This is a shadow filter</div>
<div class=”wave”>This is a wave filter</div>
</body></html>

DHTML

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

DHTML

Diunggah oleh

Hak Cipta:

Format Tersedia

DHTML

Element {style specification}

Embedding and importing style sheets

Other Style sheet properties

Anda mungkin juga menyukai