introduction to css: part deux
Post on 13-Dec-2014
839 Views
Preview:
DESCRIPTION
TRANSCRIPT
Cascading Style Sheets
Taking control of you web pagesPart Deux
What we will learn today
Pseudo classes and elementsBlock elements vs. Inline elementsSpecificity, Inheritance and the CascadeWeb Developers Tool BarThe Box ModelPositioning Elements
Pseudo Classes
:link --- Targets a link:visited --- Targets a link that has been visited by the user:hover --- Targets a link that is being pointed at by the user:active --- Targets a link that is currently being clicked
Pseudo Classes
:focus --- Selects an element, such as a text field form, that is the current focus
Pseudo Elements
:first-child --- Selects the first-child element:first-letter --- selects first letter inside the indicated element:first-line --- selects the first line inside the indicated element
Block vs. Inline
Inline elements:Do not create a line-break before or after their position in the document.Block level elements:Create a line-break before and after their position in the document.
Style Precedence
InheritanceCascadeSpecificity
Inheritance
<body font-family: verdana, helvetica, sans-serif; color: blue; font-size 100%;}
The Cascade
The browser must decide which of the many possible sources for a particular property for a particular tag is the one to use.
Sources of styles
Browser style sheetUser style sheetAuthor styles
Simplified Cascade Rules
Rule 1: The more specific a selector is, the more likely that it will take precedence over a less specific selector
Simplified Cascade Rules
Rule 2: Selectors with ID’s win out over selectors with classes, which win out over selectors that are just tags.
Simplified Cascade Rules
Rule 3: If the same property for the same tag is defined in more than one location, inline styles win out over embedded styles, which win over style sheet styles.
Simplified Cascade Rules
Rule 4: Defined styles win over inherited styles regardless of specificity.
Web Developers tool bar
Standards mode vs. quirks modeOutline block level elementsDisplay element informationValidationWindow resize
Box model
Four things make a boxContentPaddingBorderMargin
Box model
Margin and Padding
p {padding-left: 20px;}
p { padding: 20px;}p { padding: 20px 10px;}p { padding: 20px 10px 5px 15px;}p { padding: 20px 10px 5px}
Width of a box
Width of a box is equal to the width of the content +the width of the padding +the width of the border
Vertical Margins Collapse
Two or more adjoining vertical margins of block boxes in the normal flow collapse. Vertical margins between a floated box and any other box do not collapse. Margins of absolutely and relatively positioned boxes do not collapse.
Positioning
Position propertydetermines the reference point for the positioning of each element box
div {position: relative;top: 20px;left: 30px;}
Positioning
Static PositioningEach element is laid out one after another separated only by margins, padding, etc.Default setting for block level elements
Positioning
Relative PositioningElements is positioned relative to where it would be in the static layoutThe space it originally occupied is retained
Positioning
Absolute PositioningElement is taken out of the flow of the documentPosition relative to the first ancestor element that is also absolutely positioned.
Positioning
Fixed PositioningElement is taken out of the flow of the documentPosition relative to the view port of your screen, and stays in place when you scrollIDWIMIE
Floating and Clearing
FloatMoves element out of the normal flow of the documentElements that follow will sit next to the floated element if there is room
Floating and Clearing
Clearstops elements from moving up next to the floated element
top related