HTML y CSS 2

-



HTML

HTML significa Hypertext Markup language, define el contenido y la estructura de una página web. Es un lenguaje de etiquetado. Los tags (etiquetas) pueden tener atributos que proveen información adicional sobre un elemento.

Algunas etiquetas de HTML y algunos atributos que siempre se encuentran son:


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <title>React App</title>

  </head>

  <body>

    <div id="root">

    </div>

  </body>

</html>


CSS

CSS significa Cascading Style Sheets, define el estilo y la apariencia de la página, usa selectores que designan exactamente a cuál elemento dentro del HTML se aplicará un estilo, para esto se usan propiedades que determinan los estilos que se aplicarán.

Algunas de las propiedades son:

  • Box-sizing: Permite incluir el padding y el borde dentro de la altura y ancho de un elemento.
  • Justify-content:  Para justificar un elemento.
  • Border-radius: Para darle borde a un elemento.
  • Display: Permite especificar si un elemento se mostrará en línea o en bloque.
  • Background-color: Para indicar un color de fondo.
  • Font-family: Para asignar un tipo de letra.
  • White-space: Salto de línea.
  • Transition: Para crear transiciones.

 

Más de CSS

Flexbox es un concepto de diseño con elementos flexibles distribuidos en filas horizontales o columnas verticales. Permite organizar los elementos en la página web. CSS Tricks cuenta con una guía muy completa para usar flexbox.


Para tener más opciones de fuentes se puede usar fonts de Google:

En la carpeta public del proyecto, se crea una carpeta fonts donde se agrega la carpeta de la Font-family con los archivos woff2 que entrega Google con los estilos de fuente. Estos se pueden importar al archivo css:


@font-face{

    font-family:

    font-style:

    font-weight:

    src: url(‘…/public/fonts/Font-family/Font-style.woff2’) format(‘woff2’)

}


Para agregar íconos en la página web se puede usar Font Awesome. El script necesario para usarlo se agrega al final del head del HTML, con esto ya podemos usar las clases de Font Awesome para usar un ícono en específico. También hay una librería de Font Awesome para React.

 

Para conocer más sobre CSS y HTML: Shayhowe

 

Responsive design

Responsive design es diseñar la página para múltiples tamaños de pantalla y diferentes resoluciones. Esto implica tener imágenes flexibles, tamaños de fuentes relativas (px, em, rem, %) y media queries.

Para definir los cambios de diseño a medida que cambia el tamaño de la pantalla se usan breakpoints con la dimensión de la pantalla. Lo ideal es crearlo desde la pantalla más pequeña a la más grande (mobile first).

 

@media screen and (max-width: 768px) {

      /*Se agregan los selectores y las propiedades

      Que se necesitan para cambiar el estilo*/

}


Comentarios

Publicar un comentario