Introducción CSS

CSS Introducción

CSS, o Hojas de estilos, define la forma de mostrar HTML. Mientras que el HTML define el contenido de un documento, la hoja de estilos define la presentación de ese contenido. CSS. se añadió al HTML 4.0 y proporciona una forma de separar el contenido de la presentación.

CSS Sintaxis

Reglas de CSS se compone de dos partes, una selección, y las declaraciones de uno o más. El siguiente diagrama ilustra la siguiente sintaxis::

El Selector es el elemento HTML a ser de estilo:.

Cada Declaration se compone de property y un valor. La propiedad es el atributo de estilo para ser cambiado. The value es lo que el atributo se establece en. Los dos puntos (:) se utiliza para separar la propiedad y su valor.

Como se ilustra en el diagrama, las Declaraciones de terminar con el punto y coma (;) y están rodeadas por llaves ({y}).

CSS Selectores

Estilos se pueden aplicar a los elementos específicos de HTML especificando el elemento HTML, adjuntando los estilos dentro de llaves. El siguiente ejemplo muestra un estilo que se aplica al elemento (p) (Parrafo) .

p { color:blue; }

En este caso, todos los elementos del párrafo en el documento tendría un color de texto de color azul.
Hay muchos tipos diferentes de selectores que permiten una gran flexibilidad en la aplicación de estilos a los elementos.

CSS Clases & ID Selectores

Además de utilizar los selectores de elemento de HTML, Selectores personalizados también se pueden definir en la forma de los selectores de clase y de identificación. Esto permite que el elemento HTML mismo, pero de estilo diferente en función de su clase o ID. Un selector de ID puede ser utilizado para identificar un elemento, mientras que un selector de clase puede ser utilizada para identificar más de un elemento.

En CSS, un selector de clase es un nombre precedido por un punto (.) Y un selector ID es un nombre precedido por el signo numeral (#).

El siguiente código CSS muestra un selector de clase y un selector de ID.

  color:blue;

  font-weight:bold;

}

#codebox {

  background-color:#dddddd;

  padding:10px;

  border-style:solid;

  border-width:1px;

}

El siguiente ejemplo utiliza estos estilos en el código HTML:

 <p>

  'normal' text here

</p>

<p class="highlight">

  'highlight' text here

</p>

</div> 

CSS Comentarios

En CSS, un comentario comienza con / * y termina con * /. Los comentarios pueden ocupar varias líneas, pero no pueden anidarse.
El siguiente ejemplo muestra una sola línea y un comentario de varias líneas.

/* A single-line comment */

/* A comment that

   spans multiple lines */