HTML5 06 PDF

U6 - Definir la apariencia
Por medio del uso de las hojas de estilo se define la apariencia de las pginas HTML, tamaos, colores, tipos de letra, posicionamientos, En esta unidad veremos algunas propiedades bsicas de CSS para poder modificar la apariencia de los documentos HTML. Los documentos HTML estn destinados al contenido y el CSS al diseo. Esta separacin permite trabajar de forma ms organizada y efectiva. Tambin proporciona una forma rpida de modificar y actualizar los sitios web, adems de otras ventajas como aumentar la accesibilidad y mejorar el posicionamiento. Es importante destacar que en este contenido relacionado con CSS3, al igual que cuando hablamos de HTML5, trabajamos con borradores, son especificaciones que se van actualizando con frecuencia. Algunas de ella son de reciente incorporacin, otras ampliadas o mejoradas. Por esta razn algunas propiedades y valores no son reconocidos an por todos los navegadores ms utilizados y en algunos casos por ninguno de ellos. Las nuevas propiedades incorporadas a las hojas de estilo, as como la ampliacin o mejoras de algunas de las ya existentes han supuesto nuevas aplicaciones y usos de CSS.
Al finalizar el estudio de estas lecciones sers capaz de: Utilizar CSS para desarrollar el diseo de las pginas web. Valorar el uso de CSS en la interactividad.
1 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA
L1
Introduccin a las hojas de estilo
Las hojas de estilo en cascada o CSS (Cascading Style Sheets) es un lenguaje que se utiliza para desarrollar el diseo o apariencia de un documento HTML. El encargado de su estandarizacin es el W3C. En la pgina del W3C, encontramos la siguiente explicacin:
Definicin
CSS es el lenguaje para describir la presentacin de las pginas Web, incluidos los colores, el diseo, y las fuentes. Permite adaptar la presentacin a los diferentes tipos de dispositivos, tales como pantallas grandes, pequeas pantallas o impresoras. CSS es independiente de HTML y se puede utilizar con cualquier lenguaje de marcado basado en XML. La separacin del cdigo HTML de CSS hace que sea ms fcil mantener los sitios web, compartir hojas de estilo a travs de pginas y adaptar pginas a entornos distintos. Esto se conoce como la separacin de la estructura o contenido, de la presentacin. Los sitios web deben ser desarrollados en dos partes bien diferenciadas. Por un lado el contenido que se establece con HTML y por el otro el diseo que se elabora e implementa por medio de las CCS. Si hablamos de HTML5, las CSS se vuelven ms importantes y necesarias que nunca ya que con su uso los documentos HTML estn definidos correctamente y su contenido tiene sentido y significado por s mismo, esto es vital en la web semntica. Por otra parte, el uso de las CSS mejora la accesibilidad y usabilidad de los sitios web. Adems de crear sitios web que resultan fciles de mantener. Con el HTML se establece el tipo de elementos que forman parte de la pgina, por ejemplo, prrafos, encabezados, listas Con las CSS se determina el aspecto de cada uno de esos elementos, por ejemplo, color, tamao, fuente, posicin, Actualmente se encuentra en desarrollo las CSS de nivel 3 o CSS3. Al igual que con HTML5 hay que tener en cuenta la compatibilidad con los navegadores.
Incluir CSS en un documento HTML

Si se crean por una parte los documentos con el contenido y por otra las CSS con el diseo, es necesario vincularlos. Esa tarea se puede llevar a cabo de tres formas.
CSS directamente en los elementos HTML.

Esta es la forma menos recomendada ya que resulta poco prctica y no facilita las tareas de mantenimiento. Su uso se ve justificado cuando hay que establecer un estilo especfico solo a un elemento en particular. Por ejemplo:
<p style="color: blue;">Aqu el texto del prrafo</p>
CSS en el documento HTML.

Esta forma resulta til, por ejemplo, cuando una pgina en particular del sitio web debe tener un estilo distinto. En este caso los estilos a definir se establecen entre las etiquetas <style> y </style> que debe estar ubicada en la cabecera de la pgina, es decir, entre las etiquetas <head> y </head>. Por ejemplo:
<style type="text/css"> p { color: blue; } </style>
En este caso el elemento prrafo no contiene ninguna especificacin:

<p>Aqu el texto del prrafo</p>
CSS en un archivo externo.

Esta es la forma ms utilizada. Permite, por ejemplo, con un solo archivo CSS controlar el diseo de todo un sitio web. Con esta forma de trabajar se crea un archivo, con extensin .css, que contiene los estilos que afectarn a las pginas HTML que se vinculen a este archivo. Para vincular los archivos HTML al archivo CSS se incluye en el encabezado de la pgina, es decir, entre las etiquetas <head> y </head> la siguiente lnea:
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen" />
Siendo estilos.css el archivo CSS que contiene los estilos que se deben aplicar a la pgina. En este caso se encontrara ubicado en la misma carpeta que el archivo HTML que se est vinculando.
Los atributos utilizados en el elemento <link> y sus valores correspondientes para las CSS son: rel. Atributo obligatorio. Especifica la relacin entre el documento actual y el documento vinculado. El valor stylesheet indica que hay una URL a una hoja de estilo para importar. type. Especifica el tipo MIME del documento vinculado. En el caso de las hojas de estilo tiene el valor text/css. href. Especifica el documento vinculado y su ubicacin. media. Especifica en qu dispositivo se mostrar el documento. El valor screen se refiere a la pantalla.
Sintaxis en las CSS

Las lneas que se van escribiendo, en las CSS, para definir los estilos se denominan reglas. Las reglas estn compuestas por dos partes:
El selector. Es el elemento HTML al que se le aplica el estilo. La declaracin. Especifica los estilos que se aplicaran al selector.
La declaracin a su vez tambin consta de dos partes: La propiedad. Es la caracterstica del selector que se va a modificar. El valor. Asigna el valor de la propiedad. Para comprenderlo mejor vamos a identificar estas partes en una regla sencilla:
Declaracin Selector
p { color: blue; } Valor Propiedad
Para escribir comentarios en las CSS lo hacemos de la siguiente forma:

/* Aqu se escribe el comentario */
Nota
Para una mejor comprensin, a lo largo de la leccin, identificaremos los elementos que conforman las reglas con colores:
Azul para el selector Lavanda para la propiedad Negro para el valor Verde para los comentarios
L2
Las reglas
Las reglas pueden estructurarse de distintas formas de acuerdo a la manera de agrupar selectores o declaraciones.
Un selector con varia declaraciones.

Si hay varias reglas para un mismo selector, se pueden agrupar en una nica regla con las distintas declaraciones. Por ejemplo:
p { color: blue; } p { font-size: 10px; }
Se convierte en:
p { color: blue; font-size: 10px; }
Varios selectores con una declaracin.

Si hay varias reglas con la misma declaracin para varios selectores, se puede agrupar en una nica regla con los distintos selectores. Por ejemplo:
h1 { color: red; } h2 { color: red; }
Se convierte en:
h1, h2 { color: red; }
Varios selectores con varias declaraciones.

Este caso es la combinacin de los dos anteriores. Por ejemplo:
h1 { color: red; font-size: 10px; } h2 { color: red; font-size: 10px; }
Se convierte en:
h1, h2 { color: red; font-size: 10px; }
L3
Los selectores
El selector indica el elemento de HTML que se ver afectado por la regla que lo contiene. CSS permite distintas formas de elegir los elementos, por ejemplo, de acuerdo a: su ubicacin, su reaccin con otros elementos, sus atributos,
Selector universal
Un selector universal, representado con un asterisco *, sirve para establecer un estilo que afectar a todos los elementos del documento HTML. Sintaxis: *
Ejemplo
* { color: blue; }
Selectores de etiqueta
Los selectores de etiqueta establecen el estilo para todos los elementos que coincidan con el selector, es decir, modifica en todo el documento HTML el elemento indicado. El selector es la etiqueta sin los parntesis angulares. Sintaxis: etiqueta
Ejemplo
p { color: blue; }
Todos los prrafos del documento HTML se vern en azul.
Selectores de atributos
Estos selectores permiten seleccionar elementos de acuerdo a sus atributos y valores. El estilo establecido en la regla se aplicar a todos aquellos elementos que coincidan con el del selector y que contengan el atributo representado por ste. Segn esto surgen los siguientes tipos:
Solo el atributo. Afecta al elemento que contiene el atributo representado

sin importar su valor. Sintaxis: etiqueta[att]
Ejemplo
ol[reversed] { color: blue; }
El atributo con un valor especfico. Afecta al elemento que contiene el

Sintaxis: etiqueta[att="val"]
atributo representado que coincida exactamente con el valor especificado.
Ejemplo
a[href="http://www.dominio.com"] { color: blue; }
El atributo con un valor que coincida. Afecta al elemento que contiene

el atributo representado y que alguno de sus valores, separados por espacios, coincida con el valor especificado. Sintaxis: etiqueta[att~="val"]
Ejemplo
h1[title~="palabra"] { color: blue; }
Aplica el estilo al elemento h1 con el atributo title, que contiene una lista de valores separados por espacios y que uno de los ellos es palabra.
El atributo con un valor cuyo inicio coincida. Afecta al elemento que

Sintaxis: etiqueta[att|="val"]
contiene el atributo representado y que su valor es una serie de palabras, separadas por guiones, pero que comienzan con el valor especificado.
Ejemplo
p[lang|="es"] { color: blue; }
Aplica el estilo al elemento p con el atributo lang, cuyos valores comienzan con "es", como "es", "esES",
El atributo con un valor con un prefijo especificado. Afecta al

Sintaxis: etiqueta[att^="val"]
elemento que contiene el atributo representado y que su valor contenga el prefijo especificado.
Ejemplo
a[href^="http://www"] { color: blue; }
Aplica el estilo al elemento a con el atributo href, cuyo valor contenga el prefijo indicado.
El atributo con un valor con un sufijo especificado. Afecta al elemento

que contiene el atributo representado y que su valor contenga el sufijo especificado. Sintaxis: etiqueta[att$="val"]
Ejemplo
a[href$=".html"] { color: blue; }
Aplica el estilo al elemento a con el atributo href, cuyo valor contenga el sufijo indicado.
El atributo con un valor que contiene la subcadena especificada.
Afecta al elemento que contiene el atributo representado y cuyo valor contiene la subcadena especificada en la regla, es decir, que forma parte del valor. Sintaxis: etiqueta[att*="val"]
Ejemplo
a [href*="pais"] { color: blue; }
Aplica el estilo al elemento a con el atributo href, cuyo valor contiene la subcadena especificada. En los siguientes casos aplicara el estilo:
<a href="http://elpais.com/"> <a href="http://www.rtve.es/alacarta/videos/unpais-en-la-mochila/">
Selectores de clase
Un selector de clase permite aplicar estilo a un elemento en concreto, sin que afecte a los otros elementos que coinciden con el selector. Por ejemplo, que en un documento HTML que contiene varios prrafos solo uno de ellos tenga un estilo distinto. Esto es posible gracias a las clases. Entre los posibles atributos que admiten los elementos de HTML se encuentra class. Este atributo permite diferenciar al elemento que lo contiene de otros elementos iguales. El valor es un nombre elegido por nosotros.
Ejemplo
<p class="diferente">Texto del prrafo</p>
Sintaxis: .val o etiqueta.val Este atributo con su valor puede usarse en otros elementos del documento HTML.
Ejemplo
.diferente { color: blue; }
Aplica el estilo al elemento que contenga el atributo class con el valor diferente:
<p class="diferente">Texto del prrafo</p> <h1 class="diferente">Un ttulo</p>
Tambin es posible definir la clase para un elemento en concreto.
Ejemplo
p.diferente { color: blue; }
Aplica el estilo al elemento p que contenga el atributo class con el valor diferente.
Selectores de ID
Los selectores de ID permiten aplicar estilos a un nico elemento del documento HTML. Es decir, los selectores de ID solo aplican estilo al elemento que contenga el atributo id y cuyo valor coincida exactamente con el especificado en la regla. Podra utilizarse un selector de clase para esta finalidad pero ste es especfico para esa labor y ms recomendable, ya que el valor del atributo id no puede repetirse en el mismo documento HTML. Mientras que los selectores de clase son ms recomendables para aplicar el mismo estilo a distintos elementos. Sintaxis: #val
Ejemplo
#diferente { color: blue; }
Aplica el estilo al elemento que contenga el atributo id con el valor diferente:

<p id="diferente">Texto del prrafo</p>
Pseudo-clases
Las pseudo-clases se utilizan para aadir estilos especiales a elementos basndose en su estado, uso o posicin. Sintaxis: etiqueta:pseudo-class
Dinmicas. Son pseudo-clases que se aplican a aquellos elementos en los

que se quieren definir estilos distintos cuando el usuario interacta con ellos por medio del ratn, por ejemplo, al pasar sobre ellos, al hacer clic, Son: :link, :visited, :hover, :active, :focus.
Ejemplo
a:link { color: brown; }
Se aplica a los vnculos que no han sido visitados.

a:visited { color: olive; }
Se aplica a los vnculos despus de haber sido visitados.

a:hover { color: red; }
Se aplica cuando el puntero del ratn para por encima del elemento.
a:active { color: blue; }
Se aplica cuando el usuario hace clic sobre el elemento.

a:focus { color: green; }
Se aplica cuando el elemento captura el cursor.
Nota
Las pseudo-clases :link y :visited estn relacionadas con el elemento a y son mutuamente excluyenyes. Un mismo enlace no puede estar de forma simultnea en los dos estados. Las pseudo-clases :hover, :active y :focus. No son mutuamente excluyentes por lo tanto un elemento puede coincidir con varias al mismo tiempo.
Target. En algunos documentos se encuentran enlaces a ubicaciones
dentro del mismo documento. Estos enlaces terminan con el smbolo # seguido de un identificador de ancla, que enlazan con otro elemento del documento, llamado elemento de destino o target. Por medio de esta pseudo-clase es posible aplicar estilos a esos elementos de destino cuando son enlazados.
Ejemplo
h1:target { background-color: red; }
En el documento HTML podemos tener algo como esto: En el enlace:

<a href="#menu1">Primer enlace</a>
En el elemento de destino:
<h1 id="menu1">Primer enlace</h1>
El resultado sera que al hacer clic sobre el enlace, el navegador posiciona la pgina donde se encuentra el elemento de destino o target y le aplica un fondo de color rojo. Target antes del enlace:
Target despus del enlace:
Para que comprendas mejor este ejemplo a continuacin tienes el cdigo:

<!DOCTYPE HTML> <html> <head> <title>CSS3 Pseudo-clase target</title> <style type="text/css"> h1:target { background-color: red; } </style> </head> <body> <p> <a href="#menu1">Primer enlace</a> <a href="#menu2">Segundo enlace</a> </p>
<p> <h1 id="menu1">Primer enlace</h1> </p> <p> <h1 id="menu2">Segundo enlace</h1> </p> </body> </html>
De lenguaje. La pseudo-clase :lang permite asignar estilos a los
elementos de acuerdo a su idioma, siempre que contengan el atributo lang.
Ejemplo
p:lang(es) { color: red; }
Si en el documento HTML tenemos las lneas que ves a continuacin, solo los prrafos 3 y 5 se mostrarn en color rojo:
<p lang="en">Good morning</p> <p>Buenos das</p> <p lang="es-ES">Buenos das</p> <p lang="fr">Bonjour</p> <p lang="es">Buenos das</li>
De interfaz de usuario. Estas pseudo-clases se utilizan principalmente

para dar estilos a elementos de formularios de HTML y son: :enabled, :disabled y :checked.
Ejemplo
input:enabled { background-color: brown; }
Modifica los elementos de interfaz de usuario que se encuentran en estado habilitado.

input:disabled { background-color: olive; }
Modifica los elementos de interfaz de usuario que se encuentran en estado deshabilitado, es decir, que contienen el atributo disabled, con el valor "true".
input:checked { cursor: pointer; }
Se aplica a los elementos checkbox y radio cuando son seleccionados.
Estructurales. Son pseudo-clases que permiten modificar elementos
segn su posicin o ubicacin. Todas las pseudo-clases estructurales, menos una, estn definidas en CSS3. La que ya estaba definida en el nivel anterior es :first-child. Ya que estas pseudo-clases estn relacionadas con la posicin que ocupan los elementos, ya sean padres o hijos, vamos a comprender estos parentescos entre ellos. Si tenemos en el documento HTML algo parecido a esto, con sus correspondientes contenidos que hemos omitido para que se visualicen mejor las posiciones:
<div> <h1></h1> <p> <a></a> <em></em> </p> <h2></h2> <p></p> </div>
Si lo presentamos como un grfico veramos lo siguiente:
div h1 a p em h2 p
Con el grfico lo podemos ver claramente, como si se tratara de un rbol genealgico. div es padre de h1, p, h2 y p h1, p, h2 y p son hijos de div h1, p, h2 y p son hermanos p es padre de a y em a y em son hijos de p a y em son hermanos h1 es el primer hijo de div em es el ltimo hijo de p
Con este concepto claro vamos a ver cules son esas pseudo-clases estructurales.
Primer hijo. etiqueta:first-child Modifica al elemento indicado por etiqueta que sea el primer hijo de su padre.
Ejemplo
p:first-child { color: red; }
En el documento HTML: En el caso que se muestra a continuacin modificara solo el texto del primer prrafo, ya que es el primer hijo del elemento div:
<div> <p>Esto es un <em>texto destacado</em> por el uso de otras etiquetas</p> <p>Este es el segundo prrafo</p> </div>
Utilizando la estructura del grfico anterior y aplicando el mismo ejemplo:
Ejemplo
p:first-child { color: red; }
En el documento HTML:
<div> <h1>Ttulo de primer encabezado</h1> <p>Primer prrafo que contiene <a href="http://www.dominio.com">un enlace</a> y un texto <em>destacado</em> </p> <h2>Ttulo de segundo encabezado</h2> <p>Segundo prrafo</p> </div>
En este caso no se modificara ninguno de los dos prrafos ya que no son el primer hijo de su padre. Si cambiamos la regla as:
a:first-child { color: red; }
El enlace se mostrara en rojo, ya que a es el primer hijo de su padre, en este caso p.
ltimo hijo. etiqueta:last-child Modifica al elemento indicado por etiqueta que sea el ltimo hijo de su padre.
Ejemplo
p:last-child { color: red; }
En el ejemplo se mostrara en rojo el segundo prrafo, ya que es el ltimo hijo de su padre, div.
Raz del documento. etiqueta:root Representa al elemento que es raz del documento HTML. Normalmente es el elemento html.
Ejemplo
html:root { color: red; }
Secuencia de hijos. etiqueta:nth-child(n) Representa a una secuencia de elementos hijos que ocupan las posiciones indicadas por n.
n indica el hijo o hijos a representar y puede ser un nmero, una letra, una palabra o una frmula. Por ejemplo:
n representa a todos los hijos odd todos los hijos que ocupan posicin impar even todos los hijos que ocupan posicin par
a n +b todos los hijos que ocupen las posiciones indicadas de acuerdo a la frmula donde n vara de uno en uno partiendo desde 0. b es la posicin del primer elemento hijo que
17
UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA
queremos hacer coincidir y a es el nmero de posiciones que hay entre la posicin b y el siguiente elemento que queremos hacer coincidir. x el hijo que ocupa la posicin x
Ejemplo
<ul> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> <li>Cuarto elemento de la lista</li> <li>Quinto elemento de la lista</li> <li>Sexto elemento de la lista</li> </ul>
Con: li:nth-child(n) { color: red; } Todos los elementos de la lista se mostrarn en rojo. Con: li:nth-child(odd) { color: red; } Todos los elementos impares de la lista se mostrarn en rojo. Con: li:nth-child(even) { color: red; } Todos los elementos pares de la lista se mostrarn en rojo. Con: li:nth-child(4n+2) { color: red; } Se mostrarn en rojo los elementos 2 y 6 de la lista. El siguiente elemento en mostrarse sera el 10. Porque:
4*0+2=2 4*1+2=6 4 * 2 + 2 = 10
Con: li:nth-child(2n) { color: red; } Se mostrarn en rojo los elementos pares, es decir, que equivale a: li:nth-child(even) { color: red; } Con: li:nth-child(3) { color: red; } Solo el tercer elemento de la lista se mostrar en rojo.
Secuencia inversa de hijos. etiqueta:nth-last-child(n) Es igual a la anterior pero comenzando por el ltimo elemento hijo.
Ejemplo
<ul> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> <li>Cuarto elemento de la lista</li> <li>Quinto elemento de la lista</li> <li>Sexto elemento de la lista</li> </ul>
Con: li:nth-last-child(even) { color: red; } Todos los elementos pares de la lista se mostrarn en rojo. En este caso son los elementos 1, 3 y 5; ya que comienza por el ltimo. Con: li:nth-last-child(4n+2) { color: red; } Se mostrarn en rojo los elementos 1 y 5 de la lista.
Secuencia excluyente de hijos. etiqueta:nth-of-type(n) Representa a una secuencia de elementos hijos que ocupan las posiciones indicadas por n, excluyendo aquellos elementos hermanos que no sean de la misma etiqueta.
n indica el hijo o hijos a representar y puede ser un nmero, una letra, una palabra o una frmula.
Ejemplo
<ul> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> <p>Cuarto elemento de la lista</p> <li>Quinto elemento de la lista</li> <li>Sexto elemento de la lista</li> </ul>
Con: li:nth-of-type(even) { color: red; }
Muestra en rojo los elementos 2 y 5; ya que la posicin 4 corresponde a un elemento p y no un li, por esa razn lo excluye y continua la cuenta a partir del siguiente elemento li. Es decir:
Posicin 1: <li>Primer elemento de la lista</li> Posicin 2: <li>Segundo elemento de la lista</li> Posicin 3: <li>Tercer elemento de la lista</li>
<p>Cuarto elemento de la lista</p>
Posicin 4: <li>Quinto elemento de la lista</li> Posicin 5: <li>Sexto elemento de la lista</li>
Con: li:nth-child(even) { color: red; } Se mostrarn en rojo los elementos 2 y 6 del cdigo anterior, ya que la posicin 4 corresponde a un elemento p y no un li, lo cuenta pero no lo modifica porque no es el elemento que busca y sigue la cuenta. Es decir:
Posicin 1: <li>Primer elemento de la lista</li> Posicin 2: <li>Segundo elemento de la lista</li> Posicin 3: <li>Tercer elemento de la lista</li> Posicin 4: <p>Cuarto elemento de la lista</p> Posicin 5: <li>Quinto elemento de la lista</li> Posicin 6: <li>Sexto elemento de la lista</li>
Secuencia excluyente inversa de hijos. etiqueta:nth-last-oftype(n)
Es igual a la anterior pero comenzando por el ltimo elemento hijo.
Ejemplo
<ul> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> <p>Cuarto elemento de la lista</p> <li>Quinto elemento de la lista</li> <li>Sexto elemento de la lista</li> </ul>
Con: li:nth-last-of-type(4) { color: red; } Muestra en rojo el elemento 2, es decir, Segundo elemento de la lista.
Primer hijo de acuerdo al tipo. etiqueta:first-of-type Modifica el primer hijo, de acuerdo al elemento indicado, basndose en el tipo de elemento y no en la posicin que ocupa.
Ejemplo
h2:first-of-type { color: red; }
En el ejemplo se mostrara en rojo el elemento h2.
ltimo hijo de acuerdo al tipo. etiqueta:last-of-type Modifica el ltimo hijo, de acuerdo al elemento indicado, basndose en el tipo de elemento y no en la posicin que ocupa.
Ejemplo
p:last-of-type { color: red; }
En el ejemplo se mostrara en rojo el segundo prrafo.
Hijo nico. etiqueta:only-child Modifica al elemento indicado solo si es hijo nico, es decir que el elemento padre no tiene ms hijos.
Ejemplo
h1:only-child { color: red; }
<div> <h1>Ttulo de primer encabezado</h1> </div>
El contenido de h1 se mostrara en rojo. En el siguiente caso no se modificara ningn elemento:

<div> <h1>Ttulo de primer encabezado</h1> <p>Primer prrafo que contiene</p> </div>
Hijo nico de un tipo especfico. etiqueta:only-of-type Modifica al hijo que sea el nico elemento de su tipo, de acuerdo al especificado.
Ejemplo
h2:only-of-type { color: red; }
En el ejemplo se mostrara en rojo el contenido de h2, al ser el nico hijo de tipo h2. Para p:only-of-type { color: red; } No se modificara ningn elemento, ya que hay ms de un hijo de tipo p.
Vaco. etiqueta:empty Modifica al elemento especificado solo si no tiene hijos ni contiene texto, incluidos los espacios.
Ejemplo
td:empty { background-color: red; }
Supongamos una tabla en la que se han volcado unos datos y algunas celdas carecen de ellos, es decir, que estn vacas y queremos destacarlas. En el documento HTML:
<table> <thead> <tr> <th scope="col"></th> <th scope="col">Huesca</th> <th scope="col">Teruel</th> <th scope="col">Zaragoza</th> </tr> </thead> <tbody> <tr> <th scope="row">Manzanas</th> <td>75</td> <td>90</td> <td></td> </tr> <tr> <th scope="row">Peras</th> <td>30</td> <td></td> <td>20</td> </tr> <tr> <th scope="row">Melocotones</th> <td>45</td> <td>40</td> <td></td> </tr> </tbody> </table>
En el ejemplo se mostraran en rojo las celdas vacas: <td></td>. Sin embargo si alguna contiene un espacio en blanco: <td> </td>, no se modificara, es decir no cambiara su color de fondo.
De negacin. Son pseudo-clases que permiten modificar todos los elementos que no posean la caracterstica indicada.
Ejemplo
p:not(#t3) { color: red; }
<p <p <p <p id="t1">Texto id="t2">Texto id="t3">Texto id="t4">Texto del del del del primer prrafo</p> segundo prrafo</p> tercer prrafo</p> cuarto prrafo</p>
En el ejemplo se modificara el estilo de todos los prrafos menos de aquel que contiene la caracterstica indicada, en este caso el prrafo 3.
Pseudo-elementos
Los pseudo-elementos se utilizan para aadir estilos especiales a una parte de algunos elementos. Sintaxis: etiqueta::pseudo-elemento
Nota
Los pseudo-elementos, hasta CSS2, utilizaban dos puntos :, igual que las pseudo-clases. En CSS3 utilizan dos puntos dobles ::.
Son los siguientes:
Primera lnea. Permite modificar el formato de la primera lnea de un

texto. Sintaxis: etiqueta::first-line
Ejemplo
p::first-line { color: blue; }
Muestra en azul la primera lnea de cada prrafo.
Primera letra. Permite modificar el formato de la primera letra de un

elemento de texto. Sintaxis: etiqueta::first-letter
Ejemplo
p::first-letter { color: blue; }
Muestra en azul la primera letra de cada prrafo.
Antes del elemento. Permite agregar un contenido antes del elemento

indicado. Este pseudo-elemento est vinculado a la propiedad content. Sintaxis: etiqueta::before
Ejemplo
h1::before { content: "-*-"; color: red; }
Muestra antes de cada elemento h1 los caracteres indicados en content, en color rojo: -*-
Despus del elemento. Permite agregar un contenido despus del

Sintaxis: etiqueta::after
elemento indicado. Este pseudo-elemento est vinculado a la propiedad content.
Ejemplo
h1::after { content: "-*-*-"; color: blue; }
Muestra despus de cada elemento h1 los caracteres indicados en content, en color azul: -*-*-
Combinadores
Son selectores que contienen ms de un selector simple.
Recuerda
Vamos a recordar el parentesco de los elementos:
div h1 p h2 ul
a
Pueden ser:
em
div es padre de h1, p, h2 y ul a y em son hijos de p h1, p, h2 y ul son hermanos a y em son hermanos y son adyacentes div es ascendiente de h1 em es descendiente de p
Descendiente. Modifica el estilo al elemento descendiente indicado, sin

importar su nivel en la jerarqua. Sintaxis: etiqueta1 etiqueta2 Modifica el elemento indicado en etiqueta2 que se encuentra anidado en etiqueta1, sin importar si es hijo, nieto,
Ejemplo
p em { color: red; }
El texto que se encuentre entre las etiquetas em, que a su vez se encuentren dentro de un elemento p, se mostrar en rojo.
Hijo. Modifica el estilo al elemento descendiente indicado, solo si es hijo

del padre sealado. Sintaxis: etiqueta1 > etiqueta2 Modifica el elemento indicado en etiqueta2 que se encuentra anidado en etiqueta1 y que sea de nivel hijo.
Ejemplo
p > em { color: red; }
En el documento HTML: En el caso que se muestra a continuacin modificara el texto contenido por el elemento em:
<p>Esto es un <em>texto destacado</em> por el uso de otras etiquetas</p>
En el caso siguiente no har ninguna modificacin ya que em no es hijo sino nieto del elemento p:
<p>Esto es un <strong><em>texto destacado</em></strong> por el uso de otras etiquetas</p>
Hermano adyacente. Modifica el estilo al elemento indicado solo cuando

sea adyacente al otro elemento sealado. Sintaxis: etiqueta1 + etiqueta2 Modifica el elemento indicado en etiqueta2 adyacente a etiqueta1, es decir, que est precedido inmediatamente por etiqueta1.
Ejemplo
h1 + p { color: red; }
En el documento HTML: En el caso que se muestra a continuacin modificara solo el primer prrafo:
<h1>Esto es un ttulo</h1> <p>Este es el primer prrafo. Adyacente a h1</p> <p>Este es el segundo prrafo</p>
Hermano general. Modifica el estilo al elemento indicado, que es

hermano de un elemento especfico. Sintaxis: etiqueta1 ~ etiqueta2 Modifica el elemento indicado en etiqueta2 siempre que sea hermano del etiqueta1, sin importar si son adyacentes o no.
Ejemplo
h1 ~ p { color: red; }
En el documento HTML: En el caso que se muestra a continuacin modificara los dos prrafos:
<h1>Esto es un ttulo</h1> <p>Este es el primer prrafo. Adyacente a h1</p> <p>Este es el segundo prrafo</p>
L4
- Formatos de las propiedades
Los valores de algunas propiedades que se especifican en CSS hacen referencia a medidas y colores. En ambos casos, esos valores, se pueden indicar de distintas formas. En el caso de las medidas podemos indicar el alto, el ancho, los mrgenes, tamaos de letras; que irn acompaados de una unidad de medida especfica. Estas medidas pueden ser absolutas o relativas. En el primer caso la medida indicada es la medida real. Las medidas relativas dependen de otra medida para que se establezca su valor. Por otra parte el uso del color es algo que se puede aplicar a muchos de los elementos que forman parte de un documento HTML.
Unidades de longitud
Las unidades de longitud se refieren a una dimensin, que es un nmero seguido de un identificador de unidad. El nmero puede ser entero, decimal (el separador decimal ser en punto), positivo o negativo (anteponiendo al nmero el smbolo -). Hay dos tipos de unidades de longitud: relativa y absoluta. Las unidades de medida relativa especifican una longitud dependiente de otra. Las unidades relativas son:
em. Relativa respecto al tamao de la fuente que se est utilizando. ex. Relativa respecto a la altura de la letra x de la fuente que se est
utilizando
ch. Relativa al ancho del cero 0 de la fuente que se est utilizando. rem. Relativa al tamao de la fuente del elemento raz.
Hay otras longitudes relativas que representan porcentajes de la ventana grfica del dispositivo de visualizacin. Estas son:
vw. Igual al 1% del ancho de la ventana grfica del dispositivo de

visualizacin. visualizacin.
vh. Igual al 1% del alto de la ventana grfica del dispositivo de vmin. Igual a la ms pequea de vw o vh. vmax. Igual a la mayor de vw o vh.
Para comprender ests longitudes relativas al dispositivo de visualizacin vamos a ver un ejemplo: Si la ventana grfica del dispositivo de visualizacin mide 200mm de ancho y definimos el tamao del elemento de encabezado h2 utilizando las unidades vw, as:
h2 {font-size: 10vw;}
El tamao de la fuente que se emplear en h2 ser el siguiente: Si vw es el 1% del ancho de la ventana grfica y esta mide 200mm, entonces vw vale 2. En la propiedad se ha expresado 10vw, si sustituimos vw por su valor: 10 x 2 = 20mm
Nota
El uso de las unidades de longitud relativas facilita la escalabilidad en diferentes entornos.
Unidades de medida absoluta especifican una longitud absoluta. Las unidades absolutas son:
cm. Medida expresada en centmetros. mm. Medida expresada en milmetros. in. Medida expresada en pulgadas. 1in = 2,54cm pt. Medida expresada en puntos. 1pt = 1/72 de 1in pc. Medida expresada en picas. 1pc = 12pt px. Medida expresada en pixeles. 1px = 1/96 de 1in
Colores
El uso de colores est muy presente en el diseo de pginas web. Con las CSS se puede aplicar color al texto, bordes, enlaces, fondos,
Los colores se pueden expresar de varias formas:

etiqueta { color: rgb(0,0,255); } etiqueta { color: blue; } etiqueta { color: #0000FF; } etiqueta { color: #00F; } etiqueta { color: rgb(0%,0%,100%); }
Como vemos los colores se pueden representar por medio de valores numricos o por palabras claves. En el caso de los nmeros podemos representar los colores por medio de:
Color RGB. Con las letras rgb y seguidamente, entre parntesis, tres
nmeros enteros separados por una coma, comprendidos entre 0 y 255, ambos inclusive, para indicar la cantidad de rojo, verde y azul que componen el color a representar. Por ejemplo: rgb(0,0,255)
Valores porcentuales. El tro que conforma el color RGB puede ser

representado por medio de porcentajes, sabiendo que el valor 255 corresponde al 100%. Por ejemplo: rgb(0%,0%,100%)
Nmero hexadecimal. Con el smbolo # seguido de los equivalentes

Por ejemplo: #0000FF Tambin se puede expresar de forma comprimida as: #00F
hexadecimales de los nmeros utilizados en RGB, lo cual formar tres pares que van del 00 al FF. Se escriben seguidos sin signos de separacin.
En cuanto a las palabras claves de colores bsicos tenemos las siguientes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Hay otra lista ms extensa de las palabras claves de colores ampliados. Algunos de ellos son: aliceblue, antiquewhite, aquamarine, azure, beige, bisque, blanchedalmond, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson.
Propiedad background-color. Fondo.

Esta propiedad establece el color de fondo de un elemento. Por defecto es transparente. Se expresa as:
etiqueta { background-color: #0000FF; } 31 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA
Propiedad opacity. Transparencia.

Es una forma extendida del RGB, que incluye un alfa para especificar la opacidad del color. El alfa es un nmero que va de 0.0 a 1.0. Siendo 0.0 completamente transparente y 1.0 completamente opaco. Se expresara de la siguiente forma:
etiqueta { color: rgb(0,0,255,0.3); } etiqueta { color: rgb(0%,0%,100%,0.6); }
Palabra clave transparent

CSS3 extiende el uso de la palabra clave transparent para que se pueda utilizar en todas las propiedades que acepten como valor un color. Indica totalmente transparente. Por ejemplo:
etiqueta { color: transparent; }
Valores de color HSL

CSS3 aade, como complemento al color RGB, el color HSL (matiz, saturacin y luminosidad) El matiz se corresponde con un ngulo del crculo de color y se representa con un nmero. Por ejemplo el color rojo es 0 o tambin 360, porque coinciden en el mismo punto del crculo.
0, 360
300
60
240
120
180
La saturacin y la luminosidad se representan con porcentajes. En la saturacin, 100% es saturacin mxima y 0% es un tono de gris. En la luminosidad, 0% es negro y 100% es blanco, para una luminosidad normal se usa 50%. Usando nuevamente el rojo como ejemplo veamos una representacin de la saturacin y la luminosidad:
Saturacin en % 100 100 75 50 25 0
Luminosidad en %
88 75 63 50 38 25 13 0
Por ejemplo:
etiqueta { color: hsl(0,100%,50%); }
Transparencia con HSL De forma similar al RGB, HSL tambin cuenta con un alfa para especificar la transparencia.
etiqueta { color: hsla(120,100%,50%,0.5); }
L5
- Cajas
El diseo de las pginas web, en cuanto a la ubicacin de los distintos elementos que la componen, se apoya bsicamente en el modelo de cajas o box model. Las cajas, por lo general, se crean de forma automtica al incorporar las etiquetas en la pgina, stas no se visualizan en el navegador pero determinan en comportamiento de los distintos elementos. Por ejemplo, cada prrafo est enmarcado por una caja, veramos algo as:
Este es el contenido de un prrafo cualquiera de la pgina. Este es el contenido de otro de los prrafos que forman parte de la pgina.
Algunos elementos pueden crear cajas dentro de otra caja, por ejemplo, al destacar parte de un prrafo:
Este es el contenido de un prrafo cualquiera de la pgina. Este es el contenido de otro de los prrafos que forman parte de la pgina.
El elemento <p> genera una caja de bloque y <em> una caja de lnea. De forma natural se distribuyen de la siguiente forma, siguiendo el orden de los elementos en la pgina:
Las cajas de lnea se ubican una al lado de la otra, de forma horizontal, y

por defecto de izquierda a derecha.
Las cajas de bloque se ubican una debajo de la otra, de forma vertical.

Para cambiar este comportamiento recurrimos a CSS, pero para poder modificar las caractersticas de las cajas es preciso comprender su estructura.
Un cuadro tpico est formado por cuatro reas y sus correspondientes bordes:
margin border padding
content
border edge margin edge padding edge
content edge
Content. Las cajas tienen un contenido con un ancho y un alto. En muchos casos puede definirse por medio de las propiedades width y heigth. Padding. Al rededor del contenido puede haber, de forma opcional, un rea de relleno. El espacio que ocupar ese relleno se establece por medio de la propiedad padding. Un padding con valor 0 significa sin relleno. Border. Al rededor del relleno se establece una frontera por medio de la propiedad border. Margin. El margen es el rea desde la frontera hasta el extremo de la caja y se establece por medio de la propiedad margin. Content edge. Es el borde del contenido. Padding edge. Corresponde al borde del relleno. Border edge. Es el borde de la frontera. Margin edge. Se refiere al borde del margen.
Nota
Normalmente estas propiedades no admiten valores negativos, en los casos que sean admitidos encontrars una nota que lo indica.
Propiedades de ancho y alto

Las propiedades width y heigth permiten controlar el ancho y el alto de los elementos, respectivamente. Los posibles valores para estas propiedades son:
longitud. Se expresa en unidades de medida. porcentaje. El valor es calculado en funcin del bloque que lo contiene o bloque de contencin. Si en el bloque de contencin el valor es auto
entonces tambin asumir ese comportamiento.

nmero. Para el caso de los elementos remplazados y que cuentan con
dimensiones intrnsecas, se calcula el valor multiplicando el nmero por ese valor intrnseco.
Nota
Un elemento remplazado es aquel cuyo contenido depende de otro recurso, por ejemplo, una imagen, donde el elemento img es remplazado por la imagen indicada por el atributo src. Dimensiones intrnsecas son aquellas definidas por el elemento.
auto. Es el valor por defecto. El navegador se encarga de calcularlo.
Ejemplo
En HTML:
<p> Este es el primer prrafo </p> <p class="caja"> Este es un prrafo con propiedades de caja </p> <p> Este es el segundo prrafo </p>
En CSS:
p.caja { width: 100px; height: 100px; }
Recuerda
Debes ir comprobando los ejemplos en los principales navegadores.
Propiedades de relleno
Las propiedades padding permiten establecer el grosor del relleno alrededor de una caja. Estas propiedades son:
padding padding-top (superior) padding-right (derecha) padding-bottom (inferior) padding-left (izquierda)
Los posibles valores para estas propiedades son:
longitud. Se expresa en unidades de medida. porcentaje. El valor es calculado en funcin del ancho del bloque de contencin en un flujo horizontal. En caso de flujo vertical, padding-top y padding-bottom son relativos al alto del bloque de contencin.
La propiedad padding admite entre 1 y 4 valores, interpretndose de la siguiente forma:
1 valor. Todos los rellenos tienen ese valor. 2 valores. El primero corresponde a los rellenos superior e inferior y el
segundo a los rellenos izquierdo y derecho.
3 valores. El primero corresponde al relleno superior, el segundo a los

rellenos izquierdo y derecho y el tercero al relleno inferior. derecho, el tercero al inferior y el cuarto al izquierdo.
4 valores. El primero corresponde al relleno superior, el segundo al

Las otras cuatro propiedades padding (superior, derecha, inferior e izquierda) solo admiten un valor.
Ejemplo
Continuando con el ejemplo anterior vamos a insertar otra propiedad: En CSS:
p.caja { width: 100px; height: 100px; padding: 20px 50px;
Propiedades de frontera
Se puede definir el aspecto de la frontera estableciendo grosor, color y estilo. Las propiedades de frontera son:
border border-top (superior) border-right (derecha) border-bottom (inferior) border-left (izquierda)
border-width. Indica el grosor de la frontera. border-style. Indica el estilo de la frontera. color. Indica el color de la frontera.
Para asignar cada uno de estos valores tomaremos en cuenta las propiedades propias de cada uno de ellos.
Ejemplo
Vamos a incluir otras propiedades: En CSS:
p.caja { width: 100px; height: 100px; padding: 20px 50px; border: 15px solid red;
Grosor Las propiedades para el grosor son:
border-width border-top-width border-right-width border-bottom-width border-left-width
longitud. Se expresa en unidades de medida. thin. Establece un grosor delgado medium. Establece un grosor medio thick. Establece un grosor grueso
La propiedad border-width admite entre 1 y 4 valores, interpretndose de la siguiente forma:
1 valor. Todos iguales. 2 valores. El primero corresponde al superior e inferior y el segundo a

izquierdo y derecho.
3 valores. El primero corresponde al superior, el segundo a izquierdo y

derecho y el tercero al inferior.
4 valores. El primero corresponde al superior, el segundo al derecho, el

tercero al inferior y el cuarto al izquierdo. Las otras cuatro propiedades border-width (superior, derecha, inferior e izquierda) solo admiten un valor.
Ejemplo
border-width: medium thin 15px thick;
Color Las propiedades para el grosor son:
border-color border-top-color border-right-color border-bottom-color border-left-color
El valor para estas propiedades es:
color. Se expresa en las formas que hemos visto, por valores numricos
o palabras claves.
La propiedad border-color admite entre 1 y 4 valores, interpretndose de la siguiente forma:



tercero al inferior y el cuarto al izquierdo. Las otras cuatro propiedades border-color (superior, derecho, inferior e izquierdo) solo admiten un valor.
Ejemplo
border-color: red blue;
Estilo Las propiedades para el estilo son:
border-style border-top-style border-right-style border-bottom-style border-left-style
none. Indica que no se mostrar la frontera. Los valores de color y
grosor se ignoran, excepto en el caso de que la frontera sea una imagen.

hidden. Es igual que none, excepto en el caso de conflictos con las
fronteras, por ejemplo, en elementos de tabla, donde su comportamiento es diferente.

dotted. Dibuja una serie de puntos redondos. dashed. Dibuja una serie de guiones. solid. Dibuja una lnea nica. double. Dibuja dos lneas solidas paralelas con un pequeo espacio entre
ellas.
groove. Dibuja una lnea con efecto de hundimiento por medio de una
sombra de dos colores, uno ms claro y otro ms oscuro, basados en el valor de border-color.
ridge. Dibuja una lnea con efecto de relieve. inset. Dibuja una lnea creando un efecto de hundimiento de la caja. outset. Dibuja una lnea creando un efecto de relieve de la caja.
La propiedad border-style admite entre 1 y 4 valores, interpretndose de la siguiente forma:



tercero al inferior y el cuarto al izquierdo.
Las otras cuatro propiedades border-style (superior, derecho, inferior e izquierdo) solo admiten un valor.
Ejemplo
border-style: solid dashed double ridge;
Vamos a unir en un mismo ejemplo las propiedades border-width, border-color y border-style de los ejemplos anteriores:
Ejemplo
p.caja { width: 100px; height: 100px; padding: 20px 50px; border-width: medium thin 15px thick; border-color: red blue; border-style: solid dashed double ridge; }
Propiedades de margen
Las propiedades margin permiten establecer el grosor del rea de margen alrededor de una caja y define la separacin entre la frontera de la caja y otras cajas adyacentes. Son de color transparente. Estas propiedades son:
margin margin-top margin-right margin-bottom margin-left
longitud. Se expresa en unidades de medida. porcentaje. El valor es calculado en funcin del ancho del bloque de
contencin, para el caso de los mrgenes superior e inferior.

42
auto. El navegador se encarga de calcularlo. Su comportamiento es
diferente en los mrgenes superior e inferior al de los mrgenes derecho e izquierdo, de acuerdo a factores como la ubicacin de los elementos, su flujo,..
Nota
Los mrgenes permiten valores negativos pero el navegador puede imponer limitaciones.
La propiedad margin admite entre 1 y 4 valores, interpretndose de la siguiente forma:
1 valor. Todos los mrgenes tienen ese valor. 2 valores. El primero corresponde al superior e inferior y el segundo al
3 valores. El primero corresponde al superior, el segundo al izquierdo y


tercero al inferior y el cuarto al izquierdo. Las otras cuatro propiedades margin (superior, derecha, inferior e izquierda) solo admiten un valor. Continuando con el ejemplo, aadimos una nueva lnea con la propiedad marginleft.
Ejemplo
p.caja { width: 100px; height: 100px; padding: 20px 50px; border-width: medium thin 15px thick; border-color: red blue; border-style: solid dashed double ridge; margin-left: 30px; }
El comportamiento de los mrgenes verticales es bastante particular ya que se fusionan. Si son de igual valor, se convierten en uno solo con ese mismo valor. Si son de distinto valor, se convierten en uno con el valor del mayor de ellos.
Vamos a ver un ejemplo al que haremos un par de cambios para que veas lo que ocurre.
Ejemplo
En HTML:
<p class="caja"> Este es el primer prrafo con propiedades de caja </p> <p class="caja2"> Este es el segundo prrafo con propiedades de caja </p>
En CSS:
p.caja { width: 200px; padding: 20px 50px; border: 15px solid red; margin: 30px; } p.caja2 { width: 200px; padding: 20px 50px; border: 15px solid blue; margin: 30px; }
Como se puede ver las propiedades de las dos cajas son iguales. Tienen asignado un margen, igual por los cuatro lados, de 30 pixeles. El comportamiento que se podra suponer, sin no se fusionaran los mrgenes verticales sera este:
Este es el primer prrafo con propiedades de caja
Este es el segundo prrafo con propiedades de caja
Pero lo que sucede en realidad es que el margen inferior de la primera caja se fusiona con el margen superior de la segunda caja, quedando una separacin entre ellas de un solo margen y no de dos:
Este es el segundo prrafo con propiedades de caja
Para ver el comportamiento de la fusin de mrgenes vamos a realizar algunos cambios en las propiedades margin: 1. Vamos a aadir esta lnea al final de las propiedades de p.caja:
margin-bottom: 10px;
Lo que hemos hecho es asignar un margen inferior, a la caja del primer prrafo, de 10px, 20px menos que antes. Guardamos los cambios y actualizamos la pgina en el navegador. Como podemos comprobar, no se efectan cambios ya que en la fusin se asume el margen mayor, por lo tanto mantiene el de 30px de la caja del segundo prrafo. 2. Modificamos ese margen inferior de la primera caja, asignndole 50px:
margin-bottom: 50px;
En este caso la caja2 es desplazada hacia abajo, ya que la fusin de los mrgenes toma el valor de 50px, ya que es el mayor.
Propiedades de fondo
El fondo es otro elemento que forma parte de los modelos de caja. Puede consistir en un color o en una imagen. El rea a ocupar podr ser establecida por medio de algunas propiedades CSS.
margin border padding
content
background
Las propiedades para definir los fondos son:
background-color background-image background-repeat background-attachment background-position background-clip background-origin background-size background
Color de fondo La propiedad background-color establece el color de fondo de un elemento. Su valor es:
color. Se expresa en las formas que hemos visto, por valores numricos
o palabras claves.
Continuando con el ejemplo que hemos estado trabajando, vamos a aadir la siguiente propiedad, al final de p.caja:
Ejemplo
background-color: green;
El resultado ser similar al de la siguiente imagen:
Imagen de fondo La propiedad background-image establece la imagen de fondo de un elemento. Su valor es:
url(url_de _la_imagen). Establece la ubicacin y la imagen que ser
mostrada como fondo.
Nota
Aunque se establezca una imagen de fondo tambin se debe especificar un color de fondo, en contraste con el texto del contenido, por si la imagen no estuviese disponible por alguna razn.
En esta ocasin modificamos las propiedades de p.caja2, aadiendo este par de lneas al final:
Ejemplo
background-color: silver; background-image: url(fondo1.jpg);
fondo1.jpg es la imagen que queremos que se muestre como fondo. En este
caso se encuentra en la misma carpeta o directorio que contiene los archivos HTML y CSS.
Recuerde
Si la imagen que vas a usar de fondo tiene otro nombre, modifica fondo1.jpg por el nombre de tu imagen.
Nota
Es conveniente que utilices una imagen pequea para que puedas visualizar su comportamiento al aplicar propiedades que iremos viendo.
El resultado en el navegador sera similar al de la siguiente imagen:
Repeticin de la imagen de fondo La propiedad background-repeat establece cmo se repetir la imagen para rellenar el fondo. Los posibles valores para esta propiedad son:
repeat. Es el valor por defecto. Indica que la imagen se repetir
horizontal y verticalmente.
repeat-x. Indica que la imagen se repetir solamente de forma
horizontal.
repeat-y. Indica que la imagen se repetir solamente de forma vertical. 48
space. Indica que la imagen se repetir tan a menudo como sea posible,
para que se ajuste en la zona de posicionamiento, sin ser recortada. Si no caben dos, se coloca una y el background-position determina su posicin.
round. Similar a space pero en este caso si el nmero de veces que se
debe repetir la imagen para ajustarse a la zona de posicionamiento no es un nmero entero, lo redondear y reajustar las imgenes.
no-repeat. Indica que se mostrar la imagen una vez y no se repetir
en ninguna direccin.
Ejemplo
Para que la imagen que utilizamos en la caja2 se repita solo de forma horizontal vamos a aadir, al final de p.caja2, la siguiente propiedad:
background-repeat: repeat-x;
El resultado ser:
Nota
Es conveniente que en las distintas propiedades pruebes a realizar cambios utilizando todos los valores en cada una, as podrs ver las diferencias entre unos y otros.
Comportamiento de la imagen de fondo La propiedad background-attachment establece cmo se visualizar la imagen de fondo cuando se hace usa la barra de desplazamiento del navegador. Los posibles valores para esta propiedad son:
scroll. Es el valor por defecto. El fondo est fijo con respecto al
elemento, es decir, se mueve con l. Al desplazar la pgina el fondo se desplazar con ella.
49
fixed. El fondo est fijo con respecto a la ventana del navegador, es
decir, que no se mueve con el elemento. Al desplazar la pgina no se mover el fondo.

local. El fondo est fijo con respecto a los contenidos del elemento y se
desplazar con ellos.
Para este ejemplo vamos a crear uno nuevo. En HTML vamos a crear tantos prrafos como sea necesario para que aparezca la barra de desplazamiento vertical.
Ejemplo
En el HTML, en la etiqueta body:
<body class="fondo">
En CSS:
body.fondo { background-image: url(fondo2.jpg); }
Guarda los cambios y mira la pgina en el navegador, fjate en el comportamiento del fondo. Aade la siguiente lnea y observa su nuevo comportamiento:
Ejemplo
En el HTML, en la etiqueta body:
<body class="fondo">
En CSS:
body.fondo { background-image: url(fondo2.jpg); background-attachment: fixed; }
Posicin de la imagen de fondo La propiedad background-position establece la posicin o el desplazamiento en el que se mostrar la imagen de fondo, tomando como referencia la esquina superior izquierda de la imagen con respecto a la esquina superior izquierda del rea de posicionamiento del fondo.
Los posibles valores para esta propiedad son:
left. Si se dan uno o dos valores calcula 0% para la posicin horizontal,
de lo contrario especifica el borde izquierdo como el origen para el prximo desplazamiento.

center. Calcula 50% para la posicin horizontal y vertical, si no se
especifica lo contrario.
right. Si se dan uno o dos valores calcula 100% para la posicin
horizontal, de lo contrario especifica el borde derecho como el origen para el prximo desplazamiento.
top. Si se dan uno o dos valores calcula 0% para la posicin vertical, de
lo contrario especifica el borde superior como el origen para el prximo desplazamiento.

bottom. Si se dan uno o dos valores calcula 100% para la posicin
vertical, de lo contrario especifica el borde inferior como el origen para el prximo desplazamiento.
porcentaje. Un porcentaje para el desplazamiento horizontal es relativo
al ancho del rea de posicionamiento del fondo ancho de la imagen de fondo. Un porcentaje para el desplazamiento vertical es relativo al alto del rea de posicionamiento del fondo alto de la imagen de fondo, donde el tamao de la imagen es el tamao dado por la propiedad background-size.
longitud. Se expresa en unidades de medida y da una longitud fija de
desplazamiento.
Si solo se especifica un valor, el segundo se asume centrado. Si se dan dos valores, ya sea porcentaje o longitud, el primero representa el desplazamiento horizontal y el segundo el vertical. Si se dan cuatro valores, cada porcentaje o longitud de desplazamiento debe estar precedido por una palabra clave, que especifica el borde desde el que se realizar el desplazamiento. Si se dan tres valores, el desplazamiento que falta se asume como cero.
Nota
Los valores pueden ser: Positivos, que representan un desplazamiento hacia dentro, desde el borde del rea de posicionamiento del fondo. Negativos, que representan un desplazamiento hacia afuera, desde el borde del rea de posicionamiento del fondo.
Nota
Cuando se usan solo palabras claves, stas pueden invertirse. Es decir, bottom left es equivalente a left bottom.
Continuando con el ejemplo en el que asignamos un fondo al elemento body, vamos a realizar algunos cambios, uno de ellos ser que la imagen de fondo no se repita para poder comprender cmo funciona la propiedad backgroundposition:
Ejemplo
body.fondo { background-image: url(fondo2.jpg); background-repeat: no-repeat; }
El resultado puede ser algo similar a la siguiente imagen:
Incluimos una nueva lnea, al final:

background-position: 100px 50px;
La imagen de fondo debe haber tomado su nueva posicin, de acuerdo a las medidas que se han especificado:
Un nuevo cambio, para utilizar palabras claves. Remplaza la lnea anterior por esta:
background-position: right top;
La imagen de fondo muestra su nueva ubicacin:
rea de dibujo de la imagen de fondo La propiedad background-clip establece el rea en la cual se dibuja el fondo. Los posibles valores para esta propiedad son:
border-box. Es el valor por defecto. El fondo es dibujado acotndolo a la
frontera de la caja.
Nota
En el caso del border-box, el fondo se dibuja por detrs de la frontera. Si quieres verlo tienes la opcin de aplicar transparencia al color del borde.
padding-box. El fondo es dibujado acotndolo al rea de relleno de la
caja.
content-box. El fondo es dibujado acotndolo al rea de contenido de la
caja.
Ejemplo
background-clip: content-box;
Punto de inicio de la imagen de fondo Para los elementos representados como una sola caja, la propiedad background-origin, especifica el rea de posicionamiento del fondo. Los posibles valores para esta propiedad son:
border-box. La posicin es relativa a la frontera de la caja. padding-box. Es el valor por defecto. La posicin es relativa al rea de
relleno de la caja.
content-box. La posicin es relativa al rea de contenido de la caja.
Nota
Si el valor de la propiedad background-attachment es fixed, esta propiedad no tiene ningn efecto.
Retomando el ejemplo de los dos prrafos vamos a modificar p.caja2, ya que tiene una imagen de fondo, para que la imagen no se repita y podamos ver el comportamiento de esta propiedad:
Ejemplo
p.caja2 { width: 200px; padding: 20px 50px; border: 15px solid blue; margin: 30px; background-color: silver; background-image: url(fondo1.jpg); background-repeat: no-repeat; background-origin: content-box; }
Tamao de la imagen de fondo La propiedad background-size establece el tamao de las imgenes de fondo. Los posibles valores para esta propiedad son:
longitud. Con dos valores establece el ancho y el alto de la imagen de fondo, en ese orden. Con un solo valor, asume el segundo en auto. porcentaje. Con dos valores establece el ancho y el alto (en ese orden)
de la imagen de fondo en funcin del rea de posicionamiento del fondo. Con un solo valor, asume el segundo en auto.
cover. Escala la imagen de fondo, de forma proporcional, hasta cubrir la
totalidad del rea de posicionamiento del fondo.

contain. Escala la imagen de fondo, de forma proporcional, hasta que el
ancho o el alto toque uno de los bordes del rea de posicionamiento del fondo, ocupando todo el espacio posible.
auto. Establece el valor en un 100%.
Aprovechando el ejemplo anterior vamos a aadir esta nueva propiedad:
Ejemplo
p.caja2 { width: 200px; padding: 20px 50px; border: 15px solid blue; margin: 30px; background-color: silver; background-image: url(fondo1.jpg); background-repeat: no-repeat; background-origin: content-box; background-size: 100% 100%; }
L6
- Posicionamiento
Los navegadores, para cumplir con la tarea de mostrar las pginas en la pantalla, crean cajas para representar los elementos contenidos en esas pginas. Para crear esas cajas tiene que tener en cuenta, entre otros, el posicionamiento. Los navegadores pueden posicionar de forma automtica las cajas contenidas en una pgina web, pero tambin es posible establecer esas posiciones por medio de las CSS, a travs de la propiedad position. Esta propiedad no desplaza la caja solo establece cmo se posiciona. Los posicionamientos pueden ser: esttico, relativo, absoluto, de centro, de pgina y fijo. Los posibles valores para la propiedad position son:
static. Se establece de acuerdo al flujo normal.
Nota
Al utilizar este valor quedan sin efecto los valores de las propiedades top, right, bottom y left.
relative. La posicin de la caja se calcula de acuerdo al flujo normal y
luego es desplazada. El desplazamiento de la caja es controlado por las propiedades top, right, bottom y left. No afecta la posicin de las otras cajas.
absolute. Este posicionamiento se encuentra fuera del flujo normal por lo
que no tiene impacto en la ubicacin de las otras cajas. El desplazamiento de la caja es controlado por las propiedades top, right, bottom y left; pero el origen de coordenadas para el desplazamiento va a depender del posicionamiento del elemento contendor.
center. Este posicionamiento se encuentra fuera del flujo normal por lo que
no tiene impacto en la ubicacin de las otras cajas. El desplazamiento de la caja es controlado por las propiedades top, right, bottom y left; a partir de la posicin centrada de la caja, vertical y horizontalmente.
page. Es similar al posicionamiento absoluto. Est fuera del flujo normal. En
los medios paginados, esta caja, solo se imprimir en la pgina que se genera, sin repetirse en las dems, excepto si la caja no cabe, entonces continuar en la pgina siguiente.
fixed. El desplazamiento de la caja es controlado por las propiedades top, right, bottom y left. El elemento permanece en la pantalla de forma
inalterable. Las propiedades mencionadas para controlar el desplazamiento de la caja son:
top. (Se explica en cada tipo de posicionamiento) right. (Se explica en cada tipo de posicionamiento) bottom. (Se explica en cada tipo de posicionamiento) left. (Se explica en cada tipo de posicionamiento)
longitud. El desplazamiento es una longitud fija desde el borde de
referencia.
porcentaje. Se establece en relacin con el ancho del elemento contenedor,
para right y left, o el alto, para top y bottom.

auto. Este valor es asignado por el navegador y depender de si de
elementos remplazados o no.
Nota
Los valores negativos son permitidos.
Posicionamiento esttico
Solo se tiene en cuenta si se trata de elementos de bloque o de lnea para posicionarlos. Siguen el flujo normal. Es el posicionamiento por defecto. Con los elementos de bloque las cajas se irn ubicando una debajo de la otra. Mostrando la primera en la parte superior del elemento contenedor.
Nota
Si un elemento no se encuentra dentro de un elemento contenedor, el elemento body se convierte en su elemento contenedor.
Con los elementos de lnea las cajas se irn ubicando una al lado de la otra comenzando por la izquierda de su elemento contenedor. Cuando en una lnea no caben ms cajas continan en la siguiente lnea.
La distribucin de las cajas podra ser algo como lo que se ilustra en la siguiente imagen:
Caja1
Caja2
Caja3
Caja4
Caja5
Ejemplo
En el HTML:
<img src="picture.png" /> <img src="picture2.png" /> <img class="posicionada" src="picture3.png" /> <img src="picture4.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
En CSS:
img.posicionada { position: static; top: 50px; left: 30px; }
El resultado sera algo similar a esto:
Posicionamiento relativo
Cuando una caja es desplazada el resto de elementos no se altera, siguen respetando el espacio que ocupara la caja en el posicionamiento normal, esto puede producir que la caja desplazada por el posicionamiento relativo solape a algn otro elemento de la pgina. Las propiedades para controlar el desplazamiento de la caja con este tipo de posicionamiento tienen la siguiente funcin:
top. El desplazamiento es con respecto al borde superior de la caja en si
misma y el desplazamiento es descendente.

right. El desplazamiento es con respecto al borde derecho de la caja en si
misma, es decir, con respecto al posicionamiento que tendra en el flujo normal y el desplazamiento es hacia la izquierda.
bottom. El desplazamiento es con respecto al borde inferior de la caja en s
misma y el desplazamiento es ascendente.

left. El desplazamiento es con respecto al borde izquierdo de la caja en s
misma y el desplazamiento es hacia la derecha.
Nota
Los valores negativos generan un comportamiento inverso.
Caja1
Caja2
Caja3 Caja3
Caja4
Caja5
Ejemplo
En el HTML:
En CSS:
img.posicionada { position: relative; top: 50px; left: 70px; }
Posicionamiento absoluto
En este tipo de posicionamiento cuando una caja es desplazada el resto de los elementos ignoran esa caja, ocupando el espacio dejado por esta. En este caso tambin es posible que la caja desplazada produzca un solapamiento. Las propiedades para controlar el desplazamiento de la caja con este tipo de posicionamiento tienen la siguiente funcin:
top. El desplazamiento es con respecto al borde superior del relleno
(padding edge) del elemento contenedor y el desplazamiento es descendente.

right. El desplazamiento es con respecto al borde derecho del relleno del
elemento contenedor y el desplazamiento es hacia la izquierda.

bottom. El desplazamiento es con respecto al borde inferior del relleno del
elemento contenedor y el desplazamiento es ascendente.

left. El desplazamiento es con respecto al borde izquierdo del relleno del
elemento contenedor y el desplazamiento es hacia la derecha.
Caja1 Caja3
Caja2
Caja4
Caja5
Ejemplo
En el HTML:
En CSS:
img.posicionada { position: absolute; top: 50px; left: 70px; }
Posicionamiento centrado y por pgina

En el posicionamiento centrado la caja est centrada con respecto a su elemento contenedor. Est fuera del flujo normal y no causa impacto sobre las otras cajas. Puede producir solapamiento. En el posicionamiento por pgina la caja est desplazada con respecto a su elemento contenedor. Est fuera del flujo normal y no causa impacto sobre las otras cajas. Puede producir solapamiento. En los medios paginados, las cajas con este tipo de posicionamiento solo se mostrarn en la pgina inicial; si el tamao de la caja es mayor al de la pgina, se mostrar el resto en la pgina siguiente. Estos tipos de posicionamientos no estn soportados por los principales navegadores.
Posicionamiento fijo
Este tipo de posicionamiento es similar al absoluto, con la diferencia de que la ventana grfica se convierte en su elemento contenedor. La caja queda posicionada de forma inalterable, no se mover aunque se utilice la barra de desplazamiento para ver el resto del contenido de la pgina. Produce solapamiento. Si se imprime el documento, la caja con este tipo de posicionamiento, se imprimir en cada pgina. Si el tamao de la caja es mayor al rea de la pgina se recortar, no hacindose visible la parte recortada. Las propiedades para controlar el desplazamiento de la caja con este tipo de posicionamiento tienen la siguiente funcin: top, right, bottom y left.
Ejemplo
En el HTML:
En CSS:
img.posicionada { position: fixed; top: 50px; left: 70px; }
Propiedad float
Este es un tipo de posicionamiento especial que, por medio de la propiedad float, convierte una caja, que se encontraba en el flujo normal, en una caja flotante. Una caja flotante se desplazar hacia el extremo derecho o izquierdo de la posicin en la que se encontraba. El contenido podra fluir alrededor de una caja flotante o se puede impedir por medio del uso de la propiedad clear. Los posibles valores para esta propiedad son: left, right y none.
Ejemplo
En HTML:
<img class="flotante" src="picture.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit...... </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit...... </p>
En CSS:
img.flotante { float: left; }
El resultado sera algo como lo que se muestra en la siguiente imagen:
Si queremos que a partir del segundo prrafo, el texto no rodee la imagen incorporamos la propiedad clear.
Ejemplo
En HTML:
<img class="flotante" src="picture.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit...... </p> <p class="limpiar"> Lorem ipsum dolor sit amet, consectetur adipiscing elit...... </p>
En CSS:
img.flotante { float: left; } p.limpiar { clear: left; } 64 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA
El resultado sera algo parecido a esto:
L7
Texto
Transformacin del texto

La propiedad text-transform permite transformar el texto en maysculas, minsculas, Los posibles valores de esta propiedad son:
none. No realice ningn cambio. capitalize. Pone la primera letra de cada palabra en mayscula. uppercase. Pone todas las letras en maysculas. lowercase. Pone todas las letras en minsculas. full-width. Pone todos los caracteres en la forma ancho completo.
Ejemplo
text-transform: uppercase;
Espacios en blanco
La propiedad white-space permite establecer el tratamiento que se le dar a los espacios en blanco en el texto. Los posibles valores de esta propiedad son:
normal. Valor por defecto. Las secuencias de espacios en blanco se
colapsan en un solo carcter. Ajusta las lneas al espacio asignado.

pre. Impide que los navegadores colapsen las secuencias de espacios en
blancos y hace que conserven los retornos de carro o lneas nuevas. Si una lnea es muy larga se sale del espacio asignado.
nowrap. Colapsa la secuencia de espacios en blanco (como normal) pero permite a las lneas largas salirse del espacio asignado (como pre). pre-wrap. Conserva la secuencia de espacios en blanco (como pre) pero ajusta las lneas al espacio asignado (como normal). pre-line. Colapsa la secuencia de espacios en blanco y conserva las lneas
nuevas pero ajustndolas al espacio asignado.

66
En la siguiente tabla se pueden observar y comparar los distintos comportamientos: Lneas nuevas
normal pre nowrap pre-wrap pre-line
Espacios y tabuladores
Ajustes de las lneas
Ejemplo
white-space: pre;
Guiones
La propiedad hyphens permite la separacin de palabras, por medio de guiones, al final de la lnea, con el objetivo de mejorar la presentacin de los prrafos. Los posibles valores para esta propiedad son:
none. Es el valor por defecto. No se permite la divisin de palabras. manual. La divisin es marcada manualmente. auto. El navegador ser el encargado de partir las palabras.
Ejemplo
hyphens: auto;
Alineacin del texto

La propiedad text-align establece como se alinear el contenido de un elemento. Los posibles valores para esta propiedad son:
start. Se establece la alineacin con el borde de inicio de la caja. end. Se establece la alineacin con el borde final de la caja. left. Se establece la alineacin con el borde izquierdo de la caja. right. Se establece la alineacin con el borde derecho de la caja. center. Se establece la alineacin en el centro de la caja. justify. El texto se justifica de acuerdo con la propiedad text-justify. string. Se establece la alineacin en funcin de un nico carcter. match-parent. Hereda el valor del elemento padre pero los valores star o end se calculan contrarios al valor de la propiedad direction del elemento
padre.
start end. Para la primera lnea y la siguiente despus de un salto de lnea forzado corresponde la alineacin start. Para el resto de las lneas, alineacin end.
Ejemplo
text-align: justify;
Espaciado entre palabras

La propiedad word-spacing establece el espacio ptimo, mnimo y mximo entre palabras. El valor numrico que se asigna se interpreta como una separacin adicional a la separacin por defecto. Si el valor es positivo lo suma y si es negativo lo resta. Los posibles valores para esta propiedad son:
normal. Especifica el espaciado definido por la fuente utilizada y por el
navegador.
longitud. Especifica el espacio adicional al definido por la fuente. Permite
valores negativos, los cuales pueden estar sometidos a lmites por los navegadores.
Porcentaje. Especifica el espacio adicional al definido por la fuente, como
un porcentaje.
Ejemplo
word-spacing: 20px;
Interletrado
La propiedad letter-spacing establece el espacio ptimo, mnimo y mximo entre letras. Los posibles valores para esta propiedad son:
normal. Especifica el espaciado definido por la fuente utilizada y por el
navegador.
longitud. Especifica el espacio adicional al definido por la fuente. Permite
valores negativos, los cuales pueden estar sometidos a lmites por los navegadores.
Ejemplo
letter-spacing: 5px;
Decoracin del texto

Las propiedades de decoracin del texto establecen lneas de decoracin, tales como: subrayado, sobreimpresin y tachado. El CSS2 ya exista la propiedad text-decoration con unos cuatro posibles valores, todo lo dems son especificaciones de CSS3.
Las propiedades de decoracin del texto son:
Lneas: text-decoration-line Color: text-decoration-color Estilo: text-decoration-style Taquigrafa:

text-decoration text-decoration-skip text-underline-position text-emphasis-style text-emphasis-color text-emphasis
Continuidad de la lnea: Posicin del subrayado:
Estilo de las marcas de nfasis: Color de las marcas de nfasis:
Taquigrafa de las marcas de nfasis: Texto con sombra:
Posicin de las marcas de nfasis: text-emphasis-position

text-shadow
Ejemplo
h2{ text-decoration: overline; color: red; }
Ejemplo
h2{ text-decoration-line: underline; text-decoration-style: dotted; }
Fuentes
Familia de fuentes
La propiedad font-family especifica y prioriza por medio de una lista los nombres de las familias o las familias genricas de fuentes a utilizar. Los navegadores recorrern por orden la lista hasta encontrar la que coincida con alguna de las instaladas en el ordenador desde que se visita la pgina. Pero puede ocurrir que el usuario no tenga instalada ninguna de las fuentes de la lista, por eso es conveniente utilizar las familias genricas, es ese caso el navegador busca, en el ordenador del usuario, la fuente que ms se parezca. Un ejemplo de familia genrica es sans-serif que son de tipo Arial.
Ejemplo
font-family: Helvetica, Verdana, sans-serif;
Anchura de la fuente
La propiedad font-weight especifica el tamao de la letra. Los posibles valores para esta propiedad son: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 y 900.
normal es el valor por defecto y es equivalente al valor 400. bold corresponde a
las negritas y es equivalente a 700.
Ejemplo
em{ font-weight: 900; }
Estilo de la fuente
La propiedad font-style especifica el estilo de la letra. Los posibles valores para esta propiedad son: normal, italic y oblique.
Ejemplo
font-style: italic;
Tamao de la fuente
La propiedad font-size especifica el grosor del trazo. Los posibles valores para esta propiedad son:
Tamao absoluto. Especifica, por medio de palabras claves, el tamao de la
letra que debe ser aplicado por los navegadores. Sus valores son:
xx-small, x-small, small, medium, large, x-large y xx-large
Tamao relativo. Especifica, por medio de palabras claves que son
interpretadas en relacin con la tabla de tamaos, utilizada por los navegadores, y el tamao de fuente del elemento padre. Sus valores son:
larger y smaller
Longitud. Especifica un tamao absoluto para la fuente. No se permiten
medidas negativas.
Porcentaje. Especifica un tamao absoluto en relacin con el tamao de la
fuente del elemento padre.
Ejemplo
p{ font-size: 12pt; }
Otras propiedades
Hay otra serie de propiedades y descriptores que permiten realizar modificaciones en la fuente. Algunos de ellos son: font-stretch, font-sizeadjust, font-synthesis, font-variant y font-feature-settings.
L8
Uso de CSS para aadir interactividad
Con la versiones anteriores de HTML y CSS, para incluir en las pginas web ciertas aplicaciones ms vistosas e interactivas, se recurra a bibliotecas de JavaScript o al uso de programas como Flash; con el inconveniente de la posible incompatibilidad de estas aplicaciones en los navegadores y en los dispositivos mviles que actualmente son muy usados para acceder a los sitios web. Con las nuevas estandarizaciones se puede contar con una serie de recursos que permiten realizar pginas web interactivas ms accesibles. Cuando los principales navegadores reconozcan los nuevos estndares, el desarrollo de pginas interactivas solo con el uso de HTML y CSS, y tal vez algn script de JavaScript, garantizarn mayores niveles de usabilidad y accesibilidad ya que no se requerir de la instalacin de plugins adicionales para visualizar correctamente las pginas. Un ejemplo sencillo puede ser un cuadro de texto en el que podamos escribir y que adems podamos redimensionar.
Ejemplo
En el HTML:
<textarea name="caja" id="caja" rows="5" cols="50"></textarea>
En CSS:
textarea { overflow: auto ; resize: both ; -moz-resize: both ; -webkit-resize: both ; }
El resultado en el navegador sera algo similar a la siguiente imagen:
Como puede observar, en la esquina inferior derecha aparecen una marca que indica que el cuadro es escalable desde esa esquina.
Nota
En el ejemplo, las lneas:
-moz-resize: both ; -webkit-resize: both ;
Solo se diferencian de la anterior:

resize: both ;
Por los prefijos, antepuestos a la propiedad, que se utilizan para que los navegadores la reconozcan; cuando se trata de propiedades que an no estn estandarizadas. Los prefijos ms utilizados son: moz para Mozilla ms para Internet Explorer webkit para Chrome y Safari

HTML5 06 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5 06 PDF

Uploaded by

Copyright:

Available Formats

U6 - Definir la apariencia

1 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

Introduccin a las hojas de estilo

2 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

Incluir CSS en un documento HTML

CSS directamente en los elementos HTML.

CSS en el documento HTML.

En este caso el elemento prrafo no contiene ninguna especificacin:

CSS en un archivo externo.

3 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

Sintaxis en las CSS

p { color: blue; } Valor Propiedad

Para escribir comentarios en las CSS lo hacemos de la siguiente forma:

4 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

5 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

Un selector con varia declaraciones.

Varios selectores con una declaracin.

Varios selectores con varias declaraciones.

6 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

Todos los prrafos del documento HTML se vern en azul.

7 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

Solo el atributo. Afecta al elemento que contiene el atributo representado

ol[reversed] { color: blue; }

El atributo con un valor especfico. Afecta al elemento que contiene el

atributo representado que coincida exactamente con el valor especificado.

a[href="http://www.dominio.com"] { color: blue; }

El atributo con un valor que coincida. Afecta al elemento que contiene

El atributo con un valor cuyo inicio coincida. Afecta al elemento que

El atributo con un valor con un prefijo especificado. Afecta al

El atributo con un valor con un sufijo especificado. Afecta al elemento

9 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

El atributo con un valor que contiene la subcadena especificada.

<p class="diferente">Texto del prrafo</p>

10 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

Tambin es posible definir la clase para un elemento en concreto.

Aplica el estilo al elemento que contenga el atributo id con el valor diferente:

11 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

Dinmicas. Son pseudo-clases que se aplican a aquellos elementos en los

Se aplica a los vnculos que no han sido visitados.

Se aplica a los vnculos despus de haber sido visitados.

Se aplica cuando el usuario hace clic sobre el elemento.

Se aplica cuando el elemento captura el cursor.

12 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

Target. En algunos documentos se encuentran enlaces a ubicaciones

En el documento HTML podemos tener algo como esto: En el enlace:

Target despus del enlace:

Para que comprendas mejor este ejemplo a continuacin tienes el cdigo:

13 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

De lenguaje. La pseudo-clase :lang permite asignar estilos a los

elementos de acuerdo a su idioma, siempre que contengan el atributo lang.

De interfaz de usuario. Estas pseudo-clases se utilizan principalmente

Modifica los elementos de interfaz de usuario que se encuentran en estado habilitado.

Se aplica a los elementos checkbox y radio cuando son seleccionados.

14 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

Estructurales. Son pseudo-clases que permiten modificar elementos

Si lo presentamos como un grfico veramos lo siguiente:

15 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

Utilizando la estructura del grfico anterior y aplicando el mismo ejemplo:

El enlace se mostrara en rojo, ya que a es el primer hijo de su padre, en este caso p.

16 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

html:root { color: red; }

UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA

18 UNIDAD DIDCTICA 6. DEFINIR LA APARIENCIA