chapter6 css
Post on 03-Jun-2018
234 Views
Preview:
TRANSCRIPT
-
8/12/2019 Chapter6 CSS
1/21
2004, Robert K. Moniot
Chapter 6
CSS : Cascading Style Sheets
-
8/12/2019 Chapter6 CSS
2/21
2004, Robert K. Moniot
Style Sheets
Each element on a page has a style defined for it. The style is defined by a set of attribute : value pairs. Style attributes can control:
Typeface and font properties Background properties Box-related properties List properties
-
8/12/2019 Chapter6 CSS
3/21
2004, Robert K. Moniot
Ways to define styles Default s tyle: provides values for all element properties,
unless you change it. (Note: user can customizebrowser to change defaults!)
Inlin e sty le: style is defined as an attribute of the
element in- place. Use this for one -off or special styles. Em bedd ed s ty le sh eet : styles defined in the head
portion of web page. Use this if you dont have verymany web pages, or for styles that are useful only for thegiven page.
External s ty le s heet : styles defined in a separate file.Use this to centralize style definitions and provideuniformity across all pages of a web site.
-
8/12/2019 Chapter6 CSS
4/21
2004, Robert K. Moniot
Embedded Style Sheet < html > < head > < title >Page with embedded style< /title > < style type= " text/css ">
selector { attribute : value ;attribute : value ... }
selector { attribute : value ;attribute : value ... }
...
< /style >
< /head >...
< /html >
Style definitions go into a element in document head.Selector determines what elements thestyle rule applies to.Style definitions separated by ; areenclosed in { }
-
8/12/2019 Chapter6 CSS
5/21
2004, Robert K. Moniot
Embedded Style Sheet (contd) < html > < head > < title >Page with embedded style< /title > < style type= " text/css ">
selector
{
attribute :
value ;
attribute : value ... }selector { attribute : value ;
attribute : value ... } ...
< /style > < /head >
... < /html >
The type attribute can only be " text/css " .(It is leaving room for future alternative stylelanguages.)Note: CSS is not HTML!
-
8/12/2019 Chapter6 CSS
6/21
2004, Robert K. Moniot
Example < html > < head > < title >Example page with embedded style< /title > < style type="text/css">
body { font-family : sans-serif;color : blue;
background-color : yellow }h1 { font-style : italic }
p { font-size : 14pt }ol { font-size : 12pt;
color : red;
font-family : serif } < /style > < /head >
... < /html >
Here the selectors are simply tag names. Thestyle rules will apply to elements defined bythose tags. Result (Example 1)
http://localhost/var/www/apps/conversion/tmp/scratch_6/Examples/styles/embedded-style.htmlhttp://localhost/var/www/apps/conversion/tmp/scratch_6/Examples/styles/embedded-style.html -
8/12/2019 Chapter6 CSS
7/21
2004, Robert K. Moniot
Inheritance
A descendan t is an element that is enclosed (nested) inanother, its ances to r . (If it is an immediate descendant,it is a ch i ld of the enclosing element, its parent .Elements having the same parent are s ib l ings .)
All descendants of an element inherit its style properties,unless these are overridden by their own style rules. If two styles could apply to the same element, the one
defined by the more specific rule will be used. Forinstance, an explicit rule is always more specific than aninherited rule.
-
8/12/2019 Chapter6 CSS
8/21
2004, Robert K. Moniot
Compound Selectors
Selectors can be defined so that a style rule applies toan element only when it is a descendant of a certainother type of element. Examples:
ul ul { list-style-type : square }This specifies that an unordered list inside another unorderedlist will be bulleted by squares.
h1 em em { color : red }This specifies that emphasized text inside emphasized text inan header will appear in red.
-
8/12/2019 Chapter6 CSS
9/21
2004, Robert K. Moniot
Compound selectors are more specific than simpleselectors. For instance, if a style sheet defines both
p { color : red }div p { color : blue }
then for a
tag that is inside a element, thesecond rule would apply.
Compound Selectors
-
8/12/2019 Chapter6 CSS
10/21
2004, Robert K. Moniot
Style Classes These allow you to control which elements of a given
type should use a style rule. This method has two parts: In the style sheet, the selector defines the class name, which is
preceded by a period. In the HTML, the tag includes the class attribute and specifies
the value of the class nameExample:
Define the nodec class for anchor tags:
a.nodec { text-decoration : none }
This suppresses the usual underlining. Use it in HTML like so:
Link text
-
8/12/2019 Chapter6 CSS
11/21
2004, Robert K. Moniot
Style Classes
Style classes can also be generic, i.e. not tied to aspecific element type. Example:
Define the zowie class:
.zowie { text-decoration : blink }
Use it on an emphasized element:
< em class="zowie">Important!< /em >
Use it with no other style attributes: < span class="zowie">Buy Now!< /span >
By the way: promise me you wont ever use blink !
Example 2
http://localhost/var/www/apps/conversion/tmp/scratch_6/Examples/styles/classes.htmlhttp://localhost/var/www/apps/conversion/tmp/scratch_6/Examples/styles/classes.html -
8/12/2019 Chapter6 CSS
12/21
2004, Robert K. Moniot
The < span > and < div > Tags
These tags are provided to allow arbitrary chunks ofHTML to be treated as elements. This is usually done inorder to apply style attributes to them, as in thepreceding example.
A < span > ... < /span > element defines an inlinestructure, i.e. it simply defines a stretch of text. Thus itcan be used within a paragraph or table element withoutaffecting the flow of the text.
A < div > ... < /div > element defines a block structure.Usually the browser will place line breaks before andafter this element, but otherwise it has no effect itself.
-
8/12/2019 Chapter6 CSS
13/21
2004, Robert K. Moniot
Pseudo-classes
These are like style classes, but an element acquires apseudo-class by user action or by a relationship otherthan descendancy.
In the style sheet, a pseudo-class name is preceded by acolon.
In the HTML, the pseudo-class name is NOT used withthe affected tag, because it is implied.
-
8/12/2019 Chapter6 CSS
14/21
2004, Robert K. Moniot
Pseudo-classes
Link-related pseudo-classes
a:link { color : red } Applies when the link has not yet been visited.
a:visited { color : green } Applies when the link has been visited.
a:hover { color: yellow }
Applies when the mouse is over the link.
-
8/12/2019 Chapter6 CSS
15/21
2004, Robert K. Moniot
Cascading Rule
If two equally specific rules can apply to the sameelement, the one that comes last in the style sheet isused. Thus, in the example below, a:hover must followa:link and a:visited in order to have effect, since alink can be both visited (or not) and hovering. The orderof the first two doesnt matter since they are mutuallyexclusive.
a:link { color : red }a:visited { color : green }a:hover { color : yellow }
Result (Example 3)
http://localhost/var/www/apps/conversion/tmp/scratch_6/Examples/styles/pseudoclasses.htmlhttp://localhost/var/www/apps/conversion/tmp/scratch_6/Examples/styles/pseudoclasses.html -
8/12/2019 Chapter6 CSS
16/21
2004, Robert K. Moniot
Pseudo-elements
:first-line is a pseudo-element that consists of thefirst line of text in a block-level element.
:first-letter is a pseudo-element that consists ofthe first letter of the text in an element.
Closely related to pseudo-classes, in that they aredefined by relationships, not by explicit declarations.
A pseudo-element refers to a virtual element that ispart of an actual element, rather than a special case of
a whole element.
-
8/12/2019 Chapter6 CSS
17/21
2004, Robert K. Moniot
Pseudo-elements p { text-indent: 1em } p.initial { text-indent: 0 } p.initial:first-line { text-transform: uppercase } p.initial:first-letter { font-size: 24pt }
This indents all normal paragraphs. A paragraph that is declaredwith class="initial" is not indented, and its first line appearsin all capital letters, with an extra-large first letter.
Result (Example 4)
http://localhost/var/www/apps/conversion/tmp/scratch_6/Examples/styles/pseudoelements.htmlhttp://localhost/var/www/apps/conversion/tmp/scratch_6/Examples/styles/pseudoelements.html -
8/12/2019 Chapter6 CSS
18/21
2004, Robert K. Moniot
Inline Styles
Defined for individual elements, at the point of use (in theHTML).
Useful for one -off styles that are not likely to be usedelsewhere.
Method: < tag style=" attribute : value ; attribute : value ... ">
HTML text < / tag >
The attribute : value pairs are what would go between { } if thiswere a style-sheet rule. There is no selector since the style appliesto this element only.
Example 4
http://localhost/var/www/apps/conversion/tmp/scratch_6/Examples/styles/inline-style.htmlhttp://localhost/var/www/apps/conversion/tmp/scratch_6/Examples/styles/inline-style.html -
8/12/2019 Chapter6 CSS
19/21
2004, Robert K. Moniot
External Style Sheets
A style sheet can be placed in a separate file (usuallynamed with suffix .css ) and referenced by HTML filesthat need it.
Useful for centralizing control of style and ensuringuniform appearance across many pages of a web site.
The contents of the file are what would go between < style > ... < /style > of an embedded style sheet.
Note: this file is n o t HTML! The file is referenced using a < link > tag in the HTML
document's head portion.
-
8/12/2019 Chapter6 CSS
20/21
2004, Robert K. Moniot
Example of style sheet
/* This style sheet defines an "excerpt" class
for paragraphs that is much like blockquote. */
p.excerpt { font-style : italic; margin-right : 2em; margin-left : 2em;
}
Here is what an external style sheet (namedstyle.css ) could contain:
Note that there is no HTML in this file! This example also illustratesa CSS comment between /* and */ . Such comments can beplaced in external or embedded style sheets.
-
8/12/2019 Chapter6 CSS
21/21
2004, Robert K. Moniot
Example of using style sheet
The rel attribute specifies the relationship of the referenced file to thispage.
The type attribute must be "text/css" . The href attribute is a URL pointing to the external style sheet.
< html > < head > < title >Style Example < link rel="stylesheet" type="text/css" href="style.css"> < /head >
... < p class="excerpt"> affected text < /p > ... < /html >
Result (Example 5)
http://localhost/var/www/apps/conversion/tmp/scratch_6/Examples/styles/style-sample.htmlhttp://localhost/var/www/apps/conversion/tmp/scratch_6/Examples/styles/style-sample.html
top related