Contenidos

1 CSS

CSS

Las Hojas de estilo en cascada (Cascading Style Sheets, CSS), son un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado, normalmente páginas web escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etc. También permite aplicar estilos no visuales, como las hojas de estilo auditivas

Una hoja de estilos no es más que un archivo de texto con extensión .css. Aunque las hojas de estilo se definieron a mediados de los años noventa, han tenido especial repercusión a partir de su última versión (CSS3), en combinación con HTML5

Se pueden aplicar distintas hojas de estilo dependiendo del dispositivo en el que mostremos nuestra página web (una pantalla grande, un móvil, papel impreso, etc)

Integración de estilos en una página

Existen varias formas de integrar estilos en una página. Pero normalmente usaremos una de estas dos:

Incluida como etiqueta que forma parte del HTML
```
<p style="color: red;">texto</p>
```
El problema de esta opción es bastante obvio. Si en un futuro quisiéramos modificar el color de los párrafos que contienen el texto, tendríamos que buscar uno por uno todas las apariciones y cambiarlos manualmente

Definida como una regla de estilo en la cabecera

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <style type="text/css">
            p { color: red; }
        </style>
    </head>
<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
    <p>texto</p>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732188403&k=3905b0ed1a46b8978569d7ad5024408c&__muid="></script>
<!-- Inserted by miarroba -->
</body>

En una página web real usaremos más de una regla de estilo, por lo que tampoco será una buena opción añadirlas una a una en la cabecera

Definida con la etiqueta <link> a un fichero externo

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <link rel="stylesheet" type="text/css" href="./css/fichero.css">
    </head>
<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
    <p>texto</p>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732188403&k=3905b0ed1a46b8978569d7ad5024408c&__muid="></script>
<!-- Inserted by miarroba -->
</body>

Normalmente usaremos más de una regla de estilo, por lo que será una buena opción añadirlas desde un fichero externo de extensión .css y enlazarlas en la cabecera del HTML con la etiqueta <link>

Estructura de una hoja de estilo

Una hoja de estilo define una o más reglas que se aplicarán a los elementos que cumplan dicha regla

Cada regla se compone de dos partes:

Selector: indica a qué elementos vamos a aplicarle la regla. Pueden escribirse más de un selector para la misma regla separados por comas
Lista de declaraciones: los estilos que se van a aplicar a los elementos que cumplan la regla. Corresponden a un par propiedad:valor, separados por punto y coma

p {
    color: red;
    font-family: Verdana;
    text-aling: center;
}

En el ejemplo se ha definido una regla que se aplica a todos los elementos p de párrafo del HTML. Además el texto se ha definido de color rojo, su fuente como Verdana y su alineación de párrafo es centrada

De forma adicional, podemos añadir comentarios, que aparecerán escritos entre /* y */

También podremos añadir directivas at (que empiezan por @), las cuales modifican la forma de aplicar las reglas

El árbol DOM

El document object model (DOM) es la representación estructurada, en forma de árbol, de todos los elementos escritos en un documento HTML

Por ejemplo, cualquier documento HTML empieza por la etiqueta , conteniendo además las etiquetas y , con su respectivas etiquetas de cierre

Por su parte, dentro de la cabecera (etiqueta <head>) contendrá a su vez elementos con las etiquetas <meta>, <link>, <title>, etc

Y el cuerpo (etiqueta <body>), contendrá a su vez más elementos y así sucesivamente hasta llegar a sus etiquetas de cierre

A la estructura jerárquica resultante en informática se la denomina árbol

En concreto, el árbol que representa la estructura de un documento HTML es el DOM

Gracias a esta estructura en forma de árbol, podemos identificar de forma única cada elemento del documento HTML, según cómo estén relacionados entre sí esos elementos, podremos aplicarles distintas reglas de estilo

Las relaciones que podemos identificar son:

Descendientes: son todos los elementos contenidos (directa o indirectamente) por un elemento
Por ejemplo, <head>, <meta> o <body> son descendientes de <html>
Hijo directos: son los descendientes de primer nivel
Por ejemplo, <head> es hijo de <html>
Hermanos: descendientes que tienen un padre común
Por ejemplo todos los elementos <meta> son hermanos entre si

Gracias a estas relaciones dentro del DOM, en el ejemplo que usamos anteriormente que afectaba sólo a los elementos <p>, podríamos aplicárselo también a los elementos contenidos en una división <div> que contuviera una clase o un identificador concreto

O podríamos crear reglas para los hermanos con los que compartiera un nodo

Apoyándonos en el lenguaje JavaScript y en el DOM, podremos modificar el contenido de los elementos una vez cargada la página web en el navegador

Cascada de estilo

Gracias al DOM podemos identificar los elementos concretos de un documento HTML y por eso podemos aplicarle las hojas de estilo

Una hoja de estilos puede contener diferentes reglas que configuren el mismo elemento, incluso podemos tener varias hojas de estilo con reglas contradictorias

body {
    background-color: black;
    color: red;
}

p {
    color: blue;
}

En este ejemplo, nuestras reglas dicen que para todo elemento del <body>, incluidos sus descendientes, se le van a aplicar el color de fondo negro y el color de texto rojo

En la siguiente regla, le indicamos que en el elemento <p> de párrafo, el texto ha de ser de color azul

El documento final tendrá todos los elementos de color de fondo negro y el texto de color rojo, pero además los párrafos tendrá color azul

Las reglas se han ido aplicando unas sobre otras, en forma de cascada. Por eso tienen el nombre de cascadas de hojas de estilos (cascade style sheets, CSS)

En general, los estilos se heredan. Primero se establecen la propiedad del elemento padre y sus descendientes los heredan, para finalmente aplicar los suyos, que a su vez son heredados por sus descendientes, hasta que llegar al último nodo de descendientes de la hoja de estilos

En el caso de que tengamos dos elementos que son hermanos y haya conflicto por ver quien hereda qué propiedad, se aplica el más específico y en el caso de que tengan las mismas propiedades, se aplicará el último estilo definido

Es decir, si una regla está definida en dos hojas de estilo externas, se aplicará la regla de la hoja que se incluyó más tarde en el documento HTML. Por eso, el orden en el que las incluyamos es muy importante

Primero incluiremos las hojas más generales y después aquellas que sean más específicas

En el caso de haber incrustado en el HTML alguna regla, el estilo que se ha definido, será el que tendrá mayor prioridad que la regla que esté incluida en la cabecera del HTML

Resumiendo, se aplicarán las siguientes prioridades a la hora de aplicar una regla a un elemento concreto:

Se buscan todas las declaraciones aplicables al elemento
Si no existen reglas, se usará el valor heredado

Si no hubiera valor heredado, el navegador aplicará el valor por defecto
Si existen reglas, se aplicará la de mayor prioridad de acuerdo a los siguientes criterios:
- Se asigna un peso según su origen: hoja de estilos del autor, del usuario o del navegador
- Atributos con la palabra clave !important: tendrán mayor prioridad
- Selectores específicos: tendrán mayor prioridad
- Dos reglas con la misma prioridad: se aplica la indicada en último lugar

CSS Reset

Cada navegador posee su propia hoja de estilos por defecto

Esto implica que el estilo por defecto de algunos elementos puede ser diferente para cada navegador

Por esta razón es recomendable realizar un reinicio de los estilos aplicados a los elementos añadiendo una CSS especial (la CSS Reset) al principio de nuestras páginas web

Existen múltiples CSS que realizan esta tarea (como las utilizadas en los frameworks de Yahoo YUI, HTML5 BoilerPlate o Normalize), pero uno de los más populares es la de Eric Meyer considerado como uno de los gurús de las CSS

Para añadirla sólo has de guardar el archivo en la carpeta css contenida en la raíz de tu sitio web y definirla con la etiqueta <link> en la cabecera de tu HTML:

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <link rel="stylesheet" type="text/css" href="./css/reset.css">
    </head>
<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
    <p>texto</p>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732188403&k=3905b0ed1a46b8978569d7ad5024408c&__muid="></script>
<!-- Inserted by miarroba -->
</body>

Cookie	Duración	Descripción
CookieLawInfoConsent	Hasta finalizar la sesión del navegador	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Hasta finalizar la sesión del navegador	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Hasta finalizar la sesión del navegador	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Hasta finalizar la sesión del navegador	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Web sobre Informática de Secarcam

CSS

CSS

Integración de estilos en una página

Estructura de una hoja de estilo

El árbol DOM

Cascada de estilo

CSS Reset

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

CSS

Integración de estilos en una página

Estructura de una hoja de estilo

El árbol DOM

Cascada de estilo

CSS Reset

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Política de Cookies