LM T4: Hojas de estilo CSS

TEMA4: CSS. Introducción a las hojas de estilos.

Contenidos:

1. Introducción al CSS
2. Reglas de estilos
3. Introducir estilos
4. Herencia y tipos de selectores
5. Propiedades más comunes
6. Clases, pseudo-clases y pseudo-elementos
7. Transformaciones y transiciones
8. Resumen

Actividad
El diseño de la página es una parte muy importante en el desarrollo web, por eso es muy importante el estilo que
apliquemos a nuestra web.

El Jardín Zen CSS es un recurso Web de diseño. El objetivo del sitio es mostrar las posibilidades del diseño basado
en CSS. Se utilizan hojas de estilo contribuidas por diseñadores gráficos de todo el mundo para cambiar la
presentación visual de un único archivo HTML, produciendo cientos de diseños diferentes. Aparte de la referencia
a un archivo CSS externo, el código HTML en sí mismo nunca cambia. Todas las diferencias visuales son el
resultado del CSS y el conjunto de imágenes que soportan el diseño.

Visita la página http://csszengarden.com y observa cómo cambia el diseño de las distintas páginas simplemente
por modificar los estilos
1. Introducción a las hojas de estilos CSS.

Las siglas CSS provienen del inglés Cascading Style Sheets (Hojas de estilo en cascada). CSS es un lenguaje que se utiliza
junto a HTML, para añadir a éste la parte de diseño (colores, tipografías, tamaños, posicionamiento,… etc) liberando a HTML de
estas funciones.

Existen distintas versiones de CSS y si bien la última es la versión 3, la más extendida y más utilizada hasta el
momento es la versión 2.1

Antes de comenzar a utilizar CSS, los desarrolladores web se encontraban con los siguientes problemas:

• En un principio, cada etiqueta de HTML podía incorporar atributos para introducir los estilos. Esto hacía que
el código HTML, fuese farragoso y difícil de comprender.

• Otro problema era que si por ejemplo, quería añadir un color de fondo a las tablas, en cada etiqueta <table>,
tenía que añadir el atributo correspondiente. Por lo que había que escribir varias veces el mismo código.

• Si decidíamos cambiar todos los colores de fondo de las tablas por otro color, teníamos que modificarlo en
cada una de ellas, lo que hacía que el código fuese más difícil de mantener.

• Debido a que muchos de los atributos no eran estándar en un principio, había problema a la hora de que el
navegador pudiese representar de la misma forma los estilos.
Evolución histórica
Para solucionar todos los problemas anteriores, el W3C(World Wide Web Consortium), propuso la creación de un
lenguaje de hojas de estilos específico para el lenguaje HTML y surgieron dos propuestas principales que acabaron
conviertiéndose en una sola.

• En 1996 publicó la primera recomendación oficial, conocida como "CSS nivel 1".

• En 1998, el grupo de trabajo de CSS publicó su segunda recomendación oficial, conocida como "CSS nivel
2".( La versión de CSS que utilizan todos los navegadores de hoy en día es CSS 2.1)

• Desde 1998 hasta ahora, se ha trabajado en la versión “CSS 3”, que se presenta como la más adecuada
para HTML 5. A pesar de que aún hay algún navegador que presenta problemas de compatibilidad con esta
versión cada vez son menos.
2. Reglas de estilos

Cualquier regla de estilo tiene dos partes importantes:

• El selector que indica a qué elementos se aplicarán dichos elementos

• La declaración que a su vez se compone de dos partes:

o La propiedad: Qué es lo que vamos a cambiar del selector (color, tamaño, …)

o Valor: El valor que le vamos a asignar (rojo, 20px, Arial…)

Una misma regla puede tener varias declaraciones separadas por punto y coma.

Cada propiedad CSS tiene distintas reglas sobre los valores que puede tomar. Algunas propiedades sólo aceptan
un valor de una lista de valores predefinidos, otras valores en píxeles para tamaños, porcentajes, etc.

Comentarios.

Conviene añadir comentarios a las hojas de estilo para recordar qué hacen las reglas de estilo, sobre todo aquellas
que sean más complejas.

Para añadir comentarios, se comienza con los caracteres /* y todo lo escrito a continuación se considerará
comentario hasta que aparezcan los caracteres */

Ejemplo:
3. Introducir estilos.
Existen varias formas de añadir estilos al documento web.

• CSS en la misma línea

Consiste el atributo style dentro de las etiquetas a las que quieren que se apliquen dichos estilos. El conjunto de las
parejas propiedad:valor va entre comillas. Y todas ellas van separadas por punto y coma.

Ejemplo:

En el ejemplo anterior se han utilizado los estilos:

color: white; ► Con esta propiedad asignamos al texto el color blanco.

background-color : blue; ► Con esta propiedad establecemos un color de fondo, en este caso azul.

font-family:Arial; A través de esta propiedad se selecciona la tipografía del texto.

font-size:30px ► Con esta propiedad se modifica el tamaño del texto.

Todos estos estilos aplicados se aplican al párrafo al que se ha asignado ese atributo. Si posteriormente en la página
apareciera otro párrafo no tendría los mismos estilos.

Por lo tanto, si deseamos aplicar los mismos estilos a todos los párrafos de la página, esta forma de aplicar estilos
no sería una buena elección.
• CSS interno.

Consiste en incluir en la cabecera del documento el código css. Dicho código se asignará a todas las etiquetas de
la página a la que hagan referencia.

Ejemplo:

Y el resultado será
Como vemos, sólo definiendo una vez los estilos en la cabecera, cada vez que en el cuerpo aparezca el selector
definido en los estilos se le aplicarán los estilos correspondientes, sin tener que escribirlo cada vez que aparece.

Si tuviésemos varias páginas en nuestro sitio web, y quisiésemos que todas las páginas tuviesen los mismos estilos.
Utilizando esta forma de añadirlos, tendríamos que repetir en todas las páginas el trozo de código referente a estilos.

Para ese caso, la aplicación interna de estilos, no sería la mejor solución.

• CSS externo.

En este caso, se genera un documento específico para la definición de los estilos. La extensión de estos documentos
es .css.

Al construir el documento, hay que tener en cuenta que no es un documento html, por lo que en él no habrá ninguna
etiqueta html, sólo código css.

Ejemplo de fichero .css

Este documento puede asociarse al documento .html de dos formas diferentes.

- A través de una etiqueta <link> en la cabecera:

Donde type=”text/css” indica que el lenguaje utilizado es css, y href indica la ruta y el nombre de la hoja de
estilos.
Y en el navegador a pesar de no haber escrito ningún estilo directamente en la página veremos:
- Importarlas a través de la etiqueta <style>

A través de la etiqueta style, y la regla @import, obtendremos exactamente el mismo resultado que en el
ejemplo anterior.

Dentro de una página de estilos externa, también podemos importar otra página .css.ç

Ejemplo:

Supongamos que tenemos dos páginas de estilos que deseamos utilizar (estilos.css y estilos2.css).
Podríamos enlazar la página html con la página estilos.css

y dentro de ésta importar la página de estilos estilos2.css

 estilos.css

estilos2.css

Podrá utilizar las dos páginas de estilos directamente.

Actividad.

Utiliza dos hojas de estilo estilos.css y estilos2.css y asegúrate que aparezcan en ambas propiedades con valores
diferentes para la etiqueta el selector h1 ¿Cuál tiene preferencia?
4. Herencia y tipos de selectores.

Herencia
Una de las características principales de CSS es la herencia de los estilos definidos para los elementos. Cuando se
establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma
automática el valor de esa propiedad.

Ejemplo:

A pesar de no haber definido un estilo para los párrafos, a través de la etiqueta <p>, al ir dentro de <body> se
considera descendiente de ésta y existen muchas propiedades, como el color que se heredan. Por lo tanto el texto
en el navegador se presentará de color rojo.

Existen algunas propiedades que no se heredan, por ejemplo la propiedad borde. Si se aplica un estilo al borde de
un elemento y dentro de dicho elemento existe otro que deseamos que herede dicha propiedad, tendremos que
utilizar en el segundo el valor inherit para forzar la herencia.

Ejemplo:

En el siguiente código se ha asignado estilos a un <div>, como la propiedad borde no se hereda, el párrafo, que
está dentro del div no tendrá borde:
Si aplicamos la propiedad inherit al borde del párrafo, se heredarán las propiedades del borde del div.
 i0619

Debido a la herencia, puede ocurrir que un elemento tenga más de una regla aplicada. CSS utiliza el principio de
cascada para aplicar las propiedades de los estilos, la más específica será la que se aplique.

Así, aunque la herencia de estilos se aplica automáticamente, se puede anular su efecto estableciendo de forma
explícita otro valor para la propiedad que se hereda.

Ejemplo:

Si se aplica una propiedad color a body, como la propiedad color se hereda, todo elemento que se introduzca en
body tendrá color rojo, sin embargo al indicar de forma explícita que el texto de los párrafos será azul, será esta
regla la que se aplique, mientras que para la cabecera si se heredará la del body.
Selectores.
En CSS 2.1 existen distintos tipos de selectores:

• Selector universal.

Representa a todos los elementos de la página y se simboliza mediante el carácter *.

Ejemplo:

* {color: red}

• Selector de tipo.

Es el selector que coincide con algún elemento html

Ejemplo:

• Listas de selectores.
 Si queremos aplicar el mismo estilo a dos selectores diferentes, no tenemos porqué escribir los estilos más de
una vez. Podemos agrupar los selectores separándolos por comas.

Ejemplo:

h1, h2 { color: red}

• Selector descendiente.

Propiedades que se aplican a un elemento que está contenido en otro.

Ejemplo:

<div><a> texto1 </a></div>

El estilo para indicar estos casos será:

div a{ font-family: Arial}

Se considera descendiente aunque no esté justo debajo del segundo y haya más niveles entre ellos.

Ejemplo: Ejemplo: div li { color:red}

• Selector hijo.

Es un selector descendiente, pero en este caso sólo el que está justo un nivel por debajo.

Ejemplo:

<div><a> texto1 </a></div>

El estilo para indicar estos casos será:

div > a{ font-family: Arial}

Ejemplo:

Este estilo no se considera hijo para <a> en el caso:

<div><p><a>texto2</a></div>

Si lo que queremos es descartar a los selectores hijos y que los estilos funcionen en el resto de
descendientes, lo haríamos:

div * a { font-family : Arial}

• Selector hermanos o adyacentes.

Dos selectores son hermanos si tienen el mismo padre. Son inmediatos si aparece uno justo al lado del otro.
Para acceder al hermano inmediato se usa el símbolo +

Ejemplo: h1+h2 {color:blue} (Los h2 que vayan justo a continuación de h1 será azules)

• Selector de id

El id, es un atributo que identifica a un elemento de forma única. El selector de id, por tanto, será un selector
que haga referencia a dicho elemento y sirve sólo una vez.

Ejemplo:
Puede ser que deseemos dar estilos a un selector de id que es hijo de otro elemento.

Ejemplo

Selector por atributos.

Podremos seleccionar el elemento que dispone de ciertas propiedades

Ejemplo:

. a[name] {color: blue;}

Otras formas de utilizarlo es:

[atributo=”valor”] ► Selecciona los elementos que tienen un valor concreto en un atributo

[atributo~=”valor”] ► Selecciona los elementos que pueden contener dicho valor.

[atributo |=”valor”]► Selecciona los elementos cuyo atributo comience por el valor indicado.

(Sólo funciona para el idioma: Ej. [lang |=”es”] )

• Selector de clase.

Los selectores de tipo plantean un problema:

Supón que en una página tienes varios párrafos marcados con sus respectivas etiquetas <p>. Deseas que los
párrafos tengan estilos diferentes, los pares un estilo y los impares otro estilo ¿Cómo podrías resolverlo?

Las clases nos permiten solucionarlo asignando un identificador de clase a la etiqueta concreta a la que
deseamos aplicar dicho estilo.

Las clases nos permiten identificar con un “identificador de clase”, a las etiquetas que vamos a aplicar los estilos
de dicha clase.

Cuando queremos indicar qué etiqueta utilizará dicha clase añadimos a la etiqueta el atributo
class=”nombreclase”, y luego en la hoja de estilos, para indicar que es una clase, se utiliza el selector, seguido
de un punto seguido del nombre de dicha clase.

Ejemplo:

No es obligatorio poner el selector antes del nombre de la clase, pero el punto sí, por lo que en el ejercicio
anterior, los estilos podríamos haberlos escrito directamente:

La principal diferencia entre los estilos de id y los de clase, es que los de id se utilizan exclusivamente para un
único elemento y los de clase para cuando necesitamos poner el mismo estilo a más de uno.
 Actividad
Estudia el siguiente código e indica si las afirmaciones expuestas son verdaderas o falsas

1. Todo el texto del documento es de color gris al heredar el estilo de body.

Verdadero Falso

2. El estilo #película no está correctamente escrito. Siempre se ha de colocar antes del selector de ID, el
elemento al que hace referencia. En este caso sería correcto p#pelicula

Verdadero Falso

3. Todos los párrafos heredan el borde de div

Verdadero Falso
4. Todos los párrafos son de color de fondo rosa ya que hay un selector específico para los párrafos.

Verdadero Falso

5. El elemento de la lista “actores” es gris porque es heredado del color de body

Verdadero Falso

6. Los nombres de los actores son de color negro, porque existe un selector específico por ID, que tiene prioridad
a la herencia de body.

Verdadero Falso

7. Los elementos de los nombres de los actores son grises porque heredan el color de body.

Verdadero Falso

1-Falso,2-Falso, 3-Falso, 4-Falso, 5-Verdadero, 6-Verdadero, 7-Falso

Soluciones:
5. Propiedades más comunes.

Para ver un listado de todas las propiedades y sus respectivos valores puedes consultar el enlace publicado por el
organismo W3C

http://www.w3.org/TR/CSS2/propidx.html

En este apartado, se estudiarán las propiedades y valores más utilizados.

Tamaños y medidas:
Cuando la propiedad conlleva una medida (altura, anchura, separación de márgenes…etc),

Podemos hablar de dos tipos de medidas:

a. Medidas absolutas.

i. inch : pulgadas ( 1 pulgada=2.5 cms).

ii. cm : centímetros
iii. mm: milímetros
iv. pt: puntos (1 punto= 1 pulgada / 72 = 0,35 mm).
v. pc: picas (12 puntos)

De todas las anteriores, la más utilizada es la de pt. (puntos).

b. Medidas relativas

i. px, (píxel) relativa respecto de la resolución de la pantalla del dispositivo en el que se

visualiza la página HTML.

ii. em, relativa respecto del tamaño de letra del elemento.

iii. %, establece el tamaño según el elemento padre.

Muy utilizada en tipografía 1em=anchura de la letra M Mayúscula.

Ej. Si se utiliza una tipografía de 10 puntos, 1 em= 10 puntos
Altura y anchura:

Para indicar la anchura y height de un elemento se utilizan las propiedades width y height respectivamente.

Propiedad widht
Valores <absoluto px> | <relative %> |auto
Descripción Establece el ancho del elemento

Propiedad height
Valores <absoluto px> | <relative %> | auto
Descripción Establece el alto del elemento

Ejemplo:

En este ejemplo veremos la diferencia de utilizar una unidad de medida u otra. En el primer ejemplo se muestran
medidas absolutas, puntos.
En el siguiente se muestran medidas relativas, píxeles.

En el siguiente ejemplo se muestra la misma imagen con porcentajes. El porcentaje se muestra al objeto que
contiene a la imagen, en este caso, como no hay ningún div, ni otro elemento, el porcentaje se muestra respecto a
la ventana del navegador.
Colores:
Para aplicar colores a los elementos html utilizamos la propiedad color.

Propiedad color
Valores nombre color | código RGB
Descripción Establece el color del texto

Los colores para las propiedades CSS se pueden definir de 4 formas diferentes en un documento web:

• nombre : Existen sólo 17 colores.

Ejemplo: h1 { color:blue}

• RGB hexadecimal : #RRGGBB donde cada letra es un número de 0 a F

Ejemplo: h1{ color:#0000EE}

• RGB decimal : rgb (x,x,x) dónde x es un número de 0 a 255

Ejemplo: h1{ color: rgb (0,0,238)

• RGB porcentual : rgb (x%, x%, x%) dónde x es un número de 0 a 100

Ejemplo: h1 {color: rgb (0%,0%,93%)}

Ejemplo:

Los tres códigos siguientes representan el mismo color. En este caso, el color rojo.
 Actividad

Con los valores de color de la izquierda, realiza la tabla de la derecha

Fuentes
En este apartado se presentan las propiedades principales para aplicar estilos al texto:

Propiedad font-family
Valores <fuente> Ej: Arial, Verdana, Times New Roman, …

Descripción Indica la tipografía del texto.

Propiedad font-style
Valores normal| italic | oblique

Descripción Estilo de letra

Propiedad font-size
<valores absolutos> Ej: 12ppt, 3mm
Valores <valores relativos> Ej: 20px, 3em
<%> Ej: 200%

Descripción Tamaño del texto.

Propiedad font-weight
normal| bold | bolder | lighter
Valores
100 | 200 | 300 | 400| 500 | 600 | 700 | 800 | 900

Descripción Grosor de la letra

Propiedad font-variant
Valores normal| small-caps | inherit

Descripción Mayúsculas pequeñas

Para no tener que escribir todos los estilos de fuentes, podemos utilizar el método shorthand. El método
shorthand consiste en escribir el nombre común de la propiedad (en este caso Font), y a continuación todos los
valores en orden estricto.

Ejemplo:
Texto

Estas propiedades no se pueden agrupar por el método shorthand.

Propiedad text-align
Valores left | right | center | justify
Establece la alineación del contenido del
Descripción
elemento

Propiedad line-height
Valores normal | numero | unidad de medida | porcentaje
Permite establecer la altura de línea de los
Descripción
elementos

Propiedad text-decoration

Valores none | ( underline || overline || line-through || blink )

Establece la decoración del texto (subrayado,

Descripción
tachado, parpadeante, etc.)

Propiedad text-transform

Valores capitalize | uppercase | lowercase | none

Transforma el texto original (lo transforma a

Descripción
mayúsculas, a minúsculas, etc.)

Propiedad text-shadow

Valores none | h-shadow | v-shadow | blur | color

Descripción Sombreado del texto.

Propiedad text-indent

Valores unidad de medida | porcentaje

Descripción Tabula las primeras líneas del texto.

Propiedad vertical-align

baseline | sub | super | top | text-top | middle |

Valores bottom | text-bottom | porcentaje |unidad de
medida

Determina la alineación vertical de los contenidos

Descripción
de un elemento

Propiedad letter-spacing
Valores normal | unidad de medida

Descripción Espaciado entre letras

Propiedad word-spacing
Valores normal | unidad de medida
Permite establecer el espacio entre las palabras
Descripción
que forman el texto

Propiedad white-space
Valores normal | nowrap |pre| pre-line| pre-wrap

Descripción Tratamiento de los espacios en blanco.

Ejemplo:

En este ejemplo se han aplicado varias de las propiedades vistas en este apartado:

Como se puede observar, en el tipo de letra, se han añadido 3 tipografías distintas, el navegador intentará cargar la
primera, pero si no la tiene instalada, probará con la segunda, etc.

Este sería el resultado en el navegador.

 Actividad

Completa seleccionando la propiedad correspondiente:

1. Para hacer que el texto aparezca en cursiva utilizamos la propiedad ________

2. Si se desea que modificar el tamaño del texto, utilizamos la propiedad ________

3. Para que el texto aparezca centrado elegiremos ________

4. Si queremos cambiar la tipografía ________

5. Si queremos que el texto esté resaltado en negrita utilizamos ________ , y si queremos que esté

subrayado ________

6. Para que la primera línea de los párrafos tenga sangrado ________

text-decoration, 6-text-index.
1-font-style ,2-font-size, 3-text-align , 4-font-family, 5-font-weight
Soluciones:
Actividad

Realiza este ejercicio aplicando estilos a un texto para que sea lo más parecido al siguiente.
Nota: El texto no tiene que ser el mismo puede ser cualquier texto, pero intenta que visualmente sea lo
más parecido posible.
Fuentes externas

Fuentes descargadas

Los navegadores, sólo interpretan los estilos de texto instalados. Hay que poner varios por si el primero no lo
encuentra.
Se ha utilizado mucho la creación de texto con imágenes, no es recomendable a no ser que forme parte del diseño
como logotipo etc y sin abusar.
CSS3 permite incluir tipografía a través de una URL

Para aplicarla se hace como cualquier propiedad:

Actividad
Fuentes de Google

Las fuentes son muy importantes para conseguir un diseño atractivo en nuestras páginas web. Por defecto
podemos utilizar fuentes como Arial, ComicSans, Verdana… pero son poco atractivas desde el punto de vista del
diseño. Por eso podemos descargarnos fuentes como las anteriores, o usar enlaces a fuentes como las de
Google, que además de ser gratuítas ofrecen una enorme variedad de fuentes de todos los tamaños y estilos para
nuestros sitios web.

Para seleccionar un afuente de Google tendremos que ir a la página de Google fonts. Una vez allí podremos ver
todas las fuentes y seleccionar la que más nos guste.

La selección la haremos pulsando sobre el símbolo + que aparece en la parte superior derecha de la fuente.
Una vez seleccionada la fuente veremos lo siguiente:

La etiqueta link se colocará en la cabecera y el estilo en la parte correspondiente a los estilos

Listas
Los atributos más utilizados para aplicarlos a las listas son:

Propiedad list-style-type

disc | circle | square | decimal | decimal-leading-zero |

lower-roman | upper-roman | lower-greek | lower-latin |
Valores
upper-latin | armenian | georgian | lower-alpha | upper-
alpha | none

Permite establecer el tipo de viñeta mostrada para una

Descripción
lista

Propiedad list-style-position

Valores inside | outside

Descripción Permite establecer la posición de la viñeta

Propiedad list-style-image

Valores url | none

Permite reemplazar las viñetas automáticas por una

Descripción
imagen personalizada
 Actividad

Escribe el código html y los estilos correspondientes para obtener un resultado en el navegador lo más parecido
posible a la siguiente imagen:
Fondos

Las propiedades más comunes para fondos son:

Propiedad background-color
Valores nombre color | código RGB| transparent
Descripción Establece el color de fondo del elemento

Propiedad background-image
Valores url(“ruta de la imagen”) | none
Descripción Establece una imagen de fondo

Propiedad background- attachment

Valores fixed | scroll
Controla el comportamiento de la imagen
Descripción
respecto a la barra de desplazamiento

Propiedad background-repeat
Valores Repeat | no-repeat | repeat-x| repeat-y
Repite la imagen de fondo hasta completar el
Descripción
elemento.

Propiedad background-position
<%> | <medida>| left | center | right
Valores
<%> | <medida>|top | center | bottom
Indica el desplazamiento de la imagen desde la
esquina superior izquierda dando el valor del
Descripción
desplazamiento horizontal y el de
desplazamiento vertical.

Estas propiedades admiten el método shorthand, tienen que aparecer las propiedades en orden pero no
estrictamente.
Ejemplo:

En el navegador el resultado será el siguiente:

 Degradados

CSS3 permite crear degradados.

Se pueden aplicar degradados complejos, pero IE 8 y 9 sólo admite 2 colores
background: linear-gradient (origen o grado, color inicial, color final)

El CCS3 no es reconocido en navegadores antiguos. Lo mejor es que se actualice el navegador. Pero para
asegurarnos de la compatibilidad con los navegadores que tienen más tiempo, se suele seguir añadiendo la
propiedad correspondiente para cada navegador.

linear-gradient (top, orange, blue) linear-gradient (45deg, orange, blue) radial-gradient (circle, orange, blue)

Ejemplo:
background: #ff920a;
background: -moz-linear-gradient(left, #ff920a 0%, #0000ff 100%);
/*Firefox*/
background: -webkit-linear-gradient(left, #ff920a 0%, #0000ff 100%);
/*Chrome, Opera, Safari*/
background: -ms-linear-gradient(left, #ff920a 0%, #0000ff 100%);
/*IE10*/
background: linear-gradient(to right, #ff920a 0%, #0000ff 100%);
/*CSS3*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff920a',
endColorstr='#0000ff', GradientType=1 );
/*IE9 y 10*/

Puedes visitar la siguiente página para generar degradados de forma sencilla:

https://www.cssmatic.com/es/gradient-generator#
Degradados con transparencia

Los degradados transparentes también se pueden realizar en CSS3

background: rgba(255,146,10,1);
background: -moz-linear-gradient(left, rgba(255,146,10,1) 0%, rgba(255,146,10,0) 100%);
background: -webkit-linear-gradient(left, rgba(255,146,10,1) 0%, rgba(255,146,10,0)
100%);
background: -ms-linear-gradient(left, rgba(255,146,10,1) 0%, rgba(255,146,10,0) 100%);
background: linear-gradient(to right, rgba(255,146,10,1) 0%, rgba(255,146,10,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff920a',
endColorstr='#ff920a', GradientType=1 );
Fondos con varias imágenes

Ahora que ya hemos visto cómo trabajar los fondos con html, podemos ver que se pueden crear fondos con más
de una imagen. ¿Pero cómo es posible? ¿Una no se superpondría a la otra? Sí, el truco es que las imágenes no
tengan fondo, así pueden verse las distintas capas.

Ejemplo:

Imagen1: f01.png

Imagen2: f02.png

Imagen3: f03.png

El resultado de lo anterior sería:

Bordes:
En CSS3 se ha definido un nuevo atributo aunque no todos los navegadores lo reconocen para redondear las esquinas de los
bordes:
Existen muchas combinaciones para los bordes. Algunas de ellas pueden ser:

Ejemplo:

En el siguiente código se utilizan diferentes estilos para los bordes.

Este sería el resultado en el navegador:

Ejemplo:

Redondeando los bordes:

Puedes visitar la siguiente página para generar bordes de forma sencilla:

https://www.cssmatic.com/es/border-radius#
 Actividad

Escribe el código html y una hoja externa de estilos para conseguir un resultado como el siguiente:
Bordes sombreados

CSS3 incorpora propiedades para aplicar efecto sombra a los bordes:

Es recomendable, aplicar los prefijos de los distintos navegadores. border-shadow y text-shadow
ecomendable CSS3 incorpora propiedades para aplicar efecto sombra a los bordes:

Se pueden realizar muchas combinaciones con las sombras de los bordes

https://www.cssmatic.com/es/border-radius#
Tablas

Ejemplo:

En este ejemplo se han utilizado varios estilos para las tablas

i0674

El resultado será:

(Nota: Algunas de estas propiedades no son aceptadas por Internet Explorer)

6. Clases, pseudo-clases y pseudo-elementos
Hasta ahora, la mayoría de los selectores utilizados en nuestros ejemplos han sido selectores de tipo.

Es decir, que coinciden con una etiqueta del lenguaje html.

Reflexión.

Supón que en una página tienes varios párrafos marcados con sus respectivas etiquetas <p>. Deseas que los
párrafos tengan estilos diferentes, los pares un estilo y los impares otro estilo ¿Cómo podrías resolverlo?

Clases.
Como ya adelantamos antes, las clases nos permiten identificar con un “identificador de clase”, a las etiquetas que
vamos a aplicar los estilos de dicha clase.

Cuando queremos indicar qué etiqueta utilizará dicha clase añadimos a la etiqueta el atributo class=”nombreclase”,
y luego en la hoja de estilos, para indicar que es una clase, se utiliza el selector, seguido de un punto seguido del
nombre de dicha clase.

Ejemplo

:
El resultado en el navegador será:

.En el código del ejercicio anterior, en la definición de los estilos, no es obligatorio el selector antes del nombre de
la clase en la parte de estilos, por lo que también podría aparecer de la siguiente forma:

Actividad.

Crea una tabla como la de la imagen siguiente, en que haya una clase de nombre “especial”, que será la celda
roja de cada fila.
Dicha celda tendrá el fondo rojo, el texto blanco y en cursiva y el borde blanco y punteado.
Solución

Pseudoclases.
CSS permite definir estilos a un elemento según su estado.
Un ejemplo muy significativo son los distintos estados de un enlace. Un enlace puede estar en uno de estos
estados:
o Normal, no visitado
o Situados con el ratón por encima
o Haciendo click, sobre el enlace
o Visitado
Ejemplos:

o Normal, no visitado
Se le ha asignado el color naranja

o Situados con el ratón por encima

Se le ha asignado el color naranja, pero aumentando el tamaño de la fuente

o Haciendo click, sobre el enlace

Se visualiza durante el click de color rojo.

o Visitado
Color gris.
Ejemplo:

En este ejemplo vamos a ver cómo podemos realizar un menú más profesional, cambiando el color de fondo del
elemento sobre el que estamos con el ratón.

Puede que aún no conozcas alguna de las propiedades como float, no te preocupes, las veremos más adelante.
Pseudo-elementos.

Existen algunos elementos especiales, denominados pseudo elementos,

Los pseudo elementos más utilizados son:

o first-line (aplica estilos a la primera línea de un texto)

o firs-letter (aplica estilos a la primera letra de un texto)
o before (sirve para generar texto antes del contenido de un elemento)
o after (aplica estilos al texto que va a continuación del elemento)

Para aplicar estilos a los pseudoelementos, se hace de la forma:

elemento:pseudoelemento

Ejemplos:

• p.first-line {color=”red” }

• p.first-letter { font-size=”30px”}

• h1:before { content: “Texto al comienzo de la cabecera”}

• h1:before { content: “Texto al final de la cabecera”}

Ejemplo:
Ejemplo. first-line
 Actividad.
Realiza una caja en html como la siguiente, y utiliza la propiedad after y before, para que se añada una
línea delante y atrás del texto.

Caja antes de utilizar las propiedades after y before

Caja después de utilizar las propiedades before y after

Solución
7. Transformaciones y transiciones

CSS3 también permite realizar efectos visuales muy interesantes en 2D y 3D, Todos estos tipos de efectos, antes
tenían que realizarse con javascript o flash. Con CCS3 podemos realizarlos de forma nativa directamente con las
propiedades que vamos a ver a continuación.

Transformaciones

El método scale()
100px

50px

También se puede desplazar de forma independiente con:

-translateX
-translateY
El método scale()
El método scale escala un elemento
Transiciones

En este tema. Las transiciones son animaciones, o modificación en alguna propiedad que se realizan en el tiempo
determinado de forma gradual y no de golpe.

No todas las propiedades admiten transiciones debido a su complejidad.

8. Resumen.
En este tema, gracias a los estilos y hojas en cascada (CSS), hemos conseguido mejorar el aspecto y formato de
nuestros documentos web.
Es necesario que se reconozca la importancia de utilizar estilos frente los atributos de HTML para diferenciar la parte
de diseño CSS y la parte propia HTML, que ayuda a la claridad del código y evita problemas y errores en el código.
Hemos visto la importancia de dónde colocar los estilos y que si coinciden dos estilos distintos que se solapan en
un elemento, se tomará el más específico de ellos.
Hemos trabajado las propiedades principales a la hora de aplicar estilos, pero se puede profundizar más en el la
página:

http://www.w3.org/TR/CSS2/propidx.html