View
1
Download
0
Category
Preview:
Citation preview
CSS
Cascading Style Sheet CSS2 – CSS/P
The goal
SEE http://www.csszengarden.com
Style: local definition
<html><head> </head><body> <h1 style="color:blue;">primo capitolo</h1> nel mezzo del cammin di nostra vita <h1 style="color:blue;">secondo capitolo</h1> mi ritrovai per una selva oscura <h1 style="color:blue;">terzo capitolo</h1> che la diritta via m'era smarrita </body></html>
Style: definition of a page style
<html><head> <style> h1 {color:blue;} </style> </head><body> <h1>primo capitolo</h1> nel mezzo del cammin di nostra vita <h1>secondo capitolo</h1> mi ritrovai per una selva oscura <h1>terzo capitolo</h1> che la diritta via m'era smarrita </body></html>
Style: definition of a shared style
<html><head> <link rel="StyleSheet" type="text/CSS" href="../common/lodeStyles.css" > </head><body> <h1>primo capitolo</h1> nel mezzo del cammin di nostra vita <h1>secondo capitolo</h1> mi ritrovai per una selva oscura <h1>terzo capitolo</h1> che la diritta via m'era smarrita </body></html>
Shared style
A single style may also be given through multiple style sheets: <LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary" TYPE="text/css"> <LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary" TYPE="text/css"> <LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary" TYPE="text/css"> In this example, three style sheets are combined into one "Contemporary" style that is applied as a preferred style sheet. To combine multiple style sheets into a single style, each style sheet's LINK must use the same TITLE.
Shared style
Authors can also use the LINK element to apply an external style sheet. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled. The absence of the TITLE attribute indicates a persistent style. A preferred style is one that is automatically applied. The combination of REL=StyleSheet and a TITLE attribute specifies a preferred style. Authors cannot specify more than one preferred style. An alternate style is indicated by REL="Alternate StyleSheet". The user could choose to replace the preferred style sheet with an alternate one, though current browsers generally lack the ability to choose alternate styles.
Formatting elements
color:color background-color:color background-image:uri font-family:name font-size:xx-small|x-small|small|medium|large|x-large|xx-large|
larger|smaller|absoluteSize|relativeSize|percentage|lenght font-style:normal|italic font-weight:bold|bolder|lighter|normal|100|200|...|800|900
Length units
ABSOLUTE LENGTH International System cm centimetri mm millimetri anglosaxon units in inch (pollici) pt point:1/72 pollice pc pica:12 point=1/6 pollice System dependent: px pixel
RELATIVE LENGTH: em altezza del font
dell’elemento ex altezza estesa del font
dell’elemento
Formatting elements
line-height:normal|length|percentage text-align:left|center|right|justify text-decoration:blink|line=through|overline|underline text-indent:lenght|percentage text-transform:none|capitalize|uppercase|lowercase
Styles cascade
<HTML> <HEAD>
<STYLE TYPE="text/css"> p {font-size:24pt;color:green; border-width:thick;border-style:ridge; border-color:red} p.red {color:red}
</STYLE> </HEAD> <BODY>
<p class="red">Pippo</p> <div style="background:orange ">
<p>Pluto</p> <p class="red" style="font-size:12pt; background:yellow">Topolino</p>
</div> </BODY>
Formatting elements
Element width
Element height
Box top Box left
Box width
Box height
Margin Space (transparent)
Border Space
Padding Space
Content Space
Formatting elements
border-bottom-width,border-top-width, border-right-width,border-left-width:thin|medium|thick|n
border-color:color border-style:double|groove|none|inset|outset|ridge|solid border-width:thin|medium|thick|length margin:thickness margin-bottom,margin-left,margin-right,margin-top :thickness padding :thickness padding-bottom,padding-left,padding-right,padding-top :thickness
Elementi di formattazione - liste
<LI> <OL> line-style:decimal|lower-alpha|lower-roman|upper-alpha|upper-roman <UL> line-style:circle|disc|square
Caratteristiche avanzate
Selettore di adiacenza H1+H2 {color:blue} I blocchi H1 e H2 consecutivi
Selettore Padre-figlio BODY > P{color:red}
I Paragrafi direttamente contenuti nel BODY Selettore di attributo P[ALIGN]{color:red}
Individua solo i <P ALIGN=…> P[ALIGN=“left”]{color:red} Individua solo i <P ALIGN=“left”> *[ALIGN=“left”]{color:red} Individua solo qualunque tag con attributo ALIGN=“left”
Caratteristiche avanzate
Pseudo-elementi P:first-letter prima lettera P:first-line prima linea
Pseudo-classi
A:link ancore non visitate A:active ancore nell’atto di essere cliccate A:visited ancore visitate
Positioning examples: CSS-P
<HTML> <HEAD>
<STYLE TYPE="text/css"> #aposition{position:relative;left:30;top:20} a {color:red} p {font-size:24pt;color:green;border-width:thick;
border-style=ridge;border-color=red} p.red {color:red} </STYLE>
</HEAD> <BODY>
<p class="red">Pippo</p> <div style="background:orange;
position:absolute;left:100;top:150"> <p style="padding-left:20;margin:20">Pluto</p> <span id="aposition">
<p class="red" style="font-size:12pt; background-color:yellow">Topolino</p>
</span> </div>
</BODY> </HTML>
Elementi posizionabili – CSS/P
Specificazione del tipo di posizionamento: position:absolute|relative
Specificazione della posizione: top:size left:size
Specificazione della dimensione: width:size height:size
Specificazione del tipo di visibilita’: visibility:hidden|inherit|show
Elementi posizionabili – CSS/P
Clip:rect(top right bottom left) Taglia un elemento lasciandolo al suo posto
z-index:n
stabilisce l’ordine di visualizzazione degli elementi sovrapposti
Next slides (CSS3) by M.Jackson Wilkinson
CSS 3The Presentation Layer:
Sunday, July 19, 2009
COLOR
Sunday, July 19, 2009
opacity
Browser Support:opacity
Adjusts the opacity of the selected element’s presentation on screen.
Takes values between 0.0 (fully transparent) and 1.0 (fully opaque)
div { color: #f00; opacity: 1.0; }
div { color: #f00; opacity: 0.5; }
Sunday, July 19, 2009
RGBA Color
Browser Support:RGBA color
Like RGB color definitions, but allows a fourth field, defining the alpha value of the color being applied.
Like opacity, the alpha value is between 0.0 (fully transparent) and 1.0 (fully opaque).
div { color: rgb(0,255,0); }
div { color: rgba(0,255,0,0.5); }
Sunday, July 19, 2009
HSL/A Color
Browser Support:HSL/A color
HSL color definitions accept three arguments: hue is a degree on a color wheel (0-360), saturation is a percentage, and lightness is a percentage.
HSLA is like HSL color, but allows a fourth field, defining the alpha value of the color being applied. See RGBA.
div { color: hsl(240,50%,50%); }
div { color: hsla(240,50%,50%,0.5); }
Sunday, July 19, 2009
BACKGROUNDS
Sunday, July 19, 2009
background-size
Browser Support:background-size
Defines the size at which the browser should display the specified background image. Accepts all normal size definitions as width followed by height.
In shorthand, this appears after background-position values.
div { background-size: 100px 65px; }
div { background-size: 400px 65px; }
Sunday, July 19, 2009
background: url(body-top.png) top left no-repeat,
url(body-bottom.png) bottom left no-repeat,
url(body-middle.png) left repeat-y;
background-image
Browser Support:background-image
Allows for multiple images to be specified. The first image specified is layered closest to the top of the screen, and subsequent images are layered beneath.
Sunday, July 19, 2009
BORDERS
Sunday, July 19, 2009
border: 5px solid #000;
border-color: #000 transparent transparent #000;
border-color
Browser Support:border-color
Allows for multiple border colors to be specified, one pixel at a time. The last specified color is repeated if necessary.
This cannot be used in the border shorthand syntax.
Sunday, July 19, 2009
border-image: url(button.png) 0 12 0 12 stretch
stretch;
border-image
Browser Support:border-image
Allows the border to be represented by an image, by defining which parts of the image should be used for the edges, and which should be repeated in the main part of the element.
This is difficult to represent completely, so go look it up.
border-image: url(border.png) 27 27 27 27 round
round;
Sunday, July 19, 2009
border-radius: 10px;
border-radius
Browser Support:border-radius
Curves the corners of the border using the radius given, often in pixels. This can be given to all corners, or only to individual corners as specified.
Firefox refers to individual corners like “border-radius-topright” while Safari (correctly) refers to it as “border-top-right-radius”.
border-top-right-radius: 10px;
Sunday, July 19, 2009
box-shadow: 10px 10px 10px #333;
box-shadow
Browser Support:box-shadow
Creates a drop shadow beneath the selected element.
The first argument is the horizontal offset, the second is the vertical offset, the third is the blur radius, and the final argument is the color to be used as the shadow.
Sunday, July 19, 2009
TEXT
Sunday, July 19, 2009
text-overflow: ellipsis;
text-overflow
Browser Support:text-overflow
If text overflows the available space, the text-overflow property defines what happens.
The value “ellipsis” appends an ellipsis character at the overflow point.
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nam purus nunc, auctor et accumsan ut, aliquam vel leo. Quisque dignissim tincidunt rhoncus. Duis
sed velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. Donec fringilla,
turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non diam. Morbi dolor massa,
elementum ac iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit
amet ultrices. Maecenas quis nunc nibh, sit amet hendrerit leo. Donec a massa eget velit consectetur
fermentum aliquet et eros. Vestibulum volutpat, est vitae dapibus congue, nibh augue vehicula lacutus es…
Sunday, July 19, 2009
text-shadow: 10px 10px 10px #333;
text-shadow
Browser Support:text-shadow
Creates a drop shadow beneath the selected text.
The first argument is the horizontal offset, the second is the vertical offset, the third is the blur radius, and the final argument is the color to be used as the shadow. Multiple shadow definitions may be separated using commas.
This is sample text.
Sunday, July 19, 2009
column-width: 200px;
column-gap: 20px;
column-width & column-gap
Browser Support:column-width/column-gap
Breaks flowing text into multiple columns, based on the width of the container. Column width defines the width of each column, and column-gap defines the gap between columns.
Column-count can be specified in lieu of column-width.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nam purus nunc, auctor et
accumsan ut, aliquam vel leo. Quisque
dignissim tincidunt rhoncus. Duis sed velit
rutrum lorem rutrum faucibus. Nam tincidunt
eros at arcu vestibulum egestas. Donec
fringilla, turpis in auctor luctus, orci orci
vestibulum lacus, a tristique felis erat non
diam. Morbi dolor massa, elementum ac
iaculis quis, iaculis sed neque. Aliquam erat
volutpat. Aliquam porttitor auctor massa sit
amet ultrices. Maecenas quis nunc nibh, sit
amet hendrerit leo. Donec a massa eget velit
consectetur fermentum aliquet et eros.
Vestibulum volutpat, est vitae dapibus
congue, nibh augue vehicula lacus, vel
semper dolor odio in libero. Curabitur vitae
sem consequat purus fermentum tincidunt.
Donec vestibulum felis ut metus ultrices a
vulputate felis rhoncus eum ivolonortis
quisque dignissim tincidunt rhoncus. Duis sed
velit rutrum lorem rutrum faucibus. Nam
tincidunt eros at arcu vestibulum egestas.
Donec fringilla, turpis in auctor luctus, orci
orci vestibulum lacus, a tristique felis erat non
diam. Morbi dolor massa, elementum ac
iaculis quis, iaculis sed neque. Aliquam erat
volutpat. Aliquam porttitor auctor massa sit
amet ultrices. Maecenas quis nunc nibh, sit
amet hendrerit leo. Donec a massa eget velit
consectetur fermentum aliquet et eros.
Vestibulum volutpat, est vitae dapibus
congue, nibh augue vehicula lacus, vel
semper dolor odio in libero. Curabitur vitae
sem consequat purus fermentum tincidunt.
Donec vestibulum felis ut metus ultrices a
vulputate felis rhoncus eum ivolonortis
Sunday, July 19, 2009
@font-face {
font-family: Helvy;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
p.specialFont { font-family: Helvy, sans-serif; }
@font-face
Browser Support:column-width/column-gap
Allows a font file to be associated with a font name for later use in font-family declarations.
IE supports only .eot Embedded OpenType files, while the other browsers support any TTF and OTF font files.
Sunday, July 19, 2009
TRANSFORMATION
Sunday, July 19, 2009
rotate
Browser Support:rotate
Rotates the selected element at the defined angle, defined in degrees.
The rotation doesn’t affect layout, and elements that are transformed are treated similarly to position:relative.
transform: rotate(30deg);
Sunday, July 19, 2009
scale
Browser Support:scale
Scales the element in question based on the specified unit-less numbers given for the X and Y axes. If only one number is given, it is applied to both axes.
transform: scale(0.5,2.0);
Sunday, July 19, 2009
skew
Browser Support:scale
Skews the element around the X and Y axes by the specified angles, in degrees. If it’s only one number, the Y axis is assumed to be zero. transform: skew(-30deg);
Sunday, July 19, 2009
translate
Browser Support:translate
Moves the object along each axis by the length specified. The unit can be anything accepted as a length in CSS, such as px, em, percentages, etc.
transform: translate(30px, 0);
Sunday, July 19, 2009
3D TRANSFORMATIONS
PERSPECTIVE The distance, in pixels, of the z=0 plane from the viewer.
MATRIX3D
ROTATE3D
SCALE3D
TRANSLATE3D
Allows creation of a 3d transformation matrix.
Rotate the matched element in three dimensions.
Performs a three-dimensional scale operation.
Allows the matched element to be moved along three axes.
Sunday, July 19, 2009
BROWSER PREFIXES
Sunday, July 19, 2009
FIREFOX:
SAFARI:
OPERA:
IE:
-moz-box-shadow:
-webkit-box-shadow:
-o-box-shadow:
-ms-box-shadow:
Sunday, July 19, 2009
Recommended