Lecture 5: CSS
22
Lecture 5: CSS Relative, absolute, and Floating Positioning, Cascading Style Sheet, and Inheritance
description
Lecture 5: CSS . Relative, absolute, and Floating Positioning, Cascading Style Sheet, and Inheritance . Beyond The Normal Flow. Normal flow is the default way in which a browser will format an HTML document. - PowerPoint PPT Presentation
Transcript of Lecture 5: CSS
Lecture 5: CSS Relative, absolute, and Floating Positioning,
Cascading Style Sheet, and Inheritance
Beyond The Normal FlowNormal flow is the default way in which a browser will
format an HTML document.
Three CSS alternatives to normal flow. They are used to control the position of boxes in a browser window
Relative positionFloat positionAbsolute position
Relative PositionRelative position: the position is altered
relative to its normal flow position.
For example,
If .right{ position: relative; right: 10px }
Blue Red
RedBlue
Relative PositionThe type of positioning for an element is defined by
specifying two style properties.
Position: static (initial value): indicate normal flowrelative: indicate relative positioningAbsolute: indicate absolute positioning
Four properties apply to positioned elements: left, right, top, bottom.
Relative PositionThe value for left, right, top, bottom is either a length or a
percentage. The value auto means the default value.
.left { position: relative; left: 10px; }
Note: a positive value for the left property moves the box to the right by the specified amount.
What does “top: -20px” do to its box?
Float PositioningFloat positioning is often used when embedding images
within a paragraph.
It often produces a visual effect of text wrapping around the floated block.
A floated inline box becomes a block box for display purposes, which means you can specify width and height for the box.
Absolute PositioningAbsolute positioning offers total control over the placement of
boxes in the browser window. It is useful to be able to place a box exactly where you want it.
You can use left, right, top, and bottom properties to place the box relative to a containing block (A containing block is the nearest positioned ancestor. A positioned element has position value other than static)
If the box of an inline element is positioned absolutely, the box becomes a block box, and therefore can have its width set explicitly
External CSSAn external style sheet is ideal when the style is applied to
many pages.
How to link a HTML file to a given .css file?<head><link rel=“stylesheet” type=“text/css” href=“mystyle.css”></head>
Relative Address VS Absolute AddressC://CGS3066/Lecture1/HelloWorld.html
This is an absolute address
A relative address is a short address relative to a base address. Its relative address is HelloWorld.html, if the base address is
C://CGS3066/Lecture1/
Base address is C://CGS3066/Lecture1/
AbsoluteAddress = BaseAddress + RelativeAddress
Cascading of Style Sheet RulesCascading Rules
* { font-weight: bold }, which applies to every element of the HTML document.
#p1, #p3{ background-color: yellow}
Now I specify #p3{ font-weight: normal}, which rule would apply to the font-weight property of id=“p3”?
Cascading of Style Sheet RulesThe general question is: which rule applies to a given
element when there are multiple style declarations apply to the property of that element?
Rule Cascading: a multistage sorting process that selects a single declaration that will supply the property value.
First Rule: deciding which external style sheets apply to the document.
Cascading of Style Sheet RulesSecond stage: associate an origin and weight with every
declaration that applies to a given property of a given element.
The origin of a style sheet declaration is who wrote the declaration.Author: If the declaration is part of an external or embedded
style sheet or is part of the style attribute of the given element, then the author of the HTML document is the origin
User Agent: BrowserUser: browsers allow users to provide a style sheet or indicate
style preferences that are treated as style rules.
Cascading of Style Sheet RulesBesides to origin, every author and user style declaration
has one of two weight values: normal and important
A declaration has important weight if it ends with an exclamation mark (!) followed by the word “important”E.g., p{ font-size: 12pt; color: red !important}
Cascading of Style Sheet RulesOnce the origin and weight of all declarations applying to an
element property have been established, they are prioritized (from high to low) as follows:1. Important declaration with user origin.2. Important declaration with author origin3. Normal declaration with author origin4. Normal declaration with user origin5. Any declaration with user agent
If one bin has a single declaration, the declaration is applied to the element property and we are done!
Cascading of Style Sheet RulesIf the top nonempty bin of the weight-origin sort has
multiple style declarations for a single element property, then sort the declarations according to their specificity.
If a declaration is part of the value of a style attribute, then it is given the highest possible specificity value.
If a declaration is a ruleset, then its specificity is determined by the selector(s) for the ruleset.
Cascading of Style Sheet RulesWhat is rule set?
h1, #head5, .big{font-size: 12pt} is treated as the equivalent three rulesets:h1{font-size:12pt}#head5{font-size: 12pt}.big{font-size: 12pt}
Cascading of Style Sheet RulesFrom highest to lowest specificity:
ID selectorsClass selectorsDescendant and type selectorsUniversal selectors (*)
We select a ruleset from the first nonempty bin.If two rulesets appears in the same bin, we search lower bins
for the first recurrence of either ruleset. If one of the ruleset recurs before the other, then it is chosen.
e.g., li.special, *.special
Cascading of Style Sheet RulesFinal step is to chose the declaration corresponding to the
rule that appears farthest down in the list is chosen.
For example:
Style.css
p{ color: green }
<title>StyleCascadingRule</title><style type=“text/css”> p{color : red}</style><link rel=“stylesheet” type=“text/css” href=“style.css”/><style type=“text/css”> p{color: yellow}</style>
styleCascade.html
Cascading of Style Sheet RulesAlternate style sheets 1. Select style sheets and
insert rules for HTML attributes
2. Prioritize declarations by origin and weight
3. Break ties based on specificity (style attribute or most specific selector)
4. Break ties based on position within style sheet (last occurring wins)
Style InheritanceQuestion: if a property of an element has no associated style
declarations, how is the value of the property determined?The answer: the value is inherited from the parent of the
element.
An element inherits a value for one of its properties by checking to see if its parent element in the document has a value for that property. If so, inheriting the parent’s value.
If no ancestor element has a value for the property, then the property’s initial value is used (by CSS specification)
Style InheritanceA point about inheritance
A number of properties are not inheritable, such as height property.
Please consult the CSS specifications if in doubt.
Next ClassSome new HTML5 elements
<audio>, <video>, <source>, <track>, <embed>
IframeVideo Media
