Crear y aplicar un estilo

Importante:  Este artículo se ha traducido con traducción automática; vea la declinación de responsabilidades. Para su referencia, puede encontrar la versión en inglés de este artículo aquí.

Un estilo es un conjunto de características de formato definidas en una hoja de estilos en cascada (CSS). Los estilos se pueden aplicar al contenido de una página Web: texto (caracteres por separado o párrafos enteros), gráficos, capas, tablas e incluso al cuerpo de toda la página Web. Los estilos le permiten volver a usar con eficacia un conjunto de propiedades y valores sin tener que definir las propiedades cada vez que desea utilizarlas.

Los estilos de una hoja CSS son una "cascada", en el sentido que las reglas de estilo globales se aplican a los elementos HTML a menos que las reglas de estilo locales las invaliden. En general, las reglas de estilo locales tienen prioridad sobre las generales. Por ejemplo, un estilo definido en una hoja CSS interna de una página Web invalida un estilo definido en una hoja CSS externa. De la misma forma, una hoja CSS en línea definida en un solo elemento HTML de la página Web anula los estilos definidos para ese mismo elemento en las hojas CSS internas o externas de la página Web. Las partes de las reglas de estilo globales que no se contraponen a las reglas de estilo de las hojas CSS locales se aplican a los elementos HTML incluso cuando hay estilos locales aplicados.

En este artículo

Tipos de estilos

Crear un estilo

Aplicar un estilo

Tipos de estilos

Un estilo que se encuentra en una hoja CSS externa o interna puede ser basado en clase, basado en elemento, o basado en identificador. Un estilo queda definido por su conjunto de reglas, que consta de un selector, seguido por un bloque de declaraciones de propiedad que aparecen entre llaves de apertura ({) y de cierre (}). Cada tipo de estilo se distingue de los demás por su selector; el selector va precedido de un punto (.) en los estilos basados en clase y por un signo de número (#) en los estilos basados en identificador. El selector de un estilo basado en elemento consta únicamente de un elemento HTML, por ejemplo el elemento H1.

Estilos basados en clase

Use estilos basados en clase para definir un conjunto de propiedades que desee usar en uno o varios elementos de una página Web. Si desea modificar ese estilo, puede editar su conjunto de propiedades y todos los elementos a los que haya aplicado el estilo reflejarán los cambios automáticamente.

En el ejemplo siguiente, "introduction" es el selector del estilo y "font-size: small" es una declaración de propiedad, seguida por una segunda declaración de propiedad.

Ejemplo de un conjunto de reglas para un estilo basado en clase

.introduction {font-size: small; color: white}

Ejemplo de un estilo basado en clase aplicado a una etiqueta <p>

<p class="introduction">

Estilos basados en elemento

Use estilos basados en elemento para definir un conjunto de propiedades que desee usar en todas las instancias de un elemento HTML concreto de una página Web. Por ejemplo, para crear un margen de 25 píxeles en torno a todos los párrafos (contenido incluido entre etiquetas <p>) de la página Web, debe crear un estilo basado en elemento que use el elemento p como selector y contenga declaraciones para las propiedades de los márgenes, como se muestra en el siguiente código.

Ejemplo de un conjunto de reglas para un estilo basado en elemento

p { margin-left: 25px; margin-right: 25px }

Estilos basados en identificador

Use un estilo basado en identificador si desea definir un conjunto de propiedades para un único elemento o bloque de elementos que desea diferenciar de todo el resto del contenido de una o varias páginas Web. Use un estilo basado en identificador si desea aplicar estilo a un único elemento HTML de una página Web.

Ejemplo de un conjunto de reglas para un estilo basado en identificador

#footer {background-color: #CCCCCC; margin: 15px}

Ejemplo de un estilo basado en identificador aplicado a una etiqueta <p>

<p id="footer">

Estilos en línea

Use un estilo en línea si desea definir un conjunto de propiedades para un único elemento o bloque de elementos de una página Web y no desea volver a usarlo. A diferencia de los estilos basados en identificador, elemento y clase, cuyas propiedades se definen en la sección de encabezado de una página Web (hoja CSS interna) o en un archivo CSS externo, las propiedades de los estilos en línea (o CSS en línea) se definen directamente en el elemento HTML que utiliza el estilo.

Ejemplo de un conjunto de reglas para un estilo en línea

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Volver al principio

Crear un estilo

Puede crear nuevos estilos desde cero o copiando un estilo existente. De cualquier forma, el cuadro de diálogo Nuevo estilo le permite definir todo lo necesario para el nuevo estilo: tipo de selector, propiedades y hoja de estilos que contendrá el estilo. Si desea crear un nuevo estilo en línea, también puede usar el panel de tareas Propiedades de CSS. Si desea crear y aplicar rápidamente un nuevo estilo en la página sin definir ninguna propiedad para dicho estilo, también puede usar la barra de herramientas Estilo.

Crear un estilo con el cuadro de diálogo nuevo estilo

  1. Siga uno de estos procedimientos:

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

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

    • Para agregar un estilo en línea, abra la página Web y, a continuación, seleccione el contenido al que desea aplicar el estilo.

  2. Siga uno de estos procedimientos:

    • Para crear un nuevo estilo    Haga clic en Nuevo estilo en uno de estos lugares: el panel de tareas Aplicar estilos, el panel de tareas Administrar estilos, la barra de herramientas Estilo o el menú Formato.

    • Para copiar un estilo existente    Siga uno de estos procedimientos:

      • En el panel de tareas Aplicar estilos, seleccione el estilo que desea copiar, haga clic en la flecha hacia abajo que aparece y, a continuación, seleccione Copiar nuevo estilo.

      • En los paneles de tareas Administrar estilos o Propiedades de CSS, haga clic con el botón secundario en el estilo que desea copiar y, a continuación, seleccione Copiar nuevo estilo.

  3. En el cuadro de diálogo Nuevo estilo, realice lo siguiente:

Use este

Para ello

Selector

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

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

    Nota: Los nombres de los selectores de clases y de identificadores no pueden contener espacios, salvo que se esté creando un selector complejo.

  • Para usar un selector de elemento, escriba el nombre de un elemento HTML o haga clic en el cuadro desplegable Selector y seleccione un nombre de 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 las siguientes opciones:

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

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

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

Aplicar el nuevo estilo a la selección del documento

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

Dirección URL

Si ha seleccionado 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 se muestran en la parte derecha del cuadro de diálogo:

Sugerencia: Las categorías que se muestran en negrita en la lista Categoría contienen propiedades establecidas.

  • Fuente establece las propiedades de la fuente, como tamaño, grosor, decoración y color.

  • Bloque establece el alto de las líneas, y la alineación, sangría y espaciado del texto.

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

  • Borde establece un borde y sus propiedades.

  • Cuadro establece las propiedades de relleno y márgenes de los elementos de cuadro y de nivel de cuadro.

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

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

  • Lista establece las propiedades de los elementos de lista, que son tipo, posición e imagen.

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

Nota: También puede copiar un estilo de una hoja CSS en otra. En el panel de tareas Administrar estilos, arrastre el estilo de la hoja CSS en que se encuentra a la hoja CSS en que desea copiarlo o a un punto concreto de la lista de estilos de la hoja CSS de destino.

Crear un estilo en línea mediante el panel de tareas Propiedades de CSS

  1. En las vistas Diseño o Código, en la página Web, seleccione el contenido al que desea agregar un estilo en línea.

  2. En el panel de tareas 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 si aparece "(no hay reglas aplicadas)", haga clic con el botón secundario en cualquier lugar bajo Reglas aplicadas y, a continuación, haga clic en Nuevo estilo en línea en el menú contextual.

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

Crear y aplicar un nuevo estilo no definido

Puede crear estilos y aplicarlos a los elementos y, posteriormente, definir los estilos. Por ejemplo, si desea trabajar con un diseñador para crear el aspecto de la página, puede aplicar estilos no definidos a los elementos y, más adelante, trabajar con el diseñador para definir los estilos.

  1. En las vistas Diseño o Código, en la página Web, seleccione el elemento al que desea aplicar un estilo.

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

Volver al principio

Aplicar un estilo

Puede usar los paneles de tareas Aplicar estilos o Administrar estilos, o la barra de herramientas Estilo para aplicar estilos basados en clase o en identificador de las hojas de estilos en cascada (CSS) internas y externas. El panel de tareas Aplicar estilos le permite aplicar varios estilos a una selección, mientras que el panel de tareas Administrar estilos y la barra de herramientas Estilo sólo permiten aplicar un estilo. La barra de herramientas Estilo le permite dar nombre a nuevos estilos no definidos y aplicarlos a la página.

No es necesario aplicar los estilos que usan un elemento para un selector (estilos basados en elemento) porque este tipo de estilos se aplican automáticamente a su elemento asociado en toda una página Web. En el panel Aplicar estilos se enumeran los estilos basados en elemento bajo Selectores contextuales y, junto con el panel Administrar estilos, muestra un punto azul al lado del nombre del estilo. En la barra de herramientas Estilo no aparecen los estilos basados en elemento.

  1. En las vistas Diseño o Código, en la página Web, seleccione el elemento al que desea aplicar un estilo.

  2. Siga uno de estos procedimientos:

    • Para aplicar varios estilos existentes    En el panel de tareas Aplicar estilos, presione CTRL mientras hace clic en los estilos que desea utilizar.

    • Para aplicar un único estilo existente    Siga uno de estos procedimientos:

      • En el panel de tareas Aplicar estilos, haga clic en el estilo de clase o identificador que desea utilizar.

      • En la barra de herramientas Estilo, en los cuadros desplegables Clase o Id., haga clic en el estilo que desea utilizar.

      • En el panel de herramientas Administrar estilos, haga clic con el botón secundario en el estilo de clase o identificador que desea utilizar y, a continuación, haga clic en Aplicar estilo en el menú contextual.

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

Volver al principio

Nota: Declinación de responsabilidades de traducción automática: Este artículo se ha traducido con un sistema informático sin intervención humana. Microsoft ofrece estas traducciones automáticas para que los hablantes de otros idiomas distintos del inglés puedan disfrutar del contenido sobre los productos, los servicios y las tecnologías de Microsoft. Puesto que este artículo se ha traducido con traducción automática, es posible que contenga errores de vocabulario, sintaxis o gramática.

Ampliar sus conocimientos
Explorar los cursos
Obtener nuevas características primero
Únase a los participantes de Office Insider

¿Le ha sido útil esta información?

¡Gracias por sus comentarios!

Gracias por sus comentarios. Quizá le interese ponerse en contacto con uno de nuestros agentes de soporte de Office.

×