Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial CSS con Angular 9/8: ngClass, ngStyle y ViewEncapsulation

 En este tutorial, aprenderemos sobre CSS y cómo usarlo en aplicaciones angulares. Veremos por ejemplo cómo se diseña una aplicación de Angular 8 generada por Angular CLI.

También veremos cómo usar las directivas integradas ngClass y ngStyle para aplicar estilos dinámicamente en Angular 9

También veremos las diversas API y configuraciones relacionadas con CSS en Angular.

CSS para desarrolladores de Angular 9

En pocas palabras, aprenderemos:

  • Los conceptos básicos de CSS para desarrolladores de Angular 9,
  • Cómo usar estilos CSS en componentes,
  • Estilos CSS globales,
  • CSS y encapsulación de vistas en Angular,
  • Selector de componentes,
  • Cómo importar CSS y cómo usar un marco CSS como Bootstrap o Tailwind con Angular 9,
  • El :hostselector de pseudo-clases
  • Cómo diseñar componentes padre e hijo,
  • Cómo compartir CSS entre componentes y mucho más.

Puede usar Angular CLI como herramienta para inicializar y trabajar con su proyecto de Angular 9 o Stackblitz, el IDE en línea para el desarrollo front-end.

¿Qué es CSS?

Entonces, ¿qué es CSS?

Consulte Wikipedia para conocer la definición de CSS.

Hojas de estilo en cascada (CSS) es un lenguaje de hoja de estilo que se utiliza para describir la presentación de un documento escrito en un lenguaje de marcado como HTML. CSS es una tecnología fundamental de la World Wide Web, junto con HTML y JavaScript.

CSS permite a los desarrolladores separar la presentación del contenido. Esto tiene muchos beneficios, como permitir que varias páginas web compartan el formato al especificar el CSS relevante en un .cssarchivo separado , reducir la complejidad y la repetición en el contenido estructural.

Así, podemos ver que CSS intenta resolver los problemas comunes en el software general y el desarrollo web, como la reutilización y la separación de preocupaciones.

Si sabe que HTML es el primer idioma que necesita aprender como desarrollador web (frontend o backend), también querrá saber que CSS es el segundo idioma que debe conocer. En la mayoría de los casos, no es necesario ser un experto en CSS, ¡pero al menos debería tener los conceptos básicos!

¿Cómo se relaciona CSS con HTML?

HTML es un lenguaje de marcado que se utiliza para crear la estructura de las páginas web al permitirle agregar títulos, párrafos, formularios y tablas e incrustar imágenes, videos y otros tipos de medios. CSS, por otro lado, se ocupa de diseñar las páginas web, como diseños, colores y fuentes, y mucho más.

¿Cómo se usa CSS?

CSS está profundamente relacionado con HTML, ya que se aplica a las etiquetas de elementos HTML mediante varias formas, como archivos CSS externos, estilos CSS internos o estilos en línea.

Por ejemplo, tomemos la <body>etiqueta de elemento en HTML que define el contenido principal del documento HTML que será directamente visible en su página web.

Si desea que el fondo de la página web aparezca en negro y el color de cualquier texto dentro del cuerpo aparezca en blanco, deberá usar los estilos CSS de la siguiente manera:

body  {  color: white;  background-color:black;  }

En este ejemplo, bodyes el selector de CSS el que define la etiqueta del elemento HTML a la que se aplicarán los estilos CSS.

En CSS, debe colocar el selector de elementos a la izquierda y las propiedades de CSS como el color y el color de fondo y sus valores entre corchetes a la derecha. La parte derecha se llama declaración CSS .

Nota : En nuestro ejemplo, color y background-color son propiedades CSS mientras que whiteblackson valores. Una propiedad CSS puede tener más de un valor aceptado en la mayoría de los casos.

En nuestro ejemplo, usamos un selector CSS simple para seleccionar el cuerpo HTML en un documento, pero CSS proporciona selectores complejos y poderosos que pueden seleccionar múltiples elementos HTML basados ​​en varias reglas.

¿Cómo se aplica CSS a los elementos HTML?

Ahora que ha visto un ejemplo simple de un selector y declaración de CSS, ¿cómo aplicamos el código CSS definido a un documento HTML real?

Como dijimos anteriormente, CSS está profundamente relacionado con HTML. Como tal, HTML proporciona más de una forma de adjuntar estilos CSS a documentos HTML.

HTML proporciona tres formas que puede utilizar para adjuntar estilos CSS a sus páginas HTML, como:

  • Usando hojas de estilo CSS externas (archivos de texto simple con la .cssextensión),
  • Usando estilos CSS internos a través del <style>elemento de etiqueta HTML ,
  • Usar estilos CSS en línea a través del styleatributo soportado por etiquetas de elementos HTML.

Las hojas de estilo externas se pueden adjuntar a un sitio web completo, mientras que los estilos internos se pueden adjuntar a páginas individuales y, finalmente, los estilos en línea solo se pueden adjuntar a etiquetas de elementos HTML individuales. Los dos últimos métodos solo deben usarse para casos de uso pequeños.

En la mayoría de los casos, todo lo anterior se combina para diseñar sitios web.

Ahora, ¿cómo adjuntar un archivo de hoja de estilo externo a un archivo HTML? Simplemente necesita usar la <link>etiqueta en la <head>sección del documento y apuntar la hrefetiqueta al URI del archivo CSS:

<head>
<link rel=”stylesheet”  type=”text/css”  href="styles.css”>
</head>

Los estilos internos son instrucciones CSS que se agregan en <head>un documento HTML a través de la <style>etiqueta:

<head>
<style>
body {  color: white; background-color: blue;  }
</style>
</head>

Los estilos en línea son código CSS que se agrega directamente al elemento HTML y se aplica solo a ese elemento. Por ejemplo:

<h1  style=”color: white;”>CSS Tutorial</h1>

Nota : Angular agrega más formas de adjuntar CSS a plantillas HTML y proporciona más funciones para trabajar con CSS.

Conclusión

Como resumen de nuestro tutorial de CSS, hemos visto qué es CSS y para qué se utiliza.

Publicar un comentario

0 Comentarios