Cómo crear estilos externos en css3

categoría Los medios de comunicación de Internet y sociales / Diseño y desarrollo web / Páginas web de construcción

La mayoría de los desarrolladores utilizan estilos externos en CSS3 para reducir la cantidad de trabajo necesario para mantener un sitio. Un solo archivo .CSS contiene todos los estilos para el sitio, lo que significa que el cambio de un estilo de todo el sitio es tan simple como cambiar que un archivo (en lugar de cada página). Debido a que el cambio se produce en un solo lugar, no hay ninguna posibilidad de perder uno o más cambios en las páginas individuales.

Creación y uso de una hoja de estilos externa no es muy diferente de usar una hoja de estilo interna. El siguiente ejemplo utiliza técnicas estándar para crear una hoja de estilos externa:

  1. Crear un nuevo archivo de HTML5 con su editor de texto.

  2. Escriba el código de la página HTML.

    Un Simple Página
    ¿Un simple título
    El texto es sencillo para ir con el título.

    Asegúrese de escribir el código de forma precisa. Lo que usted debe terminar con es la misma página sin formato - uno sin ningún estilo.

  3. Escriba el siguiente código inmediatamente después de la etiqueta.

    los etiqueta le dice al navegador para buscar un recurso externo. En este caso, el atributo rel dice que debería buscar una hoja de estilos y el atributo href proporciona el nombre de esa hoja de estilo.

  4. Guarde el archivo de HTML5 en el disco.

  5. Crear un nuevo archivo .CSS con su editor de texto.

    Su editor no admita archivos .CSS. Cualquier archivo de texto hará.

  6. Escriba el siguiente código en el archivo .CSS.

    p {font-family:-font-size cursiva: a gran color: # 0000ff-background-color: # ffff00-} h1 {font-family: "Times New Roman", Georgia, serif-font-size: 40px; texto -align: Centro-text-decoration: underline-color: # ff0000-background-color: # 00ffff-}

    Este puede ser el mismo código que utilizó para crear su archivo interno. La única diferencia es que ahora reside en un archivo externo.

  7. Guarde el archivo CSS en el disco como ExternalCSS.CSS.

    Es absolutamente esencial que el nombre del archivo coincide precisamente el nombre que se encuentra en el atributo href. Algunas plataformas entre mayúsculas y minúsculas, por lo que deben utilizar el mismo caso para el nombre de archivo. Por ejemplo, externalcss.css podría ser visto como un archivo diferente de ExternalCSS.CSS.

  8. Cargue la página en su navegador.

    imagen0.jpg


Artículos Relacionados

Sobre el autor
Crear una nueva hoja de estilos en el panel Estilos CSS Crear una nueva hoja de estilos en el panel Estilos CSS

Al hacer clic en el icono Nueva regla CSS (que se muestra en el margen) en la parte inferior del panel Estilos CSS, se abre el cuadro de diálogo Nueva regla CSS. El cuadro de diálogo Nueva regla CSS combina características para definir estilos de…

Cuatro tipos de hojas de estilo en cascada en el diseño web Cuatro tipos de hojas de estilo en cascada en el diseño web

Hojas de Estilo en Cascada (CSS) se dividen en cuatro tipos diferentes (o estilos). Cuando usted entienda cómo funcionan estos cuatro tipos diferentes, podrás peinar sus páginas web de forma más eficiente.Para mantener su CSS organizada, usar…

Cómo cambiar fondos repetitivas en sitios css3 Cómo cambiar fondos repetitivas en sitios css3

Hay situaciones en las que sólo se desea una sola copia de una imagen de fondo en su sitio CSS3. Puede ser que la imagen que ha utilizado es algo que no se repite así o es lo suficientemente grande que usted realmente no quiere que se repita. El…

Cómo crear un borde alrededor de una imagen en css3 Cómo crear un borde alrededor de una imagen en css3

Uno de los cambios más comunes que puede realizar en una imagen en CSS3 es añadir una frontera. Esto pone en marcha la imagen del otro contenido en la página. Por supuesto, CSS3 ofrece una amplia gama de tipos de fronteras. El truco es conseguir…

Cómo crear un fondo css3 sola imagen Cómo crear un fondo css3 sola imagen

La manera más simple, más compatible para crear un fondo CSS3 que tiene al menos un poco de realce es utilizar una sola imagen. La imagen de la derecha dice mucho acerca de su sitio y proporciona continuidad entre páginas. Debido a este enfoque…

Cómo interactuar con los atributos de objeto con attr de css3 función () Cómo interactuar con los atributos de objeto con attr de css3 función ()

La función attr () es interesante porque le permite interactuar con cualquier atributo de un objeto como parte de un estilo. Usted ve esta función se utiliza en un número de maneras únicas en Internet, a pesar de que parece ser un secreto bien…

Cómo vincular css externo a una página Cómo vincular css externo a una página

Para enlazar una página HTML a una hoja de estilos en cascada (CSS) externa, sólo tiene que insertar una sola línea de código en la cabecera de la página que hace referencia el nombre y la ubicación del archivo CSS externo en relación con el…

Cómo el estilo de párrafos, encabezados y pies de página con css3 Cómo el estilo de párrafos, encabezados y pies de página con css3

Cuando se diseñará párrafos, encabezados y pies de página, la mayoría del trabajo se puede lograr de forma automática mediante la creación de estilos de etiquetas Redefinir para el etiqueta y sin embargo muchas etiquetas de título que va a…

Cómo utilizar varios estilos junto con css3 Cómo utilizar varios estilos junto con css3

La comprensión de las reglas de la herencia en CSS3 le ayuda a crear sitios interesantes que requieren un mínimo de mantenimiento. Siguiendo estas reglas, cuando se requiere mantenimiento, normalmente tiene que hacer un solo cambio, en lugar de…

Cómo utilizar el selector: no () en css3 Cómo utilizar el selector: no () en css3

En algunos casos, es más fácil para seleccionar objetos en CSS3, según las características que ¿no tiene - para hacer esto usted puede utilizar una: no (selector). Por ejemplo, es posible que desee cambiar el formato de cada objeto que no está…

Cómo trabajar con los selectores de sucesos css3 Cómo trabajar con los selectores de sucesos css3

La mayoría de los cambios CSS3 son estáticos - usted pide el navegador para buscar etiquetas específicas, atributos o patrones. Sin embargo, selectores de sucesos eligen objetos en función de un evento en particular, como un ratón por…

¿Cómo trabajar con gradientes lineales en css3 ¿Cómo trabajar con gradientes lineales en css3

La mayoría de la gente quiere algo un poco más emocionante que un color de fondo o un marco para sus sitios CSS3. Por ejemplo, usted puede confiar en una función lineal gradiente () para realizar la tarea. El uso de un gradiente lineal (), puede…

» » » » Cómo crear estilos externos en css3