Share via

Tutorial: Trabajar con un archivo CSS existente

  • Artículo

Actualización: noviembre 2007

Este tutorial introduce las características de hojas de estilos en cascada (CSS) de Visual Studio 2008. Le guía a través de la creación y modificación de un diseño de página de dos columnas. También muestra las técnicas básicas de creación de una nueva página web y una nueva hoja de estilos en cascada.

En este tutorial se muestran las tareas siguientes:

  • Crear un sitio Web de sistema de archivos.

  • Utilizar características orientadas a CSS de Visual Web Developer.

  • Crear un diseño de página de dos columnas con CSS.

    Nota:

    Este tutorial muestra características adicionales de Visual Studio 2008 que no se trataron en Tutorial: Crear y modificar un archivo CSS.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

  • Visual Studio 2008 o Microsoft Visual Web Developer Express. Para obtener información de la descarga, vea el sitio web de Microsoft Visual Studio Express Editions.

  • .NET Framework versión 3.5.

  • Una imagen que pueda agregar a la página web. La imagen real no es importante; sólo la usará para mostrar las características de posición.

Crear un sitio Web

En esta parte del tutorial va a crear un sitio web y a agregarle una nueva página.

Si ya ha creado un sitio web en Visual Web Developer (por ejemplo, siguiendo los pasos del tema Tutorial: Crear una página Web básica en Visual Web Developer), puede usar ese sitio web e ir directamente al apartado "Agregar elementos HTML y un archivo CSS", que figura 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. Abra Visual Web Developer.

  2. En el menú Archivo, haga clic en Nuevositio Web.

    Se muestra el cuadro de diálogo Nuevo sitio Web.

  3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.

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

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

  5. En la lista Lenguaje, haga clic en Visual Basic o en Visual C#.

    El lenguaje de programación que seleccione será el lenguaje predeterminado del sitio web, pero también puede establecer el lenguaje de programación de cada página de forma individual.

  6. Haga clic en Aceptar.

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

Agregar elementos HTML y un archivo CSS

Para que se pueda centrar en las herramientas de formato y estilo en lugar de hacerlo en la creación de elementos para crear estilos, en esta sección se proporciona un conjunto de elementos. 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 elementos. En algunos casos, los elementos contienen clases CSS que puede usar para aplicar estilo a elementos concretos de una página.

Agregar elementos HTML

En esta sección se agrega el contenido con el que se va a trabajar. La página consta de una pancarta con 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 HTML a la página

  1. Abra la página Default.aspx en vista Código fuente.

  2. Agregue el código siguiente después del elemento <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>
<asp:Image ID="Image1" />
<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>

  3. Guarde la página.

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

Agregar un archivo CSS

En esta sección agrega una hoja de estilos en cascada (archivo .css) que da formato y aplica estilo a los elementos que agregó a la página en la última sección. La hoja de estilos usa reglas de estilo basadas en id. y en clase.

Para agregar un archivo CSS

  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.

    Aparecerá el cuadro de diálogo Agregar nuevo elemento.

  2. En Plantillas instaladas de Visual Studio, haga clic en Hoja de estilos.

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

    El editor abre una nueva hoja de estilos que contiene una regla de estilo body.

  4. Quite la regla de estilo body y, a continuación, pegue las reglas siguientes en el archivo.

    #pagecontainer {
    width: 800px;
}
#banner {
    height: 126px;
    padding-top: 18px;
    background-color: #DD6B26;
}
#search {
    width: 254px;
    position: absolute;
    top: 115px;
    left: 545px;
    font-family: "Lucida Sans";
    font-size: small;
    color: #930626;
}
#leftsidebar {
    width: 188px;
    float: left;
    padding-right: 10px;
}
#rightsidebar {
    width: 238px;
    float: right;
    padding-left: 6px;
}
#maincontent {
    border-left: 1px solid #DD6B26;
    margin-left: 203px;
    margin-right: 260px;
    padding-left: 13px;
    padding-right: 13px;
}
#footer {
    text-align: center;
    background-color: #DD6B26;
}
h1 {
    font-family: "Lucida Calligraphy";
    font-size: x-large;
    font-weight: bold;
    color: #930626;
    text-align: center;
    height: 42px;
    margin-bottom: 0px;
}
h2 {
    font-family: "Lucida Sans";
    font-variant: small-caps;
    font-size: large;
    color: #307630;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
    margin: 0;
    padding: 0;
}
p {
    font-family: "Palatino Linotype";
    font-size: medium;
}

  5. Guarde el archivo.

Agregar reglas de estilo a la hoja de estilos

Al trabajar con una hoja de estilos CSS existente, puede usar la ventana Administrar estilos para cambiar las reglas de estilo de la hoja. En este tutorial, modificará la página de diseño original de tres columnas a un diseño de dos columnas. A continuación quitará los estilos aplicados al diseño original.

Quitar la columna derecha y cambiar el estilo

Para cambiar el diseño de página a un diseño de dos columnas, puede quitar el código que crea la columna derecha. A continuación, puede cambiar el estilo de los otros elementos para crear el diseño de dos columnas.

Para quitar el código de la columna derecha y dar formato

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

  2. Cambie a la vista Diseño.

  3. En el Explorador de soluciones, arrastre el archivo .css que ha creado colóquelo en la página.

    De esta forma vincula el archivo .css a la página actual. La página cambia para reflejar los estilos definidos en el archivo .css.

  4. Cambie a la vista Código fuente.

  5. Elimine el elemento div que comienza con <div id="rightsidebar" class="column">.

  6. Guarde el archivo.

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

    Aparece la ventana Administrar estilos. (De forma predeterminada, la ventana está acoplada.)

  8. En la ventana Administrar estilos, haga clic con el botón secundario en el estilo #rightsidebar y, a continuación, haga clic en Eliminar.

    Nota:

    El icono del estilo #rightsidebar no tiene un círculo alrededor, lo que indica que ya no se usa en la página y se puede quitar.

  9. En la ventana Administrar estilos, haga clic con el botón secundario en el estilo #maincontent y, a continuación, haga clic en Modificar estilo.

    Aparece el cuadro de diálogo Modificar estilo.

  10. En Categoría, haga clic en Cuadro.

  11. En margen, cambie el valor del cuadro derecho a 0.

  12. Haga clic en Aceptar.

  13. Cambie a la vista Diseño. Ahora cuenta con un diseño de dos columnas.

  14. Guarde el archivo.

Agregar una imagen

Antes de establecer el estilo de una imagen, debe agregar la imagen al proyecto y establecer su propiedad ImageUrl.

Para agregar una imagen al proyecto

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

    Aparecerá el cuadro de diálogo Agregar elemento existente.

  2. Seleccione un archivo de imagen y haga clic en Agregar.

Ahora que la imagen se ha agregado a su proyecto, debe asignarla a un control Image.

Para asignar una imagen al control Image

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

  2. Cambie a la vista Diseño y seleccione el control Image.

  3. En la ventana Propiedades, establezca la propiedad ImageUrl del control Image en la dirección URL del archivo de imagen recientemente agregado.

Agregar reglas de estilo para dar formato a la imagen

Para mejorar el flujo de la imagen con respecto al texto, puede establecer la imagen como flotante en el borde derecho o izquierdo de la columna principal y agregar relleno, lo que aleja el texto de la imagen.

Para agregar imágenes al diseño

  1. Abra el archivo Layout.css o cambie a él.

  2. Agregue el código siguiente a la hoja de estilos.

    img {
    margin: 0px;
    border: 1px solid #DD6B26;
    padding: 5px;
}
.floatright {
    margin-left: 10px;
    float:right;
}
.floatleft {
    float: left;
    margin-right: 10px;
}

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

  4. Cambie a la vista Diseño y seleccione el control Image.

  5. En la ventana Administrar estilos, aplique el estilo CSS floatright o floatleft al control Image; para ello, haga clic con el botón secundario en el estilo CSS y seleccione Aplicar estilo.

    El estilo CSS seleccionado se asigna al estilo img.

Pasos siguientes

Este tutorial muestra 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:

Vea también

Tareas

Tutorial: Crear y modificar un archivo CSS

Conceptos

Información general sobre el trabajo con CSS

Controles de servidor Web ASP.NET y estilos de CSS

Cómo: Usar la ventana Propiedades de CSS