Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:1eval:tema03 [2020/09/09 09:16]
admin [Ejercicio 5]
+++ clase:daw:diw:1eval:tema03 [2023/11/21 09:03] (actual)
admin [display]
@@ Línea 5: / Línea 5: @@
 Hay 3 formas de añadir CSS a una página:
   * Con un fichero externo y añadiendo en el <head>:
+  *
+<sxh html>
   <link rel="stylesheet" href="main.css">
+</sxh>
   * Añadiendo la etiqueta <style>
@@ Línea 23: / Línea 25: @@
   * CSS dentro del propio elemento con el atributo "style".
+  *
+<sxh html>
   <h1 style="color:blue;text-align:center;">This is a heading</h1>
+</sxh>
 Solo se debería añadir el CSS en ficheros externo y en algún caso concreto con "style" como por ejemplo la imagen de background.
@@ 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 "box-sizing: border-box" de CSS.
@@ Línea 79: / Línea 83: @@
 </note>
-====== display ======
+===== display =====
 En la propiedad "display" de CSS hay muchos posibles valores , ahora vamos a ver los 3 siguientes:
   * inline: Para un elemento que forma parte de un párrafo.
@@ Línea 89: / Línea 93: @@
     * [[https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1|Ejemplo display]]
     * [[http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements|How to remove the space between inline-block elements?]]
+==== Ejemplo ====
+Vamos a ver un ejemplo con las diferencias entre ''<span>'', ''<div>'', ''<span> con inline-block'' y ''<div> con inline-block''
+<sxh css>
+.destacar {
+  color:red;
+  font-weight:bold
+}
+</sxh>
+<sxh html>
+	<p>
+span:Frodo lo sacó del bolsillo del <span class="destacar">pantalón</span> ,donde lo guardaba enganchado a una <span class="destacar">cadena</span> que le colgaba del cinturón.
+	</p>
+	<hr>
+	<p>
+div:Frodo lo sacó del bolsillo del <div class="destacar">pantalón</div> ,donde lo guardaba enganchado a una <div class="destacar">cadena</div> que le colgaba del cinturón.
+	</p>
+	<hr>
+	<p>
+span inline-block:Frodo lo sacó del bolsillo del <span style="display:inline-block" class="destacar">pantalón</span> ,donde lo guardaba enganchado a una <span style="display:inline-block" class="destacar">cadena</span> que le colgaba del cinturón.
+	</p>
+	<hr>
+	<p>
+div inline-block:Frodo lo sacó del bolsillo del <div style="display:inline-block" class="destacar">pantalón</div> ,donde lo guardaba enganchado a una <div style="display:inline-block" class="destacar">cadena</div> que le colgaba del cinturón.
+	</p>
+</sxh>
-====== display:none o visibility:hidden ======
+===== display:none o visibility:hidden =====
   * "display:none" es como si el elemento no existiera por lo que el resto de elementos se desplazan para ocupar su hueco
   * "visibility:hidden" el element es invisible pero sigue ocupando su hueco.
@@ Línea 100: / Línea 132: @@
-====== &nbsp; ======
+===== &nbsp; =====
 Hace que un espacio con "&nbsp;" sea como una letra mas por lo que no partirá la frase por ese espacio.
@@ Línea 106: / Línea 138: @@
     * [[https://stackoverflow.com/questions/1357078/whats-the-difference-between-nbsp-and|What's the difference between “&nbsp;” and “ ”?]]
-====== Sombras ======
+===== Sombras =====
 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:
   * Barra de progreso:  Etiqueta <progress>
@@ Línea 128: / Línea 160: @@
-====== Ejercicios ======
+===== 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.
@@ Línea 137: / Línea 169: @@
 Ahora añade un margen de 100px y mira si ahora cambia el tamaño con "box-sizing: border-box" o sin él.
-===== Ejercicio 2 =====
+==== Ejercicio 2 ====
 Indica para los siguientes elementos que tipo de display es el mas adecuado:
   * inline
@@ Línea 152: / Línea 184: @@
-===== Ejercicio 3 =====
+==== Ejercicio 3 ====
 Imagina un ejemplo de página web en la que al hacerse algo invisible sea mejor usar ''display:none'' y otro ejemplo en el que sea mejor usar ''visibility:hidden''
-===== Ejercicio 4 =====
+==== Ejercicio 4 ====
 Imagina un ejemplo de página web en la que sea mejor usar "&nbsp;" que un espacio.
-===== Ejercicio 5 =====
+==== Ejercicio 5 ====
 Haz una página web como la siguiente (Solo debe estar el fondo, las cajas y las sombras):
@@ Línea 166: / Línea 198: @@
+==== Ejercicio 6 ====
+Haz una página web en la que se muestre el uso de la CPU usando la etiqueta ''<meter>''. Sabiendo que
+  * Menos del 25% de uso de CPU es bueno
+  * Mas del 75% de CPU es malo
+El valor que se usará en el ''<meter>'' estará en una caja de texto y se actualizará al pulsar un botón
+==== Ejercicio 7 ====
+Haz una página web en la que se muestre la velocidad de la red usando la etiqueta ''<meter>''. Sabiendo que
+  * 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 ''<meter>'' estará en una caja de texto y se actualizará al pulsar un botón

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página