multimedia and the world wide web hci 201 lecture notes #7a
Post on 15-Jan-2016
218 views
TRANSCRIPT
Multimedia and the World Wide Web
HCI 201 Lecture Notes #7A
HCI 201 Notes #7A 2
What will we learn today?
Introduction to Cascading Style Sheet (CSS) Three styles Style precedence Style syntax Style classes
HCI 201 Notes #7A 3
Case Study 5Chris Watson asked us to assist her in the design of the web site of her company, Maxwell Scientific. Because this web site will eventually contain a large number of pages, Chris wants our design to be easy to maintain and change.
To avoid the situation where a simple modification means editing every single page in the web site, we will use cascading style sheet to accomplish this design task.
HCI 201 Notes #7A 4
Introduction to CSS
HTML focuses on content rather than page design and layout, for faster page loading.
A little control over the page layout Use HTML tag extensions, convert text to images, use tables.
A Style is a rule that defines the appearance of an element in the document.
A Style Sheet is a collection of styles for a web page or site.
A Cascading Style Sheet is a style sheet using cascading rules.
HCI 201 Notes #7A 5
Three ways to employ CSS - 1
Inline style<h1 style=“color: red; font-style: italic”>new h1</h1>
- Include a style attribute in the tag.- Define the properties and their values in style.- Browser will use these style values to render the content of this (instance of the) tag --- limited scope.- Easy to sprinkle throughout your document, but hard to maintain.
- Use inline style only if you do not want the same effects globally.
*Anything that you didn’t explicitly define in CSS will be left to the browser’s internal style rules.
HCI 201 Notes #7A 6
Three ways to employ CSS - 1
Inline styleChange the style for the first <h1> tag<h1>Astronomy</h1>
To:<h1 style=“color:gold; font-family:sans-serif”>Astronomy</h1>
Question: Will this change affect other <H1> tags in this document?
HCI 201 Notes #7A 7
Three ways to employ CSS - 2
Document-level style sheet (Embedded style)<style type=“text/css”>
h1 {color: blue; font-style: italic}</style>- Place a list of layout rules within the head of a document.- type is the type of style language. “text/css” is the default and also the most common CSS style language. “text/javascript” means JavaScript style sheet.- Definitions in <style></style> affect (overwrite) all the defined tags within this document --- easy to change and maintain.- Inline style of a specific tag overwrites its definition in document-level styles.
HCI 201 Notes #7A 8
Three ways to employ CSS - 2
Document-level style sheet (Embedded style)Add the following code after the <title> tag
<style>
h1 {color:gold; font-family:sans-serif}
</style>
Question: Will this change affect all the <H1> tags in this document?
HCI 201 Notes #7A 9
Three ways to employ CSS - 3
External style sheet --- Linked external style sheet<link href=URL rel=relation_type type=CSS_type>
- Add a <link> tag within the head of a document.
- URL is the URL of the linked document (*.txt or *.css file).
- relation_type indicates the relationship between the linked document and the web page, for a link to a style sheet, rel=stylesheet.
- CSS_type indicates the language used in the linked document, for a link to a cascading style sheet, type=text/css.
- Use attribute title in <link> to make it available for later reference by the browser.
(We’ll talk about what’s in a *.css file later.)
HCI 201 Notes #7A 10
Three ways to employ CSS - 3
Linked external style sheet1. Save the following code in a “mws.txt” file
h1 {color:gold; font-family:sans-serif}
2. Delete the style declaration between the <style> tags. 3. Insert the following line above the <style> tag <link href=“mws.txt” rel=“stylesheet” type=“text/css”>
*Note: there is no <style> and </style> in the mws.txt file. Question: Will this change affect all the <H1> tags in this document?
HCI 201 Notes #7A 11
Three ways to employ CSS - 3
External style sheet --- Imported external style sheet<style>
@import url(FileName.css);
style declarations
</style>
- Add a special command (aka “at-rule”) in the <style> tag within the head of a document.
- @import expects a URL parameter that locates the external CSS file.
- @import must appear before any conventional style rules
- You can @import a CSS file that contains other @imports.
HCI 201 Notes #7A 12
Three ways to employ CSS - 3
Imported external style sheet1. Save the following code in a “mws.txt” file
h1 {color:gold; font-family:sans-serif}
2. Delete the style declaration between the <style> tags. 3. Insert the following line between the <style> tags @import url(mws.txt);*Note: there is no <style> and </style> in the mws.txt file. Question: Will this change affect all the <H1> tags in this document?
HCI 201 Notes #7A 13
Three ways to employ CSS - 3
Linked vs. imported external style sheetIn theory- With multiple <link> tags, the browser should prompt and let the user choose one of the linked sheets.- Multiple @import sheets will form a single set of style rules for your document, with cascading effects.
In practice- Popular browsers treat multiple linked style sheets like imported ones by cascading their effects.- Imported styles override linked external styles.
HCI 201 Notes #7A 14
Style precedence (Cascading rules)
1. Sort by originA style defined closer to a tag has precedence over a more distance style. A inline style overrides a document-level style, which overrides an external style.
2. Sort by classProperties defined as a class of a tag (will be discussed later) has precedence over the one defined for the tag in general.
3. Sort by orderThe property specified latest takes precedence.
HCI 201 Notes #7A 15
Style inheritance
<html>
|_<head>
| |_<title>
|_<body>
|_<h1>
|_<h2>
|_<p>
|_<b>
|_<i>
• You can display the relationship among the elements in your document using a tree diagram.
• If element A contains element B, A is B’s parent element, B is A’s descendant or child element.
• Principle of inheritance: styles defined for parent element are transferred to that element’s descendants.
• A style defined differently in a child element can override the one defined in the parent element.
HCI 201 Notes #7A 16
Style inheritance
Inheritance and overridingWhat is the tree-structure of the tags in our page?
What happens if we change the “mws.txt” as
body {color:green}
h1, h2, h3 {color:gold}
p {color:black}
b {color:blue}
HCI 201 Notes #7A 17
Style syntax (for embedded and external CSS)
Selectors and declarations selector {attribute1: value1;
attribute2: value21 value22; …}- selector identifies an element in your document (h1, p, etc.).- attributes and values within the curly brackets indicate the styles applied to that element throughout your document.- For attribute that has multiple values, separate the values with a space.- Not case sensitive: H1=h1, color=coLoR=Color.
HCI 201 Notes #7A 18
Style syntax (for embedded and external CSS)
Grouping selectorsh1, h2, p, b {color:gold;
font-family:sans-serif} - Apply the same declaration to a group of elements by including
all their names separated by commas.
- Easier to type, understand, and modify.
- Less time for transmission.
HCI 201 Notes #7A 19
Style syntax (for embedded and external CSS)
Contextual selectorsol li {list-style: upper-roman}ol ol li {list-style: upper-alpha}ol ol ol li {list-style: decimal}
- Define the style of an element only when it is nested within other tags.
h1 em, p strong, address {color: red}- Define the style of an element only under specific context.
*In “selector section”, a comma means “or”, a space means “and”.
HCI 201 Notes #7A 20
Style syntax (for embedded and external CSS)
Contextual selectorsAdd the following lines into the “mws.txt”ul li {list-style: circle}blockquote {color: maroon; font-style: italic}address {color: blue}
HCI 201 Notes #7A 21
Style classes
Regular classes 1. You add the class attribute to the tag:<p class=abstract>
This is the abstract paragraph.</p><p class=equation>
a=b+c-5</p><p class=centered>
This paragraph should be centered.</p>
HCI 201 Notes #7A 22
Style classes
Regular classes 2. Then define these classes in your style sheet:
<style>p.abstract {font-style:italic;
margin- left:0.5cm; margin-right:0.5cm}
p.equation {font-family:symbol} p.centered, h2 {text-align:center;
color:red; font-family:courier new}
</style>
HCI 201 Notes #7A 23
Style classes
Regular classes - Defining a class is to append a period-separated class name as a suffix to the tag name as the selector. E.g., p.centered
- A class name can be any sequence of letters, numbers, and hyphens, but must begin with a letter.
- A class name is case sensitive: Abstract≠abStRaCT
- Class may be included with other selectors, separated by commas.
- Class cannot be nested: p.equation.centered is not allowed.
HCI 201 Notes #7A 24
Style classes
Generic classes In style sheet: .italic {font-style:italic}In HTML:
<p class=italic> and <h3 class=italic>- Define a class without associating it with a particular tag.
- Apply this generic class to a variety of tags.
HCI 201 Notes #7A 25
Style classes
ID classes In style sheet: #yellow {color:yellow}
h1#blue {color:blue}In HTML:
<h1 id=blue> and <p id=yellow>- Define a style class that can be applied with the id attribute.
- The value of the id attribute must be unique to exactly one tag within the document.
- Try to stay with the conventional style classes and use the id attribute only for element identification purpose.
HCI 201 Notes #7A 26
Style classes
Pseudo classes (hyperlinks)a:link {color:blue}a:active {color:red; font-weight:bold}a:visited {color:purple}
- Allows you to define the display for certain tag states.- Attached to the tag name with a colon, instead of a period.
a:link: links that are not selected and have not been visited.
a:active: links that are currently selected by the user and are being processed by the browser.
a:visited: links that have been visited by the user.
HCI 201 Notes #7A 27
Style classes
Pseudo classes (Interaction)a:hover {text-decoration: underline}:focus {font-weight:bold}
a:hover: when mouse moves over a hyperlink.
:focus: when the element (not necessarily a hyperlink) is under focus: when the user tabs to it, clicks on it, etc.
What happens to the hyperlinks if we add this line in the mws.txt?
a:hover {color:red; text-transform: uppercase; font-weight:bold}
HCI 201 Notes #7A 28
Style classes
Mixing classesa.plain:link, a.plain:active, a.plain:visited {color:blue}a.cool:link {text-style:italic}a.cool:active {text-weight:bold; font-size:150%}a.cool:visited {text-style:normal}- A link with no style class attribute <a> will follow the browser display convention.- A <a class=plain> tag will follow the “plain” version: always blue, no matter the state of the link.- A <a class=cool> tag will follow the “cool” version of <a>.
*Be careful when you adjust the font size, the browser will have to re-render the content of the doccument.