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 | ||
clase:daw:diw:1eval:tema03 [2020/09/08 20:24] admin [Ejercicio 1] |
clase:daw:diw:1eval:tema03 [2023/11/21 09:03] 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 38: | Línea 42: | ||
Cuando mas complejo sea el selector tendrá una **Especificidad** mas alta y queremos que sea baja: | Cuando mas complejo sea el selector tendrá una **Especificidad** mas alta y queremos que sea baja: | ||
- | * [[https:// | + | * [[https:// |
Por ello solo de debe usar el selector de clase que empieza por un " | Por ello solo de debe usar el selector de clase que empieza por un " | ||
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 75: | Línea 79: | ||
</ | </ | ||
- | ====== display | + | <note important> |
+ | Al '' | ||
+ | </ | ||
+ | |||
+ | ===== 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 86: | 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: | ||
* " | * " | ||
* " | * " | ||
+ | Se puede ver un ejemplo [[https:// | ||
- | + | ===== ===== | |
- | ====== & | + | |
Hace que un espacio con "& | Hace que un espacio con "& | ||
Línea 102: | 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 114: | Línea 150: | ||
- | ====== Meter & Progress | + | ===== Meter & Progress ===== |
Etiquetas HTML para: | Etiquetas HTML para: | ||
* Barra de progreso: | * Barra de progreso: | ||
Línea 123: | 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. | ||
- | Mira a ver al diferencia de tamaño si añades " | + | Mira a ver al diferencia de tamaño si añades " |
+ | |||
+ | Ahora añade un margen de 100px y mira si ahora cambia el tamaño con " | ||
+ | |||
+ | ==== Ejercicio 2 ==== | ||
+ | Indica para los siguientes elementos que tipo de display es el mas adecuado: | ||
+ | * inline | ||
+ | * inline-block | ||
+ | * block | ||
+ | |||
+ | ^ Elemento | ||
+ | | Párrafo | ||
+ | | Botón | ||
+ | | Elemento de una barra de menú | | ||
+ | | Imagen | ||
+ | | Icono junto a un texto | | | ||
+ | |||
+ | |||
+ | |||
+ | ==== Ejercicio 3 ==== | ||
+ | Imagina un ejemplo de página web en la que al hacerse algo invisible sea mejor usar '' | ||
+ | |||
+ | |||
+ | ==== 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 | ||
- | ===== Ejercicio 2 ===== | + | El valor que se usará en el ''< |
- | Añade al ejercicio anterior un margen | + | |