Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Referencias en CSS

    Încărcat de

    Jesus Sánchez
    13 vizualizări4 pagini
    Compara los diferentes tipos de referencia

    Titlu original

    11.- Referencias en CSS

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Compara los diferentes tipos de referencia

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    13 vizualizări4 pagini

    Referencias en CSS

    Încărcat de

    Jesus Sánchez
    Compara los diferentes tipos de referencia

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 4

    Referencias

    A veces es conveniente declarar todos los estilos en un archivo externo y luego cargar ese
    archivo desde cada documento que lo necesite, pero nos obliga a implementar diferentes
    mecanismos para establecer la relación entre las reglas CSS y los elementos dentro del
    documento que se verán afectados por las mismas.

    Existen varios métodos para seleccionar los elementos que serán afectados por una regla
    CSS. En ejemplos anteriores hemos utilizado el nombre del elemento, pero también podemos
    usar los valores de los atributos id y class para referenciar un solo elemento o un grupo de
    elementos, e incluso combinarlos para construir selectores más específicos.

    Nombres
    Una regla declarada con el nombre del elemento como selector afecta a todos los elementos
    de ese tipo encontrados en el documento. En ejemplos anteriores usamos el nombre p para
    modificar elementos <p>, pero podemos cambiar este nombre para trabajar con cualquier
    elemento en el documento que deseemos. Si en su lugar declaramos el nombre span, por
    ejemplo, se modificarán todos los textos dentro de elementos <span>.

    span {
    font-size: 20px;
    }

    Listado 3-9: Referenciando elementos <span> por su nombre

    Si queremos asignar los mismos estilos a elementos con nombres diferentes, podemos
    declarar los nombres separados por una coma. En el siguiente ejemplo, la regla afecta a todos
    los elementos <p> y <span> encontrados en el documento.

    p, span {
    font-size: 20px;
    }

    Listado 3-10: Declarando reglas con múltiples selectores

    También podemos referenciar solo elementos que se encuentran dentro de un elemento


    en particular listando los selectores separados por un espacio. Estos tipos de selectores se
    llaman selectores de descendencia porque afectan a elementos dentro de otros elementos, sin
    importar el lugar que ocupan en la jerarquía.

    main p {
    font-size: 20px;
    }

    Listado 3-11: Combinando selectores

    CSS 1|P á g i n a
    La regla en el Listado 3-11 afecta solo a los elementos <p> que se encuentran dentro de un
    elemento <main>, ya sea como contenido directo o insertados en otros elementos. Por
    ejemplo, el siguiente documento incluye un sección principal con una cabecera y una sección
    adicional. Ambos elementos incluyen elementos <p> para representar su contenido. Si
    aplicamos la regla del Listado 3-11 a este documento, el texto dentro de cada elemento <p> se
    mostrará con un tamaño de 20 píxeles porque todos son descendientes del elemento <main>.

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <title>Este texto es el título del documento</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="misestilos.css">
    </head>

    <body>
    <main>
    <header>
    <h1>Título</h1>
    <p>Esta es la introducción</p>
    </header>
    <section>
    <p>Frase 1</p>
    <p>Frase 2</p>
    <p>Frase 3</p>
    <p>Frase 4</p>
    </section>
    </main>
    </body>
    </html>

    Listado 3-12: Probando selectores

    La regla del Listado 3-11 solo afecta a elementos <p> que se encuentran dentro del
    elemento <main>. Si, por ejemplo, agregamos un elemento <footer> al final del documento
    del Listado 3-12, los elementos <p> dentro de este pie de página no se verán modificados. La
    Figura 3-2 muestra lo que vemos cuando abrimos este documento en el navegador.

    Figura 3-2: Selectores de descendencia

    2|P á g i n a CSS
    CSS incluye sintaxis adicionales para realizar una selección más precisa. Por ejemplo,
    podemos usar el carácter > para referenciar un elemento que es hijo directo de otro elemento.

    section > p { font-


    size: 20px;
    }

    Listado 3-13: Aplicando el selector >

    El carácter > indica que el elemento afectado es el elemento de la derecha cuando tiene
    como padre al elemento de la izquierda. La regla del Listado 3-13 modifica los elementos <p>
    que son hijos de un elemento <section>. Cuando aplicamos esta regla al documento del
    Listado 3-12, el elemento <p> dentro del elemento <header> no se ve afectado.

    Figura 3-3: Selector de hijo

    Con el carácter + se crea otro selector que facilita CSS. Este selector referencia un elemento
    que está precedido por otro elemento. Ambos deben compartir el mismo elemento padre.

    h1 + p {
    font-size: 20px;
    }

    Listado 3-14: Aplicando el selector +

    La regla del Listado 3-14 afecta a todos los elementos <p> que se ubican inmediatamente
    después de un elemento <h1>. Si aplicamos esta regla a nuestro documento, solo se modificará el
    elemento <p> dentro de la cabecera porque es el único que está precedido por un elemento <h1>.

    Figura 3-4: Selector del elemento adyacente

    CSS 3|P á g i n a
    El selector anterior afecta solo al elemento <p> que se ubica inmediatamente después de
    un elemento <h1>. Si se coloca otro elemento entre ambos elementos, el elemento <p> no se
    modifica. CSS incluye el carácter ~ para crear un selector que afecta a todos los elementos que
    se ubican a continuación de otro elemento. Este selector es similar al anterior, pero el
    elemento afectado no tiene que encontrarse inmediatamente después del primer elemento.
    Esta regla afecta a todos los elementos encontrados, no solo al primero.

    p ~ p {
    font-size: 20px;
    }

    Listado 3-15: Aplicando el selector ~


    La regla del Listado 3-15 afecta a todos los elementos <p> que preceden a otro elemento <p>.
    En nuestro ejemplo, se modificarán todos los elementos <p> dentro del elemento <section>,
    excepto el primero, porque no existe un elemento <p> que preceda al primer elemento <p>.

    Figura 3-5: Selector general de hermano

    Hágalo usted mismo: cree un nuevo archivo HTML con el código del Listado
    3-12. Cree un archivo CSS llamado misestilos.css y escriba dentro la regla que
    quiere probar. Inserte otros elementos entre los elementos <p> para ver
    cómo trabajan estas reglas.

    4|P á g i n a CSS

    S-ar putea să vă placă și