Scribd Logo
Importer

Bienvenue sur Scribd !

  • Lecci

    Transféré par

    Miguel Angel Mateo Bernal
    6 vues4 pages
    css

    Titre original

    lecci

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    css

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    6 vues4 pages

    Lecci

    Transféré par

    Miguel Angel Mateo Bernal
    css

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 4

    22/11/2016 Lección 2: ¿Cómo funciona CSS entutorial ­ HTML.

    net

    Lección 2: ¿Cómo funciona CSS?
    En esta lección usted aprenderá cómo hacer su primera hoja de estilo. Se llega a saber sobre el modelo básico
    y CSS que codifica son necesarios para utilizar CSS en un documento HTML.

    Muchas de las propiedades utilizadas en Cascading Style Sheets (CSS) son similares a las de HTML. Por lo
    tanto, si estás acostumbrado a utilizar código HTML para el diseño, lo más probable es reconocer muchos de los
    códigos. Veamos un ejemplo concreto.

    La sintaxis básica CSS
    Supongamos que queremos un bonito color rojo como fondo de una página web:

    El uso de HTML que podría haber hecho de esta manera:

       
      <body bgcolor="#FF0000"> 
       
     

    Con CSS el mismo resultado se puede lograr de esta manera:

       
      body {background‐color: #FF0000;} 
       
     

    Como podrá observar, los códigos son más o menos idénticos para HTML y CSS. El ejemplo anterior también
    se muestra el modelo fundamental de CSS:

    Pero, ¿dónde se pone el código CSS? Esto es exactamente lo que vamos a repasar ahora.

    La aplicación de CSS a un documento HTML
    Hay tres formas de aplicar CSS a un documento HTML. Todos estos métodos se describen a continuación.
    Recomendamos que usted se centra en el tercer método es decir, externa.

    Método 1: En línea (el estilo del atributo)
    Una forma de aplicar CSS a HTML es mediante el atributo HTML style. Basándose en el ejemplo anterior con el
    color de fondo rojo, se puede aplicar la siguiente manera:

      <html> 
        <head> 

    http://html.net/tutorials/css/lesson2.php 1/4
    22/11/2016 Lección 2: ¿Cómo funciona CSS entutorial ­ HTML.net
        <title>Example</title> 
        </head> 
        <body style="background‐color: #FF0000;"> 
        <p>This is a red page</p> 
        </body> 
      </html> 
     

    Método 2: Interno (el estilo de etiqueta)
    Otra forma es incluir el código CSS usando la etiqueta HTML <style>. Por ejemplo la siguiente manera:

      <html> 
        <head> 
        <title>Example</title> 
        <style type="text/css"> 
          body {background‐color: #FF0000;} 
        </style> 
        </head> 
        <body> 
        <p>This is a red page</p> 
        </body> 
      </html> 
     

    Método 3: Externo (enlace a una hoja de estilo)
    El método recomendado es enlazar a una denominada hoja de estilos externa. A lo largo de este tutorial vamos
    a utilizar este método en todos nuestros ejemplos.

    Una hoja de estilo externa es simplemente un archivo de texto con la extensión .css . Al igual que cualquier otro
    archivo, se puede colocar la hoja de estilos en su servidor web o un disco duro.

    Por ejemplo, digamos que su hoja de estilo se llama style.css y está situado en una carpeta con el nombre del
    estilo . La situación se puede ilustrar como esto:

    El truco es crear un vínculo desde el documento HTML (default.htm) a la hoja de estilos (style.css). Ese vínculo
    se puede crear con una línea de código HTML:

      <link rel="stylesheet" type="text/css" href="style/style.css" /> 
     

    Observe cómo el camino hacia nuestra hoja de estilos se indica utilizando el atributo href.

    La línea de código debe ser insertado en la sección de encabezado del código HTML, es decir, entre el <head>y
    </head>etiquetas. Me gusta esto:

      <html> 
        <head> 
        <title>My document</title> 
        <link rel="stylesheet" type="text/css" href="style/style.css" />
        </head> 
        <body> 
        ... 
     

    http://html.net/tutorials/css/lesson2.php 2/4
    22/11/2016 Lección 2: ¿Cómo funciona CSS entutorial ­ HTML.net

    Este enlace le dice al navegador que debe utilizar el diseño del archivo CSS cuando se muestra el archivo
    HTML. 
    Lo realmente inteligente es que varios documentos HTML se pueden vincular a la misma hoja de estilo. En otras
    palabras, un archivo CSS se puede utilizar para controlar la disposición de muchos documentos HTML.

    Esta técnica se puede ahorrar mucho trabajo. Si, por ejemplo, desea cambiar el color de fondo de un sitio web
    con 100 páginas, una hoja de estilo puede salvar de tener que cambiar manualmente todos los 100 documentos
    HTML. El uso de CSS, el cambio se puede realizar en pocos segundos con sólo cambiar un código en la hoja de
    estilos central.

    Vamos a poner lo que acabamos de aprender en la práctica.

    Inténtalo tú mismo
    Abrir Bloc de notas (o cualquier editor de texto que usa) y crear dos archivos ­ un archivo HTML y un archivo
    CSS ­ con el siguiente contenido:

    default.htm

      <html> 
        <head> 
        <title>My document</title> 
        <link rel="stylesheet" type="text/css" href="style.css" /> 
        </head> 
        <body> 
        <h1>My first stylesheet</h1> 
        </body> 
      </html> 
     

    style.css

      body { 
        background‐color: #FF0000; 
      } 
     

    Ahora coloque los dos archivos en la misma carpeta. No olvide guardar los archivos con las extensiones
    adecuadas (respectivamente ".htm" y ".css")

    http://html.net/tutorials/css/lesson2.php 3/4
    22/11/2016 Lección 2: ¿Cómo funciona CSS entutorial ­ HTML.net

    Abrir default.htm con su navegador y ver cómo la página tiene un fondo rojo. ¡Felicitaciones! Que haya
    realizado su primera hoja de estilos!

    De prisa a la siguiente lección donde vamos a echar un vistazo a algunas de las propiedades de CSS.

    Temas relacionados en el Foro de CSS respuestas Puntos de vista

    ¿Necesita ayuda con respecto a render de bloqueo de error en el CSS y JS 0 188

    CSS Imagen de fondo no funciona 7 17977

    Re: a: hover y a: activa no trabaja 2 6324

    identificación css no funciona 2 5410

    de error de validación 1 5358

    + Publicar un nuevo tema

    << Lección 1: ¿Qué es CSS? Lección 3: Colores y fondos >>

    http://html.net/tutorials/css/lesson2.php 4/4

    Vous aimerez peut-être aussi