Compartir a través de

Tutorial: Trabajar con un archivo CSS existente

  • Artículo

Este tutorial introduce las características de hojas de estilos en cascada (CSS) de Visual Studio. 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 página web y una nueva hoja de estilos en cascada.

Nota

Los ejemplos de este tema son específicos de las páginas de formularios Web Forms de ASP.NET.Puede usar la vista Código fuente para editar páginas en aplicaciones ASP.NET MVC (Model View Controller) o ASP.NET Web Pages (archivos .cshtml), pero la vista Diseño solo se admite totalmente para páginas de formularios Web Forms.

En este tutorial se muestran las tareas siguientes:

  • Crear un sitio web de sistema de archivos.

  • Usar características orientadas a CSS de Visual Studio.

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

    Nota

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

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

Crear un sitio web

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

Si ya ha creado un sitio web en Visual Studio (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 elementos HTML y un archivo CSS", más adelante en este tutorial. De lo contrario, cree un sitio web siguiendo estos pasos.

Nota

La plantilla de proyecto predeterminada de los sitios web de ASP.NET y las aplicaciones web ASP.NET contiene un archivo Site.css.Este archivo contiene reglas CSS que definen la apariencia de la página maestra (Site.master) y de las páginas de contenido (Default.aspx y About.aspx).Este tutorial muestra cómo comenzar con un proyecto vacío de sitio web ASP.NET y agregar después características de CSS al sitio.

Para crear un sitio web del sistema de archivos

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

  2. En el menú Archivo, elija Nuevo sitio web.

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

  3. En Plantillas instaladas, elija Visual Basic o 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, a continuación, 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 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 elemento. En algunos casos, los elementos contienen clases CSS que puede usar para aplicar elementos específicos de estilo en una página.

Bb398783.collapse_all(es-es,VS.110).gifAgregar 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" runat="server"/>
<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.

Bb398783.collapse_all(es-es,VS.110).gifAgregar un archivo CSS

En esta sección agrega una hoja de estilos en cascada (archivo .css) que 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 en el nombre del sitio web, elija Agregar y elija después Agregar nuevo elemento.

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

  2. En el panel de plantillas instaladas, elija 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 del diseño original de tres columnas a un diseño de dos columnas. A continuación quite los estilos aplicados al diseño original.

Bb398783.collapse_all(es-es,VS.110).gifQuitar 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 en la vista Diseño.

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

    Esta acción vincula el archivo .css a la página actual. La página cambia para reflejar los estilos definidos en el archivo .css.

  3. Cambie a la vista Código fuente.

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

  5. Guarde el archivo.

  6. En el menú Vista, elija en Administrar estilos.

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

  7. 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 cuadrado doble alrededor, lo que indica que ya no se usa y se puede quitar.

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

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

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

  11. Haga clic en Aceptar.

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

  13. 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, elija Agregar y elija después Elemento existente.

    Aparece el cuadro de diálogo Agregar elemento existente.

  2. En el cuadro de diálogo, establezca el tipo de archivo en Archivos de imagen.

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

Ahora que la imagen se ha agregado al proyecto, debe asignar la imagen al control Image que ya está en la página.

Para asignar una imagen al control Image

  1. Abra o cambie al archivo Default.aspx en la vista Diseño.

  2. Seleccione el control Image en la página.

  3. En la ventana Propiedades, junto a ImageUrl, elija los puntos suspensivos (...) para establecer la propiedad ImageUrl del control.

    Se abrirá el cuadro de diálogo Seleccionar imagen.

  4. Elija la imagen que agregó al proyecto y haga clic en Aceptar.

Agregar reglas de estilo para dar formato a la imagen

Para mejorar el flujo de texto alrededor de la imagen, puede establecer la imagen como flotante en el borde derecho o izquierdo de la columna principal. También puede agregar relleno, 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. Guarde la hoja de estilos.

  4. Cambie al archivo Default.aspx en la vista Diseño.

  5. Seleccione el control Image, que en este punto mostrará la imagen que agregó al proyecto.

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

    Nota

    Si la imagen es demasiado grande, aplicar el estilo puede no tener ningún efecto visible en la posición y el flujo de texto de la imagen.En este caso, reduzca el tamaño de la imagen antes de aplicar el estilo.

Pasos siguientes

Este tutorial mostró las técnicas básicas para trabajar con estilos CSS mediante la interfaz de usuario de Visual Studio. 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

Cómo: Usar la ventana Propiedades de CSS

Otros recursos

Controles de servidor web ASP.NET y estilos de CSS