12
DynamicHTML Cascading Style Sheet Internet Technology 1
| Date post: | 06-Sep-2018 |
| Category: |
Documents |
| Upload: | truongdiep |
| View: | 219 times |
| Download: | 0 times |
DynamicHTML
Cascading Style Sheet
Internet Technology 1
What is DHTML?
A collection of enhancements to HTML To create dynamic and interactive websites
Combination of Static Markup language (e.g., HTML)
Client-side Scripting language (e.g., JavaScript)
Presentation Definition Language (e.g., CSS)
Document Object Model
Defines the object-oriented model of a document
To allow programs to manipulate content/structure/style of documents
Example
Internet Technology 2
Cascading Style Sheets
CSS defines how to display HTML documents Specifies document’s font, color, margin, background image, etc.
Enables separation of document content from presentation Change one external CSS file to change the display of an entire website
A webpage can have multiple display formats
CSS Types External CSS → in an external file Example
Save CSS in an external .css file
Reference the CSS file with <link> tag in the HEAD section
→ <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
Document-level CSS → embedded in the HEAD section Example
Define CSS in the HEAD section
Inline CSS → within an element tag Example
Use the style attribute in an HTML tag
Internet Technology 3
Why “Cascading”? Multiple CSS can be applied to one document (in a cascading order)
Styles defined later have a higher preference than those defined earlier
e.g., External CSS Document-level CSS Inline CSS
Internet Technology 4
Institution-level styles (e.g., corporate logo and colors)
Department-level styles
Styles defined for a group of documents (e.g., report)
Styles defined directly in
HTML pages
CSS: Basic Syntax
Selector HTML element to style/format e.g., body, h1, p, hr, ul, ol, etc.
Declaration Consists of Property & Value Declarations are separated by semicolon
Property and value are separated by colon
Property Style attribute to change e.g., color, font-size, font-family, etc.
Internet Technology 5
CSS: ID & Class Selectors
ID Selector Specifies a style for a single HTML element
ID Selector name starts with ‘#’
#para1 { text-align:center; color:red; }
Uses the ‘id’ attribute of HTML element to apply the style
<p id=“para1’>CSS ID selector applied</p>
Class Selector Specifies a style for a group of HTML element
Useful for setting a same style for several elements
Class Selector name starts with ‘.’
.center { text-align:center; color:red; }
Uses the ‘class’ attribute of HTML element to apply the style
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
Example
Internet Technology 6
External CSS
Style document is defined in an external .css file
HTML document calls style sheet through <link> element<HEAD><LINK REL=“stylesheet” TYPE="text/css" href="style1.css“ ></HEAD>
One CSS can be applied to multiple HTML
Multiple CSS can be used by one HTML
Example CGI
JavaScript
Internet Technology 7
Document-Level CSS
Style is defined within a document’s HEAD section
<head>
<title>CSS Examples</title>
<style type=“text/css”>
<!-- use the HTML comment to hide the style definitions from older browsers
H1 {
font-family: Verdana;
font-size: 24px;
}
-->
</style>
</head>
Example
Internet Technology 8
Inline CSS
Style is defined within an HTML element<P STYLE="text-indent: 1in; text-align: center”>
Takes precedence over other styles
Override styles for a specific element
Tips use external CSS to apply to a group of pages
use document-level CSS to override external CSS for a given page
use inline CSS to override for a given element (use sparingly)
Example
Internet Technology 9
CSS: DIV & SPAN
DIV Tag Apply a style to a group of tags
Group any number of HTML elements
Block-level (i.e. includes a paragraph break)
<div style=“text-align: center;”>
<h1>Using DIV to group tags</h1>
<p>Using DIV to group tags</p>
</div>
SPAN Tag Change the style of an element at a non-block level
Enclose text
No implied paragraph break
<h3>Using <span style=“color:red;”>SPAN</span> to change color</h3>
Example
Internet Technology 10
CSS: Box Model
CSS can control the layout of elements as boxes Box Model = a box (padding, border, margin) around HTML elements
Margin – transparent area around border
Border – colored area around padding & content
Padding – area around content
Content – area where text and images appear
div.ex{width:220px;padding:10px;border:5px solid green;margin:10px;}
Example
Internet Technology 11
CSS: Positioning
Position Properties top, bottom, left, right
Positioning Method
Static Position (default)
Element is placed according to the normal flow of the page
top/bottom/left/right properties have no effect
Relative Positioning
Element is placed relative to its normal position
“relative to” (top/bottom/left/right distance) away from
Fixed Positioning
Element is placed in a fixed location relative to browser window
Absolute Positioning
Element is placed relative to its nearest positioned ancestor
Absolutely positioned elements do not affect other elements’ positions
Overlapping Elements
Use “z-index” to set the stack order of elements
Example
Internet Technology 12
