DESARROLLO DE APLICACIONES
CON TECNOLOGÍAS WEB
Elaboración de documentos web
mediante lenguajes de marcas
4. Hojas de Estilos Web – Parte 1
Breve historia del CSS (I)
Las Hojas de Estilo CSS tienen como misión
fundamental dar estilos y presentación gráfica
a contenidos (X)HTML.
La primera recomendación oficial de CSS v.1 data
de 1996. La versión 2.1 data de 1998 y es el
soporte mínimo para cualquier navegador. A
diferencia de HTML, CSS no es un estándar
cerrado, sino que continua creciendo día a día.
Breve historia de CSS (y II)
La especificación o norma oficial que se utiliza
actualmente para diseñar páginas web con
CSS es la versión CSS 2.1
http://www.w3.org/TR/CSS21/
CSS3 es un borrador pero de rápida incorporación
en los navegadores, sobre todo en la
implementación de efectos y animaciones.
CSS3
Es una tecnología con un soporte muy diferente
en cada navegador y entre las distintas
versiones de IE.
http://www.w3schools.com/cssref/css3_browsersu
pport.asp
http://css3test.com/
Sintaxis (I)
Selector: Marcan los elementos que se verán
afectados por los bloques de estilos. Es la
primera parte de la declaración.
Bloque de declaración: Contiene los estilos a
aplicar a los elementos con del documento que
cumplan con el selector que les precede. Este
bloque va siempre entre { }. Cada declaración
de propiedad deberá finalizar con ;
Sintaxis (y II)
selector [, selector2, ...] [:pseudoclase][::pseudo-elemento] {
propiedad: valor;
[propiedad2: valor2;]
...
}
Formas de incluir CSS (I)
El nombre (Cascading Style Sheet) hace referencia
al orden de aplicación o preferencia en cascada
según su declaración.
Es frecuente que en distintos puntos del
documento se sobreescriban propiedades de
elementos en aplicación de distintas declaraciones
de CSS en función de dónde se han declarado.
Formas de incluir CSS (y II)
De menor a mayor prioridad.
1. Estilos por defecto del navegador.
2. Hojas de estilo externa.
<link href=”style.css” rel=”stylesheet” type="text/css"
media=”screen” />
3. Hojas de estilo internas al documento HTML.
<style media=”screen”> … </style>
4. Estilo en línea con una declaración en el mismo elemento.
<p style=”font-color: red”>Texto</p>
Agrupaciones de reglas
- Los listados de reglas siempre en vertical y tabulada, con
saltos de linea entre pares: propiedades-valor
- A ser posible inclúyelas en orden alfabético
- Utiliza siempre la forma abreviada de las propiedades
P {
border: 1px solid black;
color: #333;
margin: 1em 0 0 0;
}
@import
Es una regla interna de CSS que permite incluir
dentro de una declaración de CSS contenido de
otro archivo. Es muy útil para segmentar en
distintos ficheros bloques de estilos.
@import “header.css”
@import “navigation.css”
@import “social.css”
@import ”footer.css”
@import “pages/home.css”
@import “pages/contact.css”
Medios
Podemos declarar distintos tipos de estilos para
distintos soportes o medios. Existen multitud de
declaraciones según el dispositivo o medio.
All: Aplicable a todos los medios.
Print: Impreso.
Braille: Dispositivos Braille.
Embossed: Braille impreso.
Handheld: Reducido display.
Aural,speech: Sintetizador de voz.
Projection: Presentaciones y slides.
Screen: Pantallas de ordenador.
Tty: Terminales y teletipos.
Tv: Dispositivos de televisión.
Herencia
Es uno de los aspectos más importantes. Cuando se establece
un valor para una propiedad o atributo CSS, sus elementos
descendientes heredan dicha propiedad.
Ejemplo:
header {
color: red;
}
Todos los elementos dentro de <header> tendran un color:
red, a no ser que exista otra declaración con mayor prioridad.
Colisiones de estilos (I)
En el caso que se apliquen más de una declaración CSS a un
elemento HTML diremos que estamos ante una colisión de
estilos.
ul li {color: red}
li {color: green}
Para resolver las colisiones de estilos se sigue el siguiente
orden de prioridad.
Colisiones de estilos (y II)
- Se aplican primero aquellos que al lado del valor de atributo
se añade la palabra clave !important
li { color: red !important }
- Cuanto más específico sea el selector más prioridad tiene.
ul li { color: green }
li { color: red }
- Si existen varias reglas con la misma prioridad se aplica el
que se ha declarado en último lugar.
p { color: red; }
p { color: green; }
Selectores básicos (I)
Universal: Se utiliza para seleccionar todos los
elementos de una página o descendientes.
* { margin: 0; padding: 0 }
Etiqueta: Selecciona todos los elementos cuya
etiqueta coincida con el valor del selector.
p { font-family: sans-serif; color: #333 }
Selectores básicos (II)
Clase: Selecciona todos los elementos de una
clase.
.destacado { color: red }
Id: Selecciona el elemento con un ID determinado.
#logo { background-color: #00f }
Selectores básicos (y III)
Descendente: Selecciona elementos dentro de
elementos.
p span { font-weight: bold }
Combinaciones: Todos estos selectores se
pueden combinar entre sí.
div.footer strong { color: red }
Selectores avanzados (I)
Hijos directos: Selecciona elementos que son
hijos directos. Utiliza el operador >
p > a { color: blue; }
Se aplica:
<p><a href="#">Texto1</a></p>
No se aplica:
<p><span><a href="#">Texto2</a></span></p>
Selectores avanzados (II)
Hermanos adyacentes: Selecciona elementos
que están al mismo nivel (hermanos/siblings) y
están seguidos en el código. Utiliza el operador +
p + p { color: red; }
NO se aplica
<div><p>Lorem ipsum dolor sit amet...</p></div>
NO se aplica
<p>Lorem ipsum dolor sit amet...</p>
Se aplica
<p>Lorem ipsum dolor sit amet...</p>
Selectores avanzados (III)
Hermanos generales: Permites seleccionar todos
los elementos que están al mismo nivel
(hermanos/siblings). Utiliza el operador ~
h2 ~ p { color: red; }
NO se aplica
<h2>Mi encabezado</h2>
NO se aplica
<h3>Mi subencabezado</h3>
Se aplica
<p>Mi párrafo</p>
Selectores avanzados (y IV)
Selector de atributos: Selecciona elementos que
contengan un atributo y/o valor.
- Posee el atributo: a[href] {}
- Valor concreto de atributo: a[href=”#”]{}
- Comienza con: a[href^=”http:”] {}
- Finaliza con: a[src$=”jpg”] {}
- Contiene: a[href*=”heraldo”] {}
- Elementos cuyo valor son palabras separadas por guiones y
comienzan con el valor: a[lang|=es]{}
Pseudo-clases (I)
Se utilizan para aplicar diferentes estilos en función
a la interacción del usuario, posición o idioma:
Se aplican a enlaces:
:link → Enlaces no visitados
:visited → Enlaces visitados
:active → Enlace activo (click)
:hover → Enlace activo (mouse over)
Pseudo-clases (II)
En función del idioma.
:lang → Se aplica a todos los elementos que
estén definidos como perteneciente a un idioma.
No tiene nada que ver con el selector [lang]
Pseudo-clases (III)
Según su posición y hermanos/siblings:
:first-child → Primer hijo
:last-child → Último hijo
:nth-child(#num) (even|odd) → Admite cálculos
:first-of-type → Primero de un tipo
:last-of-type → Último de un tipo
:nth-of-type(n) (even|odd) → Admite cálculos
:not(selector) → Invierte la selección
:empty → Elemento vacío (sin hijos)
Pseudo-clases (y IV)
Se aplican a elementos de formulario:
:focus → Se aplica a elementos que tienen el
“foco”
:enabled → Selecciona elementos activos
:disabled → Selecciona elementos noactivados
:checked → Selecctiona elementos con el
estado checked
Pseudo-elementos (I)
Se distinguen de las pseudo-clases porque hacen
referencia a parte del contenido del elemento
seleccionado y no a todo.
Su sintaxis ha cambiado en CSS3 y ahora usa el
doble :: aunque mantiene la compatibilidad
p::first-letter { font-size: 2em }
Pseudo-elementos (y II)
::first-letter → Permite seleccionar el primer carácter
del elemento
::first-line → Permite seleccionar la primera linea del
elemento
::before → Permite añadir contenido al principio del
elemento
::after → Permite añadir contenido al final del elemento
::selection → Permite dar estilo a la selección del usuario
Descargar

U4 – Hojas de Estilo Web – p1