Información general sobre el trabajo con CSS

  • Artículo

Actualización: noviembre 2007

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 cómo se muestran los elementos y donde se colocan en la página. Visual Studio 2008 proporciona herramientas que pueden utilizarse para trabajar con CSS.

Este tema contiene:

  • Escenarios

  • Características de las herramientas de CSS

  • Información general

  • Ejemplos de código

  • Referencia de clase

  • Lo nuevo

Escenarios

En Visual Studio 2008, mientras está utilizando el diseñador para crear y modificar páginas web, puede escribir reglas de estilo inline, contenidas en una página web o contenidas en 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 2008 ofrece un conjunto de herramientas para crear, aplicar y administrar estilos y hojas de estilos en cascada (CSS). Entre estas herramientas se incluyen las siguientes:

  • 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 utiliza en la página web actual y si se está usando en la selección actual. Para obtener más información, vea Cómo: Usar las ventanas Aplicar estilos y Administrar estilos.

  • La ventana Administrar estilos proporciona muchas de las características de la ventana Aplicar estilos. Sin embargo, puede utilizar la ventana Administrar estilos para mover los estilos de una hoja de estilos interna (un elemento 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. Para obtener más información, vea Cómo: Usar las ventanas Aplicar estilos y Administrar estilos.

  • La ventana Propiedades de CSS muestra los estilos utilizados 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. Esto permite agregar propiedades a un estilo existente, modificar las propiedades ya establecidas y crear nuevos estilos inline. Para obtener más información, vea Cómo: Usar la ventana Propiedades de CSS.

  • La barra de herramientas Aplicación de estilo directo permite aplicar o quitar estilos basados en clase o en identificador, y crear y aplicar nuevos estilos. Proporciona más control sobre los estilos generados mediante Visual Studio. Para obtener más información, vea Cómo: Usar la barra de herramientas Aplicación de estilo directo.

  • El selector de etiquetas permite seleccionar las etiquetas HTML mientras se está trabajando 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. Para obtener más información, vea Exploración de etiquetas en el Editor HTML de Visual Web Developer.

Volver al principio

Información general

En lugar de asignar los atributos de formato individualmente a cada elemento de una página, se pueden crear reglas de estilo. Estas reglas aplican valores de propiedad (normalmente, reglas de formato) cuando un explorador web encuentra cualquier instancia de un elemento, o de un elemento que tiene un identificador o clase de estilo concretos.

Para trabajar con estilos CSS, debe comprender cómo se crea un estilo y cómo se aplica. Esta sección contiene información de la especificación CSS de W3C sobre estilos CSS y sobre las herramientas de Visual Studio 2008 que facilitan el trabajo con estilos CSS.

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 debe estar centrado y tener un color de fuente azul.

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

Utilizar diferentes tipos de estilos

Puede definir una regla de estilo que se aplica a un elemento, a un elemento que tiene una clase asignada o a un elemento según su identificador Un estilo se define mediante un conjunto de reglas, compuesta por un selector, seguido por un bloque de declaraciones de propiedad que aparecen entre una llave izquierda ({) y una llave derecha (}). Cada tipo de estilo se distingue de los otros tipos de estilo por su selector. Un selector basado en una clase está precedido por un punto (.). Un selector basado en un identificador está precedido por una almohadilla (#). El selector de un estilo basado en un elemento sólo está compuesto por el nombre del elemento HTML, como h1.

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 (contenido que está en elementos p ). Para ello, se crea un estilo basado en elementos que utiliza el elemento p como selector y que contiene las declaraciones de las propiedades del 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 concretos identificados por su atributo de identificador Los estilos basados en identificadores se suelen utilizar 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 inline

Una regla del estilo inline se define en la etiqueta de apertura de un elemento mediante el atributo de estilo. Utilice un estilo inline si desea definir las propiedades de 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 estilo 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 PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>HTML 4.0 CSS Element Style Example</title>
      <style type="text/css">        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> estará centrado y será 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 utilizando un elemento link, como se muestra en el ejemplo siguiente.

<link rel="stylesheet" type="text/css" 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 que no son invalidadas por las reglas de estilo CSS locales seguirán aplicándose a los elementos incluso después de que se hayan aplicado los estilos 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 del explorador web para el texto 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

Cómo: Usar las ventanas Aplicar estilos y Administrar estilos

Cómo: Usar la barra de herramientas Aplicación de estilo directo

Volver al principio

Referencia de clase

No se aplica ninguna clase a las herramientas de CSS.

Volver al principio

Lo nuevo

Visual Studio 2008 presenta una edición de CSS enriquecida con diversas herramientas nuevas 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 a los contenidos se puede realizar en la vista Diseño con la ventana Propiedades de CSS, las ventanas Aplicar estilos y Administrar estilos y la herramienta Aplicación de estilo directo. También puede cambiar la posición, el relleno y los márgenes en la vista Diseño con las herramientas de diseño visuales WYSIWYG.

Volver al principio

Vea también

Conceptos

Exploración de etiquetas en el Editor HTML de Visual Web Developer

Aplicar formato a los elementos en el Editor HTML de Visual Web Developer