AdNow

loading...

¿Cómo hacer CSS?

-

CSS Cómo ...

❮ AnteriorSiguiente ❯
Cuando un navegador lee una hoja de estilo, formateará el documento HTML de acuerdo con la información en la hoja de estilo.

Tres maneras de insertar CSS

Hay tres formas de insertar una hoja de estilo:
  • Hoja de estilo externa
  • Hoja de estilo interno
  • Estilo en linea

Hoja de estilo externa

Con una hoja de estilo externa, puede cambiar el aspecto de un sitio web completo cambiando solo un archivo.
Cada página debe incluir una referencia al archivo de la hoja de estilo externa dentro del elemento <link>. El elemento <link> va dentro de la sección <head>:

Ejemplo

<head>
<link rel="stylesheet" type="text/css"href="mystyle.css">
</head>
Inténtalo tú mismo "
Una hoja de estilo externa se puede escribir en cualquier editor de texto. El archivo no debe contener ninguna etiqueta html. El archivo de la hoja de estilo debe guardarse con una extensión .css.
Aquí es cómo se ve el "mystyle.css":
body {
    background-color: lightblue;}

h1 {
    color: navy;
    margin-left: 20px;}
Nota: No agregue un espacio entre el valor de la propiedad y la unidad (como por ejemplo margin-left: 20 px;). La forma correcta es:margin-left: 20px;
Hoja de estilo interna
Se puede utilizar una hoja de estilo interna si una sola página tiene un estilo único.
Los estilos internos se definen dentro del elemento <style>, dentro de la sección <head> de una página HTML:

Ejemplo

<head>
<style>
body {
    background-color: linen;}

h1 {
    color: maroon;
    margin-left: 40px;} </style>
</head>
Inténtalo tú mismo "

Estilos en linea

Se puede usar un estilo en línea para aplicar un estilo único para un solo elemento.
Para usar estilos en línea, agregue el atributo de estilo al elemento relevante. El atributo de estilo puede contener cualquier propiedad CSS.
El siguiente ejemplo muestra cómo cambiar el color y el margen izquierdo de un elemento <h1>:

Ejemplo

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Inténtalo tú mismo "
Consejo: Un estilo en línea pierde muchas de las ventajas de una hoja de estilo (al mezclar contenido con la presentación). Utilice este método con moderación.

Hojas de estilo múltiple

Si se han definido algunas propiedades para el mismo selector (elemento) en diferentes hojas de estilo, se utilizará el valor de la última hoja de estilo de lectura. 

Ejemplo

Supongamos que una hoja de estilo externa tiene el siguiente estilo para el elemento <h1>:
h1 {
    color: navy;}
luego, suponga que una hoja de estilo interna también tiene el siguiente estilo para el elemento <h1>:
h1 {
    color: orange;    }
Si el estilo interno se define después del enlace a la hoja de estilo externa, los elementos <h1> serán "naranja":

Ejemplo

<head>
<link rel="stylesheet" type="text/css"href="mystyle.css">
<style>
h1 {
    color: orange;}</style>
</head>
Inténtalo tú mismo "
Sin embargo, si el estilo interno se define antes del enlace a la hoja de estilo externa, los elementos <h1> serán "navy":

Ejemplo

<head>
<style>
h1 {
    color: orange;}</style>
<link rel="stylesheet" type="text/css"href="mystyle.css">
</head>
Inténtalo tú mismo "

Orden en cascada

¿Qué estilo se usará cuando hay más de un estilo especificado para un elemento HTML?
Todos los estilos en una página se "colocarán en cascada" en una nueva hoja de estilo "virtual" según las siguientes reglas, donde el número uno tiene la mayor prioridad:
  1. Estilo en línea (dentro de un elemento HTML)
  2. Hojas de estilo externas e internas (en la sección de cabeza)
  3. Navegador predeterminado
Por lo tanto, un estilo en línea tiene la prioridad más alta, y reemplazará los estilos externos e internos y los valores predeterminados del navegador.

¡Ponte a prueba con los ejercicios!

Ejercicio 1 »Ejercicio 2»Ejercicio 3 »Ejercicio 4»

❮ AnteriorSiguiente ❯

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Entradas más populares de este blog

Listado pasaporte y cedulas SAIME 2018

-
Imagen
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime  www.saime.gob.ve  y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa  da cumplimiento a la séptima línea de
Leer más

Etiqueta HTML < abbr >

-
Etiqueta  HTML  <abbr> ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The  < abbr  title ="World Health Organization" > WHO < /abbr >  was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia:  una abreviatura y un acrónimo son versiones abreviadas de otra cosa.  Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo:  El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere
Leer más

HTML < a > tag

-
HTML  <a>  día ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Un enlace a W3Schools.com: < a  href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia:  los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo:  Normalmente, una pági
Leer más

Visitas a este blog