comp 135 web site design intermediate week 1. phillip chee [email protected] ext.1214...
TRANSCRIPT
COMP 135Web Site Design Intermediate
Week 1
Practical CSS3: Develop and Design. Chris Mills. Peachpit Press. 2013.
Introduction to CSS3 and Modern Web Design with HTML5
• What is HTML?• HTML document structure• HTML element syntax• Document Object Model• Block level and inline elements• Semantics• Best practices• Character references
History of HTMLIETF (Internet Engineering Task Force)
proposes HTML standard1993
HTML 2.01995
HTML 3.0 > 3.2 1996
HTML 4.0 > 4.11997 > 1999
XHTML 1.02000
XHTML 2.02001
Web Hypertext Application Technology Working Group (WHATWG)2005
HTML52009
History of CSSWC3’s HTML editorial review board (ERB)
1994-95
CSS Level 1 (completed)1996
ERB > CSS Working Group1997
CSS Level 21998
CSS Level 2.12004-2011
• CSS Level 31999 – work begins
• Separated into modules to allow for quicker development and recommendation; no need to wait for everyone to finish
• Over 50 modules• 4 at recommendation status:
2011-6-07: Color2011-9-29: Namespaces2011-9-29: Selectors Level 32012-6-19: Media Queries
Browser Prefixes
Use when properties in module are not finalized• -webkit- Google Chrome, Apple Safari• -moz- Mozilla Firefox• -ms- Microsoft Internet Explorer• -o- OperaN.B. Opera is moving to Webkit and Google is creating Blink
What HTML is
• Text file with .htm or .html extension• Contains content—words, references to images,
data• Wrapped in special syntax markers called
elements• Elements are written out as opening and closing
tags• Web browsers (a.k.a. user agents) display the
content as intended
1.<h1>This is a heading</h1>2.<p>This is a paragraph of
text, or content, marked up with HTML tags. This paragraph is wrapped in a paragraph element</p>
Structure of HTML Documents<!DOCTYPE html><html>
<head><title>HTML Page</title>d
</head><body>
<h1>A very simple HTML page!</h1></body>
</html>
1. Document type definition or DOCTYPE. Points to set of rules that HTML documents should follow to be correct.
2. <html> elements wraps entire content.
3. <head> element contains metadata and <title> element; titled displayed in browser title bar.
4. <body element contains the actual content.
Œ
��
Ž
�
Syntax of HTML elements
<h1>The Basics of<abbr title=“Hypertext Markup Language”>HTML</abbr>
</h1>
Œ �
1. Parent element
4. Closing tags
Elements consists of two tags that wrap around content. Some elements don’t wrap around content and consist of one tag. Most elements can contain sub-elements. Almost all elements can have attributes, which can modify the
element’s behaviour or give it extra meaning.
Ž
2. Child element
�
3. Opening tags
�
5. Attribute and attribute value in quotes
What other types of elements available?
• Emphasizing parts of text in paragraphs
– quotes, strong/important text, code excerpts, deleted or inserted text
• Marking up numbered or bulleted lists
• Marking up data contained in tables (tabular data)
• Form elements
• Image elements
The Document Object Model (DOM)
• Browsers take the code and convert the HTML elements into a Document Object Model (DOM)
• The following HTML:
• Can be represented by the DOM as:
<h1>The Basics of<abbr title=“Hypertext Markup Language”>HTML</abbr>
</h1>
Document Object Model diagram<h1>
The basics of <abbr>
title HTML <h1> is the parent element node of both the <abbr> element node
and text node “The basics of.” <abbr> element node is the child element node of the parent <h1>
element node and contains two children of its own: an attribute node title and a text node containing “HTML.”
And why should you care?
• Well-formed DOM required to ensure browsers display your HTML pages correctly and consistently
• CSS and JavaScript require you to travel up and down the DOM levels to select elements you wish to manipulate
• CSS inheritance is derived from the DOM hierarchy
Block level and inline elements
• Two general categories of elements:– Block level elements– Inline elements
• Block level
– Higher-level element corresponding to structure of document
– Starts on a new line, separate from what went before it
• Examples: paragraphs, list items, headings, sections, footers, tables
• Inline element
– Contained within block level structural elements
– Surrounds only small parts of the document’s content, not entire paragraphs or groupings of content
– Will not cause a new line to appear in the document
• Examples: hypertext links, strong or emphasized words, abbreviations, short quotations
Semantics
• Meaning of a word, phrase or sentence• In HTML good semantics means the HTML is
self-describing:– The elements wrapping the content should match
the function or purpose of the content itself• Heading elements should markup headings,
paragraph elements should markup paragraphs, etc.
Generic containers: <div> and <span>
• What if there are no suitable elements to markup your content?
• HTML has two generic elements for identifying custom:
• <div> and <span>• Used mainly for semantically marking up
common page elements found in many sites:– Headers, footers, content sections
<div>
• Wraps block-level elements
• <div class=“content”><p>some text</p><p>more text</p><p>and more</p>
</div><div class=“menu”>
<ul> <li>first item</li> <li>second item</li> <li>third item</li>
</ul></div>
<span>
• Wraps inline elements or content
• <h1>HTML Basics, Web Standards Concepts <span id="logotype">WSDI</span></h1>
HTML5 to the Rescue
• Divs and spans are meaningless; provide no semantics
• Some useful new elements– article, section, header, footer, aside, nav, time, figure, figcaption, video, audio, canvas
• Say bye-bye to these HTML 4.01 elements– font, acronym, frame, frameset, noframes, tt, center, big,
strike, applet, basefont
• Separate content from presentation
• All content should go in HTML, but separate style information into CSS
The New HTML5 Elements
headerhgroup
h1h2
nav
ul• li• li
section
article article article
footer
footer
<body><header>
<hgroup><h1>a heading</h1><h2>a sub-heading</h2>
</hgroup></header><nav>
<ul><li>menu item1</li><li>menu item2</li>
</ul></nav><section>
<h1>a level 1 heading</h1><article>
<h2>a level 2 heading</h2><p>content</p>
</article><article>...</article>
<article>...</article><footer>...</footer>
</section><footer>...</footer>
</body>
Character References
• In HTML the characters <, >, and & are special• Represent start and end of the HTML syntax
not less-than, greater-than, and ampersand• Character references are the way to include
special characters or characters difficult to enter with the keyboard
• The ampersand (&) introduces the reference and the semi-colon (;) ends it. See http://evolt.org/entities
• References can be numbers (numeric references)
• Or shorthand words (entity references)
• To enter an actual ampersand in your document use the character entity reference & or the numeric reference &
CSS3• Selectors• Specificity• Inheritance• The Cascade
Selectors
• Universal Selector• *
• Matches any element name in the document language. If a rule has no explicit selector the universal selector is inferred.
• Examples:* {color: red;}div * p {color: blue;}
Selectors
• Type Selector• element1
• Matches the name element name in the document language. Every instance of the element name is matched.
• Examples:body {background: #FFF;}p {font-size: 1em;}
Selectors
• Descendant Selector• element1 element2
• Allows author to select element based on its status as a descendant of another element. Matched element can be a child, grandchild, great-grandchild, etc of the ancestor element.
• Examples:body h1 {font-size: 200%;}table tr td div ul li {color: purple;}
Selectors
• Child Selector• element1 > element2
• Matches the name element name that is the child of another element. More restrictive than a descendant selector since only child elements are matched.
• Examples:div > p {color: goldenrod;}ul > li {font-weight: bold;}
Selectors
• Adjacent Sibling Selector• element1 + element2
• Allows author to select element that is the following adjacent sibling of another element. Sibling elements share the same parent element.
• Examples:table + p {margin-top: 2em;}h1 + * {margin-top: 0;}
Selectors
• General Sibling Selector• element1 ~ element2
• Allows author to select element that is the sibling of another element and follows it in the document tree.
• Examples:h1 ~ h2 {margin-top: 2em;}div#navlinks ~ div {margin-top: 0;}
Selectors
• Class Selector• element1.classname1• element1.classname1.classname2
• Allows author to use “dot notation” to select elements that have a class attribute with a specific value or values. Multiple values can be chained together (not supported in < IE7). If no element name precedes the dot, the selector matches all elements with that class value or values.
• Examples:p.urgent {color: red;}a.external {font-style: italic;}.example {background: cyan;}.note.caution {background: yellow;}
Selectors
• Simple Attribute Selector• element1[attr]
• Allows author to select any element based on the presence of an attribute, regardless of the attribute’s value.
• Examples:a[rel] {border-bottom: 3px dotted red;}p[class] {border: 1px double silver;}
Resolving CSS Rule Conflicts
• HTML documents allow multiple style sheets• Inevitably CSS rule conflicts may occur• The cascade is used to resolve these conflicts• The cascade has two components: specificity
and inheritance• !important declarations, style sheet origin
and order are also considered
Specificity• Describes the weight of a selector and any
rule declarations it contains.
• Specificity values are cumulative; given a selector with two element identifiers and a class identifier (e.g. div.aside p) its specificity is 0,0,1,2
• Weight is given precedence from right-to-left
Table 1. Summary of Specificity Summation(adapted from CSS Pocket Reference, E. Meyer)
Selector Type Example Specificity
Universal selectorCombinator
*+
0,0,0,0
Element identifierPseudo-element identifier
P::first-line
0,0,0,1
Class identifierPseudo-class identifierAttribute identifier
.blurb:hover[src=“alert.gif”]
0,0,1,0
ID identifier #page 0,1,0,0
Inline style attribute style=“color: green;” 1,0,0,0
Calculating Specificity
• If two or more rules conflict and all have equal importance, then the rule with the most specific (higher weighted) selector wins
• Specificity has four components; call them a, b, c, and d
• Component “a” (left-most) is the most distinguishing and “d” (right-most) the least
Scoring Specificity Components
• Component “a” given 1 for an inline style attribute, otherwise it’s 0
• Component “b” is the number of ID identifiers in the selector (those that begin with #)
• Component “c” is the number of attribute identifiers, class identifiers, and pseudo-class identifiers
• Component “d” is the number of element identifers and pseudo-elements identifers
Examples of calculating specificity on CSS selectors
Selector A B C D Specificity Identifiers
h1 0 0 0 1 0,0,0,1 One element
.foo 0 0 1 0 0,0,1,0 One class
#bar 0 1 0 0 0,1,0,0 One ID
ul#nav a:link 0 1 1 2 0,1,1,2 One ID, one pseudo-class, two elements
• Combinators like >, + and the white space (descendant selector) have no effect on specificity
• id identifier is not the same specificity as an attribute identifier that refers to the same id attribute
• [id=“nav”] has a specificity of 0,0,1,0 whereas #nav has a specificity of 0,1,0,0
!important Declarations• Normal declarations are normal declarations
• !important declarations are just the opposite: important; these are declarations followed by the !important directive:
* { font-family: Helvetica !important; }
• !important declarations have more weight than nonimportant declarations
• !important declarations retain their specificity and is only used with respect to other important declarations
• Default browser rendering of elements are not overridden unless a rule in user or author style sheet is specified
Origin• User agent style sheet
– Built-in browser style sheet (default properties)
• Reader style sheet
– Not all browsers support this but readers can add their own. Typically used to enhance accessibility
• Author style sheet
– This is the “style sheet” that we normally think of
– Written by the web designer
Source Order• Given conflicting rules with the same importance and the same
specificity, source order is used to determine the winner: the declaration that appears later in the style sheet
• In a single external style sheet the declarations at the end of the file override those at the beginning when they conflict
• If the conflicting rules appear in different style sheets the order in which they are linked or imported controls which one is applied– If there are two linked style sheets in the <head> of a document
the one linked last overrides the one linked first
Inheritance• Just as in genetics traits can be inherited by
children from their parents
• This is the mechanism by which certain properties can be passed from a parent element to its child elements
• Without it you’d have to specify every property for every element every time you wrote a web page
• In the DOM the root element sits at the top with the rest of the document structure spreading out below it.
html
head body
header section footer
nav article
h1 p p
em
• Elements lower down the tree are descendants of the ancestors, which are higher above it
• CSS uses the document tree for the mechanism of inheritance, wherein a style applied to an element is inherited by its descendants
• Inheritance is interrupted only when a rule is directly applied to the element
• Inherited values have no specificity, which is not the same as having zero specificity (0,0,0,0)
• Much easier to specify the default font on the <body> element knowing that all child elements of <body> will inherit that propertybody { font-family: Georgia; }h1, h2, h3 { font-family: Helvetica; } /* This overrides the first rule because it is listed later in the code */
• Not all properties are inherited• e.g., margins, borders, padding, background• Common sense should tell you what is and
isn’t inheritable, or review the CSS 2.1 specification property summary table:www.w3.org/TR/CSS21/propidx.html
The Cascade• The following steps are used to resolve CSS
style rule conflicts:1. Find all declarations having a selector matching a given element.
2. Sort all declarations applying to the element by their explicit weight. !important declarations given more weight than those not. Sort by origin with author style sheets winning over reader’s and both over user-agent’s. However !important reader style sheets always win over author’s even !important author’s.
3. Sort by specificity all declarations applying to a given element. Elements with higher specificity are weighted higher than those with lower specificity.
4. Sort by order all declarations applying to a given element. The later a declaration appears in a style sheet or document the more weight it’s given. Declarations in an imported style sheet are considered to come before declarations in the style sheet that imports it and therefore given a lower weight.