xp review 2 new perspectives on javascript, comprehensive1 introducing cascading style sheets...
Post on 17-Jan-2016
218 Views
Preview:
TRANSCRIPT
Review 2 New Perspectives on JavaScript, Comprehensive 1
XP
Review 2
Introducing Cascading Style Sheets
Formatting Web Pages with CSS
Review 2 New Perspectives on JavaScript, Comprehensive 2
XPObjectives
• Understand the history of Cascading Style Sheets
• Study how to apply inline, embedded, and external style sheets
• Understand how style definitions are inherited and cascade through a Web site
Review 2 New Perspectives on JavaScript, Comprehensive 3
XPObjectives
• Learn how to – Work with font and text styles– Understand how to apply image and color styles– Study how to size and position elements on a
page– Learn how to work with ids, classes,
pseudoelements, and pseudoclasses– Understand how to create style sheets for different
media types – Study how to create styles for printed output
Review 2 New Perspectives on JavaScript, Comprehensive 4
XPIntroducing CSS
• Style sheet– Collection of properties that describes how
elements within a document should be rendered – Advantage
• Separates document content from document presentation
• Cascading Style Sheets language– Most commonly used on the Web
Review 2 New Perspectives on JavaScript, Comprehensive 5
XPIntroducing CSS
• Styles introduced by CSS1– Fonts, text, color, backgrounds, – Block-level elements
• Styles introduced by CSS2– Positioning, visual formatting, media types,
interfaces
• Styles introduced by CSS3– User interfaces, accessibility, columnar layout– International features, mobile devices– Scalar vector graphics
Review 2 New Perspectives on JavaScript, Comprehensive 6
XPApplying a Style Sheet
• Techniques for applying style to an HTML or XHTML document– Inline styles– Embedded styles– External styles
Review 2 New Perspectives on JavaScript, Comprehensive 7
XPUsing Inline Styles
• Inline style– Applied to an element by adding the style attribute
to the element’s markup tag
• Syntax of the style attribute<element style="style1: value1; style2: value2; style3: value3; ...">
Review 2 New Perspectives on JavaScript, Comprehensive 8
XPUsing Embedded Styles
• Style element– Syntax
<style>
style declarations
</style>– Supports several attributes that define
• Style sheet language to be used• Type of output media for which the style is designed• Name or id that identifies the style element
Review 2 New Perspectives on JavaScript, Comprehensive 9
XPValues of the Media Attribute
Review 2 New Perspectives on JavaScript, Comprehensive 10
XPUsing an External Style Sheet
• External style sheet – Simple text file that contains only style
declarations– Can be linked to any page in a Web site
• To make all h1 headings in a Web site appear in red font– h1 {color: red}
Review 2 New Perspectives on JavaScript, Comprehensive 11
XPApplying Multiple Style Sheets to a Single Document
Review 2 New Perspectives on JavaScript, Comprehensive 12
XPUnderstanding Style Precedence
• When styles come from several sources, they are weighted as follows– 1. External style sheet– 2. Embedded styles– 3. Inline styles
Review 2 New Perspectives on JavaScript, Comprehensive 13
XPUnderstanding Style Inheritance
• Style inheritance– Causes style declarations to cascade down
through the document hierarchy
• To override style inheritance– Specify alternate style for one of the descendant
elements of the parent
Review 2 New Perspectives on JavaScript, Comprehensive 14
XPWorking with Text Styles
• Specifying fontfont-family: fonts
• Specific font– Font such as Times New Roman, Arial, or
Garamond that is installed on user’s computer
• Generic font – Name for the general description of the font’s
appearance
Review 2 New Perspectives on JavaScript, Comprehensive 15
XPGeneric Fonts
Review 2 New Perspectives on JavaScript, Comprehensive 16
XPSetting the Font Size
• Absolute units – Define font size using mm (millimeter), cm
(centimeter), in (inch), pt (point), or pc (pica)
• Relative units – Express font size relative to size of a standard
character in output device
• em unit – Equal to the width of the capital letter “M”
• ex unit – Equal to the height of a lowercase “x”
Review 2 New Perspectives on JavaScript, Comprehensive 17
XPControlling Spacing and Indentation
• CSS support styles that– Allow you to perform basic typographic tasks, such
as setting the kerning and tracking
• Styles to control an element’s kerning and tracking
letter-spacing: value
word-spacing: value
Review 2 New Perspectives on JavaScript, Comprehensive 18
XPSetting Font Styles, Weights, and Other Decorative Features
• To set a font’s appearancefont-style: type
• To set a font’s weightfont-weight: value
• To decorate texttext-decoration: type
Review 2 New Perspectives on JavaScript, Comprehensive 19
XPValues of the Vertical-alignment Style
Review 2 New Perspectives on JavaScript, Comprehensive 20
XPWorking with Color and Image Styles
• Style to define an element’s foreground color color: color
• Color values are entered in the form rgb (red, green, blue)
• Style to define an element’s background colorbackground-color: color
Review 2 New Perspectives on JavaScript, Comprehensive 21
XPSetting a Background Image
• Properties you can set on a background image– The source of the image file– Where the image is placed in the background of
the element– How the image is repeated across the background
of the element– Whether the image scrolls with the display window
Review 2 New Perspectives on JavaScript, Comprehensive 22
XPControlling Image Placement
• Controlling how browsers tile a background image
background-repeat: type
• Placing a background image in a different location
background-position: horizontal_position vertical_position
• Defining the position of a background imagebackground-position: 50% 50%
Review 2 New Perspectives on JavaScript, Comprehensive 23
XPSizing Elements
• Size of each element – Determined either by its content or – By the size of its containing element
• Setting the width of an elementwidth: value
• Setting an element’s heightheight: value
Review 2 New Perspectives on JavaScript, Comprehensive 24
XPWorking with Borders, Margins, and Padding
• Box model– Identifies the different parts of the element
• Elements described by box model– Margin between the box and other elements– Border of the box– Padding between element’s content and border– Element’s content
Review 2 New Perspectives on JavaScript, Comprehensive 25
XPWorking with Margins
• Styles that can be used to control the size of the margin of a page element
margin-top: value
margin-right: value
margin-bottom: value
margin-left: value
Review 2 New Perspectives on JavaScript, Comprehensive 26
XPWorking with Borders
• To set width of an element’s borderborder-width: top right bottom left
• To set the border colorborder-color: top right bottom left
• To set the border styleborder-style: top right bottom left
• To format the entire borderborder: width style color
Review 2 New Perspectives on JavaScript, Comprehensive 27
XPPositioning Elements
• Style to set position of an element position: type; top:value; right:value; bottom:value; left:value
• Position style has five possible values– static, absolute, relative, fixed, and inherit
Review 2 New Perspectives on JavaScript, Comprehensive 28
XPAbsolute Positioning
• Places an element at defined coordinates within its parent element
• In most cases– Parent element is the document window itself
Review 2 New Perspectives on JavaScript, Comprehensive 29
XPAbsolute Positioning
Review 2 New Perspectives on JavaScript, Comprehensive 30
XPRelative Positioning
Review 2 New Perspectives on JavaScript, Comprehensive 31
XPFixed and Static Positioning
• Fixed position– Places element at a fixed location in display
window
• Static position– Places object in its natural position in the flow of
the document as determined by the browser
Review 2 New Perspectives on JavaScript, Comprehensive 32
XPFloating an Element
• Places element alongside the left or right margin of the page or the containing element
• Style to float an elementfloat: margin
Review 2 New Perspectives on JavaScript, Comprehensive 33
XPThe Float Style
Review 2 New Perspectives on JavaScript, Comprehensive 34
XPStacking Elements
• By default– Elements defined later in a document are placed
on top of earlier elements
• To specify a different stacking orderz-index: value
• Elements are stacked based on – z-index values
Review 2 New Perspectives on JavaScript, Comprehensive 35
XPUsing the z-index Style
Review 2 New Perspectives on JavaScript, Comprehensive 36
XPSetting the Element Display Style
• Most page elements – Classified as either inline elements or block-level
elements
• CSS– Can be used to change the display style applied to
any element– Syntax
display: type
Review 2 New Perspectives on JavaScript, Comprehensive 37
XPSetting the Display Style
Review 2 New Perspectives on JavaScript, Comprehensive 38
XPHiding Elements
• Two ways of hiding an element– Set the value of the display style to “none”
address {display: none}
– Use the visibility stylevisibility: type
Review 2 New Perspectives on JavaScript, Comprehensive 39
XPWorking with Selectors
• Contextual selectors– Used to apply a style based on the context in
which an element is used– Can also be grouped with selectors
li b, h2 {color: blue}
Review 2 New Perspectives on JavaScript, Comprehensive 40
XPSimple and Contextual Selectors
Review 2 New Perspectives on JavaScript, Comprehensive 41
XPAttribute Selectors
Review 2 New Perspectives on JavaScript, Comprehensive 42
XPApplying Styles to IDs and Classes
• To apply a style to an element based on the value of its id attribute
#id {styles}
• Class attribute– Used to identify a group of elements
• To apply a style to a group of elements based on value of class attribute
.class {styles}
Review 2 New Perspectives on JavaScript, Comprehensive 43
XPApplying a Style to a Class
Review 2 New Perspectives on JavaScript, Comprehensive 44
XPApplying Styles to Pseudoclasses and Pseudoelements
• Pseudoclass – Classification of an element based on its status,
position, or current use in a document– Used to create rollover effects
• To create a style for a pseudoclassselector:pseudoclass {styles}
Review 2 New Perspectives on JavaScript, Comprehensive 45
XPWorking with Different Media
• To specify output media within a style sheet @media type {style declarations}
• @media rule – Allows you to consolidate your styles within a
single style sheet– Consolidation can result in larger and complicated
files
Review 2 New Perspectives on JavaScript, Comprehensive 46
XPUsing Print Styles
• CSS2 defines printed pages by – Extending box model to incorporate the entire
page in a page box
• Rule to create and define a page box @page {styles}
• Pseudoclasses or page names– Allow you to define multiple page styles within the
same document
Review 2 New Perspectives on JavaScript, Comprehensive 47
XPSetting the Page Size
• Size style– Used to define size of the output page– Syntax
size: width height orientation
Review 2 New Perspectives on JavaScript, Comprehensive 48
XP Working with Page Breaks
• Page-break-before and page-break-after styles – Used to place page breaks before or after a given
element– Syntax
page-break-before: type
page-break-after: type
Review 2 New Perspectives on JavaScript, Comprehensive 49
XPWorking with Page Breaks
• Widow– Final few lines of an element’s text when they
appear at the top of a page
• Orphan – First few lines of an element’s text when they
appear at the bottom of a page
Review 2 New Perspectives on JavaScript, Comprehensive 50
XPWorking with Page Breaks
• Browsers attempt to use page breaks that obey these guidelines – Avoid inserting page breaks where indicated in
style sheet– Break pages as few times as possible– Avoid breaking inside of a table– Avoid breaking inside of a floating element
top related