Programacin Web
Unidad 3. Lenguaje de presentacin
The benefits of CSS3
Traditionally, the web design process (from a visual perspective)
began by creating a new design in Photoshop and then attempting
to re-create it in HTML and CSS. This is starting to change.
With a plethora of devices, browsers, and therefore contexts to be
catered for, more and more designers are beginning to design in
the browser.
The benefits of CSS3
Specifying rich web fonts: No more creating type in an image
editor and serving it via image replacement or using a tool
Opacity and alpha channels: Create transparency without
images using opacity or rgba.
Reducing heavy scripting for simple animations: No need to
use JavaScript to create simple transitions or transforms. It
can now be handled in CSS .
3
Anatomy of a rule (or rule set)
As youre hopefully aware, a simple CSS rule is written as
follows:
selector {
property: value;
}
A property
In the following example the border is the property:
h1 {
border: 1px;
}
A property is a style that you apply to a selector. Looking at the generic
example in the previous section, a selector can be any of a number of
elements, such as an h1, p, or img element.
A declaration
A property: value pair is called a declaration. Continuing with the same
example, the declaration is border: 1px; , as follows:
h1 {
border: 1px;
}
h1 {
border: 1px dotted red;
}
Declaration block
A rule can have more than one declarationand
frequently does.
h1 {
border: 1px;
border-style: dotted;
border-color: red;
}
Keywords
The CSS specification also defines a number of
keywords that can be used to define values. Our
previous example showed two additional keywords in
action: the border-style, set to dotted and the bordercolor, set to red.
Functional notation
As the W3C helpfully put it, "functional notation is used to denote colors, attributes,
and URIs in CSS3.
First, using hexadecimal:
blockquote {
background: #FF0000;
}
Second, using a keyword:
blockquote {
background: red;
}
Functional notation
Third, using functional notation:
blockquote {
background: rgb(255,0,0);
}
As the W3C put it, "The calc(<expression>) function can be used wherever
length values are allowed.
section {
float: left;
margin: 1em;
border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}
10
Selectors
Selectors are the way to declare which elements the styles
should apply to and h1, blockquote, .callout, and
#lovelyweather are all selectors.
11
Styling Content and Interfaces
For far too long, we developers have hacked around CSS
to get the effects we need in our code.
Weve used JavaScript or server-side code to stripe table
rows or put focus and blur effects on our forms.
We ve had to litter our tags with additional class
attributes just so we could identify which of our fifty form
inputs we want to style.
12
Styling Content and Interfaces
But no more! CSS3 has amazing selectors that make
some of this work trivial.
A selector is a pattern that you use to help you find
elements in the HTML document so you can apply styles
to those elements.
We ll use these new selectors to style a table.
13
We ll look at these CSS features
:nth-of-type [p:nth-of-type(2n+1){color: red;}]
Finds all n elements of a certain type. [C2, F3.5, S3, IE9, O9.5, iOS3, A2]
:first-child [p:first-child{color:blue;}]
Finds the first child element. [C2, F3.5, S3, IE9, O9.5, iOS3, A2]
:nth-child [p:nth-child(2n+1){color: red;}]
Finds the first child element. [C2, F3.5, S3, IE9, O9.5, iOS3, A2]|
14
We ll look at these CSS features
:first-of-type [p:first-of-type{color:blue;}]
Finds the first element of the given type. [C2, F3.5, S3, IE9, O9.5, iOS3,
A2]
last-of-type [p:last-of-type{color:blue;}]
Finds the last element of the given type. [C2, F3.5, S3, IE9, O9.5, iOS3,
A2]
Column support [#content{ column-count: 2; column-gap: 20px;
column-rule: 1px solid #ddccb5; }]
Divides a content area into multiple columns. [C2, F3.5, S3, O11.1,
iOS3, A2]
15
CSS3 modularity
One major change to the evolution of CSS is the W3Cs
decision to split CSS3 into a series of modules. As the CSS
Working Group put it
16
Styling Tables with Pseudoclasses
A pseudoclass in CSS is a way to select elements
based on information that lies outside the document or
information that can t be expressed using normal
selectors.
17
18
