Upload
adelle
View
32
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Introduction to Programming the WWW I. CMSC 10100-1 Summer 2004 Lecture 7. Today’s Topics. Cascading Style Sheet. HTML Forms. HTML Forms are used to select different kinds of user input, defined with tag Form contains form elements to allow the user to enter information - PowerPoint PPT Presentation
Citation preview
Introduction to Programming the WWW I
Introduction to Programming the WWW I
CMSC 10100-1
Summer 2004
Lecture 7
2
Today’s TopicsToday’s Topics
• Cascading Style Sheet
3
HTML FormsHTML Forms
• HTML Forms are used to select different kinds of user input, defined with <form> tag
• Form contains form elements to allow the user to enter information text fields textarea fields drop-down menus radio buttons checkboxes, etc
• A Web page can contain one or multiple forms Identified by id or name attribute
4
What is CSS?What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define extra information about how to display HTML elements
• Styles are normally stored in Style Sheets
• Multiple style definitions will cascade into one
5
What is CSS? (cont’d)What is CSS? (cont’d)
• Incorporated in HTML only at 4.0 Removes formatting from HTML, leaving it to be a
structure/content language• HTML 1.0 – structure tags only
HTML tags were originally designed to define the content of a document• HTML 2.0/3.2 – structure tags mixed with formatting tags• HTML 4.0 + CSS – structure tags only in HTML 4.0 and CSS handles
formatting Two levels of CSS: CSS1 and CSS2
• Why use CSS? Scalability!• CSS Demos:
• http://www.w3schools.com/css/demo_default.htm• http://www.csszengarden.com/ (thanks Carl)
6
Some Important PreliminariesSome Important Preliminaries
• Containment Examples: containment.html
• <div> tag Block-level tag to group the contained elements
together Example: div-usage.html
• <span> tag Inline version of <div> to group inline elements Useful to format tag-less styles Example: span example
7
Creating Your Own Style Rules
Creating Your Own Style Rules
• A CSS rule consists: Selector Declaration: pairs of properties and values• separated with semicolon• put quotes around a value if it is multiple words
• Rule examplesH1 {font-family : Arial, sans-serif;}P { font-family : “Times new roman", serif; color : red; text-align: left;
}
• Example: listing1-1.html
8
HTML Element SelectorsHTML Element Selectors
• Designate style for one or more HTML tags h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center;}
• Contextual Selectors To combine multiple HTML element selectors E.g: making bold text within paragraphs maroon
p b {color : maroon} Contextual dependencies can be nested further
div.warning h1 em { color: green; }
• Example: listing1-4.html
9
Class SelectorsClass Selectors
• Apply styles to several elements on a page• Class selector begins with a period
E.g: .isgreen {color: green}
• Reference the class name in the HTML E.g: <h1 class=“isgreen”>This will appear green.<h1>
• Can also create subclasses for HTML elements: Can define different styles for a same HTML
element E.g: h1.isblue {color: blue}
h1.isred {color: red}
10
ID SelectorsID Selectors
• Applies rules to HTML content by ID• Class selector begins with a “#”
E.g: #silverware {color: silver}
• Reference the ID in the HTML E.g:
<h1 id=“silverware ”>This will appear silver.<h1>
• ID selector enables you to identify an element to be an *unique instance* in a document Apply an ID selector to only ONE element Useful in JavaScript
11
Pseudo-ClassesPseudo-Classes
• Display the same element differently in various states
• Typically used to indicate the state of a linka:link { color: blue }
a:visited { color: black }
a:active { color: green }
a:hover { color: red }
• HTML selector and its pseudo separated by “:”
• Mix pseudo-classes with regular class
• Example: listing1-4-2.html
12
Pseudo-ElementsPseudo-Elements
• Allow you to set a style on a subpart of an element
• Use case: The first character of a line
p:first-letter { }
p.dropcap:first-letter { }
The first line of a paragraphp.greenstart:first-line { }
• Example: Pseudo-element.html
13
CSS CommentsCSS Comments
• A CSS comment begins with "/*", and ends with "*/"• Example:
/* This is a comment */p{text-align: center;/* This is another comment */color: black;font-family: arial
}
14
Placing Style Sheets 1Placing Style Sheets 1
• Inline Style Sheets Applies to a single element <p style="color : silver">some text goes here.</p>
Discouraged by the W3C Example: listing1-7.html
15
Placing Style Sheets 2Placing Style Sheets 2
• Internal Style Sheets Placed in the HTML head element using <style> tag
• Set type attribute to “text/css” for <style> tag Applies to a single page Example: listing1-4-1.html
<head><style type="text/css">
<!--h1, h2, h3, h4, h5, h6 {font-family : arial, sans-serif;color : blue; text-align: center; }
p b {color : maroon;}.isgreen {color : green;}-->
</style></head>
16
External Style SheetsExternal Style Sheets
• Store style rules in an external plain text file (CSS file)• Reference the external file using a <link> tag in HTML head
element Syntax<link rel=“stylesheet” type=“text/css” href=“location_of_stylesheet”>
The alternative: using @import declaration in <style> tag• Syntax: <style>@import url(location_of_stylesheet)</style>
A single HTML page can refer to multiple external style sheets
• Great for consistent styling on large sites• Example: listing1-5.html using myfirststyle.css
17
Style Cascading OrderStyle Cascading Order
• What style will be used when there is more than one style specified for an HTML element?
Inline Style (inside HTML element)
Internal Style Sheet (inside the <head> tag)
External Style Sheet
Browser default
High Priority
Low Priority
18
What can CSS control?What can CSS control?
• Fonts (color, size, caps, font, etc)
• Background (image, color, tiling properties)
• Text (spacing, line-height, alignment, decoration, word-spacing)
• Box properties (border, margin, padding)
• List properties (image for bullets)
• Links (visited, hover, active, link)
• Example: listing1-6.html
19
CSS1 Properties Specification
CSS1 Properties Specification
• Units Length Units Percentage Units Color Units URLs
• Units references
• Units examples
• Font Properties Font Family Font Style Font Variant Font Weight Font Size Font
• Font examples
20
CSS1 Properties Specification (cont’d)
CSS1 Properties Specification (cont’d)
• Color and Background Properties Color Background Color Background Image Background Repeat Background Attachment Background Position Background
• Color examples
• Background examples
• Text Properties Word Spacing Letter Spacing Text Decoration Vertical Alignment Text Transformation Text Alignment Text Indentation Line Height
• Text examples
21
CSS Formatting ModelCSS Formatting Model
• Each element in CSS is considered to be bounded by a box
• The content of the element is surrounded by a padding, border, and margin
• The margin and padding are transparent, but the borders may be given a style and color
• css-fmt.html
22
CSS1 Properties Specification (cont’d)
CSS1 Properties Specification (cont’d)
• Border Properties Top Border Width Bottom Border Width Left Border Width Right Border Width Top Border Bottom Border Left Border Right Border
Border Width Border Color Border Style Border
• Border examples
23
CSS1 Properties Specification (cont’d)
CSS1 Properties Specification (cont’d)
• Margin Properties Top Margin Right Margin Bottom Margin Left Margin Margin
• Margin examples
• Padding Properties Top Padding Right Padding Bottom Padding Left Padding Padding
• Padding examples
24
CSS1 Properties Specification (cont’d)
CSS1 Properties Specification (cont’d)
• Classification Properties Display Whitespace List Style Type List Style Image List Style Position List Style
• List examples
25
More CSS1 stuffMore CSS1 stuff
• Online CSS resources http://www.w3c.org/Style/CSS
• Check W3C’s CSS1 document
A more detailed overview from Dave Raggett See CNET builder.com’s reference for details
• CSS validation service http://jigsaw.w3.org/css-validator/validator-uri.html
• You can point your browser to CSS files to look at what’s going on
26
CSS2CSS2
• CSS2 is an extension of CSS1 Adds content positioning:• absolute (and fixed) vs. relative• specify coordinates (relative to top left of box)• z-index: for saying what’s on top when things are
stacked Bigger value has higher priority
The clip, overflow, visibility properties
27
CSS2 approachCSS2 approach
• Make each section of the page a separate <div> with an ID
• Use positioning for ID selectors, background colors, etc (exact control)
• Only need to include HTML, not formatting information on each page
28
The Position PropertyThe Position Property
• Content positioning Old solution: graphics version of the content
• CSS2 solution is more efficient Example: listing2-1.html 1.9K/0.3sec vs. 40K/8sec
• Absolute positioning & Relative positioning Example: listing2-3.html
• More examples at w3school.com
29
The Visibility PropertyThe Visibility Property
• Use visibility property to hide element set the visibility property to hidden
• Example: visibility.html
30
The Overflow PropertyThe Overflow Property
• CSS2 enable customizing the size of the bounding box of any block-level element
• Overflow content is handled by overflow property
visible, hidden, scroll, auto
• Example: overflow.html
31
The Clip PropertyThe Clip Property
• CSS2 permits cropping an image or other element Example:
img {clip: rect(10px, 5px, 10px, 5px);/*top,right,bottom,left*/}
• Applied only to absolutely positioned elements• Examples:
cliporiginal.html clipcropped.html
32
CSS Differences between IE and Mozilla
CSS Differences between IE and Mozilla
• Your homework will be evaluated in both IE and Mozilla residing at the Mac Machines in MacLab
• Different browser may show different effects for the same style sheet
• Example: css2.html (open in both IE and Mozilla (NN))