Internet Software Technologies I t t S ft T h l i CSS CSS - - PDF document
Internet Software Technologies I t t S ft T h l i CSS CSS IMCNE IMCNE A.A. 2008/09 Gabriele Cecchetti Gabriele Cecchetti Why CSS (1/2) Divide contents from styles Divide contents from styles. Common styles inside one
2
CSS are are better than HTML for: CSS are are better than HTML for:
text management
backgrounds margins e borders Layouts Medim dependent style
3
Two main types of sheets: internal and external Two main types of sheets: internal and external.
4
When CSS code is inside HTML document When CSS code is inside HTML document. 2 different ways to insert an inner style sheet:
inline or inside heading of document.
5
6
7
STYLE has 2 attributes: STYLE has 2 attributes:
type (mandatory): for identify incorporated data type;
media (optional): medium where style sheet is applied
8
Usually inside a text file with
Usually inside a text file with .css extension. 2 ways to attach an external style sheet.
9
1st metod <LINK>: 1st metod <LINK>:
10
2nd method: 2nd method:
11
Common styles inside one external style sheet => Common styles inside one external style sheet =>
Then we can establish if somewhere, for some
Generally is better do not use inside style sheet
12
HTML document has a HTML document has a
13
If we define a style for an element descendants of If we define a style for an element, descendants of
14
15
Why “Cascading” ? Why Cascading ? Let’s see browser’s operations to choose sheets to
16
Check media attribute Check media attribute Verify sheet origin; 3 types:
Author’s sheet; User’s sheet;
Browser’s sheet.
Choose style for each element, using selector
If more styles refer the same element, browser look
17
18
19
media attribute media, attribute directive @media
The following media are valid:
all (default), aural, braille, embossed, handheld, print,
20
<style type="text/css" media="screen"> y yp h1 { background:black; color:white; text-align:center } h2 { color: red; font-style:italic} h3 { display: none } </style> <style type="text/css" media="print"> <style type= text/css media= print > h1 { color: black; text-align: left } h2 { display: none } p y </style> <body> <h1>Test Printer Preview</h1> <h2>This is not printed</h2> <h3>This is not displayed on screen</h3> <h3>This is not displayed on screen</h3> </body>
21
CSS rule is composed by 2 parts: one selector CSS rule is composed by 2 parts: one selector
22
23
C syntax: C syntax:
24
Elements’ proprieties are assigned by selectors: Elements proprieties are assigned by selectors:
25
It’s the same:
26
27
Use:
28
Use:
29
ID attribute identify one element ID attribute identify one element. Useful for scripting languages to identify the
30
Use:
31
32
33
Syntax example Use it when div p P is descendant of DIV element div > p P è child of DIV elementa div + p P follow s im m ediately DIV elem. p[ attr] P has set attribute attr p[ attr= "value"] P has attribute attr equal to "value" p[ ] q p[ attr~ = "value"] P has attribute attr containing "value" p[ attr| = "value"] P has attribute attr w hich begin for "value"
34
foreground color foreground color background color border color
35
Color names: Color names:
Hexadecimal Codes
Functional notation
36
37
in (inches) cm (centimeters) mm (millimeters) in (inches), cm (centimeters), mm (millimeters) pt (points): = 1/72 of inch;
pc (picas): =12 points; em: = medium height of a character for a certain
ex: height of 'x';
px (pixel)
38
39
40
Choose font Choose font Choose font’s property
41
The last is a generic family, like:
serif: sans-serif: cursive: fantasy:
monospace:
42
Use numeric values (using dimension units) or
Use numeric values (using dimension units) or
Use by keywords: xx-small, x-small, small,
Use relative values: smaller, larger.
43
normal italic e oblique Example: normal, italic e oblique. Example:
44
Boldness Boldness… Numeric value range from 100 to 900 with step
Keywords: normal (400) bold (700) Keywords: normal (400), bold (700) Relative keywords:bolder, lighter.
Example:
45
One value: smallcaps; One value: smallcaps; Example:
46
Width of font
Width of font… possible values:
ultra-condensed, extra-condensed, extra condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded.
Relative keywords: wider e narrower
47
Examples: Examples:
48
One rule for font-weight font-style font-variant One rule for font-weight, font-style, font-variant,
49
Consider<P>CIAO</P> Consider<P>CIAO</P> CSS:
50
<style type="text/css"> body { margin: 0 } div { width: 200px; p ; margin: 20px 50px; padding: 15px; border: thick dashed blue; border: thick dashed blue; background: yellow; } </style> </style> … <body> di bl k l /di <div>Test block to learn CSS</div> <div>Test block to learn CSS</div> </body>
51
Example: Example:
52
padding-top padding-top padding-bottom
padding-left padding-right
53
border-top-color border-top-color border-bottom-color
border-left-color border-right-color
54
border-top-width border-top-width border-bottom-width
border-left-width border-right-width
55
56
border-top-style border-top-style border-bottom-style
border-left-style border-right-style
57
none
hidden dotted
dashed solid
double groove
ridge inset
58
margin-top margin-top margin-bottom
margin-left margin-right
59
Values: Values:
static absolute absolute relative
fixed
Examples:
img { position: relative; left: 50px } img { position: absolute; left: 400px;
img { position: fixed; left: 400px; top: 30px }
60
#padre1 { position: absolute; left: 10px; top: 10px; width: 300px; height: 200px; background-color: yellow; z-index: 3; } #padre2 { position: absolute; left: 50px; top: 50px; p p p width: 300px; height: 200px; background-color: red; z-index: 2; }
61
62
Values: Values:
none left left right
63
Values: Values:
none left left right
both
64
Values: Values:
visible hidden hidden collapse
65
Values: Values:
hidden scroll scroll auto
66
Values:
auto crosshair default pointer move move *-resize text text wait help
67
Values: Values:
block inline inline list-item marker none run-in and compact table, inline-table, table-row-group, table-column,
68