Crear un estilo

Puede crear estilos en línea y estilos que utilizan selectores de elementos, Id. o clase para aplicar formato a una página web y su contenido. Para obtener información acerca de cada tipo de estilo, vea Trabajar con estilos.

Puede crear estilos nuevos partiendo de cero o copiar un estilo existente. De cualquier modo, el cuadro de diálogo Nuevo estilo permite definir todo lo relativo al nuevo estilo, incluyendo el tipo de selector, las propiedades y la hoja de estilos que lo contendrá. Si desea crear un nuevo estilo en línea, también puede usar el panel Propiedades de CSS. Cuando desee crear y aplicar rápidamente un estilo nuevo en una página sin establecer ninguna propiedad para el mismo, también puede usar la barra de herramientas Estilo.

[!NOTA]

Si una propiedad de la CSS no es compatible con el esquema CSS seleccionado en la ficha Creación del cuadro de diálogo Opciones del editor de páginas, la lista de valores de dicha propiedad aparece en blanco en los cuadros de diálogo Nuevo estilo y Modificar estilo, y la propiedad no aparece en el panel Propiedades de CSS. Para obtener más información, vea Establecer opciones de IntelliSense para CSS.

Para crear un estilo nuevo con el cuadro de diálogo Nuevo estilo

  1. Realice una de las siguientes acciones:

    • Para agregar un estilo a una CSS externa, abra el archivo .css.

    • Para agregar un estilo a una CSS interna, abra la página web.

    • Para agregar un estilo en línea, abra la página web y seleccione el contenido al que desee aplicar el estilo.

  2. Realice una de las siguientes acciones:

    • Para crear un estilo nuevo, en los paneles Aplicar estilos o Administrar estilos, en la barra de herramientas Estilo o en el menú Formato, haga clic en Nuevo estiloCc295329.286f6ccb-09db-4cdc-90ec-b7cb537b4121(es-es,Expression.40).png.

    • Para copiar un estilo existente en los paneles Aplicar estilos, Administrar estilos o Propiedades de CSS, haga clic con el botón secundario en el estilo que desea copiar y luego seleccione Copiar nuevo estilo.

  3. En el cuadro de diálogo Nuevo estilo, siga este procedimiento:

    Utilice Acción

    Selector

    • Para usar un selector de clases, escriba un punto (.) seguido de un nombre único.

    • Para usar un selector de Id., escriba un signo de número (#) seguido de un nombre único.

      NoteNota:
      Los nombres de los selectores de clases e Id. no pueden contener espacios a menos que vaya a crear un selector complejo.
    • Para usar un selector de elementos, escriba el nombre de un elemento HTML o haga clic en el cuadro desplegable Selector y seleccione el nombre de un elemento.

    • Para usar un selector en línea, seleccione estilo en línea.

    • Para crear un selector complejo, escríbalo.

    Definir en

    Seleccione una de estas opciones:

    • Página actual agrega el nuevo estilo a la CSS interna de la página web actual.

    • Nueva hoja de estilos agrega el nuevo estilo a una nueva CSS externa en blanco.

    • Hoja de estilos existente agrega el nuevo estilo a una CSS externa existente que especifique.

    Aplicar el estilo nuevo a la selección del documento

    Aplique el estilo a la selección actual de la página web actual.

    Dirección URL

    Si seleccionó Hoja de estilos existente en Definir en, escriba la dirección URL del archivo .css.

    Categoría

    Seleccione cualquiera de las opciones siguientes y, a continuación, establezca las propiedades que aparecen a la derecha del cuadro de diálogo:

    tip noteSugerencia:
    Las categorías que aparecen en negrita en la lista Categoría contienen propiedades definidas.
    • Fuente establece las propiedades de la fuente, incluido el tamaño, el grosor, la decoración y el color.

    • Bloque establece la altura de la línea y la alineación, la sangría y el espaciado del texto.

    • Fondo establece las propiedades de las imágenes de fondo y el color de fondo.

    • Borde establece un borde y sus propiedades.

    • Cuadro establece las propiedades de espaciado interno y de margen de los elementos a nivel de bloque y de cuadro.

    • Posición establece las dimensiones y la posición de los elementos a nivel de bloque y de cuadro.

    • Diseño establece la visibilidad, el comportamiento de flotación y ajuste, el recorte y otras propiedades de diseño de los elementos a nivel de bloque y de cuadro.

    • Lista establece las propiedades de los elementos de listas, como el tipo, la posición y la imagen.

    • Tabla establece las propiedades de los elementos relacionados con las tablas, como el espaciado, el diseño y el borde.

Para crear un estilo en línea con el panel Propiedades de CSS

  1. En la Vista de diseño o Código de la página web, seleccione el contenido al que desee agregar un estilo en línea.

  2. En el panel Propiedades de CSS, en Reglas aplicadas, haga clic con el botón secundario en el selector al que desea aplicar el estilo en línea o bien, si aparece "(no hay reglas aplicadas)", haga clic con el botón secundario en cualquier lugar bajo Reglas aplicadas y, en el menú contextual, haga clic en Nuevo estilo en línea.

  3. En Propiedades de CSS, establezca las propiedades que desee.

Para crear y aplicar un nuevo estilo no definido

  1. En la vista Diseño o la vista Código de la página web, seleccione el elemento al que desea aplicar un estilo.

  2. Para crear y aplicar un estilo nuevo sin definir ninguna propiedad, escriba un único nombre para el estilo nuevo en la barra de herramientas Estilo, bien en el cuadro Clase o en el cuadro Id.

Vea también

Tareas

Crear una hoja de estilos en cascada
Modificar un estilo

Conceptos

Trabajar con estilos
Referencia de hojas de estilos en cascada

Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.