Información general sobre el trabajo con CSS

Las hojas de estilos en cascada (CSS) contienen reglas de estilo que se aplican a los elementos de una página web. Estos estilos definen la forma en que se van a mostrar los elementos y su posición en la página. Visual Studio proporciona herramientas que se pueden usar con las hojas CSS.

Este tema contiene las secciones siguientes:

• Escenarios

• Características de las herramientas de CSS

• Background

• Ejemplos de código

• Referencia de clases

• Sugerencias

Escenarios

Al editar páginas web, puede crear reglas de estilo en tres lugares: en línea, dentro de una sección <style> en una página web o de dentro de una hoja de estilos externa. Puede ver el relleno y los márgenes aplicados a los elementos de la página utilizando las ayudas visuales. También puede colocar los elementos con las herramientas de posición.

Volver al principio

Características de las herramientas de CSS

Visual Studio ofrece las herramientas siguientes para crear, aplicar y administrar estilos y hojas de estilos en cascada (CSS):

• La ventana Aplicar estilos permite crear, modificar y aplicar estilos. También puede vincular o quitar una CSS externa. La ventana identifica los tipos de estilo y muestra si el estilo se usa en la página web actual y si la selección actual lo usa.

• La ventana Administrar estilos proporciona muchas de las características de la ventana Aplicar estilos. Sin embargo, puede usar la ventana Administrar estilos para mover estilos de una sección <style> de una página a una hoja de estilos externa o viceversa. También puede utilizarla para mover los estilos dentro de una hoja de estilos.

• La ventana Propiedades de CSS muestra los estilos usados por la selección actual en una página web. También muestra el orden de prioridad de los estilos. Además, la ventana ofrece una lista completa de todas las propiedades de CSS. Puede agregar propiedades a un estilo existente, modificar propiedades ya establecidas y crear nuevos estilos en línea. Para obtener más información, vea Cómo: Usar la ventana Propiedades de CSS.

• Si trabaja con páginas de formularios Web Forms ASP.NET (archivos .aspx), el selector de etiquetas permite seleccionar las etiquetas HTML mientras se trabaja en una página web. La barra del selector de etiquetas se encuentra en la parte inferior de la ventana de edición. Cuando se coloca el cursor en cualquier parte de una página, la barra rápida del selector de etiquetas muestra la etiqueta HTML subyacente de ese área. También puede utilizar la tecla ESC para desplazarse hacia arriba en la jerarquía HTML para seleccionar etiquetas que están anidadas dentro de otras etiquetas.

Volver al principio

Antecedentes

No es necesario asignar atributos de formato a cada elemento de un tipo determinado en una página. En su lugar, puede crear una regla de estilo que se aplique a todos los elementos de ese tipo. Estas reglas aplican valores de propiedad como reglas de formato a cualquier instancia de un elemento o a cualquier elemento que tiene un identificador o una clase de estilo concretos.

En esta sección, obtendrá información sobre los estilos CSS y cómo crearlos y aplicarlos mediante Visual Studio.

Definir reglas de estilo CSS

Cada regla de estilo CSS (también denominada estilo) tiene dos partes principales: un selector (por ejemplo, h1) y una declaración (por ejemplo, color:blue). La declaración consta de una propiedad (color) y su valor (blue). La sintaxis de una regla de estilo es la siguiente:

Selector { property : value ; property2 : value2}

Por ejemplo, la siguiente regla de estilo CSS especifica que el texto de todos los elementos h1 esté centrado y tenga un color de fuente azul.

h1 {text-align:center; color:blue;}

Utilizar diferentes tipos de estilos

Una regla de estilo se aplica a un elemento, a un elemento que tenga un atributo class o a un elemento que tenga un identificador. En una hoja de estilos, cada uno de ellos se representa mediante un selector. Un selector basado en una clase está precedido por un punto (.). Un selector basado en un identificador está precedido por una almohadilla (#). Un selector basado en elemento es simplemente el nombre del elemento HTML, como h1. Un estilo completo es un selector más un conjunto de declaraciones de propiedad dentro de una llave de apertura ( { ) y una llave de cierre ( } ).

Estilos basados en elementos

Los estilos basados en elementos definen las propiedades que se desea aplicar a todas las instancias de un elemento HTML determinado. (Los estilos basados en clases pueden invalidarse con estilos basados en elementos o con estilos basados en identificadores para las instancias individuales de un elemento.) Por ejemplo, es posible que desee crear un margen de 25 píxeles alrededor de todos los párrafos (elementos p). Para ello, se crea un estilo que usa el selector p seguido por llaves que contienen las propiedades de margen. En el ejemplo siguiente se muestra esta regla de estilo basada en elementos.

p { margin-left: 25px; margin-right: 25px }

Estilos basados en clases

Los estilos basados en clases definen las propiedades que se desea aplicar a un subconjunto de un tipo de elemento determinado (por ejemplo, a algunos de los elementos p). También se pueden aplicar a tipos diferentes de elementos, como a algunos elementos p y a algunos elementos span. En el ejemplo siguiente se muestra una regla de estilo basada en clases. El nombre introduction es el selector del estilo (el nombre de la clase).

.introduction {font-size: small; color: white}

En el ejemplo siguiente se muestra cómo especificar una clase para una etiqueta <p>:

<p class="introduction">

Estilos basados en identificadores

Los estilos basados en identificadores definen las propiedades que se desea aplicar a elementos que tienen un identificador específico. Los estilos basados en identificadores se suelen usar para aplicar un estilo a un único elemento HTML en una página web. En el ejemplo siguiente se muestra un estilo basado en identificadores El nombre footer especifica el identificador al que se aplica este estilo.

#footer {background-color: #CCCCCC; margin: 15px}

En el ejemplo siguiente se muestra cómo especificar un identificador para una etiqueta <p>:

<p id="footer">

Escribir estilos CSS

Se puede escribir reglas de estilo CSS en varios lugares, incluidos los siguientes:

• Inline con el marcado HTML.

• En un elemento style de una página web.

• En una hoja de estilos externa (archivo .css) que se vincula o se importa en la página web.

En general, las reglas que se aplican al sitio web entero se escriben en una hoja de estilos externa. Las reglas de estilo que se aplican sólo a una página se escriben en el elemento style de la página. Las reglas de estilo que se aplican a un único elemento de la página se escriben como estilo inline. Muchos diseñadores y programadores encuentran que escribir reglas de estilo en una o varias hojas de estilos externas facilita el mantenimiento de los estilos.

Crear estilos alineados

Una regla del estilo inline se define en la etiqueta de apertura de un elemento mediante el atributo de estilo. Use un estilo en línea si desea definir propiedades para un único elemento de una página web y no desea volver a usar ese estilo. En el ejemplo siguiente se muestra un estilo inline.

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Crear estilos CSS internos (específicos de la página)

Las reglas de estilos CSS se pueden definir en un elemento style dentro del elemento head de una página web. En ese caso, las reglas de estilo se aplican sólo a los elementos de esa página.

En el ejemplo de código siguiente se muestra cómo definir y aplicar una regla de estilo CSS a todos los elementos h1 de una página web.

<!DOCTYPE HTML>
<html>
  <head>
    <title>CSS Element Style Example</title>
      <style>
        h1{text-align:center; color:blue;}
      </style>
  </head>
  <body>
    <h1>This text is centered and blue</h1>
  </body>
</html>

En esta página web, todo el texto que aparezca entre las etiquetas <h1> y </h1> está centrado y es de color azul. No es necesario volver a asignar estos atributos de estilo para cada elemento h1 del documento. Si desea cambiar el color (o cualquier propiedad) de todo el texto en los elementos h1, puede modificar una regla de estilo.

Crear hojas de estilos en cascada externas

Una hoja de estilos externa es un archivo de texto con una extensión de nombre de archivo .css que contiene sólo reglas de estilo. Puede vincular una hoja de estilos a una página web usando un elemento link, como se muestra en el ejemplo siguiente.

<link rel="stylesheet" href="myStyles.css" />

Este elemento link aplica las reglas de estilo de la hoja de estilos externa myStyles.css a la página actual.

Las reglas de estilo incluidas en una hoja de estilos externa se escriben de la misma manera que en un elemento style.Sin embargo, no se escriben entre etiquetas <style> y </style>. En el ejemplo siguiente se muestra el contenido completo de un archivo .css sencillo.

h1 { text-align:center; color:blue; } 
.head2 { font-size:14pt; text-align:center; color:blue; font-weight:bold; font-style:italic; }

Puede vincular una hoja de estilos externa a varias páginas HTML para aplicar los estilos a todo el sitio web. Las hojas de estilos separan las reglas de formato del contenido. De esta manera resulta más fácil administrar las reglas de estilo.

Introducción a la prioridad de las reglas de estilo CSS

Las reglas de estilo CSS se aplican "en cascada" porque siguen un orden de prioridad. Las reglas de estilo globales se aplican primero a los elementos HTML y las reglas de estilo locales las invalidan. Por ejemplo, un estilo definido en un elemento style de una página web invalida un estilo definido en una hoja de estilos externa. De forma similar, un estilo inline definido en un elemento HTML de la página invalida cualquier estilo definido para el mismo elemento en cualquier otra parte.

Las reglas de estilo globales individuales se aplican a menos que sean reemplazadas por reglas de estilo CSS locales. En el ejemplo de la sección anterior, los estilos CSS locales que controlan el texto del elemento h1 reemplazan algunas de las reglas de estilo globales h1 (centrar el texto h1 y ponerlo en color azul). Sin embargo, no cambian todos los estilos disponibles, como las características de la fuente. Se aplican las reglas de estilo globales y locales, en ese orden. El resultado es que todo el texto h1 de esta página se muestra en una fuente mayor con formato negrita, centrado y azul.

Ejemplos de código

Tutorial: Crear y modificar un archivo CSS

Tutorial: Trabajar con un archivo CSS existente

Cómo: Usar la ventana Propiedades de CSS

Volver al principio

Referencia de clases

No se aplica ninguna clase a las herramientas de CSS.

Volver al principio

Sugerencias

Visual Studio presenta una edición de CSS enriquecida con diversas herramientas para que resulte más fácil que nunca trabajar con hojas de estilos en cascada (CSS). Gran parte del trabajo de preparación del diseño y de aplicación de estilos al contenido se puede realizar en la Vista de diseño con la ventana Propiedades de CSS, y las ventanas Aplicar estilos y Administrar estilos. También puede cambiar la posición, el relleno y los márgenes en la Vista de diseño con las herramientas de diseño visuales WYSIWYG.

Volver al principio