====== 3. CSS ====== ===== Como añadir CSS ===== Hay 3 formas de añadir CSS a una página: * Con un fichero externo y añadiendo en el : * * Añadiendo la etiqueta * CSS dentro del propio elemento con el atributo "style". *

This is a heading

 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. ===== Selectores y especificidad ===== Se deben usar prácticamente siempre únicamente selectores de clase. Hay uchos tipos de selectores en CSS: * [[http://www.w3schools.com/css/css_syntax.asp|CSS Syntax and Selectors]] * [[http://www.w3schools.com/cssref/css_selectors.asp|CSS Selector Reference]] * [[https://code.tutsplus.com/es/tutorials/the-30-css-selectors-you-must-memorize--net-16048|Los 30 selectores CSS que debes memorizar]] Cuando mas complejo sea el selector tendrá una **Especificidad** mas alta y queremos que sea baja: * [[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 "." ===== 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. * [[https://css-tricks.com/box-sizing/|box-sizing]] .mi_caja { width: 80px; padding: 5px; border: 5px solid red; margin: 10px; } {{modelo_de_caja_css.png?500|}} Como indicar correctamente el box-sizing: html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } Al ''reset.scss'' del tema anterior hay que añadir siempre este código CSS. ===== 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. * inline-block: Como "inline" pero permite especificar el ancho y el alto. * block: Despues del elemento se genera un salto de linea y también permite especificar el ancho y el alto. Mas información: * [[http://www.w3schools.com/css/css_inline-block.asp|inline-block]] * [[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 '''', ''
'', '' con inline-block'' y ''
con inline-block'' .destacar { color:red; font-weight:bold }

span:Frodo lo sacó del bolsillo del pantalón ,donde lo guardaba enganchado a una cadena que le colgaba del cinturón.

div:Frodo lo sacó del bolsillo del

pantalón
,donde lo guardaba enganchado a una
cadena
que le colgaba del cinturón.

span inline-block:Frodo lo sacó del bolsillo del pantalón ,donde lo guardaba enganchado a una cadena que le colgaba del cinturón.

div inline-block:Frodo lo sacó del bolsillo del

pantalón
,donde lo guardaba enganchado a una
cadena
que le colgaba del cinturón.

===== 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. Se puede ver un ejemplo [[https://codepen.io/CybMeta/pen/xGwoyd|Aqui]] =====   ===== Hace que un espacio con " " sea como una letra mas por lo que no partirá la frase por ese espacio. Mas información: * [[https://stackoverflow.com/questions/1357078/whats-the-difference-between-nbsp-and|What's the difference between “ ” and “ ”?]] ===== Sombras ===== Las sombras se usan para dar sensación de profundidad sin necesidad de bordes. Suponemos que la luz viene de arriba. {{:clase:daw:diw:1eval:luz_y_sombras.png|}} {{:clase:daw:diw:1eval:sombras_y_profundidad.png|}} Se usa la propiedad "box-shadow": [[https://www.w3schools.com/css/css3_shadows_box.asp|Ejemplos de box-shadow]] ===== Meter & Progress ===== Etiquetas HTML para: * Barra de progreso: Etiqueta * Barra de medida: Etiqueta Como usar las etiquetas y * [[http://blog.teamtreehouse.com/use-meter-progress-elements|How to use the Meter & Progress Elements]] ===== Ejercicios ===== ==== Ejercicio 1 ==== 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. 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 " " 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 ''''. 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 '''' 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 ''''. 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 '''' estará en una caja de texto y se actualizará al pulsar un botón