Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa Última revisión Ambos lados, revisión siguiente | ||
clase:daw:diw:1eval:tema03 [2020/09/09 09:13] admin |
clase:daw:diw:1eval:tema03 [2023/11/21 09:01] admin [display] |
||
---|---|---|---|
Línea 5: | Línea 5: | ||
Hay 3 formas de añadir CSS a una página: | Hay 3 formas de añadir CSS a una página: | ||
* Con un fichero externo y añadiendo en el < | * Con un fichero externo y añadiendo en el < | ||
+ | * | ||
+ | <sxh html> | ||
<link rel=" | <link rel=" | ||
+ | </ | ||
* Añadiendo la etiqueta < | * Añadiendo la etiqueta < | ||
Línea 23: | Línea 25: | ||
* CSS dentro del propio elemento con el atributo " | * CSS dentro del propio elemento con el atributo " | ||
+ | * | ||
+ | <sxh html> | ||
<h1 style=" | <h1 style=" | ||
+ | </ | ||
Solo se debería añadir el CSS en ficheros externo y en algún caso concreto con " | Solo se debería añadir el CSS en ficheros externo y en algún caso concreto con " | ||
Línea 46: | Línea 50: | ||
- | ====== Modelo de caja ====== | + | ===== Modelo de caja ===== |
El modelo de java le dice al navegador si cuando indicamos el ancho, ese ancho incluye o no al padding y al borde. Por defecto no los incluye pero lo ideal es que el ancho si que incluya el padding y el borde, por eso hay que usar la propiedad " | El modelo de java le dice al navegador si cuando indicamos el ancho, ese ancho incluye o no al padding y al borde. Por defecto no los incluye pero lo ideal es que el ancho si que incluya el padding y el borde, por eso hay que usar la propiedad " | ||
Línea 79: | Línea 83: | ||
</ | </ | ||
- | ====== display | + | ===== display ===== |
En la propiedad " | En la propiedad " | ||
* inline: Para un elemento que forma parte de un párrafo. | * inline: Para un elemento que forma parte de un párrafo. | ||
Línea 90: | Línea 94: | ||
* [[http:// | * [[http:// | ||
+ | ==== Ejemplo ==== | ||
+ | Vamos a ver un ejemplo con las diferencias entre ''< | ||
+ | <sxh css> | ||
+ | .destacar { | ||
+ | color:red; | ||
+ | font-weight: | ||
+ | } | ||
+ | </ | ||
- | ====== display: | + | <sxh html> |
+ | < | ||
+ | span:Frodo lo sacó del bolsillo del <span class=" | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | div:Frodo lo sacó del bolsillo del <div class=" | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | span inline-block: | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | div inline-block: | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== display: | ||
* " | * " | ||
* " | * " | ||
Línea 100: | Línea 132: | ||
- | ====== & | + | ===== ===== |
Hace que un espacio con "& | Hace que un espacio con "& | ||
Línea 106: | Línea 138: | ||
* [[https:// | * [[https:// | ||
- | ====== Sombras | + | ===== Sombras ===== |
Las sombras se usan para dar sensación de profundidad sin necesidad de bordes. Suponemos que la luz viene de arriba. | Las sombras se usan para dar sensación de profundidad sin necesidad de bordes. Suponemos que la luz viene de arriba. | ||
Línea 118: | Línea 150: | ||
- | ====== Meter & Progress | + | ===== Meter & Progress ===== |
Etiquetas HTML para: | Etiquetas HTML para: | ||
* Barra de progreso: | * Barra de progreso: | ||
Línea 127: | Línea 159: | ||
* [[http:// | * [[http:// | ||
- | ====== Desplegables en cajas de texto ====== | ||
- | Se usa la etiqueta < | ||
- | Como usar la etiqueta < | + | ===== Ejercicios ===== |
- | * [[https:// | + | |
- | ====== Ejercicios ====== | + | ==== Ejercicio 1 ==== |
- | + | ||
- | ===== Ejercicio 1 ===== | + | |
Prueba a pintar una caja de tamaño 200px y añade un padding de 50px y un borde de 30px. | Prueba a pintar una caja de tamaño 200px y añade un padding de 50px y un borde de 30px. | ||
Línea 142: | Línea 169: | ||
Ahora añade un margen de 100px y mira si ahora cambia el tamaño con " | Ahora añade un margen de 100px y mira si ahora cambia el tamaño con " | ||
- | ===== Ejercicio 2 ===== | + | ==== Ejercicio 2 ==== |
Indica para los siguientes elementos que tipo de display es el mas adecuado: | Indica para los siguientes elementos que tipo de display es el mas adecuado: | ||
* inline | * inline | ||
Línea 157: | Línea 184: | ||
- | ===== Ejercicio 3 ===== | + | ==== Ejercicio 3 ==== |
- | Pon un ejemplo de página web en la que al hacerse algo invisible sea mejor usar '' | + | Imagina |
+ | |||
+ | |||
+ | ==== Ejercicio 4 ==== | ||
+ | Imagina un ejemplo de página web en la que sea mejor usar "& | ||
+ | |||
+ | |||
+ | ==== Ejercicio 5 ==== | ||
+ | Haz una página web como la siguiente (Solo debe estar el fondo, las cajas y las sombras): | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | ==== Ejercicio 6 ==== | ||
+ | Haz una página web en la que se muestre el uso de la CPU usando la etiqueta ''< | ||
+ | * Menos del 25% de uso de CPU es bueno | ||
+ | * Mas del 75% de CPU es malo | ||
+ | |||
+ | El valor que se usará en el ''< | ||
+ | |||
+ | ==== Ejercicio 7 ==== | ||
+ | Haz una página web en la que se muestre la velocidad de la red usando la etiqueta ''< | ||
+ | * Menos del 20 mb/s de velocidad es malo | ||
+ | * Mas del 100 mb/s de velocidad es bueno | ||
+ | El valor que se usará en el ''< | ||