HTML+CSS+JS

JAVA PROGRAMMING III

Capítulo 2
QUE ES CSS?

CSS es el acrónimo de Cascading Style Sheet.

Es un lenguaje de marcado que nos permite crear reglas que
definen propiedades visuales para nuestros elementos de HTML.
QUE ES CSS?

HTML: Qué queremos mostrar

CSS: Cómo lo queremos mostrar
QUE ES CSS?

Hasta ahora, hemos visto el “estilo por defecto” que otorga el

navegador. Por ejemplo:
 <strong> hace que el texto se muestre en negrita.
 <li> hace que aparezca un punto a modo de ítem, a la
izquierda del texto y una ligera identación, la cual puede
variar en distintos navegadores.
…

Esto sucede en todos los navegadores. El problema como

vemos es que no todos definen los estilos exactamente de la
misma manera.
CONCEPTOS DE CSS

En CSS estaremos utilizando estos dos conceptos:

• Seleccionar elementos
• Definir como queremos que se vean
EJEMPLO DE CSS
Hay múltiples formas de añadir CSS a nuestra página. Una es
utilizando el elemento <style> dentro de nuestro HTML, por ejemplo:

<style>
h1 {
color:red;
}
</style>

De este modo le indicamos al navegador que coloree el texto de

todos los elementos h1 en color rojo. Para ello usamos la propiedad
"color" y establecemos su valor a "red".

Siempre que se use el elemento "style" debe estar anidado dentro del
elemento “head”.
PROPIEDADES - COLOR

La propiedad color se puede usar en cualquier elemento.

Aunque principalmente se usa para modificar el color del texto,
esta no es su única función.
Existen múltiples formas de especificar el color, aquí veremos
tres, mediante su:
 Valor hexadecimal: #faf o #ffaaff
 Valor RGB (Red, Green, Blue): rgb(255, 160, 255) o rgb(100%,
62.5%, 100%). Dónde rgb(0, 0, 0) es el color negro y por el
contrario, rgb(255, 255, 255) es el blanco.
 Valor RGBA (RGB + Alpha): rgba(255, 160, 255, 1) or rgba(100%,
62.5%, 100%, 1). El valor Alpha tiene que estar comprendido entre
[0-1] y hace referencia a la transparencia del elemento, siendo 1 =
opaco y 0 = transparente.
UNIDADES RELATIVAS

Relativas (em): Se llaman así porque son unidades relativas al

dispositivo sobre el que se está viendo la página web, que
dependiendo de cada usuario puede ser distinto, tales como
computadoras, tabletas o teléfonos móviles.
Las unidades relativas son más aconsejables, porque se
ajustarán mejor al medio con el que el usuario está accediendo
a nuestra web.

1em = 16px
(en relación al tamaño de la fuente actual)
UNIDADES ABSOLUTAS

Absolutas (px): Las unidades absolutas son medidas fijas, que

deberían verse igual en todos los dispositivos.
Pese a que en principio pueden parecer más útiles, puesto que
se verían en todos los sistemas igual, tienen el problema de
adaptarse menos a las distintas particularidades de los
dispositivos que pueden acceder a una web y restan
accesibilidad a nuestro sitio.
Se aconseja utilizar, por tanto, medidas relativas.
PROPIEDADES - FUENTE

Para modificar la fuente (font) tenemos distintas propiedades:

 font-size: permite especificar el tamaño de la fuente (px, em,

rem).
 font-style: permite darle estilo a la fuente (ejemplo: normal
o italic).
 font-family: establece una lista de fuentes (arial, helvetica,
sans-serif, etc).
 font-weight: permite especificar el ancho de la fuente (bold,
400, 600, ...).
 font: atajo para establecer varias propiedades.
PROPIEDADES - FUENTE

font-family
Sólo se pueden especificar fuentes que tenga el usuario instaladas en su
sistema operativo. ¿Pero cómo sabemos cuales son?. Existen algunas
fuentes que se considera seguras y que por tanto podemos contar con
que estarán disponibles en casi cualquier sistema operativo.
Además de esto podemos introducir una lista de fuentes separadas por
comas. De este modo en caso de que no se encuentre la primera fuente
especificada se intentará con las posteriores.

Aquellas fuentes que tengan nombres compuestos (con espacios)

deben ir encerradas entre comillas dobles
PROPIEDADES - TEXTO

Para modificar el texto (text) tenemos mas propiedades:

 text-align: para alinear el texto (left, right, center, justify).
 text-decoration: permite añadir un subrayado, tachar una
palabra, etc. (ejemplos: underline, line-through)
 text-transform: permite transformar en mayúsculas,
minúsculas, etc. (ejemplos: uppercase, lowercase)
 line-height: permite ajustar el interlineado usando unidades
como vimos previamente (px, em, rem, etc).
OTRAS PROPIEDADES
 background-color: Color del fondo del elemento.
 background-image: Permite especificar una imagen de fondo.
 background-repeat: Permite usar una imagen a modo de
mosaico en diferentes modalidades.
 box-shadow: Crea un efecto de sombra para un elemento.
 border: Añade un borde a un elemento y establece algunas
propiedades (grosor, estilo de línea, etc.)
 border-color: Color del borde.
 border-style: Diferentes estilos para el borde (sólido, puntos,
etc.)
 border-radius: Permite crear esquinas redondeadas para un
elemento.
 Muchas más!
FORMAS DE AÑADIR CSS

Tenemos tres formas de añadir estilos a nuestro HTML:

 ESTILOS EN LINEA
 ESTILOS INTERNOS
 ESTILOS EXTERNOS
ESTILOS EN LINEA
Esta forma de aplicar estilos, se debe evitar siempre que sea
posible ya que es una mala práctica.
A cualquier etiqueta HTML puedes añadirle la propiedad "style" y
dentro de ella añadir tantos estilos como desees separados por
punto y coma, por ejemplo:

Esta práctica no es recomendada ya que complica el

mantenimiento de los estilos de tu página incitándote a escribir
más código del necesario.
ESTILOS INTERNOS

Este es el ejemplo que hemos visto hasta ahora, añadiendo la

etiqueta <style> dentro del <head> de nuestra página HTML.

La desventaja es que en este caso las reglas sólo son visibles para
esa página concreta en las que se han declarado y no se pueden
usar en otros archivos.
ESTILOS EXTERNOS

La forma recomendada (siempre) de aplicar estilos: creando un

fichero con extensión “.css” e indicarle al navegador que cargue
dicho fichero. Para ello usaremos un elemento auto-contenido
llamado <link> del siguiente modo:

En este caso, la declaración también se incluye dentro del

elemento <head>.
En el caso de existir un conflicto por haber diferentes reglas con
igual selector en varios ficheros, las reglas de los ficheros
siguientes sobreescriben los anteriores.
LOS SELECTORES

Un selector es la forma en la que elegimos a que elementos

queremos asignarle atributos visuales con CSS
Los selectores pueden ser generales o particulares. Puedo
seleccionar varios elementos o tan solo uno y de forma muy
particular.
 ID: Asignando un identificador (único) al elemento: para ello
añadiremos la propiedad id="valor" a la etiqueta.
 CLASS: Asignando una o varias clases al elemento: en este
caso usaremos la propiedad class="valor1 valor2 ...".
LOS SELECTORES

• Tipo de etiqueta
h1 {
color: white;
}

• Por clase
.rojo {
color: red;
}

• Por ID
#principal {
color: blue;
}
HERENCIA DE ESTILOS

La palabra CSS viene de Cascading StyleSheets, esto quiere

decir: Hojas de Estilo en Cascada.
La palabra cascada hace referencia a una propiedad muy
importante de las hojas de estilo, y es que los estilos aplicados a
un elemento padre son heredados por su hijo.
En este caso el color de todas las
etiquetas <p> será verde.
Ocurre lo mismo si la misma regla está definida
en dos hojas CSS distintas que hayan sido
cargadas usando la etiqueta <link>, en este
caso prevalece el estilo definido en la última
hoja cargada.
PREDOMINANCIA DE ESTILOS ESPECIFICOS

Ya hemos visto que podemos aplicar los estilos de tres formas.

Estas formas son de menos a más específicas:
 Por nombre de etiqueta.
 Por clase (class).
 Por identificador (id).
MODELO DE CAJAS

Las cajas se crean automáticamente al definir cada elemento

HTML.
MODELO DE CAJAS
MODELO DE CAJAS

PADDING:
 El padding define el espacio entre el borde y el contenido.
 El padding es transparente.

BORDER:
 El border permite especificar el estilo del borde del elemento.

MARGIN:
 El margin define el espacio alrededor de los elementos.
 El margin es transparente.
EJEMPLO DE MODELO DE CAJAS
EJEMPLO DE MODELO DE CAJAS

¿El ancho es realmente 300px?

¡La respuesta es NO!

 El ancho total de un element debe ser calculado como:

Ancho total = width + left padding + right padding + left border
+ right border + left margin + right margin

 El alto total de un element debe ser calculado como:

Total element height = height + top padding + bottom padding
+ top border + bottom border + top margin + bottom margin

Entonces…
300px + (25px)*2 + (25px)*2 + (25px)*2 = 450px
EJERCICIO - CSS3

Añadir estilos al código HTML que creamos en el capítulo

anterior.
Estos estilos deben alojarse en una hoja externa!
PSEUDO-CLASES

Una pseudo-clase CSS es una palabra clave añadida a un selector

que especifica un estado especial del elemento o elementos
seleccionados.
A continuación, presentamos su sintaxis:
PSEUDO-CLASES

Las pseudo-clases permiten aplicar un estilo a un elemento no

sólo en relación con el contenido de la estructura del
documento, sino también en relación a los factores externos,
como por ejemplo:
 la historia del navegador (:visited por ejemplo),
 el estado de su contenido (como :checked en ciertos
elementos del formulario),
 o la posición del mouse (como :hover, que le permite saber si
el mouse está sobre un elemento o no).
PSEUDO-CLASES

Respetar el orden LVHA:

:link- :visited- :hover- :active.
LAS TRANSICIONES

Las transiciones permiten cambiar los valores de las propiedades

suavemente (de un valor a otro), durante una duración
determinada.

Para crear un efecto de transición, se deben especificar dos

cosas:
 La propiedad CSS a la que desea agregar un efecto
 La duración del efecto (Si la duración no se especifica, la transición no
tendrá ningún efecto, ya que el valor predeterminado es 0)

La transición de pasar de un ancho

de 100px a uno de 300 px tomará
5 segundos.
LAS ANIMACIONES

¡Permiten la animación de la mayoría de los elementos HTML

sin usar JavaScript o Flash!

Las animaciones CSS3 permiten animar la transición entre un

estilo CSS y otro.
Constan de dos componentes:
 propiedades CSS de las animaciones, que definen el
comportamiento de la misma
 un conjunto de fotogramas que indican su estado inicial y
final, así como posibles puntos intermedios en la misma.
LAS ANIMACIONES

Esta animación cambia el

color del div en un período
de tiempo de 4 segundos.
Siempre indicar la unidad del
tiempo (incluso si es 0
segundos, esto es, 0s).
LAS ANIMACIONES
LAS ANIMACIONES

FOTOGRAMAS (KEYFRAMES)
Para definir los fotogramas de una animación utilizaremos la
regla @keyframes, la cuál es muy sencilla de utilizar y se basa
en el siguiente esquema:
ANIMACIONES

FOTOGRAMAS (KEYFRAMES)

from and to representan 0% y 100%

También es posible utilizar el porcentaje para agregar tantos cambios

de estilo como se desee.