6 CSS - Meant4Teachers.com
Download
Report
Transcript 6 CSS - Meant4Teachers.com
Chapter 6
Introducing Cascading Style
Sheets
Principles of Web Design, 4th Edition
Objectives
•
•
•
•
•
•
•
Understand CSS style rules
Build a basic style sheet
Understand the cascade and inheritance
Use basic selection techniques
Use advanced selection techniques
Work with the <div> and <span> elements
Use pseudo-classes and pseudo-selectors
Principles of Web Design, 4th Edition
6-2
Understanding CSS Style
Rules
Principles of Web Design, 4th Edition
6-3
Understanding CSS Style
Rules
• In CSS, style rules express the style
characteristics for an HTML element
• A set of style rules is called a style sheet
• Style rules are easy to write and interpret
Principles of Web Design, 4th Edition
6-4
Understanding CSS Style
Rules (continued)
• Style rules are composed of two parts: a
selector and a declaration
• The selector determines the element to which
the rule is applied
• The declaration details the exact property values
Principles of Web Design, 4th Edition
6-5
Principles of Web Design, 4th Edition
6-6
Understanding CSS Style
Rules (continued)
• The declaration contains a property and a
value
• The property is a quality or characteristic
• The precise specification of the property is
contained in the value
• CSS includes a wide variety of different
properties, each with a specific number of values
Principles of Web Design, 4th Edition
6-7
Principles of Web Design, 4th Edition
6-8
Combining CSS Rules with
HTML
• Three ways to combine CSS rules and
HTML
– The style attribute
– The <style> element
– External style sheet
Principles of Web Design, 4th Edition
6-9
Combining CSS Rules with
HTML (continued)
• The style attribute
– Defines a style for a single element
– Generally used to override a style set at a
higher level in the document for a single
element
– Only affects one instance of an element in a
document
Principles of Web Design, 4th Edition
6-10
Combining CSS Rules with
HTML (continued)
• The <style> element
– Always contained in the <head> section of
the document
– Generally used to override a style set at a
higher level in the document for a single
document
– Only affects the document in which it resides
Principles of Web Design, 4th Edition
6-11
Combining CSS Rules with
HTML (continued)
• External style sheet
– Text document that contains style rules
– Allows specification of rules for multiple
HTML documents
– Does not contain HTML code
Principles of Web Design, 4th Edition
6-12
Combining CSS Rules with
HTML (continued)
• Linking to an external style sheet
– <link> element establishes document
relationships
– Can only be used in the <head> section
of a document
– Tells the browser where to find the
external style sheet
Principles of Web Design, 4th Edition
6-13
Combining CSS Rules with
HTML (continued)
• Combining multiple style sheets
– @import keyword
• Allows import of style rules from other style sheets
• Must precede all rules in style sheet or they will be
ignored by the browser
– Style rules contained within document
take precedence over imported style
rules
– Weight of imported style sheets based
on import order
Principles of Web Design, 4th Edition
6-14
Building a Basic Style Sheet
Principles of Web Design, 4th Edition
6-15
Principles of Web Design, 4th Edition
6-16
Principles of Web Design, 4th Edition
6-17
Understanding the Cascade
Principles of Web Design, 4th Edition
6-18
Understanding the Cascade
• Cascading mechanism of CSS
determines which rules are assigned
to document elements by assigning a
weight based on four variables:
– Origin of the rule
– Specificity of the selector
– Order of the rule in the style sheet
– Use of the !important keyword
Principles of Web Design, 4th Edition
6-19
Determining Rule Weight by
Origin
• Cascading order of precedence:
– Rules from author’s style sheet
– Rules from user’s style sheet
– Rules from browser’s style sheet
Principles of Web Design, 4th Edition
6-20
Principles of Web Design, 4th Edition
6-21
Determining Rule Weight By
Specificity
• Rules with more specific selectors
take precedence over rules with less
specific selectors
Principles of Web Design, 4th Edition
6-22
Determining Rule Weight By
Order
• Based on order of rule within style
sheet
– Those listed later take precedence over
those listed earlier in the style sheet
Principles of Web Design, 4th Edition
6-23
Determining Rule Weight with
the !Important Keyword
• Allows user to override author’s style
setting for a particular element
• Improves accessibility of documents
– Gives control to users with special
requirements
Principles of Web Design, 4th Edition
6-24
Understanding Inheritance
Principles of Web Design, 4th Edition
6-25
Understanding Inheritance
• Based on hierarchical structure of
documents
– CSS rules inherit from parent elements
to child elements:
• Thus <li> elements will inherit style rules
from <ul> elements unless a style rule is
specifically set for the <li> element
Principles of Web Design, 4th Edition
6-26
Principles of Web Design, 4th Edition
6-27
Understanding Basic
Selection Techniques
Principles of Web Design, 4th Edition
6-28
Understanding Basic Selection
Techniques
•
•
•
•
Using type selectors
Grouping selectors
Combining declarations
Using descendant selectors
Principles of Web Design, 4th Edition
6-29
Using Type Selectors
• The following rule selects the H1
element:
Principles of Web Design, 4th Edition
6-30
Grouping Selectors
• The following rule selects the H1 and
H2 elements:
h1, h2 {color: green;}
Principles of Web Design, 4th Edition
6-31
Combining Declarations
• The following style rules set the <p>
element to 12-point blue text:
p {color: blue;}
p {font-size: 12pt;}
• These two style rules can be expressed in
a simpler way:
p {color: blue; font-size: 12pt;}
Principles of Web Design, 4th Edition
6-32
Using Descendant Selectors
• A descendant selector lets you specify
the exact context in which a style is
applied
• To specify that <b> elements appear
blue only within <p> elements, use the
following rule:
p b {color: blue;}
Principles of Web Design, 4th Edition
6-33
Understanding Advanced
Selection Techniques
Principles of Web Design, 4th Edition
6-34
Understanding Advanced
Selection Techniques
•
•
•
•
The class attribute
The id attribute
The <div> and <span> elements
The pseudo-class and pseudo-element
selectors
• The universal selector
Principles of Web Design, 4th Edition
6-35
Using the Class Attribute
Selector
• The class attribute lets you write rules and
then apply them to groups of elements that
you have classified
• To create a class, declare it within the
<style> element first
– The period (.) flag character indicates that the
selector is a class selector
Principles of Web Design, 4th Edition
6-36
Using the Class Attribute
Selector (continued)
Principles of Web Design, 4th Edition
6-37
Using the Class Attribute
Selector (continued)
<p class=”special”>This is the first paragraph of the
document. It has a different style based on the
“special” class selector.</p>
Principles of Web Design, 4th Edition
6-38
Using the id Attribute Selector
• The difference between id and class is that
id refers to only one instance of the id
attribute value within a document
Principles of Web Design, 4th Edition
6-39
Principles of Web Design, 4th Edition
6-40
Working with <div>
• The <div> element lets you specify logical
divisions within a document that have their
own name and style properties
• <div> is a block-level element; it contains
a leading and trailing carriage return
• You can use <div> with the class attribute
to create customized block-level elements
Principles of Web Design, 4th Edition
6-41
Working with <div> (continued)
• To create a division, declare it within the
<style> element first
• The following example specifies a
division named column as the selector
for the rule:
div.column {width: 200px;
height: auto; padding: 15px;
border: thin solid;}
Principles of Web Design, 4th Edition
6-42
Working with <div> (continued)
• Next, specify the <div> element in the
document; then use the class attribute to
specify the exact type of division
• In the following example, the code defines the
<div> element as the special class named
“introduction”
<div class="column">This
division displays as a column
of text in the browser window.
</div>
Principles of Web Design, 4th Edition
6-43
Principles of Web Design, 4th Edition
6-44
Working with <span>
• The <span> element lets you specify inline
elements within a document that have their own
name and style properties
• Inline elements go within the line of text, like the
<b> element
Principles of Web Design, 4th Edition
6-45
Working with <span> (continued)
• To create a span, declare it within the <style>
element first
• The following example specifies a <span>
element named “logo” as the selector for the
rule:
span.logo {color:red;}
Principles of Web Design, 4th Edition
6-46
Working with <span> (continued)
• Next, specify the <span> element in the
document; then use the class attribute to
specify the exact type of span
• In the following example, the code defines the
<span> element as the special class named
“logo”
Welcome to the <span
class=“logo”>Wonder
Software</span> Web site.
Principles of Web Design, 4th Edition
6-47
Working with <span> (continued)
Principles of Web Design, 4th Edition
6-48
Using the Link Pseudo-Classes
• The :link and :visited pseudo-classes let
you change the style characteristics for
new, unvisited links (:link) and visited
links (:visited)
• These pseudo-classes only apply to the
<a> element with an href attribute
Principles of Web Design, 4th Edition
6-49
Using the Link Pseudo-Classes
(continued)
• The following rules change the colors of
the hypertext links:
:link {color: red;}
:visited {color: green;}
Principles of Web Design, 4th Edition
6-50
Using the hover Pseudo-Class
• The :hover pseudo-class lets you apply
a style that appears when the user
points to an element with a pointing
device
• This is a useful navigation aid to add to
the <a> element, with the result that the
link appears highlighted when the user
points to it with the mouse
Principles of Web Design, 4th Edition
6-51
a:hover {background-color: yellow;}
Principles of Web Design, 4th Edition
6-52
Using the :first-letter PseudoElement
• Use the :first-letter pseudo-element to
apply style rules to the first letter of any
element:
p:first-letter {font-weight: bold;
font-size: 200%;}
Principles of Web Design, 4th Edition
6-53
Principles of Web Design, 4th Edition
6-54
Using the :first-letter PseudoElement (continued)
• You can make the initial capital a drop
capital by adding the float property to the
rule, which allows the letter to extend
downward:
p.dropcap:first-letter {font-weight: bold;
font-size: 200%; float: left;}
Principles of Web Design, 4th Edition
6-55
Principles of Web Design, 4th Edition
6-56
Using the :first-line PseudoElement
• The :first-line pseudo-element works in
much the same way as :first-letter,
except for the obvious difference that it
affects the first line of text in an element:
p.introduction:first-line {text-transform:
uppercase;}
Principles of Web Design, 4th Edition
6-57
Principles of Web Design, 4th Edition
6-58
Using the Universal Selector
• The universal selector lets you quickly
select groups of elements and apply a
style rule
* {color: purple;}
• You can also use the universal selector
to select all children of an element
div * {font-family: sans-serif;}
Principles of Web Design, 4th Edition
6-59
Summary
• CSS rules can be combined with your
HTML code in a number of ways
• CSS rules are easy to write and read
• CSS uses cascading and inheritance to
determine which style rules take
precedence
– The !important declaration lets users
override the author’s style rules
Principles of Web Design, 4th Edition
6-60
Summary (continued)
• Basic style rules let you apply style rules
based on standard element selectors
– You can combine the selectors and
declarations to create more powerful style
expressions
– You can also select elements based on
the contextual relationship of elements in
the document tree
Principles of Web Design, 4th Edition
6-61
Summary (continued)
• The advanced selection techniques allow
you to use the class attribute selector,
which is often paired with the <div> and
<span> HTML elements
– These elements have no style of their own,
but offer a convenient way of expressing
style for any section of a document,
whether block-level or inline
– Additionally, class allows you to choose a
meaningful naming convention for your
style rules
Principles of Web Design, 4th Edition
6-62
Summary (continued)
• The pseudo-class and pseudo-element
selectors let you change the color and
styling of hypertext links and the effect
elements of a document, such as first line
and first letter, that are not signified with the
standard HTML elements
Principles of Web Design, 4th Edition
6-63