Post on 19-Jan-2018
description
transcript
CSS: Cascading Style CSS: Cascading Style SheetsSheets
Part II
Style SyntaxStyle Syntax
3
Style RulesStyle Rulesh1 {
color: purple;
font-family: Impact, Arial Black;
font-size-adjust: .46;
font-size: 2.33em;
font-weight:400;
font-style:normal;
text-decoration: none;
word-spacing:normal
letter-spacing:normal;
text-transform: none; }
Declaration
Property
Value(s)
Selector
4
Style Rules (cont)Style Rules (cont)
• A rule has the following form
selector {declaration block}
• The selector determines when the rule is applied
• For example, the following rule applies to text that is inside a <p> tag
p {color: green; font-size: 1.5em; font-style: italic}
5
What Kind of Properties can a CSS What Kind of Properties can a CSS Style Sheet Change?Style Sheet Change?
• Style properties
• Layout properties
• There are many properties and many possible values- We will not cover all of them here
- Everything is in the Web !
- A good source: http://www.w3schools.com/css
Style PropertiesStyle Properties
7
Our ExamplesOur Examples
• We use the following HTML example: This is <span> our example </span> for css.
• The <span> tag is used to group elements for formatting with styles- Extremely useful tag...
8
Font PropertiesFont Properties
• Font properties: family, size, weight, style, variant, ...
span {
font-family: courier;
font-size: 130%;
font-style: italic;
font-weight: bold}
9
Text PropertiesText Properties
• Text properties: color, transform, decoration, …
span {
color: #00cc00;
text-decoration: line-through;
text-transform: uppercase}
10
Background PropertiesBackground Properties
• Background properties: background-color, background-image, …
span {background-color: #00ff00}
span {background-image: url('bg.gif');}
Layout PropertiesLayout Properties
12
Page LayoutPage Layout
• Each HTML element defines a layer (rectangular box) that is placed in some location on the page
• Layers are nested with correspondence to the nesting of their elements
13
Inline vs. Block ElementsInline vs. Block Elements
• There are two types of elements:
• Block elements: p, ol, table, div, h1, etc.
• Inline elements: b, i, a, span, cite, etc.
• Layers of block elements are separated from their adjacent elements (i.e., a new line before and after), while inline elements are not
• You can turn a block into an inline and vice-versa, using the display property, e.g., h1 { display: inline }
14
Positioning ElementsPositioning Elements
• Using CSS, you can define the position of an element inside its parent layer
• For that, use the properties position, left, right, top and bottom
span {
position:relative;
left: 1cm;
top: 1cm;
color: #00cc00;}
15
Position TypesPosition Types
• But 1cm left to what??
• For that, we have the position property
• Four position types:- static: the default position
- absolute: relative to the parent layer coordinates
- relative: relative to the static position
- fixed: relative to the window coordinates
16
Position ExamplesPosition Examples
span {
position:absolute;
left: 1cm;
top: 1cm;
color: #00cc00;} span {
position:fixed;
left: 1cm;
top: 1cm;
color: #00cc00;}
17
Position ExamplesPosition Examples
span {
position:static;
left: 1cm;
top: 1cm;
color: #00cc00;}
Totally Ignored! This is the
default position type
18
More Layout PropertiesMore Layout Properties
• Layer properties- margin-top (-bottom, -left, -right)
- padding-top (-bottom, -left, -right)
- border-width (-color, -style, … )
• Text Layout- direction, word-spacing, white-space, letter-
spacing, line-height, text-align, text-indent, …
19
Length UnitsLength Units
• CSS has several types of length units:- em, ex: height of current fonts (relative)
- px, in, cm, mm, pt, pc: international units
- %: ratio of parent’s respective dimension
• A page should remain a proper layout when windows (and even fonts) resize- Hence, do not assume anything about default sizes
Selector TypesSelector Types
21
Several Kinds of SelectorsSeveral Kinds of Selectors
• Type Selectors
• Class Selectors
• ID Selectors
• Attribute Selectors
• Universal Selector
• Child Selectors
• Adjacent-Sibling Selectors
• Descendant Selectors
• Pseudo-Class Selectors
• Pseudo-Element Selectors
Not supported by IE 5, 5.5 and 6
22
Type SelectorType Selector
• A type selector is the name of an element type
• A type selector matches every instance of the element type
LI {color: red; font-size: 16px}
Matches:<ol>
<li> An item </li>
<li class="reditem"> Another item </li>
</ol>
23
Class SelectorClass Selector
• A class selector is a selector of the form x.y
• It matches xs that have the class attribute with value y
LI.reditem {color: red}
Matches:<ol>
<li> An item </li>
<li class="reditem"> Another item </li>
</ol>
.reditem { color: red} will also work!
24
ID SelectorsID Selectors
• IDs are identical to classes, except that there can only be one element with a given ID in a document
LI#23 {color: red}
Matches:<ol>
<li> An item </li>
<li id="23"> Another item </li>
</ol>
#23 { color: red} will also work!
25
Attribute SelectorsAttribute Selectors
• p[attribute]
- matches p when attribute is set to any value
• p[title=intro] or p[title="intro"] (the quotes are optional)
- matches p when its title attribute is set to “intro”
• p[class~=green]
- matches p when the class attribute value includes the word “green”
26
Universal SelectorUniversal Selector
• The universal selector matches every element
• The following rule means that all the text will have a size of 40px
* {font-size: 40px }
27
Descendant SelectorDescendant Selector
• A descendant selector has the form S1 S2 where
S1 and S2 are selectors
• It matches all elements that
- match S2, and
- are descendants (nested in) elements that match S1
28
An ExampleAn Example
.href em {color: blue}
Matches: This is <em>not blue</em>.
<p>
This is <em> blue </em>
<span><i>and so is <em> this </em></i></span>.
</p>
What will this match?
p em {color: blue}
29
Pseudo-ClassesPseudo-Classes
• Pseudo class selectors are similar to class selectors, but they match states rather than class values - For example, a link can be in the states: visited,
active, mouse-over (“hover”), etc.
- Another example: a text-area can be focused
30
Examples of Rules for Examples of Rules for Pseudo-ClassesPseudo-Classes
• A:link {color: blue}
• A:visited {color: purple}
• A:hover {font-size: 1.5em}
• A:active {color: red}
• INPUT:focus {background-color: yellow}
31
Grouping SelectorsGrouping Selectors
• We can group several declarations by specifying several selectors, separated by commas
• For example, the following rule applies to all elements that match either H1, P B, or H2[class=largehead]
P B, H1, H2.largehead {font-size: 120%}
32
Adding Style to Inner TextAdding Style to Inner Text
• We want to add style to a fragment of some text
• We need to wrap the text with tags that do not have a style of their own:- <SPAN> Some text </SPAN> : does not stop the
text flow
- <DIV> Some text </DIV>: separated from the other text
Cascading and Inheritance Cascading and Inheritance
34
Cascading of StylesCascading of Styles
• CSS merges style rules from different places (inline, document-level, linked and defaults)
• Different places may have conflicting style rules- conflicts may even arise in a single source
• The process of merging (cascading) styles from different places determines which style rules have higher priority
35
Determining Property ValuesDetermining Property Values
• Suppose that we would like to determine the value of property p for element e
• Choose all declarations that have a selector that matches e and have the property p
• Choose the first declaration in the cascading order, and apply the corresponding rule
36
Cascading OrderCascading Order
The cascading order of declarations:
1. Primary sort: weight and origin
2. Secondary sort: class
3. Third sort: specificity of selectors
4. Final sort: order of appearance
37
Weight and OriginWeight and OriginA style defined “closer” to a tag takes precedence: • Author style sheets override user style sheets • User style sheets override default (browser) style
sheets• !important declaration overrides normal
declaration• If both author and user declarations have !
important, the author declarations still override the user declarations
38
Example (sort by class)Example (sort by class)
• Consider the two rules
- P {…}
- .introductory {…}
• If an element matches both, then the second rule has a higher specificity and overrides the first
39
An Example (specificity of selectors)An Example (specificity of selectors)
• Consider the following rules:- li {…}
- #x34y {…}
- ul ol li.red {…}
• Which is the most specific?
40
Order of AppearanceOrder of Appearance
• If two rules have the same origin importance and specificity, then the one that appears last in the style sheet overrides the others
• Rules in imported style sheets (@import) are considered to appear before local rules
41
Inheritance of PropertiesInheritance of Properties
• If an element does not match any rule for some given property, then the element inherits the computed value for that property from its parent element
• For example, color, font and word-spacing are inherited
• Yet border, margin and padding are not!
42
An Example (1)An Example (1)
• Given the rules:
- body { font-size: 10pt }
- h1 { font-size: 120% }
• What will be the font size of the <em> element?
<body> <h1>A <em>large</em> heading</h1></body>
Computed Value: 12pt
43
An Example (2)An Example (2)• Given the rules:
- body { font-size: 10pt; color=red; }
- h1 { font-size: 120% }
• What will be the font color of the <h1> element?
<body> <h1>A red heading ? </h1></body>
44
Inheritance of PropertiesInheritance of Properties• If some properties have been set for the same
selector in different style sheets, the values will be inherited from the more specific style sheet.
Example:
Result (properties for h3 in the document): color :redtext-align : rightfont_size:20 pt
external: H3 { color : red;
text-align : left;font-size : 8 pt; }
internal: H3 {
text-align : right;font-size : 20 pt; }
45
The End!The End!
These slides are based on those developed for the course: http://www.cs.huji.ac.il/~dbi
More information about CSS can be found at: http://www.w3schools.com/css/default.asp
http://www.htmlhelp.com/reference/css/ http://www.htmlgoodies.com/beyond/css/