logongas

Herramientas de usuario

Herramientas del sitio

Traza:
clase:daw:diw:1eval:tema03

Diferencias

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

Enlace a la vista de comparación

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] (actual)
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 <head>:   * Con un fichero externo y añadiendo en el <head>:
 +  *  
 +<sxh html>
   <link rel="stylesheet" href="main.css">   <link rel="stylesheet" href="main.css">
 +</sxh>
  
   * Añadiendo la etiqueta <style>   * Añadiendo la etiqueta <style>
Línea 23: Línea 25:
  
   * CSS dentro del propio elemento con el atributo "style".   * CSS dentro del propio elemento con el atributo "style".
 +  *  
 +<sxh html>
   <h1 style="color:blue;text-align:center;">This is a heading</h1>   <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. 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 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://cssstats.com/stats|CSS Stat]]:+    * [[https://cssstats.com/stats|CSS Stat]]: Especificidad de los ficheros CSS
  
 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 "box-sizing: border-box" de CSS.  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 75: Línea 79:
 </sxh> </sxh>
  
-====== display ======+<note important> 
 +Al ''reset.scss'' del tema anterior hay que añadir siempre este código CSS. 
 +</note> 
 + 
 +===== display =====
 En la propiedad "display" de CSS hay muchos posibles valores , ahora vamos a ver los 3 siguientes: 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.   * inline: Para un elemento que forma parte de un párrafo.
Línea 86: Línea 94:
     * [[http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements|How to remove the space between inline-block elements?]]     * [[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>
  
-====== display:none o visibility:hidden ======+<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" es como si el elemento no existiera por lo que el resto de elementos se desplazan para ocupar su hueco   * "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.   * "visibility:hidden" el element es invisible pero sigue ocupando su hueco.
  
 +Se puede ver un ejemplo [[https://codepen.io/CybMeta/pen/xGwoyd|Aqui]]
  
  
  
- +===== &nbsp; =====
-====== &nbsp; ======+
 Hace que un espacio con "&nbsp;" sea como una letra mas por lo que no partirá la frase por ese espacio. Hace que un espacio con "&nbsp;" sea como una letra mas por lo que no partirá la frase por ese espacio.
  
Línea 102: Línea 138:
     * [[https://stackoverflow.com/questions/1357078/whats-the-difference-between-nbsp-and|What's the difference between “&nbsp;” and “ ”?]]     * [[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. 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:  Etiqueta <progress>   * Barra de progreso:  Etiqueta <progress>
Línea 123: Línea 159:
     * [[http://blog.teamtreehouse.com/use-meter-progress-elements|How to use the Meter & Progress Elements]]     * [[http://blog.teamtreehouse.com/use-meter-progress-elements|How to use the Meter & Progress Elements]]
  
-====== Desplegables en cajas de texto ====== 
-Se usa la etiqueta <datalist> para crear lista en etiquetas <input> pero que son cajas de texto y admiten otros valores. 
  
-Como usar la  etiqueta <datalist>: +===== Ejercicios =====
-    * [[https://www.w3schools.com/tags/tag_datalist.asp|DataList en HTML5]]+
  
-====== 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 "box-sizing: border-box" y si no lo añades+Mira a ver al diferencia de tamaño si añades "box-sizing: border-box" y si no lo añades. 
 + 
 +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 ==== 
 +Indica para los siguientes elementos que tipo de display es el mas adecuado: 
 +  * inline 
 +  * inline-block 
 +  * block 
 + 
 +^  Elemento  ^  display  ^  
 +| 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 ''display:none'' y otro ejemplo en el que sea mejor usar ''visibility:hidden'' 
 + 
 + 
 +==== Ejercicio 4 ==== 
 +Imagina un ejemplo de página web en la que sea mejor usar "&nbsp;" que un espacio. 
 + 
 + 
 +==== Ejercicio 5 ==== 
 +Haz una página web como la siguiente (Solo debe estar el fondo, las cajas y las sombras): 
 + 
 +{{:clase:daw:diw:1eval:sombras_y_profundidad.png|}} 
 + 
 + 
 +==== 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
  
-===== Ejercicio 2 ===== +El valor que se usará en el ''<meter>'' estará en una caja de texto y se actualizará al pulsar un botón
-Añade al ejercicio anterior un margen de 100px y mira si ahora cambia el tamaño con "box-sizing: border-box" o sin él.+
  
  
  
clase/daw/diw/1eval/tema03.1599589446.txt.gz · Última modificación: 2020/09/08 20:24 por admin

Herramientas de la página

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki