Machine Translated by Google

Confección y publicación de páginas web

MF0951_2
UF1302 ­ Elaboración de hojas de estilos
Machine Translated by Google

El temario que veremos

1. Introducción al CSS 2. 11. Modelo de cajas 12.

Versiones del css y evolución Tipo de cajas 13.

3. Conceptos básicos CSS 4. Tamaño real de una caja.

Instrucciones css texto 5. 14. Box­sizing 15.
Posicionamiento de cajas 16.
Selectores 6.
Herencia 7. Visualización de cajas 17. Estilos

Cascada. Orden de aplicación de para imágenes, enlaces, listas

estilos y tablas.
8. Medidas 9. 18. Menús

Colores 10. 19. Maqueta web

Tipografía
Machine Translated by Google

Cascading Style Sheet

1. Introducción al css
Machine Translated by Google

Qué es el css
CSS es un lenguaje

Vocabulario
Gramática
Machine Translated by Google

¿Qué es CSS

• No es un lenguaje de
programación.

• No es un lenguaje de etiquetas.

• Los archivos tienen la extensión .css

Machine Translated by Google

¿Qué es CSS
Machine Translated by Google

Cómo podemos ver el css de una página

Machine Translated by Google

Cascading Style Sheet

2. Versiones del css y evolución

Machine Translated by Google

Historia del CSS

CSS1: 1996.
CSS2: 1998.
CSS 2.1: 2004.
CSS 3: 2011 ­ act

CSS2 y CSS3 en continuo

desarrollo

https://w3.org/TR/CSS21

https://www.w3.org/Style/CSS20/history.html
Machine Translated by Google

Cascading Style Sheet

3. Conceptos básicos css

Machine Translated by Google

CSS es un lenguaje

Vocabulario
Gramática
Sistema de caracteres y símbolos informáticos que utilizamos para dar
instrucciones a un ordenador.
Machine Translated by Google

Estructura y contenido
html ≠ css

Utilizaremos CSS para definir el ASPECTO VISUAL de la información de un documento web

Machine Translated by Google

Concepto de selector
Selector{propiedad:valor;}

Cierre instrucción propiedad.

Separador dos puntos
Punto y coma.

h1{color:#ff0000; fuente­size:18px;}

Selector Valor de la Valor de la

propiedad propiedad font­size
color propiedad color propiedad font­size

Declaración {}
Machine Translated by Google

Concepto de selector
Selector {propiedad:valor;}

Cierre instrucción propiedad.

Separador dos puntos
Punto y coma.

selector{propiedad:valor; propiedad:valor;}

Declaración {}
Machine Translated by Google

Ejemplos de instrucciones CSS

https://francescricart.com/introduccion­al­css­que­significa­cascading­style­sheets/
Machine Translated by Google

Acoplamiento CSS

Hay varias formas de escribir CSS en una

página web:

• En línea con HTML •

Dentro de la etiqueta <style> en la cabecera
• En un documento .css diferenciado del HTML
Machine Translated by Google

Acoplamiento CSS
Acoplamiento online
Machine Translated by Google

Acoplamiento CSS
Acoplamiento etiqueta <style>
Machine Translated by Google

Acoplamiento CSS
Acoplamiento con una hoja de estilos diferenciada
Machine Translated by Google

Ideas clave
¿En CSS podemos definir los estilos en una página separada del documento
html?
a) Si. b) No.

El lenguaje CSS describe

a) La estructura y el contenido de una página web.

b) La presentación de una página web.
c) La estructura, contenido y presentación de una página web.
Machine Translated by Google

Ejercicio 01
Machine Translated by Google

Ejercicio 02
Machine Translated by Google

Comentarios css
Machine Translated by Google

¿Cuántas instrucciones
hay en css?

https://www.w3.org/TR/css­2010/
Machine Translated by Google

Instrucciones CSS

El estándar CSS 2.1 define 115 propiedades, cada una con su lista de valores/
variantes permitidos.

Los últimos borradores de CSS 3 incluyen ya 239 propiedades.

En diciembre 2015
Machine Translated by Google

¿Hay que aprenderlas todas?

Lo mejor es entender la lógica de las instrucciones

background­...
fuente­... width
texto­... height
display padding­...
position border­...
overflow margin­...
float
clear
Machine Translated by Google

https://lenguajecss.com
Machine Translated by Google

Cascading Style Sheet

4. Instrucciones css texto

Machine Translated by Google

Instrucciones texto
Machine Translated by Google

Instrucciones texto

Por ejemplo…
Machine Translated by Google

Ejercicio 03
Machine Translated by Google

https://francescricart.com/veo­veo­suplantando­etiquetas­html­con­css/
Machine Translated by Google

Ejercicio 04

https://francescricart.com/veo­veo­suplantando­etiquetas­html­con­css/
Machine Translated by Google

Cascading Style Sheet

5. Selectores CSS
Machine Translated by Google

Tipo de selectores

https://francescricart.com/selectores­css­que­son­y­como­usarlos/
Machine Translated by Google

Selector universal

Selector universal

Selecciona todos los elementos

de una página

El selector universal se indica

mediante un asterisco (*).

https://francescricart.com/etiquetas­basicas­introductoras­al­html5/
Machine Translated by Google

Selector de etiqueta

Selector de etiqueta

Selecciona todos los elementos de

la página cuya etiqueta HTML
coincide con el selector.
Machine Translated by Google

Abreviaciones
Podemos ahorrar líneas de código cuando las instrucciones son las mismas para dos selectores
Machine Translated by Google

Selector de descendencia

Selector de descendencia

Selecciona los elementos que se

encuentran dentro de otra
etiqueta aunque haya etiquetas
intermedias en el html
Todos los elementos <a> que se
encuentren dentro de un elemento p

A los elementos que no están en

su interior no se les aplica este estilo.
Machine Translated by Google

Selector de descendencia
¿Qué querría decir…?

Todos los elementos que se

encuentren dentro de cualquier
etiqueta que se encuentre dentro de
cualquier etiqueta de tipo p
Machine Translated by Google

Selector de descendencia
Errores típicos de interpretación
Machine Translated by Google

Selector de clase
Machine Translated by Google

Selector de clase
Observa la diferencia…

Todos los elementos de

tipo p que tengan una
clase igual a “destacado”
Machine Translated by Google

Selector de clase
Una etiqueta puede tener tantas clases como sea necesario
Machine Translated by Google

Ejercicio 05

https://francescricart.com/ejercicio­nivel­basico­sobre­selectores­css/
Machine Translated by Google

Selector de clase múltiple

Machine Translated by Google

Selector de clase múltiple

Machine Translated by Google

Errores típicos de interpretación

Errores típicos de interpretación
Machine Translated by Google

Selector de identificador

Selector de id
Machine Translated by Google

Ejercicio 06

https://francescricart.com/escribe­los­selectores­css­adecuados­en­cada­caso/
Machine Translated by Google

Selector de hijos

Selector de hijos

Cualquier <li> directamente a

continuación de un <ul>
Machine Translated by Google

Errores típicos de interpretación

Diferencia entre selector de hijos y el de descendencia

html

head body

p
p span{color:red;}
Todos los <span> serían rojos

p>span{color:red;} span me
Sólo el <span> hijo del <p> sería rojo.
El <span> hijo de <em> no se colorearía.
span

<body><p><span><em><span></em</p></body>
Machine Translated by Google

Ejercicio 07

https://francescricart.com/ejercicio­sobre­selectores­css­iii/
Machine Translated by Google

Selector de atributo
Machine Translated by Google

Ejercicio 08
Machine Translated by Google

Ejercicio 09

https://uniwebsidad.com/libros/css/capitulo­15
Machine Translated by Google

Cascading Style Sheet

6. Herencia
Machine Translated by Google

Herencia https://www.w3.org/TR/css­2010/#properties

https://francescricart.com/concepto­de­herencia­en­css/
Machine Translated by Google

Forzar la herencia

https://francescricart.com/concepto­de­herencia­en­css/
Machine Translated by Google

Romper la herencia

https://francescricart.com/concepto­de­herencia­en­css/
Machine Translated by Google

Ejercicio 10

https://francescricart.com/ejercicio­css­sobre­forzar­y­romper­la­propiedad­de­herencia/
Machine Translated by Google

Ejercicio 11

https://francescricart.com/ejercicio­css­sobre­forzar­y­romper­la­propiedad­de­herencia/
Machine Translated by Google

Cascading Style Sheet

7. Cascada. Orden de aplicación

de estilos
Machine Translated by Google

Cascada

Un mismo elemento puede

estar sujeto a varias instrucciones CSS 1. Importancia
y existen unas normas que indican
de forma inequívoca cuál de todas las
instrucciones es la que debe afectar 2. Especificidad
a un determinado elemento html.
3. Orden
Existe un algoritmo para decidir
qué instrucción interviene en cada caso.

https://francescricart.com/concepto­de­cascada­en­css/
Machine Translated by Google

Importancia
Atención a la instrucción !importante

Orden de aplicación Origen !importante Menor prioridad

1 Navegador
2 Navegador !importante
3 Usuario

4 Autor

5 Autor !importante
6 Usuario !importante Mayor prioridad

https://francescricart.com/concepto­de­cascada­en­css/
Machine Translated by Google

Especificidad
¿Cómo sabe el navegador a qué instrucción debe hacer caso?

https://francescricart.com/concepto­de­cascada­en­css/
Machine Translated by Google

Especificidad
¿Cómo sabe el navegador a qué instrucción debe hacer caso?

Expresión ABCD

#id1 {color:red;} 0100 A: 1 si existe style (online)

ul li.important{color:green;} 0 0 1 2 B: Número de IDs

ul le{color:blue;} 0002

le.importante{color:yellow} 0011 C: Número de clases y pseudoclases (:)

le{color:purple} 0001
D: Número de elementos y pseudoelementos (::)
style=“color:pink;” 1000

A>B>C>D

https://francescricart.com/concepto­de­cascada­en­css/
Machine Translated by Google

Especificidad
Resultado final…

https://francescricart.com/concepto­de­cascada­en­css/
Machine Translated by Google

Orden
A igualdad de especificidad, la última instrucción sobrescribe la anterior

https://francescricart.com/concepto­de­cascada­en­css/
Machine Translated by Google

Ejercicio 12

https://francescricart.com/veo­veo­de­que­color­se­vera­ejercicio­css/
Machine Translated by Google

Ejercicio 13

https://uniwebsidad.com/libros/css/capitulo­15/ejercicio­2
Machine Translated by Google

Cascading Style Sheet

8. Medidas
Machine Translated by Google

Medidas
Absolutas Relativas
%
cm, mm, pc, pt
me
px
remo

vw

vh

vmin

vmax

https://francescricart.com/unidades­de­medida­absolutas­y­relativas­en­css/
Machine Translated by Google

Píxel
• Se define como el tamaño mínimo de resolución de la pantalla. Hay voces que
dicen que es una unidad absoluta y voces que dicen que es relativa.
• Se utiliza donde el tamaño debe ser el mismo sin importar el tamaño de la
pantalla.
• Puede presentar problemas de accesibilidad.
• Problemas con responsive.
• Muy utilizados:

– Grosores
– Dimensiones de contenedores

– Tamaño de fuente
Machine Translated by Google

Porcentaje
• Se basa en el ancho del contenedor padre.

• Mantiene las proporciones del diseño en distintos dispositivos.

• Se utiliza para maquetación responsive.

Machine Translated by Google

Me
• Relativo al tamaño de letra del contenedor más cercano. Atención porque el

tamaño de fuente es una propiedad que se hereda.

• Se utiliza para font­size.

• Se utiliza para cualquier propiedad que debe variar con el tamaño de

fuente­size (padding, margin).

• Funciona muy bien con responsive.

• Presenta el problema del efecto compuesto.

Machine Translated by Google

Remo
• Relativo al fuente­size del elemento raíz, normalmente 16px (<html> o root).
• Su uso se combina con me.

• Funciona muy bien con responsive.

• Soluciona el problema de efecto compuesto.

• Presenta problemas con algunos navegadores.

Machine Translated by Google

vh, vw, vmin, max

• Se basan en el tamaño de la pantalla.
• 100vh sería el 100% de la altura completa de la pantalla.
• 100vw sería el 100% del ancho completo de la pantalla.
• vmin sería el menor valor porcentual entre la altura y el ancho de la pantalla.
• vmax sería el mayor valor porcentual entre la altura y el ancho de la pantalla.
Machine Translated by Google

Ideas clave
¿Qué tamaño de fuente tiene por defecto la etiqueta
<p>? a)
14px b)
16px c)
18px d) 20px

¿Cuánto mide un dedo en una pantalla táctil?

a) 32px
b) 64px
c) 72px
d) 100px
Machine Translated by Google

Ejercicio 14

https://francescricart.com/ejercicio­sobre­equivalencia­entre­em­y­px­de­css/
Machine Translated by Google

Cascading Style Sheet

9. Colores
Machine Translated by Google

Colores
Existen distintos métodos para definir el color web

• Web safe colors •

Hexadecimal
• RGB
• RGBa
• HSL
• HSLa
• CMYK

https://francescricart.com/colores­css­para­web/
Machine Translated by Google

Web safe colores

Hay 140 nombres de color

https://www.w3schools.com/colors/colors_names.asp
Machine Translated by Google

RGB
Red, Green, Blue

Cada uno de los componentes puede tomar un valor

entre cero y un valor máximo de 255.

Rojo rgb(255,0,0)
Verde rgb(0,255,0)
Azul rgb(0,0,255)

Amarillo rgb(255,255,0)
Rosa rgb(255,0,255)
Azul claro rgb(0,255,255)

Blanco rgb(255,255,255)
Negro rgb(0,0,0)
Machine Translated by Google

Hexadecimal
Red, Green, Blue

Cada uno de los componentes puede tomar un valor

entre 00 y un valor máximo de ff.

Rojo #ff0000
Verde #00ff00
Azul #0000ff

Amarillo #ffff00
Rosa #ff00ff
Azul claro #00ffff

Blanco #ffffff
Negro #00000
Machine Translated by Google

RGBa
Indica el % de puntos que dejaremos de pintar

rgb(255,0,255,1)

rgb(255,0,255,0.5)

rgb(255,0,255,.1)
https://francescricart.com/genera­una­escala­cromatica­con­css/
Machine Translated by Google

Paletas de colores

https://coolors.co/
Machine Translated by Google

Ejercicio 15

• Web safe colors •

Hexadecimal
• RGB
• RGBa

https://francescricart.com/ejercicio­sobre­web­safe­colors­rgb­rgba­y­colores­hexadecimales/
Machine Translated by Google

Cascading Style Sheet

10. Tipografía
Machine Translated by Google

Serif, Sans­Serif, otros

https://francescricart.com/tipografia­css/
Machine Translated by Google

Tipografías seguras
Serif fuentes Sans­serif fuentes Monospace fuentes

Georgia Arial "Courier New"

"Palatino Linotype" Helvetica Courier

"Book Antiqua" "Arial Black" "Lucida Console"

Palatino "Comic Sans MS" Monaco

"Times New Roman" Impact

Times "Lucida Sans Unicode"

serif sans­serif monospace

https://www.cssfontstack.com/
Machine Translated by Google

¿Cómo utilizamos una tipografía?

Si el nombre de una familia
de fuentes es más de una
palabra, debe ser entre
comillas, como: "Times
New Roman"!

https://francescricart.com/tipografia­css/
Machine Translated by Google

CSS3 Web Fuentes

https://dafont.com/
Machine Translated by Google

Google Fuentes

https://fonts.google.com/
Machine Translated by Google

Google Fuentes

Noticia de 01/02/2022

https://noticiasseguridad.com/hacking­incidentes/el­uso­de­google­fonts­en­sitios­web­infringe­el­gdpr­nueva­deci sion­
judicial­afecta­a­50­millones­de ­sitios­web/
Machine Translated by Google

Recomendaciones de uso

• Nunca utilices más de 3 tipografías en una página web. Idealmente 1 o 2.

• Por el contenido de tu web elige una tipografía sans­serif. Facilita la
lectura.
• Para los títulos puedes utilizar cualquiera de las dos. Si utilizas una
tipografía diferente darás contraste y quedarán bien diferenciadas las
cabeceras de los textos.
• Atención a las tipografías decorativas. Pueden fallar responsive.
• Es importante que la tipografía escogida tenga todos los caracteres.
Machine Translated by Google

Ejercicio 16

https://francescricart.com/ejercicio­sobre­tipografias­css/
Machine Translated by Google

Ejercicio 17

https://francescricart.com/creacion­de­logotipos­con­tipografias­web/
Machine Translated by Google

Cascading Style Sheet

11. Modelo de cajas

Machine Translated by Google

Todas las etiquetas son una caja

En este documento se ha pintado la propiedad border de todas las etiquetas (cajas).
Machine Translated by Google

Modelo de cajas

• width •
height •
padding •
border •
margin •
background

https://francescricart.com/modelo­de­cajas­css­ancho­altura­relleno­borde­y­margen/
Machine Translated by Google

width, height

• width •
height •
min­height •
max­height •
min­width •
max­width
Machine Translated by Google

min­width, max­width
min­height,max­height
El width mínimo será 100px y el
máximo 600px. Dentro de ese
intervalo siempre tendrá el 50%
del ancho respecto a su elemento
contenedor.

El height mínimo será 100px y

el máximo 600px. Dentro de
ese intervalo siempre tendrá el
80% de la altura respecto a su
elemento contenedor.
Machine Translated by Google

padding

• padding
• padding­top •
padding­right •
padding­bottom •
padding­left
Machine Translated by Google

padding
¿Cómo simplificamos el código cuando los tamaños de los padding son iguales?

https://francescricart.com/la­regla­del­reloj­para­margins­paddings­y­borders/
Machine Translated by Google

margin

• margin
• margin­top •
margin­right •
margin­bottom •
margin­left
Machine Translated by Google

La regla del reloj / margin

Machine Translated by Google

Ejercicio 18
Machine Translated by Google

Margin
¿Blockquote o div?
Machine Translated by Google

Fusión de margin­top y margin­bottom

Sólo afecta al margin­top combinado con el margin­bottom
Machine Translated by Google

Centrado horizontal
Centrado horizontal de una página o capa

Los navegadores centran horizontalmente

un elemento cuando indicamos margin:
auto; No sirve verticalmente.
Machine Translated by Google

Ejercicio 19

https://francescricart.com/diferencia­entre­centrado­de­texto­y­de­cajas­en­css/
Machine Translated by Google

border
• border •
border­width •
border­style

• border­top •
border­right •
border­bottom •
border­left

• border­top­width •
border­top­style •
border­right­width
• …
Machine Translated by Google

border
Machine Translated by Google

border­radius

Observación:
Box­shadow
cursor:pointer;
Machine Translated by Google

Ejercicio 20
Machine Translated by Google

Resumen de propiedades
Machine Translated by Google

background
Machine Translated by Google

background

y muchas más…

https://francescricart.com/la­propiedad­background/
Machine Translated by Google

background­color, background­image

https://francescricart.com/la­propiedad­background/
Machine Translated by Google

background­repeat
Machine Translated by Google

background­attachment

https://francescricart.com/efecto­parallax­mediante­propiedades­de­background/
Machine Translated by Google

background­size

background­size: cover; background­size: contain;

https://francescricart.com/la­propiedad­background/#sexto
Machine Translated by Google

background­position

¡Atención no confundir el posicionamiento del fondo con el posicionamiento de cajas en el espacio!

Machine Translated by Google

Ejercicio 21
Machine Translated by Google

Cascading Style Sheet

12. Tipo de cajas

Machine Translated by Google

Tipo de cajas
¿Cómo se relacionan las cajas entre sí?

block div, p, h1,main display:block;

inline span, a, strong display:inline;

inline­block img display:inline­block;

https://francescricart.com/elementos­en­linea­elementos­bloque­elementos­inline­block/
Machine Translated by Google

display:block;

https://francescricart.com/elementos­en­linea­elementos­bloque­elementos­inline­block/
Machine Translated by Google

display:block;

• div, p, h1, h2, h3, h4, h5, h6, hr, ol, ul, table, le, address, blockquote,
center, dir, lun, fieldset, formisindex, noframes, noscript, pre, dd,
dt , frameset, tbody, td, tfoot, th, thead, tr

• Fuerzan el salto de línea que no ocupen todo el ancho disponible.

https://francescricart.com/elementos­en­linea­elementos­bloque­elementos­inline­block/
Machine Translated by Google

display:inline;

https://francescricart.com/elementos­en­linea­elementos­bloque­elementos­inline­block/
Machine Translated by Google

display:inline;

• a, span, label, strong, br, input, textarea, abbr, acronym, b, basefont, bdo,
big, cite, code, dfn, em, fuente, y, kbd, q, s, samp, select, small , strike, sub,
sup, u, u, var

• no tienen margin­top ni margin­bottom. Se apilan.

• no respetan el width ni el height.

https://francescricart.com/elementos­en­linea­elementos­bloque­elementos­inline­block/
Machine Translated by Google

display:inline­block;

https://francescricart.com/elementos­en­linea­elementos­bloque­elementos­inline­block/
Machine Translated by Google

display:inline­block;

• img

• se apilan respetando el width, height y margin.

https://francescricart.com/elementos­en­linea­elementos­bloque­elementos­inline­block/
Machine Translated by Google

inline­block ≠ block

en {display:inline­block;} en {display:block;}
Machine Translated by Google

Ejercicio 22

https://francescricart.com/que­tipo­de­etiqueta­es­block­inline­o­inlineblock/
Machine Translated by Google

Errores a evitar
Machine Translated by Google

Cascading Style Sheet

13. Tamaño real de una caja

Machine Translated by Google

Dimensiones reales de una caja

• margin­left + border­left + padding­left + width + padding­right +

border­right + margin­right
10 + 1 + 10 + 200 + 10 + 1 + 10 = 242px

• margin­top + border­top + padding­top + height + padding­bottom +

border­bottom + margin­bottom
10+1+10+50+10+1+10=92px
https://francescricart.com/dimensiones­reales­de­una­caja­css/
Machine Translated by Google

¿Y los elementos inline?

• margin­left + border­left + padding­left + width + padding­right +

border­right + margin­right + ancho texto

• margin­top + border­top + padding­top + height + padding­bottom +

border­bottom + margin­bottom + altura texto

https://francescricart.com/dimensiones­reales­de­una­caja­css/
Machine Translated by Google

Cascading Style Sheet

14. Box­sizing
Machine Translated by Google

Modificar el tamaño real

box­sizing: content­box | border­box | initial | inherido;

https://francescricart.com/box­sizing­como­modificar­el­modelo­de­cajas­convencional/
Machine Translated by Google

box­sizing:content­box;
content­box es el comportamiento por defecto
Machine Translated by Google

box­sizing:border­box;
border­box es el comportamiento normalmente deseado
Machine Translated by Google

¿Cómo afecta a border­box?

Machine Translated by Google

Ejercicio 23

https://francescricart.com/cuales­seran­las­dimensiones­reales­de­las­cajas­css/
Machine Translated by Google

Cascading Style Sheet

15. Posicionamiento de cajas

Machine Translated by Google

Posición
{posición = static | absoluto | fixed | relative | initial | inherido | sticky;}

https://francescricart.com/posicionamiento­de­etiquetas­html­cajas­en­un­documento­web/
Machine Translated by Google

posición:statico;

https://francescricart.com/posicionamiento­de­etiquetas­html­cajas­en­un­documento­web/
Machine Translated by Google

position:relative;

https://francescricart.com/posicionamiento­de­etiquetas­html­cajas­en­un­documento­web/

https://francescricart.com/significado­de­las­propiedades­top­bottom­left­right­de­css/
Machine Translated by Google

top | bottom | left | right

La propiedad position se gobierna mediante las propiedades top, bottom, left, right

https://francescricart.com/significado­de­las­propiedades­top­bottom­left­right­de­css/
Machine Translated by Google

top | bottom | left | right

La propiedad position se gobierna mediante las propiedades top, bottom, left, right

https://francescricart.com/significado­de­las­propiedades­top­bottom­left­right­de­css/
Machine Translated by Google

top | bottom | left | right

La propiedad position se gobierna mediante las propiedades top, bottom, left, right

https://francescricart.com/significado­de­las­propiedades­top­bottom­left­right­de­css/
Machine Translated by Google

top | bottom | left | right

La propiedad position se gobierna mediante las propiedades top, bottom, left, right

https://francescricart.com/significado­de­las­propiedades­top­bottom­left­right­de­css/
Machine Translated by Google

posición:absolute;

https://francescricart.com/posicionamiento­de­etiquetas­html­cajas­en­un­documento­web/

https://francescricart.com/significado­de­las­propiedades­top­bottom­left­right­de­css/
Machine Translated by Google

Ideas clave

¿Qué tipo de posicionamiento se ha utilizado para desplazar la caja1?

a) Posicionamiento absoluto
b) Posicionamiento relativo
c) Posicionamiento estático
d) Una tabla
Machine Translated by Google

Ideas clave

¿Qué tipo de posicionamiento se ha utilizado para desplazar la caja1?

a) Posicionamiento absoluto
b) Posicionamiento relativo
c) Posicionamiento estático
d) Una tabla
Machine Translated by Google

Ejercicio 24
Machine Translated by Google

Ejercicio 24
Machine Translated by Google

position:fixed;

https://francescricart.com/posicionamiento­de­etiquetas­html­cajas­en­un­documento­web/

https://francescricart.com/significado­de­las­propiedades­top­bottom­left­right­de­css/
Machine Translated by Google

Ejercicio 25

https://francescricart.com/como­poner­iconos­flotantes­de­redes­sociales­en­nuestra­web­con­html­y­css/
Machine Translated by Google

Centrado vertical y horizontal

https://francescricart.com/ejemplo­de­centrado­vertical­y­horizontal­con­css/
Machine Translated by Google

Ejercicio 26

https://francescricart.com/creacion­de­una­pagina­web­en­mantenimiento­con­html­y­css/
Machine Translated by Google

float: left | right;

https://francescricart.com/posicionamiento­flotante­de­cajas­float­left­right­both­y­propiedad­clear/
Machine Translated by Google

clear: left | right | both;

https://francescricart.com/posicionamiento­flotante­de­cajas­float­left­right­both­y­propiedad­clear/
Machine Translated by Google

float: left | right;

Machine Translated by Google

Ejercicio 27

https://francescricart.com/que­posicionamiento­css­se­ha­usado/
Machine Translated by Google

Ejercicio 28
Machine Translated by Google

Cascading Style Sheet

16. Visualización de cajas

Machine Translated by Google

display:none y visibility

https://francescricart.com/diferencia­entre­visibilityhidden­y­displaynone/
Machine Translated by Google

Ejercicio 29

https://francescricart.com/ejercicio­sobre­como­ocultar­cajas­con­css­mediante­visibility­yo­display/
Machine Translated by Google

z­index

https://francescricart.com/la­propiedad­z­index/
Machine Translated by Google

overflow

https://francescricart.com/la­propiedad­overflow/
Machine Translated by Google

box­shadow
Machine Translated by Google

Ejercicio 30

https://francescricart.com/ejercicio­css­sobre­la­propiedad­box­shadow­css3/
Machine Translated by Google

Cascading Style Sheet

17. Estilos para imágenes, enlaces, listas,

y tablas
Machine Translated by Google

Enlaces

https://francescricart.com/pseudo­clases­link­active­hover­i­visited/
Machine Translated by Google

Imágenes
Machine Translated by Google

Listas

https://francescricart.com/guia­rapida­para­crear­botones­personalizados­con­css/
Machine Translated by Google

Botones con css

https://francescricart.com/guia­rapida­para­crear­botones­personalizados­con­css/
Machine Translated by Google

Ejercicio 31

https://francescricart.com/ejercicio­css­sobre­la­propiedad­box­shadow­css3/
Machine Translated by Google

Tablas

https://francescricart.com/mi­chuleta­de­instrucciones­css­utiles­para­estilizar­table­de­html/
Machine Translated by Google

Tablas

https://francescricart.com/mi­chuleta­de­instrucciones­css­utiles­para­estilizar­table­de­html/
Machine Translated by Google

Ejercicio 32

https://francescricart.com/mi­chuleta­de­instrucciones­css­utiles­para­estilizar­table­de­html/
Machine Translated by Google

Cascading Style Sheet

18. Menús
Machine Translated by Google

Menú horizontal

https://francescricart.com/ejemplo­de­creacion­de­menu­horizontal­en­css­inline­block­y­float/
Machine Translated by Google

Menú vertical

https://francescricart.com/ejemplo­de­creacion­de­menu­horizontal­en­css­inline­block­y­float/
Machine Translated by Google

Menú desplegable

https://francescricart.com/creacion­de­un­menu­horizontal­con­sub­menu­desplegable­mediante­css/
Machine Translated by Google

Ejercicio 33
Machine Translated by Google

Cascading Style Sheet

19. Maqueta web

Machine Translated by Google
Machine Translated by Google

Ejercicio 34
Machine Translated by Google

Ejercicio 35
Machine Translated by Google

Ejercicio 36