Introducción a CSS

Taller de Nuevas Tecnologas Introduccin a CSS

Lic. Dela Lisandro [email protected]

Aspectos visuales de los elementos HTML

En los comienzos del HTML, los diseadores de pginas web utilizaban elementos HTML especiales para modificar los aspectos visuales de los elementos de las pginas. Ejemplo:

Ejemplo de estilos (la forma incorrecta)

Titulo de la pgina

Un prrafo de texto no muy largo.


Por qu es incorrecto utilizar y sus atributos

color, face, size, etc ?

Para la W3C qued obsoleto (deprecated)


Por qu es incorrecto utilizar y sus atributos

color, face, size, etc ?

Si una pgina tiene 40 elementos HTML, darle formato a

todos ellos implica utilizar 40 elementos .

Si el sitio web entero est compuesto por 50 pginas

diferentes, se utilizaran 2000 elementos .

Si utilizamos 3 atributos por etiqueta estaramos

utilizando 6000 atributos !!!

Y si con el tiempo queremos cambiar el diseo de

todo el sitio (fuentes, colores, bordes, etc) ?

CSS Cascading Style Sheets

En 1995, el W3C decidi apostar por el desarrollo y estandarizacin de CSS

A finales de 1996, se publica la primera recomendacin oficial, conocida como CSS nivel 1

El 12 de mayo de 1998, se publica la segunda recomendacin oficial, conocida como CSS nivel 2

CSS 2.1 estuvo en borrador desde el 2004, y recin se oficializ el 7 de junio de 2011.

En paralelo al desarrollo de la rama CSS 2, desde el ao 1999 se desarrolla la rama CSS 3, pero dividida en mdulos.

Actualmente hay ms de 50 mdulos publicados, pero solo algunos pocos estn publicados como recomendaciones oficiales

Por qu usar CSS?

Permite separar el contenido de un documento de su representacin

Facilita el trabajo de equipo

Cdigo ms claro

Beneficios en la indexacin de buscadores

Esto evita la duplicacin de cdigo

Hace el mantenimiento del sitio ms simple

Usar el mismo contenido con diferentes estilos para diferentes propsitos

Optimizacin de los tiempos de carga y de trfico en el servidor

Las pginas pueden reducir su tamao entre un 40% y 60%

Reduccin de los tiempos de carga del sitio en el navegador.

El navegador guarda en cach el css

Se reduce el volumen de trfico de nuestro servidor.

Definicin de estilos

Opcin 1) Incluir CSS en los elementos HTML. Ejemplo:

Ejemplo de estilos

Titulo de la pgina



Opcin 2) Incluir CSS en el documento HTML. Ejemplo:

Ejemplo de estilos

h1 { color: red; font-family: Arial; font-size: 24px }

p { color: gray; font-family: Verdana; font-size: 13px }

Titulo de la pgina



Opcin 3) Incluir CSS en un archivo a parte. Ejemplo:

Ejemplo de estilos

Titulo de la pgina


/* Archivo styles.css */

h1 {

color: red;

font-family: Arial;

font-size: 24px

}

p {

color: gray;

font-family: Verdana;

font-size: 13px

}

Selectores La forma bsica de definir un estilo es:

Selector universal

Selecciona todos los elementos de una pgina

Suele emplearse con otros selectores (lo veremos ms

adelante)

* { color: red }

Selector de tipo o etiqueta

Selecciona todos los elementos de la pgina cuya etiqueta

HTML coincide con el valor del selector

h1{ color: red }

h2, h3, h4 { color: green }

selector { atributo: valor;

atributo: valor;

.

}

Selectores

Selectores mltiples Se aplican mismos estilos a selectores diferentes

La sintaxis formal es: selector1, selector2, .. selectorN

h1, h2, h3 {

color: #8A8E27;

font-weight: normal;

font-family: Arial, Helvetica, sans-serif;

}

h1 {

font-size: 2em;

}

h2 {

font-size: 1.5em;

}

h3 {

font-size: 1.2em;

}

Selectores

Selectores descendentes Selecciona los elementos que se encuentran dentro de otros elementos,

sin importar el nivel de profundidad en el que se encuentre.

La sintaxis formal es: selector1 selector2 .. selectorN

p span {

color: red;

}

...

texto1

...

texto2 texto3

...

Selectores

Selectores descendentes (continuacin)

Se puede restringir el alcance del selector descendente combinndolo con el selector universal. El siguiente ejemplo, muestra los dos enlaces de color rojo:

p a { color: red; }

Enlace

Enlace

Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo:

p * a { color: red; }

Enlace

Enlace

Selectores

Selector CLASS Selecciona cualquier elemento que tenga como atributo class el nombre

del selector.

Para que el navegador no confunda este selector con otros tipos de selectores, se prefija el valor del atributo class con un punto (.)

.warning{ color: red; font-weight: normal; }

Atencin ..

Pgina de error

Es posible aplicar los estilos de varias clases CSS sobre un mismo elemento

Atencin ..

Selectores

Selector CLASS (continuacin) A veces, es necesario restringir el alcance del selector class.

Se puede combinar este selector con los que vimos previamente para producir diferentes reglas

/* Todos los elementos de tipo "p" con atributo class=warning" */

p.warning { ... }

/* Todos los elementos con atributo class="warning" que estn dentro

de cualquier elemento de tipo "p" */

p .warning { ... }

/* Todos los elementos "p" de la pgina y todos los elementos con

atributo class="warning" de la pgina */

p, .warning { ... }

Selectores

Selector ID Selecciona un nico elemento de la pgina, a travs del atributo id.

Para que el navegador no confunda este selector con otros tipos de selectores, se prefija el valor del atributo id con un numeral (#)

#slogan{ text-align: center; margin-top: 10px; }

El slogan de la compaia

Selectores

Selector de hijos Similar al selector descendente, pero aplica solo al elemento hijo

directo.

p > a {

font-weight: bolder;

}

Enlace

Enlace

Selectores

Selector adyacente Selecciona elementos que se encuentran justo a continuacin de otros.

h2 {

color: green;

}

h1 + h2 {

color: red

}

Titulo1

Subttulo

...

Otro subttulo

...

Selectores

Selector de atributos [atributo=valor] Selecciona elementos en funcin de sus atributos y/o valores de esos

atributos.

input{

background: white;

}

input[type="text"]{

border: 2px solid #D667C2;

}

input[type="password"]{

border: 2px dashed #71D1AF;

}

input[type="submit"]{

border: 2px dotted #D1CE71;

}

Selectores

Selector de atributos [atributo^=valor] Selecciona elementos en funcin de un atributo y como comienza el

valor del atributo.

a{

display: inline-block;

height: 32px;

width: 32px;

}

a[href^="http://facebook"]{

background: url(facebook.png);

}

Enlace

Selectores

Selector de atributos [atributo$=valor] Selecciona elementos que tengan definido un atributo y cuyo valor

termine como se indica.

a{


height: 32px;

width: 32px;

}

a[href$=pdf"]{ background: url(extensionpdf.png);

}

Selectores

Selector de atributos [atributo*=valor] Selecciona elementos que tengan definido un atributo y cuyo valor

incluya parte de lo declarado en la regla.

a{


height: 32px;

width: 32px;

}

a[href*=ch"]{ background: url(extensionpdf.png);

}

Selectores

Selector pseudo-clases Selecciona elementos que tengan cierto estado especfico. La sintaxis formal es: selector:pseudo-class

a{

color: red;

}

a:visited {

color: green;

}

Selectores

Selector pseudo-clases (continuacin) Listado de pseudo-clases.

:link :visited :active :hover :focus :first-child :last-child :nth-child :nth-last-child :nth-of-type :first-of-type :last-of-type :empty :target :checked :enabled :disabled

Herencia de estilos

Cuando se establece el valor de una propiedad CSS en un

elemento, sus elementos descendientes heredan de forma

automtica el valor de esa propiedad.

/* styles.css */

body { color: blue; font-family: Arial; }

Titular de la pgina


Herencia de estilos

Se puede sobrescribir los valores heredados estableciendo de forma explcita otro valor para la propiedad que se hereda.

/* styles.css */

body { color: blue; font-family: Arial; }

h1 { font-family: Verdana; }

p { color: red; }

Titular de la pgina


Herencia de estilos resolucin de colisiones

- Cuanto ms especfico sea un selector, ms importancia tiene su regla asociada

- Si son iguales de especficos, se considera la ltima regla indicada

/* styles.css */

p { color: red; }

p#especial { color: green; }

* { color: blue; }

...

Introducción a CSS

Documents

Transcript of Introducción a CSS