Seminario - Diseño básico con hojas de estilos en cascada: CSS

Dpto. de Ingeniería de Telecomunicación
Área de Ingeniería Telemática
Universidad de Jaén
Escuela Politécnica Superior de Linares
Versión 1
2.020

Versión 1
2.020
Diseño básico con hojas de estilos en cascada 2Seminario
Competencias
Código Denominación de la competencia
C.7
Conocimiento y utilización de los fundamentos de la programación en redes, sistemas y servicios de
telecomunicación.
CB.4
Que los estudiantes puedan transmitir información, ideas, problemas y soluciones a un público tanto
especializado como no especializado.
CG.3
Conocimiento de materias básicas y tecnologías, que le capacite para el aprendizaje de nuevos
métodos y tecnologías, así como que le dote de una gran versatilidad para adaptarse a nuevas
situaciones.
CG.9
Capacidad de trabajar en un grupo multidisciplinar y en un entorno multilingüe y de comunicar, tanto
por escrito como de forma oral, conocimientos, procedimientos, resultados e ideas relacionadas con
las telecomunicaciones y la electrónica.

Versión 1
2.020
Resultados del aprendizaje
Código Descripción
5
Fomentar los trabajos grupales, así como la transmisión de procedimientos, resultados e
ideas en el ámbito de las telecomunicaciones.
7
Se adquiere la noción de organización en capas para resolver un problema de comunicación
entre dos partes, presentando los principales paradigmas de la arquitectura de red.
10
El alumno distinguirá y relacionará los conceptos de servicio y aplicación en el ámbito de las
comunicaciones; además asimilará los detalles vinculados con los servicios de
telecomunicación más populares y las aplicaciones y protocolos que los soportan. Describir
los principales servicios y aplicaciones de Internet.
20
Adquirir facilidad para el manejo de especificaciones, reglamentos y normas de obligado
cumplimiento.

Versión 1
2.020
Resultados del aprendizaje
Código Descripción
21
Conocer materias básicas y tecnológicas que capaciten para el
aprendizaje de nuevos métodos y tecnologías.
22 Dotar de una gran versatilidad para adaptarse a nuevas situaciones.
23
Analizar y valorar el impacto social y medioambiental de las soluciones
técnicas.
24 Trabajar en un grupo multidisciplinar y en un entorno multilingüe.
25
Comunicar, tanto por escrito como de forma oral, conocimientos,
procedimientos, resultados e ideas relacionadas con las
telecomunicaciones y la electrónica.

Versión 1
2.020
Contenido
1. Introducción.
1. Justificación del uso
de CSS
2. Integrar CSS en
documentos HTML
2. Definiendo estilos
1. Sintaxis
1. Comentarios
2. Selectores
2. Unidades.
1. Unidades absolutas
2. Unidades relativas
3. Propiedades
1. Modelo de caja
2. Propiedades de
tamaño
3. Propiedades de
relleno
4. Propiedades sobre
los bordes
5. Propiedades para
ajustar los
márgenes
6. Colores
7. Texto
8. Fuente
9. Propiedad display
10. Propiedad position
11. Propiedad float
12. Propiedad clear
13. Propiedad overflow
14. Opacidad
4. Alineación de
elementos
5. Aplicación de estilos

Versión 1
2.020
Bibliografía
Bibliografía básica
• Cravens, J., “HTML5 hacks”. O'Reilly Media
• Gauchat, J.D., “El gran libro de HTML5, CSS3 y JavaScript”.
Marcombo

Versión 1
2.020
Bibliografía
Bibliografía complementaria
• w3schools.com, “HTML Tutorial”. URL:
https://www.w3schools.com/html/default.asp
• Mozilla Developer Network, “HTML”. URL:
https://developer.mozilla.org/es/docs/Web/HTML

Versión 1
2.020
Introducción
• Con HTML se ha perseguido desligar completamente (o casi)
cómo se estructura y almacena la información, de cómo se
representa en el navegador.
• El estándar para definir cómo representar un documento HTML
es a través de la definición de estilos con el lenguaje CSS (del
inglés Cascading Style Sheets).
• Con CSS se define cómo se representará un documento HTML en un
navegador, en papel o en cualquier otro medio.
• Los estilos se pueden incorporar al código HTML (marca <style>) o a
través de ficheros externos.
• Facilitan la representación del código HTML ya que un mismo fichero de
estilos puede ser compartido por múltiples páginas web simultáneamente.

Versión 1
2.020
Introducción
Justificación del uso de CSS
• En principio HTML se creó para contener información, no para
preocuparse en cómo representarla.
• En la versión HTML 3.2 se añadieron marcas como <font> y atributos de
color, lo que supuso una pesadilla para el diseño de grandes portales.
• Con la definición de estilos en ficheros externos al código HTML
se consigue:
• Consistencia entre las páginas de un sitio.
• Ahorro de tiempo: solamente hay que modificar un fichero y todas las
páginas se adaptarán a su nuevo aspecto una vez se recarguen.
• Con CSS una web puede adaptarse a diferentes dispositivos sin cambiar
una letra del HTML.

Versión 1
2.020
Ejemplo sin CSS de HTML 4
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
</head>
<body>
<h1>
<font color="red" face="Arial" size="5">Texto</font>
</h1>
<p>
<font color="gray" face="Verdana" size="2">Párrafo</font>
</p>
</body>
</html>
Introducción

Versión 1
2.020
Ejemplo CSS en el mismo documento HTML
Introducción
<html>
<head>
<style type="text/css">
h1 {color:red; font-family:Arial; font-size:large; }
</style>
</head>
<body>
<h1>Texto</h1>
<p style="color:gray; font-family:Verdana; font-size:medium;">
Parrafo
</p>
</body>
</html>
en línea
interno

Versión 1
2.020
Introducción
Integrar CSS en documentos HTML
• En línea: incluir CSS en los elementos HTML.
• A través del atributo global style (ejemplo anterior con la marca <p>).
• Solamente afecta al elemento que incluye ese atributo.
• No es práctico para proyectos grandes. Es útil para pruebas.
• Interno: incluir CSS en el mismo documento HTML
• A través de la definición en la cabecera con un bloque <style> (ejemplo anterior con el
selector h1).
• Permite aplicar el mismo estilo a través de los selectores (tipo de elemento, por id, class,…)
• Permite una mejor revisión y modificación del documento.
• Obliga a copiar los bloques entre diferentes archivos si se quieren emplear los mismos
estilos.
• Externo: definir CSS en un archivo externo.
• A través del elemento <link> de la cabecera del documento HTML. (ver a continuación)
• Nota: por defecto, los navegadores aplican ciertos estilos básicos para permitir la
visualización (como los márgenes).

Versión 1
2.020
Definir CSS en un archivo externo
<html>
<head>
<link rel="stylesheet" type="text/css"
href="estilos.css" media="screen"/>
</head>
<body>
<h1>Texto</h1>
<p>Parrafo</p>
</body>
</html>
Introducción
• Archivos de estilos css:
• El archivo enlazado puede ser
local o remoto (es una URL).
• Es un archivo de texto plano.
h1 {
color:red;
font-family:Arial;
font-size: large;
}
p {
color:gray;
font-family:Verdana;
font-size: medium;
} estilos.css
externo

Versión 1
2.020
Definir CSS en un archivo externo
• El atributo type no es necesario en HTML5, por defecto es
siempre "text/css".
• El atributo media especifica para qué medio o dispositivo está
optimizado el recurso.
• Permite operadores (and, not y ‘,’ que es un or)
• Dispositivos: all, print, screen, speech.
• Valores: aspect-ratio, color, orientation, height, width,…
Introducción
Atributos útiles

Versión 1
2.020
Orden de aplicación de estilos - cascada
• Los estilos se aplican en
cascada siguiendo el siguiente
orden de prioridad (más
prioritarios primero):
1. Estilos en línea.
2. Estilos internos o externos.
1. Tiene más prioridad el que está
declarado después en la sección
<head>, es decir, el último leído.
3. Estilos por defecto del navegador.
Introducción
<html>
<head>
<link rel="stylesheet“
href="estilos/basico.css">
<style>
h1{color:blue;}
</style>
</head>
<body>
<h1>Como <style> está después
prevalece</h1>
<h1 style="color:green;">Como es un estilo
en línea prevalece frente a los demás</h1>
</body>
</html>
Visualización en Firefox

Versión 1
2.020
Definiendo estilos
Sintaxis
• Los estilos se definen con reglas
• Una regla consta de un selector y
un bloque de declaración.
h1 {color:red; font-size:large;}
Selector
Propiedad
Declaración Declaración
Bloque de declaración
Valor Propiedad Valor
• El selector marca el
elemento HTML que si
quiere reciba el estilo.
• El bloque de declaración
puede contener una o
varias declaraciones.
• Siempre se delimita entre
llaves ‘{‘ y ‘}’.
• Una declaración marca el
estilo que se aplica al
elemento especificado en el
selector.:
• Incluye una propiedad
CSS y un valor separados
por los dos puntos ‘:’.
• Siempre debe terminar con
punto y coma ‘;’.

Versión 1
2.020
Comentarios
• Los ficheros CSS también pueden
incluir comentarios:
• Su cometido es explicar el código y
facilitar su interpretación y
mantenimiento.
• El texto de un comentario se encierra
entre los símbolos /* y */.
• Los comentarios pueden extenderse
por múltiples líneas.
Sintaxis
Definiendo estilos
p {
color: red;
/* Comenatio de una linea */
text-align: center;
}
/* Este es un
Comentario
multilinea*/

Versión 1
2.020
Selectores
• Los selectores se emplean para encontrar o seleccionar los
elementos HTML a los que se quiere aplicar un estilo.
• Se pueden dividir en cinco categorías:
• Simples: seleccionan elementos basados en su nombre, id o clase.
• Combinados: seleccionan elementos que guardan cierta relación entre sí.
• Pseudo-clase: selecciona elementos basándose en ciertos estados.
• Pseudo-elementos: seleccionan y aplican el estilo a una parte de un
elemento.
• De atributos: selecciona elementos basándose en un atributo o el valor de
dicho atributo.
Sintaxis
Definiendo estilos

Versión 1
2.020
Selectores
• Selector CSS de elemento.
• El selector coincide con el nombre de un elemento HTML.
• Selector CSS atributo id.
• El atributo id debe ser único en la página.
• El selector comienza con almohadilla #.
• Se selecciona el elemento cuyo id es igual que el especificado en el selector
sin la almohadilla.
• Selector CSS atributo class.
• El selector se precede con un punto ‘.’
• Se seleccionan los elementos cuyo atributo class contiene el valor del
selector (sin el punto inicial).
• Se puede especificar una clase para solamente un tipo de elementos HTML:
el elemento se pone al inicio del selector.
• Los elementos HTML pueden tener varias clases, separándolas con espacios.
<p class="center large">
Sintaxis
Definiendo estilos
Simples
p {
text-align: center;
}
#principal {
text-align: center;
}
.noticia {
text-align: center;
}
p.noticia {
text-align: center;
}

Versión 1
2.020
Selectores
• Selector universal (asterisco ‘*’)
• Selecciona todos los elementos HTML en la
página.
• El selector de agrupación.
• Separar selectores con comas ‘,’.
• Permite agrupar selectores para aplicarles el
mismo estilo y minimizar el código.
Sintaxis
Definiendo estilos
Simples
* {
text-align: center;
}
h1, h2, p {
text-align: center;
color: red;
}

Versión 1
2.020
Selectores
• Selector de descendiente.
• Se separan por un espacio: a b {…}
• Selecciona todos los elementos HTML del tipo
<b> en la página dentro de elementos tipo <a>
aunque no sea un hijo directo.
• El selector de hijo.
• Separar selectores con ‘>’: a > b {…}
• Selecciona todos los elementos HTML de tipo <b>
que son hijos directos dentro de la página
elementos tipo <a>.
Sintaxis
Definiendo estilos
Combinados
div p {
background-color: grey;
}
div > p {
}

Versión 1
2.020
Selectores
• Selector de hermano adyacente.
• Se separan por un signo ‘+’: a + b {…}
• Selecciona todos los elementos HTML del tipo <b>
en la página que están ubicados inmediatamente
después de un elementos tipo <a>.
• Selector de hermanos.
• Separar selectores con ‘~’: a ~ b {…}
• Selecciona todos los elementos HTML de tipo <b>
que son hermanos (en el mismo nivel del árbol) de
elementos tipo <a>.
Sintaxis
Definiendo estilos
Combinados
div + p {
}
div ~ p {
}

Versión 1
2.020
Selectores
• Se reconocer porque se añaden al selector
separados por los dos puntos:
selector:pseudo-clase {…}.
• Se pueden combinar con las clases:
• .clase:pseudo-clase {…}
• elemento.clase:pseudo-clase {…}
• No son sensibles a mayúsculas y
minúsculas.
Sintaxis
Definiendo estilos
Pseudo-clases
a:hover{
}
.intense:hover{
}
a.intense:hover{
}

Versión 1
2.020
Selectores
• Pseudo-clases de enlaces:
• link: enlace sin visitar (puede ser empleado en todos los
elementos, no solo en enlaces).
• visited: enlace visitado.
• hover: el cursor del ratón está encima de un enlace (puede
ser empleado en todos los elementos, no solo en enlaces).
• active: enlace activo (puede ser empleado en todos los
elementos, no solo en enlaces).
• Nota: a:hover debe ir justo después de a:link y
a:visited en la definición CSS para que sea
efectiva. De igual forma a:active debe ir justo
después de a:hover para tener efecto.
Sintaxis
Definiendo estilos
Pseudo-clases
a:link {
color: #FF0000;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF00FF;
}
a:active {
color: #0000FF;
}

Versión 1
2.020
Selectores
• Otros ejemplos:
• first-child: elige el elemento que es el primer
hijo de cualquier otro elemento.
• last-child: igual que el anterior siendo el último
hijo.
• nth-child(n): estilo aplicable al hijo n-ésimo.
• Nota: Listado completo en
https://www.w3schools.com/css/css_pseudo_
classes.asp.
Sintaxis
Definiendo estilos
Pseudo-clases
/*Cualquier elemento p que es el
primer hijo*/
p:first-child {
color: blue;
}
/*Cualquier elemento p que sea el
primer hijo dentro de un elemento
div*/
div p:first-child {
color: blue;
}
/*Todos los elementos i dentro de un
elemento p que sea el primer hijo de
cualquier otro elemento*/
p:first-child i {
color: blue;
}

Versión 1
2.020
Selectores
• Se emplean para proporcionar un estilo a una parte
específica de un elemento:
• Por ejemplo: la primera letra o línea de un elemento.
• También permiten añadir contenido antes, después o incluso dentro
de un elemento.
• Los pseudo elementos pueden tener restricciones en cuanto
a qué elementos aplicarlos, así como de las propiedades
que se les pueden aplicar.
• Sintaxis:
selector::pseudo-elemento {propiedad:valor;}
• En CSS 1 y 2 se empleaban solamente ‘:’.
• También pueden ser combinados con clases.
• Pueden combinarse varios pseudo elementos, como en el
ejemplo de la derecha.
Sintaxis
Definiendo estilos
Pseudo elementos
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
p::first-letter {
color: #ff0000;
font-size: xx-large;
}

Versión 1
2.020
Selectores
• Inserción de contenido con pseudo elementos:
• before: inserta contenido antes del propio
contenido del elemento.
• after: inserta contenido antes del propio
contenido del elemento.
• selection: marca la porción de un elemento
que está seleccionando el usuario.
• Solamente se le pueden aplicar las propiedades:
color, background, cursor y outline.
Sintaxis
Definiendo estilos
Pseudo elementos
/*Inserta una imagen antes
del contenido de un
encabezado h3*/
h3::before {
content: url(check.gif);
}
/*Inserta siempre un punto al
final de un encabezado h3*/
h3::after {
content: ".");
}
::selection {
color: red;
background: yellow;
}

Versión 1
2.020
Selectores
• Permiten seleccionar elementos a los que
aplicar estilos que tienen ciertos atributos y/o
valores de atributos concretos.
• Selector CSS [atributo]: aplica el estilo a los
elementos que tengan definido el atributo,
independientemente de su valor.
• Selector CSS [atributo = "valor"]: aplica el estilo
a los elementos que tengan definido el atributo,
independientemente de su valor.
Sintaxis
Definiendo estilos
De atributos
a[target] {
background-color: yellow;
}
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}

Versión 1
2.020
Selectores
• Selector CSS [atributo ~= "valor"] selecciona a los
elementos en los que el atributo contenga la
palabra exacta especificada como valor.
• Selector CSS [atributo |= "valor"] selecciona a los
elementos en los que el atributo comienza con la
palabra especificada como valor.
• La coincidencia será con la palabra entera o antes de un
guion,
• Selector CSS [atributo ^= "valor"] selecciona a los
elementos en los que el atributo comienza con la
palabra especificada como valor, sin tener que ser
la palabra completa.
Sintaxis
Definiendo estilos
De atributos
input[title~=“alerta"] {
background-color: red;
}
/*Pone el fondo rojo a todos
los elementos cuya clase
comience por “top” o “top-” */
[class|=“top"] {
}
comience por “top” como
“topmost” o “top1”*/
[class^=“top"] {
}

Versión 1
2.020
Selectores
• Selector CSS [atributo $= "valor"]
selecciona a los elementos en los que el
atributo termina con la cadena
especificada como valor (no tiene que
coincidir con la palabra completa).
• Selector CSS [atributo *= "valor"]
selecciona a los elementos en los que el
atributo contenga como sub-cadena la
palabra especificada como valor.
Sintaxis
Definiendo estilos
De atributos
finalice con la palabra “top” ,
como “lefttop”, “atop” o “right-
top*/
[class$=“top"] {
}
contenga la palabra “top” ,
como “topleft”, “atop” o
“righttop*/
[class*=“top"] {
}

Versión 1
2.020
Definiendo estilos
Unidades
• En CSS se emplea diferentes unidades para expresar la
dimensión de diversas propiedades (por ejemplo: width,
margin, padding, font-size).
• Una dimensión es un número seguido de una unidad.
• No está permitido que añadir espacios entre la magnitud (número) y la
unidad.
• Si el valor es 0, la unidad se puede omitir.
• Algunas propiedades permiten valores negativos.
• Existen dos tipos de medidas: absolutas y relativas.

Versión 1
2.020
Unidades absolutas
• Las unidades absolutas son fijas y
una dimensión expresada con estas
unidades siempre aparecerá
exactamente de este tamaño.
• No se recomienda su uso en
pantallas, dada la gran variedad de
tamaños y resoluciones.
• Su aplicación es más apropiada para
otros dispositivos con medidas estándar,
como las impresoras.
Unidades
Definiendo estilos
Unidades Description
cm centímetros
mm milímetros
in
pulgadas (1in = 96px =
2,54cm)
px * píxeles (1px = 1/96 de 1in)
pt puntos (1pt = 1/72 de 1in)
pc picas (1pc = 12 pt)
*: Los píxeles (px) son relativos al dispositivo de
visualización. Para dispositivos de poca densidad
(low-dpi), 1px es un pixel de la propia pantalla. Para
impresoras y pantallas de alta resolución, 1px
implica varios pixeles del dispositivo.

Versión 1
2.020
Unidades relativas
• Las unidades relativa expresan una
dimensión relativa a otra propiedad
de dimensión.
• Se comportan mejor ante la
representación en diferentes medios.
• Las unidades em y rem permiten crear
diseños perfectamente escalables.
Unidades
Definiendo estilos
*: viewport (vista) es el tamaño de
la ventana del navegador. Si la
ventana es de 50cm, 1vw = 0,5cm.
Unidades Descripción
em
Relativo al tamaño de la fuente de un elemento (2em
significa el doble del tamaño de la fuente actual)
ex
Relativo a la altura (x) de la fuente actual (poco
usado)
ch Relativo a la anchura del "0" (cero)
rem
Relativo al tamaño de la fuente del elemento raíz.
vw Relativo al 1% de la anchura de la vista (viewport*)
vh Relativo al 1% de la altura de la vista (viewport)
vmin
Relativo al 1% de la dimensión más pequeña de la
vista (viewport)
Relative to 1% of viewport's* smaller dimension
vmax
Relativo al 1% de la dimensión más extensa de la
vista (viewport)
% Relativo al elemento padre

Versión 1
2.020
Unidades relativas
Unidades
em, ex, %, px, cm,
mm, in, pt, pc
1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 9.0* 19.0 6.0 20.0
vmax 26.0 No soportado 19.0 7.0 20.0
Unidades
Definiendo estilos
Soporte de navegadores
Los números de la tabla
especifican la primera
versión que soportaba
completamente las
unidades.
Nota: Internet Explorer 9
soporta vmin con el
nombre no estándar: vm.

Versión 1
2.020
Definiendo estilos
Propiedades
• Representan el núcleo fundamental de CSS.
• Existen un gran variedad de propiedades.
• Algunos autores las separan entre:
• Propiedades de formato: controlan el aspecto de los elementos y su contenido.
• Propiedades de diseño: se encargan del tamaño y posición de los elementos.
• Tipos de propiedades:
• Fuente.
• Colores.
• Tamaño.
• Fondo.
• Bordes.
• …
• Ver la lista completa en: https://www.w3schools.com/cssref/default.asp

Versión 1
2.020
• Es importante conocer cómo
se aplican las dimensiones a
los elementos con CSS.
• Todo ocupa su espacio,
incluso el borde.
• Ejemplo:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Este div tendrá 350px de anchura.
Modelo de caja
Propiedades
Definiendo estilos
Margen
Borde
Relleno (padding)
Contenido

Versión 1
2.020
Propiedades de tamaño
• Para establecer el tamaño del contenido de un
elemento están las propiedades width y height.
• La anchura y la altura no incluyen los bordes, márgenes o
relleno.
• Valores para los atributos de width y height:
• auto – Este es el valor por defecto. En este caso el
navegador calcula la altura y la anchura.
• length – Se define una dimensión empleando cualquiera de
las unidades vistas (px, cm, etc.)
• % - Define la altura y la anchura como un porcentaje del
block contenedor.
• initial – Establece la altura y la anchura a su valor inicial.
• inherit – Se hereda de su padre.
Propiedades
Definiendo estilos
div {
height: 200px;
width: 50%;
background-color: blue;
}

Versión 1
2.020
Propiedades de tamaño
• La propiedad max-width marca la anchura
máxima de un elemento.
• Se le puede asignar una valor con dimensión (con
unidades) o un porcentaje del bloque contenedor.
• Por defecto no toma valor (none), lo que significa que
el elemento no tiene limitaciones de anchura.
• Existe igualmente para la altura (max-height)
y en valores mínimos (min-width y min-
height).
Propiedades
Definiendo estilos
div {
max-width: 500px;
height: 100px;
background-color: blue;
}

Versión 1
2.020
Propiedades de relleno
• El relleno se emplea para definir un espacio entre el contenido y el
borde (aunque no haya ninguno visible).
• La propiedad padding define un relleno por igual en todas
direcciones.
• No se permiten valores negativos.
• También se pueden especificar para cada dirección por separado:
padding-top, padding-right, padding-bottom y padding-
left.
• Los márgenes pueden tomar estos valores:
• Dimensión: se especifica con alguna unidad.
• %: indica un % de la anchura del elemento contenedor.
• inherit: se hereda de elemento padre.
• Dado que el tamaño de un elemento incluye el relleno, cuando se
establece su anchura, si no se quiere que la anchura del elemento
resulte de la suma de ambos, se le puede establecer la propiedad:
box-sizing: border-box;
Propiedades
Definiendo estilos
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
/*Este div sin box-sizing
tendría una anchura total
de 480px, ahora solamente
400px*/
div {
div {
padding-left: 80px;
width: 400px;
box-sizing: border-box;
}

Versión 1
2.020
Propiedades de relleno
• Forma abreviada: permite especificar
dimensiones diferentes de relleno en cada
dirección en una sola propiedad:
• Cuatro valores: padding: arriba derecha abajo
izquierda;
• Tres valores: padding: arriba (derecha e
izquierda) abajo;
• Dos valores: padding: (arriba y abajo)
(derecha e izquierda)
Propiedades
Definiendo estilos
Forma abreviada
/*Top Right Bottom Left*/
div {
padding: 25px 50px 75px
100px;
}
/*Top Right-Left Bottom */
div {
padding: 25px 50px 75px;
}
/*Top-Bottom Right-Left*/
div {
padding: 25px 50px;
}

Versión 1
2.020
Propiedades sobre los bordes
• Como se ha visto, cada elemento se puede rodear por
bordes entre el relleno y el margen.
• La propiedad principal que hace que se muestre un borde
alrededor de un objeto es border-style.
• Esta propiedad define el tipo de borde que se mostrará: dotted,
dashed, solid, double, groove, ridge, inset, none y hidden.
• Las propiedades que definen otros aspectos del borde necesitan de
border-style para tener efecto. Estas son: border-width y
border-color:
• Para todas ellas se puede definir un estilo diferente para
cada orientación por este orden:
• Cuatro valores: arriba, derecha, abajo e izquierda.
• Tres valores: arriba (derecha e izquierda) abajo;
• Dos valores: (arriba y abajo) (derecha e izquierda);
Propiedades
Definiendo estilos
p.puntos {
border-style: dotted;
}
p.guiones {
border-style: dashed;
}
p.one {
border-style: solid;
border-width: 5px;
}
p.one {
border-style: solid;
border-color: red;
}

Versión 1
2.020
Propiedades sobre los bordes
• La propiedad border es un atajo que
permite definir en una sola propiedad
grosor del borde, tipo y color.
• También existen cuatro propiedades
para afectar solamente a uno de los
bordes: border-top, border-bottom,
border-right y border-left.
Propiedades
Definiendo estilos
Atajo border
p {
border: 5px solid red;
}
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}
p {
border-left: 6px solid red;
background-color: lightgrey;
}

Versión 1
2.020
Propiedades para ajustar los márgenes
• Los márgenes se emplean para definir un espacio vacío alrededor
de los elementos y más allá de los bordes.
• La propiedad margin define márgenes iguales en todas direcciones.
• También se pueden especificar para cada dirección por separado: margin-
top, margin-right, margin-bottom y margin-left.
• Los márgenes pueden tomar estos valores (pueden ser negativos):
• auto: lo calcula el navegador, centrando el elemento en su contenedor.
• Dimensión: se especifica con alguna unidad.
• %: indica un % de la anchura del elemento contenedor.
• inherit: se hereda de elemento padre.
• Los márgenes superior e inferior de elementos ubicados contiguos
en la vertical a veces se condensan en el valor mayor de ambos
(esto no sucede con el izquierdo y el derecho).
Propiedades
Definiendo estilos
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

Versión 1
2.020
Propiedades para ajustar los márgenes
• La forma abreviada permite especificar
dimensiones diferentes para los márgenes en
cada dirección en una sola propiedad:
• Cuatro valores: margin: arriba derecha abajo
izquierda;
• Tres valores: margin: arriba (derecha e
izquierda) abajo;
• Dos valores: margin: (arriba y abajo)
(derecha e izquierda);
Propiedades
Definiendo estilos
Forma abreviada
/*Top Right Bottom Left*/
p {
margin: 25px 50px 75px
100px;
}
/*Top Right-Left Bottom */
p {
margin: 25px 50px 75px;
}
/*Top-Bottom Right-Left*/
p {
margin: 25px 50px;
}

Versión 1
2.020
Colores
• En HTML/CSS es común referirse a un color por su nombre (hay
140 nombres de colores estándar): white, black, red, tomato,…
• También se puede denominar un color por su componentes RGB,
en hexadecimal o por matiz, saturación y luminosidad (Hue,
Saturation, Lightness o HSL):
• Por ejemplo, el color "Tomato" sería igual así:
• rgb(255, 99, 71)
• #ff6347
• hsl(9, 100%, 64%)
• También se puede emplear rgba(red, green, blue, alpha)
o hsla(hue, saturation, lightness, alpha), donde se
puede aplicar el valor al canal alpha que mide la transparencia
(0.0 completamente transparente, 1.0 totalmente opaco).
Propiedades
Definiendo estilos

Versión 1
2.020
Texto
• La propiedad color define el color del texto.
• La propiedad text-align define la alineación
del texto que puede ser a la izquierda, derecha,
centrada o justificada (left, right, center
y justify).
• La propiedad text-decoration permite poner
o quitar elementos de decoración al texto, como
subrayados o tachados.
• La propiedad text-transform permite cambiar
entre mayúsculas (uppercase o minúsculas
(lowercase) o poner en mayúscula la primera
letra de cada palabra (capitalize)
Propiedades
Definiendo estilos
body {
color: red;
}
h1 {
text-align: center;
}
p.strike {
text-decoration: line-
through;
}
p.lowercase {
text-transform:
lowercase;
}

Versión 1
2.020
Fuente
• La propiedad font-family define la
tipografía.
• La propiedad font-style define la
inclinación de la escritura, normalmente
usada para escribir en cursiva (italic).
• La propiedad font-size define el tamaño
del texto, tanto de manera absoluta como
relativa (1em = 16px).
• La propiedad font-weight pone el texto en
negrita (bold).
Propiedades
Definiendo estilos
p {
font-family: "Times New
Roman", Times, serif;
}
p.italic {
font-style: italic;
}
h2 {
font-size: 30px;
}
p {
font-size: 0.875em;
}
p.thick {
font-weight: bold;
}

Versión 1
2.020
Propiedad display
• La propiedad display define si un elemento debe
visualizarse y cómo lo hace.
• La mayoría de los elementos están entre dos
posibilidades por defecto: en línea (inline) y o de
bloque (block).
• Elementos de bloque: siempre comienzan en una nueva
línea e intentan ocupar todo la anchura disponible.
• Elementos en línea: no comienzan en una línea nueva e
intentan ocupar solamente el espacio necesario para su
representación.
• El valor none oculta un elemento, la página se
muestra como si no estuviera, pero no se destruye
en el DOM.
• visibility:hidden; también oculta un elemento, pero
este sigue ocupando el mismo espacio en la página.
Propiedades
Definiendo estilos
/*Esto se suele hacer para
emplear listas como menús
horizontales*/
li {
display: inline;
}
/*Normalmente a es inline*/
a {
display: block;
}
h1.hidden {
display: none;
}

Versión 1
2.020
Propiedad display
• Otros valores interesantes para la propiedad display son:
• inline-block: muestra el elemento como si fuera inline, pero permite el uso de
propiedades para cambiar su tamaño con width y height.
• table: muestra el elemento como si fuera una tabla
• flex o inline-flex: permite convertir el elemento en un contenedor flexible.
• Existen otras muchas posibilidades: contents, grid, inline-
grid, inline-table, list-item, run-in, table-caption,
table-column-group, table-header-group, table-footer-
group, table-row-group, table-cell, table-column, table-
row, initial, inherit
Propiedades
Definiendo estilos

Versión 1
2.020
Propiedad position
• La propiedad position, cuando se especifica puede tomar
estos valores: static, relative, fixed, absolute y sticky.
• Por defecto la posición es static.
• Esta propiedad se complementa con las propiedades top, bottom,
left y right, pero no tienen efecto si no se especifica position,
además, funcionan diferente en función del valor de position.
• Solapamiento: si dos elementos ocupan el mismo espacio,
normalmente consecuencia de un desplazamiento, el orden en
que se pintarán será primero los de nivel inferior en la pila y
más abajo en el código.
• Esto se puede controlar con la propiedad z-index (solo funciona con
position: absolute, position: relative, position: fixed, o
position: sticky) que marca la colocación del elemento en el eje z.
• Los valores más altos se pintarán sobre valores más bajos.
Propiedades
Definiendo estilos
div.static {
position: static;
border: 3px solid #73AD21;
}
/*z-index puede ser negativo*/
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

Versión 1
2.020
Propiedad position
• static: el elemento se posiciona siguiendo el flujo normal de la
página y no se afecta por top, bottom, left y right.
• relative: el elemento se posiciona según su posición original. Si se le
asigna valor a top, bottom, left y right se desplazará según se
indique. Los demás elementos no ocuparán el espacio dejado por él.
• fixed: el elemento se posiciona según la ventana del navegador, por
lo que siempre se encontrará en el mismo lugar aunque la página se le
haga scroll. Con top, bottom, left y right se desplazará según se
indique. Un elemento fijo no deja ningún hueco en el lugar que él
hubiera estado normalmente colocado.
Propiedades
Definiendo estilos
Posicionamiento

Versión 1
2.020
Propiedad position
• absolute: el elemento se posiciona de manera relativa al ancestro
más próximo POSICIONADO, si no hay, usa el cuerpo del documento
y se mueve con el scroll de la página. Si se le asigna valor a top,
bottom, left y right se desplazará según se indique. Los demás
elementos ocuparán el espacio dejado por él.
• sticky: el elemento se posiciona según el scroll del usuario. Estos
elementos alternan entre relative y fixed en función de la posición
del scroll. Si se le asigna valor a top, bottom, left y right se
desplazará según se indique.
Propiedades
Definiendo estilos
Posicionamiento

Versión 1
2.020
Propiedad float
• La propiedad float convierte un elemento en “flotante”
lo cual consigue en que el elemento tienda a colocarse
hacia una dirección en la horizontal, dentro de su
elemento contenedor, independientemente de su orden
en el código HTML.
• Es una técnica común en el diseño web como parte del
modelo de cajas tradicional.
• Esto rompe el orden normal de visualización, el cual se puede
restaurar con la propiedad clear.
• Puede tomar los valores:
• left: el elemento flota hacia la izquierda.
• right: el elemento flota hacia la derecha.
• none: es el valor por defecto, por lo que el elemento se
colocará según aparece en el texto HTML.
• inherit: hereda el valor float del padre.
Propiedades
Definiendo estilos
/*las imágenes se colocarán
hacia el margen derecho de su
contenedor*/
img {
float: right;
}

Versión 1
2.020
Propiedad clear
• La propiedad clear se emplea para restaurar el flujo
normal de representación de un documento después de
emplear la propiedad float.
• El elemento que tenga la propiedad clear distinta de none no
se verá “afectado” por la posición de los elementos con float
ya que se colocará debajo siguiendo el flujo normal.
• Puede tomar los valores:
• none: es el valor por defecto, permite flotar a ambos lados.
• left: no se permiten elementos flotantes a la izquierda.
• right: no se permiten elementos flotantes a la derecha.
• both: no se permiten elementos flotantes en ningún lado.
• inherit: hereda el valor clear del padre.
Propiedades
Definiendo estilos
/*se debe añadir a un elemento a
continuación de todos aquellos
que queremos hacer flotar*/
.clear {
clear: right;
}

Versión 1
2.020
Propiedad overflow
• La propiedad overflow (desbordamiento) controla lo que
ocurre cuando el contenido es demasiado grande para ser
contenido en el área de visualización de un elemento.
• Básicamente las opciones son o recortar el contenido que no se puede
mostrar o añadir barras de desplazamiento para poder ver el resto del
contenido.
• Valores de la propiedad:
• visible: valor por defecto que hace que el contenido se represente
fuera de la caja del elemento.
• hidden: el contenido que desborda es recortado, lo cual hace que sea
invisible.
• scroll: el contenido que desborda se recorta, pero se añade una
barra de desplazamiento para poder ver el resto del contenido.
• auto: es similar a scroll, pero solamente se añaden las barras de
desplazamiento cuando son necesarias.
• También se puede afecta a solo una de las dimensiones con
las propiedades overflow-x y overflow-y.
Propiedades
Definiendo estilos
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
div {
overflow: hidden;
}
div {
overflow: scroll;
}
div {
overflow-x: hidden; /* oculta la
barra de desplazamiento horizontal
overflow-y: scroll; /* Añade barra
de desplazamiento vertical */
}

Versión 1
2.020
Opacidad
• La propiedad opacity (opacidad) controla
la opacidad/transparencia de un elemento.
• Puede tomar un valor desde 0.0 a 1.0.
• A menor valor mayor transparencia, siendo 0.0
totalmente transparente y 1.0 totalmente opaco.
• Esta propiedad se aplica al fondo y todos los
elementos hijos del elemento.
• Esto puede hacer el texto difícil de leer (si esto no
es lo que se persigue).
• Otros efectos similares se consiguen variando el
valor del canal alpha como se ha visto en la
aplicación de color.
Propiedades
Definiendo estilos
img {
opacity: 0.5;
filter: alpha(opacity=50); /* En
IE8 y anteriores */
}

Versión 1
2.020
Definiendo estilos
Alineación de elementos
• Alinear elementos en HTML5 es tarea de
CSS.
• Para alinear un elemento en el centro se emplea
margin: auto;
• Se debe especificar la propiedad width para que
tenga efecto esta alineación.
• Alinear a la izquierda y derecha: position:
absolute; o con float: left|right;
• Centrar verticalmente: emplear la propiedad
padding.
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
/*Centrar una imagen*/
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
.center {
padding: 70px 0;
border: 3px solid green;
}

Versión 1
2.020
Aplicación de estilos
Especificidad
• En CSS puede darse en caso de que un mismo
elemento es objetivo de múltiples declaraciones.
• En ese caso entra en juego la especificidad
• Especificidad: es la manera en la que un
navegador decide qué valores de una propiedad
CSS deben ser aplicados.
• Está basada en las reglas de coincidencia que están
compuestas por diferentes tipos de selectores CSS.
• Se representa por un peso (importancia o valor) que
se le asigna a una declaración CSS dada,
determinada por el número correspondiente de cada
tipo de selector.
• Cuando varias declaraciones tienen igual
especificidad, se aplicará al elemento la última
declaración encontrada en el CSS.
body h1 { color: green; }
html h1 { color: purple; }
<html>
<body>
<h1>¡Aquí va un título!</h1>
</body>
</html>
La proximidad de elementos en el árbol
del documento no tiene efecto en la
especificidad.
En el ejemplo el texto saldría:

Versión 1
2.020
Cálculo de especificidad
• La siguiente lista de tipos de selectores incrementa en función de
la especificidad:
• Especificidad 0: Selectores de tipo (h1) y pseudo-elementos (::before).
• Especificidad 1: Selectores de clase (.example), selectores de atributos
( [type="radio"]) y pseudo-clases (:hover).
• Especificidad 2: Selectores de ID (#example).
• El selector universal (*), los combinadores (+, >, ~, ' ') y la
pseudo-clase de negación (:not()) no tienen efecto sobre la
especificidad.
• Sin embargo, los selectores declarados dentro de :not() si lo tienen.
Especificidad

Versión 1
2.020
Excepciones
• En el caso de que un elemento sea
objeto de una declaración directa,
esta siempre tendrá preferencia sobre
las reglas heredadas de su ancestro.
• Los estilos inline en un elemento
siempre sobrescriben a cualquier estilo
escrito en hojas de estilo externas, por
lo que se puede decir que tienen la
mayor especificidad.
Especificidad
#parent { color: green; }
h1 { color: purple; }
<html>
<body id="parent">
<h1>¡Aquí va un título!</h1>
</body>
</html>
Aunque un estilo por id tiene mayor
especificidad, como h1 es una
declaración directa y el estilo le viene
por el padre, no cambia su color.
En el ejemplo el texto saldría:

Versión 1
2.020
Excepción !important
• Cuando se emplea !important en una declaración
de estilo, esta declaración sobrescribe a cualquier
otra.
• !important afecta directamente a la especificidad, sin
ser parte de esta. directamente con esta.
• No se debe emplear (abusar) de !important:
• Hace que el código sea más difícil de depurar al romper la
cascada natural de las hojas de estilo.
• Su uso solamente se recomienda en el caso de emplear
hojas de estilo externas que denominan de igual manera
nuestros estilos.
• Si dos declaraciones en conflicto con !important
son aplicadas al mismo elemento: se aplicará la
declaración con mayor especificidad.
Especificidad
/*Queremos evitar que
algún otro estilo cambie
el tipo de letra de los
párrafos*/
p {
font-family: "Times New
Roman", Times, serif
!important;
}

Seminario - Diseño básico con hojas de estilos en cascada: CSS

Recomendados

Recomendados

Más contenido relacionado

Similar a Seminario - Diseño básico con hojas de estilos en cascada: CSS

Similar a Seminario - Diseño básico con hojas de estilos en cascada: CSS (20)

Último

Último (6)

Seminario - Diseño básico con hojas de estilos en cascada: CSS