Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Intro A CSS

    Cargado por

    Alejandro Sigfrido Cifuentes Alvarez
    4 vistas2 páginas

    Título original

    Intro a CSS

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    4 vistas2 páginas

    Intro A CSS

    Cargado por

    Alejandro Sigfrido Cifuentes Alvarez

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 2

    CSS Hojas de Estilo en Cascada.

    La versión CSS 2.1 llegó a ser una Candidate Recommendation. Las fases son Candidate
    Recommendation, Proposed Recommendation y Recommendation). Ahora, las características de CSS 3
    ya están soportadas por los navegadores.

    Una hoja de estilo se compone de reglas que indican el aspecto de los elementos del documento.
    Cada regla se compone de:
     Un selector para seleccionar qué elemento se verá afectado por la regla. Un selector es una etiqueta.
     Un bloque de declaración, con una o más declaraciones que indican cómo se verá afectado, separadas por un
    punto y coma (;).
     Cada declaración se compone de una propiedad y un valor, separados por dos puntos (:).

    Si se desea que el texto de una página sea de color rojo. Podríamos usar la siguiente regla:
    body {
    color:red;
    }

    El selector es body, de elemento o de tipo, que selecciona las etiquetas con el nombre especificado.
    Se tiene una declaración, que asigna la propiedad color con el valor red.

    Existen 4 formas de aplicar las reglas de una hoja de estilo a un documento HTML:
     Insertar las reglas de estilo en el documento, en una etiqueta style.
     Insertar las declaraciones en el documento, en el atributo style del elemento cuyo aspecto se desea
    modificar.
     Desde un archivo externo, usando la directiva @import de CSS dentro de la etiqueta style.
     Desde un archivo externo, usando la etiqueta link.

    OPCIONES:
    1. Con la etiqueta style:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   
      "http://www.w3.org/TR/html4/strict.dtd">  
    <html>  
    <head>  
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
      <title>Ejemplo</title>  
      <style type="text/css">  
        body {   
          color: red;   
        }
      </style>  
    </head>  
    <body><p>Hola Mundo</p></body>  
    </html>  

    2. Con el atributo style:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   
      "http://www.w3.org/TR/html4/strict.dtd">  
    <html>  
    <head>  
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
      <title>Ejemplo</title>  
      </style>
    </head>  
    <body style="color:red;"><p>Hola Mundo</p></body>  
    </html>  

    3. Con l
    a directiva @import dentro de la etiqueta style:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   
      "http://www.w3.org/TR/html4/strict.dtd">  
    <html>  
    <head>  
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
      <title>Ejemplo</title>  
      <style type="text/css">  
        @import url('estilo.css') screen;   
      </style>  
    </head> 
    <body><p>Hola Mundo</p></body>  
    </html>  

    4. C
    on la etiqueta link. Es el método sugerido, a menos que se desee reducir el número de peticiones. Las
    reglas se colocan en un archivo, por ejemplo estilo.css, situado en la misma ruta que el documento
    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   
      "http://www.w3.org/TR/html4/strict.dtd">  
    <html>  
    <head>  
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
      <title>Ejemplo</title>  
      <link rel="stylesheet" media="screen" href="estilo.css">  
    </head>  
      
    <body><p>Hola Mundo</p></body>  
    </html>  

    Ejercicio: Ejecutar cada opción anterior con el ejercicio visto en clase.

    También podría gustarte