logo

Tipos de CSS

CSS (hoja de estilo en cascada) describe los elementos HTML que se muestran en pantalla, papel , o en otros medios . Ahorra mucho tiempo. Controla el diseño de varias páginas web a la vez. Establece el tamaño de fuente, familia de fuentes, color, color de fondo en la pagina.

Nos permite agregar efectos o animaciones al sitio web. Usamos CSS para mostrar animaciones como botones, efectos, cargadores o hilanderos , y también fondos animados .

Sin uso CSS , el sitio web no se verá atractivo. Hay 3 tipos de CSS que se encuentran a continuación:

  • CSS en línea
  • CSS interno/integrado
  • CSS externo
Tipos de CSS

1. CSS interno

El CSS interno tiene etiqueta en el sección de la HTML documento. Este estilo CSS es una forma eficaz de diseñar páginas individuales. Usar el estilo CSS para múltiples páginas web lleva mucho tiempo porque necesitamos colocar el estilo en cada página web.

Podemos utilizar el CSS interno siguiendo los siguientes pasos:

1. En primer lugar, abra el HTML página y localice el

2. Coloque el siguiente código después del

 

3. Añade el normas de CSS en la nueva línea.

Ejemplo:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. Cierre la etiqueta de estilo.

 

Después de agregar el CSS interno, el archivo HTML completo tiene el siguiente aspecto:

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

También podemos usar los selectores. (clase y cédula) en la hoja de estilo.

Ejemplo:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

Ventajas del CSS interno

    CSS internoNo podemos cargar varios archivos cuando agregamos el código con la página HTML.

Contras del CSS interno:

  • Agregar código en el HTML documento reducirá el tamaño de página y Tiempo de carga de la página web.

2. CSS externo

En CSS externo, vinculamos las páginas web al externo. .css archivo. Es creado por editor de texto . El CSS es un método más eficiente para diseñar un sitio web. Al editar el .css archivo, podemos cambiar todo el sitio a la vez.

Para utilizar el CSS externo, siga los pasos que se detallan a continuación:

1. Crea un nuevo .css presentar con editor de texto , y añadir Hoja estilo cascada reglas también.

Por ejemplo:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. Agregue una referencia al externo. .css archivo justo después etiqueta en el Sección de hoja HTML :

 

Ventajas del CSS externo:

  • Nuestros archivos tienen una estructura más limpia y de menor tamaño.
  • Usamos lo mismo .css archivo para múltiples páginas web en CSS externo.

Contras del CSS externo:

  • Las páginas no se pueden entregar correctamente antes de que se cargue el CSS externo.
  • En CSS externo, cargar muchos archivos CSS puede aumentar el tiempo de descarga de un sitio web.

3. CSS en línea

CSS en línea se utiliza para diseñar un diseño específico. HTML elemento. Agrega un estilo atributo a cada etiqueta HTML sin utilizar los selectores. Administrar un sitio web puede resultar complicado si utilizamos únicamente CSS en línea . Sin embargo, en línea CSS en HTML es útil en algunas situaciones. No hemos accedido al Archivos CSS o para aplicar estilos al elemento.

En el siguiente ejemplo, hemos utilizado el CSS en línea en

iterador java para mapa
y

Será útil aquí.

Ventajas de CSS en línea:

  • Podemos crear reglas CSS en la página HTML.
  • No podemos crear y cargar un documento separado en CSS en línea.

Contras de CSS en línea:

  • CSS en línea, agregando CSS reglas para elementos HTML es pérdida de tiempo y líos hasta la estructura HTML.
  • Diseña varios elementos al mismo tiempo, lo que puede afectar el tamaño de la página y el tiempo de descarga de la misma.