CSS - Inclusión

Hay cuatro formas de asociar estilos con su documento HTML. Los métodos más utilizados son CSS en línea y CSS externo.

CSS incrustado: el elemento <style>

Puede poner sus reglas CSS en un documento HTML usando el elemento <style>. Esta etiqueta se coloca dentro de las etiquetas <head> ... </head>. Las reglas definidas con esta sintaxis se aplicarán a todos los elementos disponibles en el documento. Aquí está la sintaxis genérica:

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>   
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

Producirá el siguiente resultado:

Atributos

Los atributos asociados con los elementos <style> son:

Atributo	Valor	Descripción
tipo	texto / css	Especifica el lenguaje de la hoja de estilo como tipo de contenido (tipo MIME). Este es un atributo obligatorio.
medios de comunicación	pantalla tty TV proyección Mano impresión braille auditivo todas	Especifica el dispositivo en el que se mostrará el documento. El valor predeterminado es todo . Este es un atributo opcional.

CSS en línea: el atributo de estilo

Puede utilizar el atributo de estilo de cualquier elemento HTML para definir reglas de estilo. Estas reglas se aplicarán únicamente a ese elemento. Aquí está la sintaxis genérica:

<element style = "...style rules....">

Atributos

Atributo	Valor	Descripción
estilo	reglas de estilo	El valor del atributo de estilo es una combinación de declaraciones de estilo separadas por punto y coma (;).

Ejemplo

A continuación se muestra el ejemplo de CSS en línea basado en la sintaxis anterior:

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

Producirá el siguiente resultado:

CSS externo: el elemento <link>

El elemento <link> puede usarse para incluir un archivo de hoja de estilo externo en su documento HTML.

Una hoja de estilo externa es un archivo de texto separado con .cssextensión. Usted define todas las reglas de estilo dentro de este archivo de texto y luego puede incluir este archivo en cualquier documento HTML usando el elemento <link>.

Aquí está la sintaxis genérica de incluir un archivo CSS externo:

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

Atributos

Los atributos asociados con los elementos <style> son:

Atributo	Valor	Descripción
tipo	texto css	Especifica el lenguaje de la hoja de estilo como tipo de contenido (tipo MIME). Este atributo es obligatorio.
href	URL	Especifica el archivo de hoja de estilo que tiene reglas de estilo. Este atributo es obligatorio.
medios de comunicación	pantalla tty TV proyección Mano impresión braille auditivo todas	Especifica el dispositivo en el que se mostrará el documento. El valor predeterminado es todo . Este es un atributo opcional.

Ejemplo

Considere un archivo de hoja de estilo simple con un nombre mystyle.css que tenga las siguientes reglas:

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Ahora puede incluir este archivo mystyle.css en cualquier documento HTML de la siguiente manera:

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

CSS importado - Regla @import

@import se usa para importar una hoja de estilo externa de una manera similar al elemento <link>. Aquí está la sintaxis genérica de la regla @import.

<head>
   @import "URL";
</head>

Aquí URL es la URL del archivo de hoja de estilo que tiene reglas de estilo. También puede usar otra sintaxis:

<head>
   @import url("URL");
</head>

Ejemplo

A continuación se muestra el ejemplo que le muestra cómo importar un archivo de hoja de estilo en un documento HTML:

<head>
   @import "mystyle.css";
</head>

Anulación de reglas CSS

Hemos discutido cuatro formas de incluir reglas de hojas de estilo en un documento HTML. Esta es la regla para anular cualquier regla de hoja de estilo.

Cualquier hoja de estilo en línea tiene la máxima prioridad. Por lo tanto, anulará cualquier regla definida en las etiquetas <style> ... </style> o las reglas definidas en cualquier archivo de hoja de estilo externo.
Cualquier regla definida en las etiquetas <style> ... </style> anulará las reglas definidas en cualquier archivo de hoja de estilo externo.
Cualquier regla definida en un archivo de hoja de estilo externo tiene la prioridad más baja, y las reglas definidas en este archivo se aplicarán solo cuando las dos reglas anteriores no sean aplicables.

Manejo de navegadores antiguos

Todavía hay muchos navegadores antiguos que no admiten CSS. Por lo tanto, debemos tener cuidado al escribir nuestro CSS incrustado en un documento HTML. El siguiente fragmento muestra cómo puede usar etiquetas de comentarios para ocultar CSS de los navegadores más antiguos:

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

Comentarios CSS

Muchas veces, es posible que deba incluir comentarios adicionales en los bloques de la hoja de estilo. Entonces, es muy fácil comentar cualquier parte de la hoja de estilo. Puede simplemente poner sus comentarios dentro de /*..... este es un comentario en la hoja de estilo ..... * /.

Puede usar / * .... * / para comentar bloques de varias líneas de manera similar a como lo hace en los lenguajes de programación C y C ++.

Ejemplo

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      </style>
   </head>

   <body>
      <p>Hello World!</p>
   </body>
</html>

Producirá el siguiente resultado:

↰ Previous page Next page ↱