View
215
Download
1
Category
Preview:
Citation preview
Introduction to CSS3Mark J Collins
October 6th, 2012
Selectors• Element selectors• Class selectors• ID Selectors• Attribute selectors• Pseudo-class selectors• Combining selectors• Unions
Planning your web page• Using the Box Model• Diagramming the layout• Creating the HTML structure
Effects• Rounded corners• Gradients• Tables• Multiple columns• Shadows• Zebra striping• 3D transforms• CSS animation
Introduction to CSS3
Introduction to CSS3
<selector> {<property:value>; <property:value>; … }
p{ color:green; font-size:12px;}
p {color:green; font-size:12px;}
Introduction to CSS3
New HTML5 Elements
• article – a stand-alone portion of content such blog entry.
• aside – content usually put to one side of the page
• details – used for expandable content
• figcaption – used with figure to associate a caption with an image
• figure – used to wrap embedded content such as an image or graphic
• footer – the page or section footer
• header – the page or section header
• hgroup – used to group header elements like h1, h2, etc.
• nav – used to contain a group of links
• output – contains output such as the result of a user action
• section – used to organize content in to logical sections
• summary – usually used in conjunction with one or more details
elements
Introduction to CSS3
Class and ID Selectors
.featured{ background-color:yellow;}
<div id="intro" class="featured content" > <p>My featured content</p></div>
#intro{ color:blue;}
Introduction to CSS3
Attribute Selectors
[name="book"]{ background-color:yellow;}
• ~ - (e.g. [name~="book"] ) The attribute value must
include the word indicated by the selector value (e.g.
name="some book titles"). This is exactly how the class
selector works.
• | - (e.g. [name|="book"] ) The attribute value must begin
with a word that matches the selector value (e.g.
name="book titles")
• ^ = (e.g. [name^="book"] ) The attribute value must begin
with the selector value (e.g. name="books")
• $ - (e.g. [name$="book"] ) The attribute value must end
with the selector value (e.g. name="checkbook")
• * - (e.g. [name*="book"] ) The attribute value must contain
the selector value (e.g. name="overbooked")
Introduction to CSS3
Pseudo-Class Selectors
a:{ color: blue;}
Examples:• :active• :checked• :disabled• :empty• :enabled• :focus• :hover• :link• :visited• :first-child• :last-child• :nth-child(n)
a:visited { color: purple;}
Introduction to CSS3
Combining Selectors
• , - (e.g. header, p) Selects all p elements as well as all header
elements.
• space – (e.g. header p) Selects the second element when it is inside
the first element. The header element does not have to be the
immediate parent, just somewhere in node’s parentage.
• * - (e.g. header*p) selects the second element when it is a
grandchild or later descendant of the first element.
• > - (e.g. header>p) Selects the second element when the first
element is the immediate parent.
• + - (e.g. header+p) Selects the second element when the first
element is the preceding sibling.
• ~ - (e.g. p~header) Selects the second element when it follows the
first element (not necessarily immediately).
Introduction to CSS3
Creating Unions
header+p, .book, a:visited
http://www.w3schools.com/cssref/css_selectors.asp
A union simply combines two or more selectors with a logical OR operation
For further reference go to:
Introduction to CSS3
Margin, Padding, and Border
margin: 2px;
margin-top: 2px;margin-right: 2px;margin-bottom: 2px;margin-left: 2px;
margin: 2px 2px 2px 2px;
Introduction to CSS3
Laying Out a Web Page
Introduction to CSS3
Vendor Prefixes
header{ -moz-border-radius: 25px; -webkit-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px;}
Prefix Browser vendor-moz- Firefox-webkit- Chrome, Safari-o- Opera-ms- Internet Explorer
http://peter.sh/experiments/vendor-prefixed-css-property-overview
Introduction to CSS3
Box Shadows
h-shadow The position of the horizontal shadow (Can be negative)
v-shadow The position of the vertical shadow
Blur* The blur distance
Spread* The size of shadow
Color* The color of the shadow
Inset* Changes the shadow from raised to sunken
Introduction to CSS3
Summary
• Rounded corners
• Gradients
• Tables
• Multiple columns
• Shadows
• Zebra striping
• 3D transforms
• CSS animation
Recommended