Tutorial: Crear y modificar un archivo CSS

Actualización: noviembre 2007

En este tutorial se presentan las características de hojas de estilos en cascada (CSS) de Visual Studio 2008. Le servirá de guía para crear un diseño de página de tres columnas, que ilustra las técnicas básicas de creación de una nueva página web y una nueva hoja de estilos.

En este tutorial se muestran las tareas siguientes:

• Crear un sitio Web de sistema de archivos.

• Personalizar el sitio web utilizando las características orientadas a CSS.

• Crear un diseño de página de tres columnas mediante CSS.

Requisitos previos

Para realizar el tutorial, necesita lo siguiente:

• Visual Studio 2008 o Visual Web Developer 2008 Express. Para obtener información sobre las descargas, visite el sitio web Centro para desarrolladores de .NET Framework.

• Versión 3.5 de .NET Framework

Crear un sitio Web

En esta parte del tutorial puede crear un sitio web y agregarle una nueva página. En la sección siguiente, puede agregar un archivo CSS y, a continuación, ejecutar la página en un explorador web.

Si ya ha creado un sitio web (por ejemplo, según los pasos descritos en el tema Tutorial: Crear una página Web básica en Visual Web Developer), puede usar dicho sitio web y pasar a la sección "Agregar y aplicar estilos a los elementos de la página", más adelante en este tutorial. De lo contrario, cree un sitio Web nuevo siguiendo estos pasos.

Para crear un nuevo sitio Web del sistema de archivos

1. En Visual Web Developer, en el menú Archivo, haga clic en Nuevositio Web.

2. En el cuadro Nuevo sitio Web en Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.

3. En el cuadro Ubicación, haga clic en Sistema de archivos y escriba el nombre de la carpeta en la que desea guardar las páginas de su sitio web.

   Por ejemplo, escriba el siguiente nombre de carpeta: C:\CSSWebSite

4. En la lista Lenguaje, haga clic en Visual Basic o Visual C# y, a continuación, haga clic en Aceptar.

   Nota:
   El lenguaje de programación que escoja será el valor predeterminado para el sitio Web, sin embargo, puede establecer el lenguaje de programación para cada página de forma individual.

   Visual Web Developer crea la carpeta y una página nueva denominada Default.aspx.

Agregar y aplicar estilos a los elementos de la página

Para que se pueda centrar en las herramientas de formato y estilo en lugar de en la creación de elementos para aplicar estilos, en esta sección se proporciona un conjunto de elementos de página. Puede copiar y pegar estos elementos en una página. El código incluye secciones realizadas con elementos div que incluyen una pancarta, secciones de barra lateral izquierda y derecha, una sección de contenido principal y un pie de página. Estos elementos simples contienen texto con el que puede trabajar e identificadores de elemento. En algunos casos, los elementos contienen clases CSS que puede usar para aplicar estilo a elementos concretos de una página.

Agregar elementos de página

En el procedimiento siguiente, copiará elementos de página con los que podrá trabajar utilizando las herramientas de CSS. Los elementos de página constan de una pancarta que contiene texto y un cuadro de búsqueda, un pie de página y tres secciones de texto. El contenido principal de la página se encuentra en la última sección de texto.

Para agregar elementos de página a la página predeterminada

1. Abra la página Default.aspx o cambie a ella.

   Nota:
   Puede utilizar cualquier página que esté disponible en el sitio web.

2. Cambie a la vista Código fuente.

3. Agregue el código siguiente detrás de la etiqueta <form>:

   <div id="pagecontainer">
     <div id="banner">
       <h1>AdventureWorks Styling Page</h1>
       <h2>Making CSS Styling Easier in Design View</h2>
       <div id="search">Find:<input id="searchbox" type="text" />
         <input id="searchbutton" type="button" value="Go" />
      </div>
   </div>
   <div id="leftsidebar" class="column">
     <h3>Matters of the Web</h3>
     <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
   lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
   rutrum.</p>
   </div>
   <div id="rightsidebar" class="column">
     <h3>Matters of the Web</h3>
      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
   lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
   rutrum.</p>
   </div>
   <div id="maincontent" class="column">
     <h2>Matters of the Web</h2>
     <p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum 
   lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod 
   nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam 
   pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, 
   mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra 
   tincidunt.</p>
     <p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada 
   malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh 
   neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, 
   convallis venenatis, auctor vitae, justo. In at massa.</p>
   </div>
   <div id="footer">
     <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p>
   </div>
   </div>
   

4. Guarde la página.

5. Cambie a la vista Diseño para ver el formato predeterminado.

Aplicar estilos en la vista Diseño

En la vista Diseño, puede aplicar estilos a los elementos de página y ver inmediatamente los resultados. No tiene que escribir la CSS y cambiar a la página para ver si se ha aplicado el estilo deseado.

En la vista Diseño, puede aplicar un estilo a elementos individuales de una página de varias maneras. Puede utilizar estilos insertados, que se escriben como el atributo style de un elemento individual. Estas reglas de estilo sólo se pueden aplicar a ese elemento.

Puede escribir reglas de estilo en un elemento style del elemento head HTML de la página. Estas reglas de estilo se pueden aplicar a los elementos de la página actual. Por último, puede escribir las reglas de estilo en un archivo CSS externo. En ese caso, las reglas de estilo se pueden aplicar a cualquier página del sitio web.

En este tutorial, escribirá la información de formato y estilo en la sección del elemento style de la página y como estilos insertados. Después, puede mover la información de CSS a una hoja de estilos externa para utilizar otras características de Visual Studio 2008.

Dar formato a una pancarta de página

El primer elemento al que dará formato es la sección de pancarta, que incluye elementos delimitados por la etiqueta <div ID="banner">. En este ejemplo, utilizará la barra de herramientas Aplicación de estilo directo para cambiar el estilo y la posición del encabezado. Establecerá también el tamaño del área de la pancarta y agregará un color de fondo.

Para dar formato al texto de la pancarta

1. En la vista Diseño, haga clic en el texto de título en la sección de pancarta "AdventureWorks Styling Page".

   Observe que la selección tiene un cuadro azul alrededor y una ficha que indica que el elemento h1 se ha seleccionado.

2. En la barra de herramientas Aplicación de estilo, en la lista Regla de destino, haga clic en Aplicar nuevo estilo.

   Aparecerá el cuadro de diálogo Nuevo estilo.

   La opción Aplicación de estilo directo está establecida de forma predeterminada en Manual, por lo que aplicará manualmente el estilo.

3. En la lista Selector, haga clic en h1 para que pueda crear un estilo que se aplique a todos los elementos h1.

   Observe que la lista Definir en está establecida en Página actual. Esto indica que la regla de estilo se crea en un elemento style de la página actual.

4. En la lista familia de fuentes, seleccione una fuente gruesa como Impacto.

5. En el cuadro tamaño de fuente, escriba o seleccione muy grande.

6. En el cuadro variante de fuente, escriba o seleccione versales.

7. Haga clic en Aceptar.

8. Para ver la regla de estilo que ha creado, cambie a la vista Código fuente y desplácese al elemento style, que se encuentra dentro del elemento head.

   Puede ver que la regla de estilo CSS se ha creado para el elemento h1.

9. Siga este procedimiento para aplicar estilo al elemento h2 de la pancarta de forma similar:

   1. Abra el cuadro de diálogo Nuevo estilo como en el paso 2.

   2. Seleccione el elemento h2.

   3. Establezca el valor Selector del cuadro Nuevo estilo en h2.

   4. Establezca la familia de fuentes en Comic Sans MS y el tamaño de fuente en pequeño.

Seleccionar elementos de la página

En Visual Studio 2008, hay varias formas de seleccionar elementos de la página. Puede utilizar el selector rápido de etiquetas, que se encuentra en la sección inferior del panel de la vista Diseño. Cuando se coloca el punto de inserción en cualquier parte de una página, en el selector rápido de etiquetas se muestra la etiqueta HTML subyacente de esa área. Las etiquetas que contienen la etiqueta actual aparecen a la izquierda de la etiqueta en la barra del selector rápido de etiquetas. Por ejemplo, si el punto de inserción está en una celda de la tabla, la etiqueta td aparece en la barra del selector rápido de etiquetas, precedida por una etiqueta tr para la fila de la tabla y una etiqueta table para la tabla.

Al mover el puntero sobre una etiqueta en el selector rápido de etiquetas, el contenido de la etiqueta se resalta en la vista Diseño y aparece una flecha en la etiqueta. Puede hacer clic en esta flecha para seleccionar una etiqueta y su contenido, seleccionar sólo el contenido de la etiqueta, modificar o quitar la etiqueta, abrir el cuadro de diálogo Editor rápido de etiquetas o abrir el cuadro de diálogo Propiedades de un elemento.

También puede utilizar la tecla ESC para subir los elementos por la jerarquía. Por ejemplo, el elemento h1 está anidado dentro del elemento div de la pancarta. Para seleccionar el elemento div completo, haga clic en el elemento h1 para seleccionarlo y, a continuación, utilice la tecla ESC para seleccionar el elemento div de la pancarta. Observe que la primera vez que presiona la tecla ESC, el elemento h1 se resalta y se muestra el relleno y los márgenes. (Puesto que no establecimos estas opciones, ésta es la configuración predeterminada). Al presionar de nuevo la tecla ESC, se selecciona todo el elemento div. Cuando el elemento está seleccionado, la etiqueta muestra div#banner.

Cambiar el tamaño de la etiqueta y la posición de su contenido

Puede cambiar el tamaño y la posición de la pancarta y de su contenido en la vista Diseño utilizando la barra de herramientas Aplicación de estilo directo. Las reglas de estilo se escriben en la página actual, que es la misma ubicación en la que se escribieron las reglas de estilo anteriores.

Nota:
Puede utilizar la tecla CTRL y las teclas de dirección para cambiar el valor de los elementos de tamaño que ya se han definido. Por ejemplo, si arrastra el ancho de la pancarta hasta 785 píxeles, puede utilizar la combinación de teclas CTRL + FLECHA IZQUIERDA para reducir el ancho a 780 píxeles.

Para cambiar el tamaño de la pancarta

1. Cambie a la vista Diseño.

2. Haga clic en el texto h1 ("AdventureWorks Styling Page") para seleccionarlo y, a continuación, presione la tecla ESC dos veces para seleccionar el elemento que lo contiene, que es el elemento div de la pancarta.

3. Arrastre el controlador de cambio de tamaño en la esquina inferior derecha para cambiar el tamaño del elemento div de la pancarta.

   Observe que al arrastrar, la información sobre herramientas muestra los valores de alto y ancho. Estos valores se muestran también en la barra de estado, situada en la sección inferior de la ventana de la vista Diseño.

4. Cambie el tamaño del elemento hasta que tenga aproximadamente 780 píxeles de ancho y 100 píxeles de alto.

5. Para ver la regla de estilo que ha creado, vaya a la vista Dividida y desplácese al elemento style.

   Puede ver que se ha creado un regla de estilo para el elemento div de la pancarta (mediante el selector #banner).

6. En la vista Diseño, asegúrese de que el elemento div de la pancarta está seleccionado (div#banner debe seguir seleccionado en el navegador de etiquetas).

7. En el menú Formato, haga clic en Color de fondo.

   Se muestra el selector de color.

8. Seleccione un color para la pancarta y, a continuación, haga clic en Aceptar.

También puede aplicar reglas de estilo que centren el texto de los encabezados. Para ello, defina valores de relleno.

Para colocar los elementos de encabezado dentro de la pancarta

1. En la vista Diseño, seleccione el elemento div de la pancarta.

2. En el menú Formato, haga clic en Párrafo.

   Se muestra el cuadro de diálogo Párrafo.

   Como el elemento h1 tiene la misma longitud que el elemento div de la pancarta, puede colocar el texto dentro del elemento h1 para centrarlo en el área de la pancarta.

3. En el cuadro Párrafo, en la lista desplegable Alineación, seleccione Centrar y, a continuación, haga clic en Aceptar.

4. Seleccione el elemento h2 y, a continuación, repita los pasos 2 y 3.

5. Seleccione el elemento div de la pancarta.

6. Manteniendo presionada la tecla MAYÚS, coloque el puntero del mouse sobre el borde del elemento div hasta que en la información sobre herramientas se muestre el valor de relleno actual.

7. Arrastre el borde de relleno hasta que esté contiguo al borde superior del elemento div.

8. Arrastre hasta que los dos elementos queden centrados (aproximadamente 30 píxeles).

Para completar la pancarta, debe colocar el elemento div de búsqueda y sus elementos en la pancarta. Para ello, puede utilizar otra característica de Visual Studio 2008, la cuadrícula de posición.

Para colocar el elemento div de búsqueda dentro de la pancarta

1. En la vista Diseño, seleccione el elemento div de búsqueda (div#search).

2. En el menú Formato, haga clic en Establecer posición y, a continuación, seleccione Absoluta.

3. Arrastre el elemento div de búsqueda por su ficha (el texto indica div#search) hasta una posición que esté dentro de la pancarta pero a la derecha de los elementos de texto.

   Observe que dos líneas azules se extienden desde la selección, que indican un valor de posición superior e izquierdo.

4. Suelte el elemento div de búsqueda cuando esté colocado en el lugar que desee.

Crear un diseño flexible de tres columnas

Puede utilizar Visual Web Developer para crear reglas de estilo dando formato a los elementos de página en la vista Diseño. También puede utilizar estas mismas herramientas para crear su diseño de página.

En este tutorial, creará un diseño de tres columnas mediante la regla de estilo Float. En primer lugar, establecerá el tamaño y la posición de las barras laterales izquierda y derecha y, a continuación, puede ajustar el relleno en la sección de contenido principal para crear un diseño flexible de tres columnas.

Nota:
Para ver los elementos correctamente colocados en la vista Diseño, es posible que tenga que ocultar la Barra de herramientas. De esta forma, tendrá más espacio para mostrar la posición de los elementos de la página.

Crear las columnas de la barra lateral

Puede cambiar el tamaño de las columnas laterales en el diseño de página del mismo modo que cambió el tamaño de la pancarta. Cuando cambie el tamaño de las columnas de la barra lateral, sólo deseará establecer el valor de ancho, y no el de alto, para que el texto abarque la longitud de la columna si es necesario. Para establecer sólo el ancho del elemento div, puede arrastrar el lado derecho del elemento div en lugar de arrastrar la esquina del elemento div, como en el ejemplo anterior.

Para cambiar el tamaño y la posición de los elementos div de la barra lateral izquierda y derecha

1. En vista Diseño, seleccione el elemento div de la barra lateral izquierda. (Para ello, puede seleccionar div.column#leftsidebar en el navegador de etiquetas).

2. Arrastre el borde derecho del elemento div de la barra lateral izquierda para cambiar el tamaño del elemento hasta que tenga un ancho aproximado de 200 píxeles.

   Observe que al arrastrar, el valor de alto se muestra entre paréntesis, lo que indica que no se va a definir.

3. En el menú Formato, haga clic en Posición.

   Aparecerá el cuadro de diálogo Posición.

4. En Estilo de ajuste, seleccione Izquierda y, a continuación, haga clic en Aceptar.

5. Seleccione el elemento div de la barra lateral derecha y arrastre su borde derecho hasta que tenga un ancho aproximado de 250 píxeles.

6. En el menú Formato, haga clic en Posición.

7. En Estilo de ajuste, haga clic en Derecha y luego en Aceptar.

Crear la columna central

Para crear la columna central, puede establecer márgenes y relleno para mover el contenido fuera de las columnas derecha e izquierda. Primero creará un borde izquierdo y, a continuación, utilizará relleno para mover el contenido fuera del borde.

Para aplicar estilo a la columna central

1. En la vista Diseño, seleccione el elemento div del contenido principal.

2. Manteniendo presionada la tecla CTRL, arrastre el margen derecho del elemento div del contenido principal para establecerlo en 260 píxeles. Arrastre el margen izquierdo hasta un valor de 210 píxeles.

3. Con el elemento div del contenido principal seleccionado, en el menú Formato, seleccione Bordes y sombreado.

   Se muestra el cuadro de diálogo Bordes y sombreado.

4. En Configuración, seleccione Personalizado.

5. En la lista Estilo, seleccione Sólido y en Vista previa, haga clic en el botón de borde izquierdo.

6. En el cuadro de texto Ancho, escriba 1px.

7. En Relleno, en el cuadro Izquierda, escriba 10px.

8. Haga clic en Aceptar.

Ajustar el pie de página

Si los usuarios cambian el tamaño de la página o si la página se muestra en un monitor de gran formato, el pie de página podría ajustarse y aparecer en el borde de una de las columnas. Para evitar que esto suceda, puede definir la regla de estilo Clear.

Para ajustar el elemento div de pie de página

1. En la vista Diseño, seleccione el elemento div del pie de página.

2. En el menú Formato, haga clic en Nuevo estilo.

   Aparecerá el cuadro de diálogo Nuevo estilo.

3. En el cuadro Selector, escriba o seleccione #footer.

4. En la lista Categoría, haga clic en Diseño.

5. En la lista clear, seleccione ambos.

6. Haga clic en Aceptar.

Crear y utilizar una hoja de estilos

Una forma eficaz de trabajar con CSS es incluir reglas de estilo en una hoja de estilos. De esa forma, todas las páginas podrán hacer referencia a los estilos, para que adopten un aspecto similar.

También puede utilizar las hojas de estilos en cascada con los temas de ASP.NET. Para utilizar una hoja de estilos con un tema, debe colocar la hoja en la carpeta correcta. Para obtener más información sobre los temas y CSS, vea Información general sobre temas y máscaras de ASP.NET.

Para crear una hoja de estilos se utilizan las mismas técnicas que para crear una nueva página.

Para crear una hoja de estilos y asociarla a una página

1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio web y, a continuación, haga clic en Agregar nuevo elemento.

2. En Plantillas instaladas de Visual Studio, seleccione Hoja de estilos.

3. En el cuadro Nombre, escriba Layout.css y, a continuación, haga clic en Agregar.

   Se abre el editor con una nueva hoja de estilos que contiene una regla de estilo body vacía.

4. Abra la página Default.aspx o cambie a ella, y cambie a la vista Diseño.

5. En el menú Formato, haga clic en Estilos CSSy, a continuación, haga clic en Administrar estilos.

   Se abre la ventana Administrar estilos. (De forma predeterminada, esta ventana está acoplada).

6. Haga clic en Adjuntar hoja de estilos.

7. Aparecerá el cuadro de diálogo Seleccionar hoja de estilos.

8. Seleccione el archivo Layout.css y, a continuación, haga clic en Aceptar.

   Se crea una nueva ficha denominada Layout.css en la ventana Administrar estilos.

Puede asignar una hoja de estilos a una página de varias formas. La forma más simple consiste en arrastrar el archivo del Explorador de soluciones al elemento de encabezado de la página en la vista Código fuente.

Mover reglas de estilo de una página a una hoja de estilos

Puede utilizar el panel Administrar estilos para mover estilos de una página a otra o para ver cómo las reglas de estilo se aplican a una página.

Hasta ahora, las reglas de estilo que ha creado en este tutorial se han guardado en el elemento style de la página Default.aspx. Puede mover estas reglas de estilo a la nueva hoja de estilos que ha creado.

Para mover reglas de estilo utilizando el panel Administrar estilo

1. En la ficha Página actual de la ventana Administrar estilos, seleccione todos los estilos. (Puede seleccionarlos utilizando MAYÚS+CLIC).

2. Arrastre los estilos seleccionados hasta la ficha Layout.css de la ventana Administrar estilos.

   Las reglas de estilo se quitan de la página Default.aspx y se mueven al archivo Layout.css. Puede confirmar esta operación en la página Default.aspx de la vista Código fuente y en la página Layout.css del editor.

También puede cambiar el orden de los estilos en la hoja de estilos mediante la ventana Administrar estilo. Por ejemplo, puede arrastrar la regla de estilo de búsqueda para que aparezca justo debajo de la regla de estilo de la pancarta.

Pasos siguientes

En este tutorial se han descrito las técnicas básicas para trabajar con estilos CSS mediante la interfaz de usuario de Visual Studio 2008. También es posible que desee explorar las maneras siguientes de controlar la apariencia de las páginas Web:

• Trabajar con una hoja de estilos existente. Para obtener más información, vea Tutorial: Trabajar con un archivo CSS existente.

• Configurar la información de estilo mediante programación para los elementos HTML. Para obtener más información, vea Cómo: Establecer las propiedades de un control de servidor HTML mediante programación.

• Crear temas y máscaras que permiten no sólo especificar estilos CSS, sino prácticamente cualquier propiedad de un control ASP.NET. Para obtener información detallada, vea Información general sobre temas y máscaras de ASP.NET.

Vea también

Tareas

Tutorial: Crear una página Web básica en Visual Web Developer

Conceptos

Tipos de sitios Web en Visual Web Developer