Tutorial: Crear y modificar un archivo CSS

En este tutorial se presentan las características de Visual Studio que le ayudan a trabajar con hojas de estilos en cascada (CSS). Describe cómo crear un diseño de página de tres columnas e ilustra las técnicas básicas de creación de una 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 usando las características orientadas a CSS.

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

Requisitos previos

Para completar el tutorial, necesita lo siguiente:

• Visual Studio o Visual Studio Express para Web instalado en el equipo.

  Nota

  Si usa Visual Studio, en este tutorial se presupone que seleccionó la colección de configuraciones Desarrollo web la primera vez que inició Visual Studio.Para obtener más información, vea Cómo: Seleccionar configuraciones de entorno de desarrollo web.

• Conocimientos generales de cómo trabajar con Visual Studio.

  Para obtener una introducción sobre cómo crear páginas web en Visual Studio, vea Tutorial: Crear una página web de formularios Web Forms básica en Visual Studio.

Crear un sitio web

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

Si ya ha creado un sitio web (por ejemplo, siguiendo los pasos de Tutorial: Crear una página web de formularios Web Forms básica en Visual Studio), puede usar ese sitio web e ir directamente al apartado "Agregar y aplicar estilos a los elementos de la página", más adelante en este tutorial. De lo contrario, cree un sitio web siguiendo estos pasos.

Para crear un sitio web del sistema de archivos

1. Abra Visual Studio o Visual Studio Express para Web.

2. En el menú Archivo, haga clic en Nuevo sitio web.

   Aparecerá el cuadro de diálogo Nuevo sitio web.

3. En Plantillas instaladas, haga clic en Visual Basic o en Visual C# y, a continuación, seleccione Sitio web vacío de ASP.NET.

4. En el cuadro Ubicación web, seleccione Sistema de archivos y escriba el nombre de la carpeta en la que desea guardar las páginas del sitio web.

   Por ejemplo, escriba el nombre de carpeta C:\WebSites.

5. Haga clic en Aceptar.

   Visual Studio crea un proyecto de sitio web que incluye un archivo Web.config pero ninguna otra página o archivo.

6. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio web, elija Agregar y elija después Agregar nuevo elemento.

7. Seleccione Web Forms, asigne el nombre Default.aspx a la página y, a continuación, haga clic en Agregar.

   Visual Studio crea la página Default.aspx y la abre en la vista Código fuente.

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

Esta sección proporciona un conjunto de elementos de página que modifica con las herramientas de formato y diseño de Visual Studio. 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 elementos específicos de estilo en una página.

Agregar elementos de página

En el procedimiento siguiente, copia elementos de página con los que trabaja mediante 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.

2. Cambie a la vista Código fuente.

3. Dentro de la sección <form>, quite el par de etiquetas <div></div> vacío que se crea de manera predeterminada.

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

   <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>
   

   Nota

   Para mejorar la legibilidad de la página, en el menú Edición, haga clic en Dar formato al documento.

5. Guarde la página.

6. 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 crear y modificar un archivo .css y después cambiar a la página para ver si se ha aplicado el estilo deseado.

En la Vista de diseño, puede aplicar un estilo a elementos individuales de una página de las siguientes maneras:

• Usar estilos alineados, que se escriben como el atributo style de un elemento individual. Estas reglas de estilo solo se pueden aplicar a ese elemento.

• Escriba reglas de estilo en una sección <style> del elemento head HTML de la página. Estas reglas de estilo se pueden aplicar a los elementos de la página actual.

• 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 esta parte del tutorial, define las reglas de formato y estilo que se escriben en la sección style de la página. Después, mueve la información de CSS creada a una hoja de estilos externa.

Dar formato a una pancarta de página

El primer elemento al que se da formato es la sección de pancarta, que incluye elementos delimitados por la etiqueta <div ID="banner">. En este ejemplo, usa el cuadro de diálogo Nuevo estilo para cambiar el estilo y la posición del encabezado. También establece el tamaño del área de la pancarta y agrega 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 Formato, en la lista Regla de destino, haga clic en Aplicar nuevo estilo. Alternativamente, en el menú Formato, elija Nuevo estilo.

   Sugerencia

   La barra de herramientas Formato está habilitada de forma predeterminada.Para habilitarla, en el menú Ver, elija Barras de herramientas y después elija Formato.

   Aparecerá el cuadro de diálogo Nuevo 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. Página actual indica que la regla de estilo se crea en un elemento style en la página que se está editando.

4. En la lista de familia de fuentes, seleccione Impact u otra fuente que se use normalmente para los titulares.

   Se ofrece una vista previa de la fuente en el panel Vista previa.

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. En la vista Diseño, sitúe el puntero en el encabezado que dice "Making CSS Styling Easier in Design View", que es un elemento h2.

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

   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.

   5. Haga clic en Aceptar.

Seleccionar elementos de la página

En Visual Studio, hay varias formas de seleccionar elementos de la página. Puede usar el selector rápido de etiquetas, que se encuentra en la parte 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 tabla, aparecen una etiqueta table y una etiqueta tr antes de la etiqueta td.

Al mover el puntero sobre una etiqueta en el selector rápido de etiquetas, aparece una flecha en la etiqueta. Puede hacer clic en esta flecha para seleccionar una etiqueta y su contenido, o bien para seleccionar solo el contenido de la etiqueta.

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, use la tecla ESC para seleccionar el elemento div de la pancarta. La primera vez que presiona la tecla ESC, el elemento h1 se resalta y se muestra el relleno y los márgenes del elemento. 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 ajustar el tamaño y la posición de la pancarta y de su contenido en la vista Diseño usando la barra de herramientas Formato. 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.

Para cambiar el tamaño de la pancarta

1. Cambie a la vista Diseño.

2. Haga clic en el texto de h1 (“AdventureWorks Styling page”) para seleccionarlo y después presione la tecla ESC dos veces. Esta acción selecciona el elemento contenedor, que es el elemento div denominado banner.

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 esquina inferior izquierda de la barra de estado en la parte 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 125 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. Cambie a la vista Diseño.

7. Asegúrese de que el elemento div de la pancarta está seleccionado (div#banner debe seguir seleccionado en el navegador de etiquetas).

8. En el menú Formato, haga clic en Bordes y sombreado.

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

   Seleccione la pestaña Sombreado, la opción Color de fondo y, a continuación, haga clic en Más colores.

   Se muestra el cuadro de diálogo Más colores.

9. Seleccione un color de fondo para el titular y, a continuación, haga clic en Aceptar.

   En la Vista En dos paneles, puede observar que la regla de estilos #banner se actualiza para incluir un valor de configuración para background-color.

10. Para ajustar el ancho del formulario para que coincida con la pancarta, seleccione el elemento form. A continuación, arrastre el controlador de cambio de tamaño en el lado derecho para reducir el ancho del formulario en 780 píxeles.

También puede aplicar reglas de estilo que centren el texto de los encabezados estableciendo valores de relleno.

Para colocar los elementos de encabezado dentro de la pancarta

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

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

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

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.

Para completar la pancarta, coloque el elemento div de búsqueda y sus elementos en la pancarta mediante 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). (Este elemento en la parte superior de la página contiene el cuadro de búsqueda).

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

3. Arrastre el elemento div#search por su pestaña 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 y cambie su tamaño como desee.

Crear un diseño flexible de tres columnas

Puede usar Visual Studio para crear reglas de estilo dando formato a los elementos de página en la Vista de diseño. También puede usar estas mismas herramientas para crear su diseño de página.

En este tutorial, crea un diseño de tres columnas mediante la regla de estilo float. Primero, establezca el tamaño y la posición de las barras laterales izquierda y derecha. A continuación, ajusta el relleno en la sección de contenido principal para crear un diseño flexible de tres columnas.

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 se cambia el tamaño de las columnas de la barra lateral, desea establecer solo el valor de ancho, no el de alto. Si no se especifica un valor de alto, el texto puede extender la longitud de la columna en caso necesario. Para establecer solo el ancho del elemento div, puede arrastrar el lado derecho del elemento div en lugar de arrastrar desde la esquina.

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

1. En la vista En dos paneles , seleccione el elemento div de la barra lateral izquierdo en el código fuente HTML.

2. Arrastre hacia la izquierda el borde derecho del elemento div de la barra lateral izquierda para cambiar su tamaño 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 290 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 crea un borde izquierdo y, a continuación, usa relleno para alejar el contenido del borde.

Para aplicar estilo a la columna central

1. En la vista Diseño o la vista En dos paneles, seleccione el elemento div para el contenido principal.

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

   Alternativamente, puede usar la vista Código fuente o En dos paneles para crear la siguiente regla de estilo:

   #maincontent
   {
       margin-right: 290px;
       margin-left: 210px;
   }
   

3. Seleccione el elemento div del contenido principal y, a continuación, en el menú Formato, haga clic en 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 los botones de borde izquierdo y derecho.

6. En el cuadro de texto Ancho, elija 1.

7. En Relleno, en los cuadros Izquierda y Derecha, elija 10.

8. Haga clic en Aceptar.

   En la vista Código fuente o en la Vista En dos paneles, observe que la definición de estilo del elemento #maincontent se ha actualizado.

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 aparecer en el borde de una de las columnas. Para impedir este comportamiento de ajuste, puede establecer 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 usar una hoja de estilos

Hasta ahora, ha creado definiciones de estilo manipulando elementos directamente en la página. Ha guardado las definiciones de estilo en el elemento style dentro del elemento head de la página. Estos valores de estilo se aplican solo a la página actual.

Una forma eficaz de trabajar con CSS es incluir reglas de estilo en una hoja de estilos que todas sus páginas web puedan consultar. Para crear una hoja de estilos se usan las mismas técnicas que para crear una página.

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

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

2. En la lista de plantillas, 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ú Vista, haga clic en Administrar estilos.

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

6. En la barra de herramientas de la ventana Administrar estilos, haga clic en el botón Adjuntar hoja de estilos.

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

7. 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. El archivo Layout.css está adjunto al documento actual. En la vista Código fuente o la Vista En dos paneles, puede observar que se agrega un elemento link como el siguiente al elemento head de la página:

   <link href="Layout.css" rel="stylesheet" type="text/css" />
   

   Se muestra el uso de la ventana Administrar estilos para asignar una hoja de estilos a una página. También existen otras maneras de asignar una hoja de estilos a una página. Por ejemplo, también puede arrastrar un archivo de hoja de estilos desde el Explorador de soluciones al elemento head de la página en la vista Código fuente. También puede arrastrar el archivo desde el Explorador de soluciones y colocarlo en cualquier lugar de la página en la vista Diseño.

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. Ahora puede mover las reglas de estilo que ha definido a la nueva hoja de estilos que ha creado.

Para mover reglas de estilo usando el panel Administrar estilo

1. Cambie a la página Default.aspx.

2. Cambie a la vista Diseño.

3. En la sección Página actual de la ventana Administrar estilos, seleccione todos los estilos. (Si selecciona el primer estilo y después usa MAYÚS+CLIC para seleccionar el último estilo, todos los estilos se seleccionan.)

4. Dentro de la ventana Administrar estilos, arrastre los estilos seleccionados sobre el icono de body en la sección Layout.css.

   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.

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. También puede 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 solo especificar estilos CSS, sino prácticamente cualquier propiedad de un control ASP.NET. Para obtener detalles, vea Temas y máscaras de ASP.NET.

Vea también

Otros recursos

Tutorial: Crear una página web de formularios Web Forms básica en Visual Studio

Tipos de proyectos de sitio web en Visual Studio