Clase 6 | | HTML + CSS INTERMEDIO |

En la teórica vimos:  

 

  • http://catedraocampo.com.ar/vn00/
  • Etiqueta semántica < nav></nav>: crea menú de navegación.
  • Etiqueta semántica <p></p>: crea un párrafo.
  • <span></span>: El elemento span es un contenedor genérico sin un significado semántico en particular. Es comúnmente usado en la creación de páginas con propósitos estilísticos, en conjunto con los atributos style y class.

 


Hoja de estilo CSS propiedades:

 

  • padding: rellenodistancia de separación entre el borde y el contenido hacia adentro.
  • margin:  distancia de separación entre el borde y la parte exterior del elemento hacia afuera.
  • list-style-type:  estilo aplicable a los marcadores visuales de las listas (ej:  circle, square, none).
  • border: dibuja un borde alrededor del contenido. Ancho, estilo y color para los cuatro bordes.
  • text-align: alineamiento del texto. (ej: right, left, center ).
  • display: comportamiento del contenedor ( ej: inline, block, none, ).
  • text-decoration: efectos de subrayado, tachado, parpadeo. (ej: none, underline, overline).
  • box-shadow: sombra del contenido.
  • boeder-radius: borde redondeado alrededor del contenido.
  • line-height: alto de linea.

 


Selectores:

  • Selector de clase.
  • Selector universal.
  • Selector de etiqueta.

 

htmlintermedio

 Teorica html+css 2
 dgpc_apunte_CSS

 


LINKS | CSS Cascading Style Sheets | Hojas de Estilo en Cascada | 



UNIDADES DE MEDIDAS: REM  y  %

 

Toda página web es adaptable a los distintos dispositivos. Nosotros al trabajar los diseños y los estilos CSS vamos bloqueando esta capacidad nativa con tamaños, medidas y posiciones rígidos que hacen que las páginas web dejen de ser adaptables.

Si a un archivo HTML simple, con varios párrafos, algunos encabezados, se abren en un navegador y se comienza a reducir el tamaño de la ventana, se observará que la página web se adapta sin haber escrito una sola línea de CSS o un Media Query.

La rigidez al momento de crear los estilos CSS para nuestras páginas proviene de la aplicación de tamaños fijos a los elementos y también en parte del uso de una unidad de medida rígida: los pixeles.

Al usar pixeles para definir las dimensiones de los objetos y los estilos de fuente no solo estamos definiendo tamaños rígidos, sino que también estamos ignorando las configuraciones que cada usuario pueda tener en su navegador.

Unidades de medida recomendadas

Hay 3 unidades de medida  (%, rem, em) en CSS que son las que se deberían usar en el diseño web actual. Nosotros utilizaremos:

 

  • Porcentajes
  • Rem

 

Porcentajes

La unidad de medida porcentual es la que se usa por defecto en los elementos HTML en donde de manera predeterminada cada elemento de bloque usa un ancho del 100%, es por eso que cuando achicamos la ventana del navegador con una página que no tenga estilos, la página se adapta, ya que siempre usará el ancho total visible.

Rem

La unidad de medida rem depende del elemento raíz del documento, el elemento HTML. Rem significa “Root Em“, o sea, es un em basado en la raíz.

Esto significa que si el elemento HTML tiene un tamaño de fuente de 16px (como es por defecto), entonces 1rem, sería igual a 16px, y si queremos aplicar un tamaño basado en rem a cualquier elemento de la página, no importará cual sea el tamaño de fuente que tenga asociado ese elemento, ya que 1 rem siempre será igual a 16 pixeles a no ser que se modifique el elemento raíz.

Usar rem nos permite cierta estructura para poder definir ciertas partes del layout, pero al mismo tiempo nos entrega cierta escalabilidad para respetar las configuraciones de cada usuario.

Esta unidad de medida es recomendable para aplicar a elementos del layout que requieran medidas fijas y eventualmente también para textos que deseemos que tengan un tamaño de fuente que no dependa de su elemento padre.