Introducción a CSS

Grado Medio Informática
Asignatura: Aplicaciones Web

¿Qué es?
• Es un lenguaje de hojas de estilos creado para controlar el aspecto de los
documentos HTML.

• Permite separar definición de los contenidos, de la definición del aspecto.

• De esta forma se reduce la complejidad del mantenimiento.

• El w3c es el organismo encargado de desarrollar la especificación o norma
oficial para diseñar sitios web con CSS.

• Actualmente la versión más utilizada de este lenguaje es el CSS3.

Ramón Ríos Sieiro 2

Como asociar una hoja de estilos a un documento HTML:

1. CSS en linea: Añadiendo el atributo style sobre el elemento
al que se le quiere aplicar el estilo:

– El problema de esto es que si tuviéramos 20 etiquetas <p>
tendríamos que poner el estilo 20 veces.

– Por lo tanto no se suele utilizar esta forma de enlazar estilos, sólo en
situaciones muy puntuales o si usamos algún editor que añada
código automáticamente.



2. CSS interno: Añadiendo una etiqueta <style> en la cabecera del documento y
utilizando la siguiente sintaxis:
selector {
propiedad1: valor;
propiedad2: valor;
propiedad3: valor:
}
• Donde selector hace referencia al elemento HTML al que se quiere aplicar el estilo.



3. CSS externo: Se escriben los estilos en un archivo externo con extensión
.css y se enlaza al documento HTML desde la cabecera:

• La etiqueta <link> tiene normalmente cuatro atributos:
 rel: Indica el tipo de relación que tiene el recurso.
 type: Indica el tipo de recurso enlazado.
 href: URL del archivo que contiene los CSS.
 media: Indica el medio en el que se van a aplicar los estilos.

• Esta es la manera más utilizada de asociar estilos, ya que permite una
mayor reutilización y un mantenimiento más sencillo.


Glosario básico de CSS:
• La terminología básica de CSS incluye los siguientes términos:

• Regla: Cada uno de los estilos que componen una hoja CSS. Está
compuesta por un selector y una declaración.
• Selector: Indica el o los elementos a los que se le aplica la regla CSS.
• Declaración: Especifica los estilos que se aplican. Está compuesta por una
o más parejas propiedad : valor.
• Propiedad: Indica la característica que se va a modificar.
• Valor: Indica el nuevo valor.


Introducción.

• Una regla de CSS está formada por una parte llamada "selector" y otra parte
llamada "declaración.

• La declaración indica "qué hay que hacer" y el selector indica "a quién hay que
hacérselo”.

• Una misma regla puede aplicarse sobre varios selectores y un mismo selector se
puede utilizar en varias reglas.


Selectores básicos:
• Selector universal * :
– Se utiliza para seleccionar todos los elementos de la página.

– No se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a
todos los elementos de una página.

• Selector de tipo o etiqueta:
– Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor
del selector


Selectores básicos(II):
– Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden
encadenar los selectores separados por una coma (,).

– En ocasiones puede haber muchas propiedades comunes pero alguna que
queramos especificar para cada etiqueta, en este caso:


Selectores básicos(III):
• Selector descendente:
– Selecciona los elementos que se encuentran dentro de otros elementos, sin
importar el nivel de profundidad en el que se encuentren:

– Si tuviéramos el siguiente documento HTML:

– El estilo se aplicaría tanto sobre “texto1” como sobre “texto2”
– El selector descendente puede estar compuesto de n partes:
• p a span em { …}
– Se aplicaría a las etiquetas <em> que se encontrasen dentro de las etiquetas
<span> que se encuentren dentro de etiquetas tipo <a> que se encuentren
dentro de etiquetas tipo <p>


Selectores básicos(IV):
– No debe confundirse el selector descendente con la combinación de
selectores:

– Si se emplea el selector descendente combinado con el selector universal, se
puede restringir el alcance de un selector descendente.
– El siguiente ejemplo, muestra los dos enlaces de color rojo:

– Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra
de color rojo:


Selectores básicos(V):
• Selector de clase:
– Hasta ahora sabemos aplicar el mismo estilo a todas las apariciones de una
determinada etiqueta.
– En ocasiones puede interesarnos aplicar diferentes estilos a diferentes
elementos de una etiqueta.
– Cuando queremos aplicar un mismo estilo a varios elementos,utilizaremos el
selector de clase.
– Para ello definiremos un estilo de la siguiente forma:
.nombreclase{
…
}
– A continuación en aquellos elementos sobre los que queramos aplicar dicho
estilo les asociamos el nombre de la clase:
<elemento class=”nombreclase”>


Selectores básicos(V):
Selector de clase (II)
– En ocasiones, es necesario restringir el alcance del selector de clase. Si se
considera el ejemplo :

– ¿Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class sea
igual a destacado?
– Combinando el selector de tipo y el selector de clase, se obtiene un selector
mucho más específico:

– El selector p.destacado se interpreta como "aquellos elementos de tipo <p>
que dispongan de un atributo class con valor destacado".


Selectores básicos(VI):
Selector de clase (III)

– De lo anterior se deduce que el atributo .destacado es equivalente a
*.destacado, por lo que se obvia el símbolo * al escribir un selector de clase
normal.

– No debe confundirse el selector de clase con los selectores anteriores:

• Todos los elementos de tipo "p" con atributo class="aviso” : p.aviso{…}

• Todos los elementos que pertenezcan a la clase “aviso” que estén dentro de una
etiqueta de tipo p : p .aviso{…}

• Todos los elementos "p" de la página y todos los elementos con atributo
class="aviso" de la página: p, .aviso { ...}


Selectores básicos(VII):
Selector de clase múltiple
– Es posible aplicar los estilos de varias clases CSS sobre un mismo elemento.

– La sintaxis es similar, pero los diferentes valores del atributo class se separan
con espacios en blanco:

– Es posible utilizar un selector más avanzado para este caso, el selector de clase
múltiple:

– Se interpreta como "aquellos elementos de la página que dispongan de un atributo class
con al menos los valores error y destacado".


Combinación de selectores básicos.

• El anterior selector solamente selecciona aquellos elementos con un
class="especial“ que se encuentren dentro de cualquier elemento con un
class="aviso".

• Ahora, el selector solamente selecciona aquellos elementos de tipo <span> con un
atributo class="especial" que estén dentro de cualquier elemento de tipo <div>
que tenga un atributo class="aviso".


Selectores básicos(VI):
• Selectores de Id:
– Asocia un identificador a un elemento.
– Podremos referirnos a dicho elemento en una hoja de estilos o desde
javascript.
– La sintaxis sería la siguiente:

<p id = “parrafo1”> Esto es el párrafo1” </p>

– Si ahora queremos definir un estilo para este elemento en concreto:

#parrafo1 {
…
}

– Cada identificador solo puede ser asignado a un elemento.


Selectores Avanzados.
• Selector de hijos:
– Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y
se indica mediante el "signo de mayor que" (>):

– En el ejemplo anterior, el selector p > span se interpreta como "cualquier
elemento <span> que sea hijo directo de un elemento <p>", por lo que el
primer elemento <span> cumple la condición del selector. Sin embargo, el
segundo elemento <span> no la cumple porque es descendiente pero no es
hijo directo de un elemento <p>.
– El siguiente ejemplo muestra las diferencias entre el selector descendente y el
selector de hijos:


Selectores Avanzados(II).
• Selector adyacente.
– El selector adyacente utiliza el signo + y su sintaxis es:

– Selecciona todos los elementos de tipo elemento2 que cumplan las dos siguientes
condiciones:

 elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre debe
ser el mismo.

 elemento2 debe aparecer inmediatamente después de elemento1 en el código
HTML de la página.

– En el ejemplo los estilos del selector h1 + h2 se aplican al
primer elemento <h2> de la página, pero no al segundo <h2>


Selectores Avanzados(II).
• Selector de atributos:
– Permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos
atributos.
– Los tres tipos de selectores de atributos son:
• [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado
nombre_atributo, independientemente de su valor.

• [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado
nombre_atributo con un valor igual a valor.

• [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo
llamado nombre_atributo y al menos uno de los valores del atributo es valor.


Colisiones de estilos

• Cuanto más específico sea un selector, más importancia tiene su regla asociada.
• A igual especificidad, se considera la última regla indicada.

– El selector * es el menos específico, ya que se refiere a "todos los elementos de la
página".
– El selector p es poco específico porque se refiere a "todos los párrafos de la página".
– Por último, el selector p#especial sólo hace referencia a "el párrafo de la página cuyo
atributo id sea igual a especial". Como el selector p#especial es el más específico, su
declaración es la que se tiene en cuenta y por tanto el párrafo se muestra de color
verde.


Definiciones.
• Ambos conceptos están relacionados, pero son diferentes.

HERENCIA.
• Está relacionada con cómo los elementos del etiquetado de HTML
heredan propiedades de sus elementos padres (los que los
contienen) y los transmiten a sus hijos.

CASCADA

• Tiene que ver con las declaraciones de CSS que se aplican a un
documento y cómo las reglas contradictorias se anulan o no entre
ellas.


HERENCIA.


HERENCIA: Un ejemplo.

• Tenemos el siguiente HTML:
• La regla CSS que hemos especificado
se aplica únicamente al
elemento html. No hemos
especificado ninguna regla para los
títulos o los párrafos, pero ahora todo
el texto se muestra en Verdana al
75% del tamaño por defecto. ¿Por
qué? Por la herencia.
• Pero ¿75% de qué?
• El valor que se hereda no es el valor
especificado, es decir, el valor que
escribimos en la hoja de estilo, sino
algo que se llama el valor computado.


Forzar la herencia:

• Mediante la palabra clave inherit (heredar) puede forzarse la herencia incluso para
propiedades que no se heredan normalmente.

• La regla siguiente hace que todos los párrafos hereden todas las propiedades de
fondo de sus padres:
p { background: inherit; }


CASCADA.
• Es el mecanismo que controla el resultado final cuando se aplican varias
declaraciones CSS contrapuestas al mismo elemento.
• Hay tres conceptos principales que controlan el orden en el que se aplican las
declaraciones de CSS:
Si dos declaraciones tienen la misma
importancia, la especificidad de las
reglas decidirá cuál se debe aplicar. Si
Orden las reglas tienen la misma
en las especificidad, el orden de las fuentes
fuentes controla el resultado.

Importancia

Especificidad


CASCADA: Importancia.
• La importancia de una declaración de CSS depende de dónde se ha especificado.
• Las declaraciones contrapuestas se aplicarán en el orden siguiente: las nuevas
anularán a las más antiguas.

1. Hoja de estilos de agente de usuario: Es la hoja de estilo integrada del navegador.

2. Declaraciones normales en hojas de estilo de autor.

3. Declaraciones normales en hojas de estilo de usuario:: es una hoja de estilo que ha
especificado el usuario.

4. Declaraciones importantes en hojas de estilo de autor: son las declaraciones que van
seguidas de una directiva !important.

5. Declaraciones importantes en hojas de estilo de usuario.


CASCADA: Especificidad.
• Si dos o más declaraciones entran en conflicto por un elemento determinado y
todas las declaraciones tienen la misma importancia, la de la regla con el selector
más específico será la que "gane".

• La especificidad tiene cuatro componentes; por ejemplo a, b, c y d. El componente
"a" es el más distintivo y el "d", el que menos.
– El componente "a" es bastante sencillo: es 1 para una declaración en un atributo style; si no,
es 0.
– El componente "b" es el número de selectores de id en el selector (los que empiezan con #).
– El componente "c" es el número de selectores de atributo, incluidos los selectores de clase y
pseudoclases.
– El componente "d" es el número de tipo de elementos y pseudoelementos del selector.


CASCADA: Especificidad - Un ejemplo.
• Fijémonos en cómo funciona esto en la práctica.

1. Empezad añadiendo otro párrafo al documento HTML.
<body>
<h1>Título</h1>
<p>Un párrafo de texto.</p>
<p>Un segundo párrafo de texto.</p>
</body>

2. Añadid una regla a la hoja de estilo para hacer que el texto de los párrafos sea de un color diferente.
p { color: cyan; }

3. Guardad los dos ficheros y recargad el documento en vuestro navegador. Se deberían ver dos
párrafos de color cian.

4. Estableced una id en el primer párrafo para que podáis apuntar hacia él fácilmente con un selector
CSS.
<p id="special" >Un párrafo de texto.</p>
<p>Un segundo párrafo de texto.</p> </body>


CASCADA: Especificidad - Un ejemplo.
5. Añadid una regla para el párrafo especial a la hoja de estilo.
#special {
background-color: red; color: yellow;
}
6. Guardad los dos ficheros y recargad el documento en el navegador para ver el
resultado, que es bastante colorido.

• Ambas reglas incluyen una declaración de la propiedad de color, lo que significa
que hay un conflicto.
• Ambas reglas tienen la misma importancia, se trata de declaraciones normales en
la hoja de estilos de autor, de manera que hay que fijarse en la especificidad de los
dos selectores
• El selector de la primera regla es p, que tiene una especificidad de 0,0,0,1 según
las reglas anteriormente mencionadas, ya que incluye un único tipo de elemento.
El selector de la segunda regla es #special, que tiene una especificidad de 0,1,0,0
porque está formado por un selector de id. 0,1,0,0 y es mucho más específico que
0,0,0,1, de manera que la declaración color:yellow gana y se obtiene el texto
amarillo sobre fondo rojo.

CASCADA: Orden de las fuentes.
• Si dos declaraciones afectan al mismo elemento, tienen la misma importancia y la
misma especificidad, la señal distintiva final es el orden en las fuentes. La
declaración que se ve más adelante en las hojas de estilo "ganará" a las anteriores.


Absolutas y Relativas

• Las unidades en CSS se dividen en dos grandes
grupos:
– Relativas: Definen su valor en relación a otra
medida.

– Absolutas: Establecen de forma completa el valor
de una medida.


• em: Tamaño de la M del tipo de letra actual que se esté utilizando. Por
ejemplo:

• La referencia siempre es el elemento padre, en este caso sería la etiqueta
<body>:


• px: Pixeles, se consideran relativas, ya que el aspecto de los elementos
dependerá de la resolución del dispositivo en el que se visualiza el
documento HTML.

• Las distintas unidades se pueden mezclar entre los diferentes elementos
de una misma página, como en el siguiente ejemplo:

• El tamaño de las etiquetas <h1> será de 20 px. Ya que las etiquetas <h1>
heredan un tamaño de 10 px y se le está doblando al ponerla a 2em.


• Porcentajes: Es equivalente a em.
• Se suelen utilizar para establecer anchos y altos de algunos elementos.
• Siempre hacen referencia al valor del elemento padre:

• La anchura del <div class”principal”> será de 480 px.
• El documento "Recomendaciones sobre técnicas CSS para la mejora de la
accesibilidad de los contenidos HTML" (http://www.w3.org/TR/WCAG10-
CSS-TECHS/) elaborado por el organismo W3C, recomienda el uso de la
unidad em para indicar el tamaño del texto y para todas las medidas que
sean posibles.


• Definen las medidas de forma completa, ya que sus valores reales no se
calculan a partir de otro valor de referencia, sino que son directamente los
valores indicados.

• Posibles unidades:


El modelo de cajas.

• Cada elemento en CSS es interpretado como una caja que consta de
contenido,margen interno, borde y margen externo:

Relleno: Espacio
libre entre el
Contenido HTMl
contenido y el
del elemento:
borde.
letras de un
párrafo,
imágenes…

Borde: Linea que
Margen: Es el espacio entre la caja y encierra el relleno y el
las posibles cajas vecinas. contenido

El modelo de cajas.
• El relleno y el margen son transparentes por lo que en el espacio ocupado
entre ellos se muestra el color de fondo o la imagen de fondo establecida.
• Contenido: : Cuando se establece la altura y la anchura de un elemento
con CSS se está estableciendo para el área de contenido. Para hallar la
anchura y altura total del elemento debemos añadirle las del borde,
margen interno y externo.
– Anchura y altura: Width y Height
• No admiten valores negativos.
• Los valores en porcentaje se calculan con respecto al elemento padre.
• Si no se asigna ningún valor, el valor por defecto es auto, que indica que ha de ser
el navegador el que calcule la anchura en base al contenido.


El modelo de cajas.
• Relleno: Padding.

• Cada una de las propiedades establece la
separación entre el lateral de los contenidos
y el borde lateral de la caja:


El modelo de cajas.

• El relleno tiene una propiedad shorthand que permite definir
los cuatro rellenos de una forma directa:


El modelo de cajas.
• Margen:Margin.

• Elementos de bloque como los <p> no se verán afectados por los
margenes top y botton, mientras que los enlaces por ejemplo si lo harán.

El modelo de cajas.

• La propiedad que permite definir de forma simultanea los cuatro
márgenes se denomina margin.
• Al igual que sucedía con la propiedad shorthand del padding:
– Si solo se indica un valor, todos los márgenes tienen ese valor.

– Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo
se asigna a los márgenes izquierdo y derecho.

– Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna al
margen inferior y el segundo valor se asigna los márgenes izquierdo y derecho.

– Si se indican los cuatro valores, el orden de asignación es: margen superior, margen
derecho, margen inferior y margen izquierdo.


El modelo de cajas.

• Diferencia entre margin y padding:


El modelo de cajas.
• Bordes: Border.
• Es lo que separa el relleno del margen.
• Para los bordes vamos a poder especificar:
– Anchura.
– Color.
– Estilo.

• Anchura: La anchura de los bordes se puede indicar mediante una medida
(absoluta o relativa y en cualquier unidad de medida de las definidas) o
mediante las palabras clave thin (borde delgado), medium (borde normal)
y thick (borde ancho).


El modelo de cajas.
• La anchura de los bordes se controla con las cuatro propiedades siguientes:

• Si se quiere establecer la misma anchura a todos los bordes, CSS permite la
utilización de un atajo mediante una propiedad de tipo "shorthand", que permiten
indicar varias propiedades de forma resumida:


El modelo de cajas.
• Color: Se puede establecer con las cuatro propiedades:

• O a través de la propiedad shorthand:


El modelo de cajas.
• Estilo: El estilo de los bordes sólo se puede indicar mediante alguna de las
palabras reservadas definidas por CSS. Como el valor por defecto de esta
propiedad es none, los elementos no muestran ningún borde visible a
menos que se establezca explícitamente un estilo de borde.

• Propiedad shorthand correspondiente:


El modelo de cajas.
• Tanto la anchura, como el color, como el estilo se pueden definir en una
sola propiedad shorthand para los bordes.


El modelo de cajas.
• Fondos: Background.

• El fondo puede ser un color simple o una imagen.
• El fondo solamente se visualiza en el área ocupada por el contenido y su
relleno, ya que el color de los bordes se controla directamente desde los
bordes y las zonas de los márgenes siempre son transparentes.
• CSS define cinco propiedades para establecer el fondo de cada elemento:
– background-color,
– background-image
– background-repeat
– background-attachment
– background-position)
– y otra propiedad de tipo "shorthand" (background).


POSICIONAMIENTO Y
VISUALIZACIÓN.

Posicionamiento.
• El estándar de CSS define cinco modelos diferentes para posicionar una
caja:
– Posicionamiento normal o estático: se trata del posicionamiento que
utilizan los navegadores si no se indica lo contrario.

– Posicionamiento relativo:

– Posicionamiento absoluto:

– Posicionamiento fijo:

– Posicionamiento flotante:


Posicionamiento Normal:
• Sólo se tiene en cuenta si el elemento es de bloque o en línea.
• POSICIONAMIENTO DE ELEMENTOS BLOCK
– Se mostrarán una debajo de otra y las distancias se controlarán mediante los
márgenes verticales.

• ELEMENTO PADRE O CONTENEDOR
– Si un elemento se encuentra dentro de otro, el elemento padre se llama
"elemento contenedor" y determina tanto la posición como el tamaño de
todas sus cajas interiores.
– Si un elemento no se encuentra dentro de un elemento contenedor, entonces
su elemento contenedor es el elemento <body> de la página.
Normalmente, la anchura de los elementos de bloque está limitada a la
anchura de su elemento contenedor, aunque en algunos casos sus contenidos
pueden desbordar el espacio disponible.

Posicionamiento Normal:
• POSICIONAMIENTO DE ELEMENTOS INLINE
– Las cajas de tipo inline se muestran una tras otra de forma horizontal comenzando
desde la posición más a la izquierda de su elemento contenedor. La distancia entre las
cajas se controla mediante los márgenes laterales.

– Si las cajas en línea ocupan más espacio del disponible en su propia línea, el resto de
cajas se muestran en las líneas inferiores.
– Si las cajas en línea ocupan un espacio menor que su propia línea, se puede controlar la
distribución de las cajas mediante la propiedad text-align para centrarlas, alinearlas a
la derecha o justificarlas.

• Este tipo de posicionamiento define el flujo normal de una página.

Posicionamiento Relativo.

• Permite desplazar una caja respecto de su posición original establecida mediante
el posicionamiento normal. El desplazamiento de la caja se controla con las
propiedades top, right, bottom y left.

• El desplazamiento de una caja no afecta al resto de cajas adyacentes, que se
muestran en la misma posición que si la caja desplazada no se hubiera movido de
su posición original.


Posicionamiento absoluto:
• La posición de una caja se establece de forma absoluta respecto de su elemento
contenedor y el resto de elementos de la página ignoran la nueva posición del
elemento.
• El resto de elementos de la página la ignoran y ocupan el lugar original ocupado
por la caja posicionada.

• Por otra parte, el desplazamiento de una caja posicionada de forma absoluta se
indica mediante las propiedades top, right, bottom y left. A diferencia de
posicionamiento relativo, en este caso la referencia de los valores de esas
propiedades es el origen de coordenadas de su primer elemento contenedor
posicionado.


• Determinar el origen de coordenadas a partir del cual se desplaza una caja
posicionada de forma absoluta es un proceso complejo que se compone
de los siguientes pasos:

1. Se buscan todos los elementos contenedores de la caja hasta llegar al
elemento <body> de la página.
2. Se recorren todos los elementos contenedores empezando por el más cercano
a la caja y llegando hasta el <body>.
3. De todos ellos, el navegador se queda con el primer elemento contenedor que
esté posicionado de cualquier forma diferente a position: static
4. La esquina superior izquierda de ese elemento contenedor posicionado es el
origen de coordenadas.
5. Una vez obtenido el origen de coordenadas, se interpretan los valores de las
propiedades top, right, bottom y left respecto a ese origen y se desplaza la
caja hasta su nueva posición.


• Ejemplo: Tenemos el siguiente • Ahora posicionaremos la imagen:
documento HTML.

50px

50px

• La imagen posicionada de forma
absoluta no toma como origen de
coordenadas la esquina superior
izquierda de su elemento contenedor
<div>, sino que su referencia es la
esquina superior izquierda de la página:


• A continuación, se posiciona de forma relativa el elemento <div> que
contiene la imagen . La única propiedad añadida al <div> es position:
relative por lo que el elemento contenedor se posiciona pero no se
desplaza respecto de su posición original:

• En este caso, el origen de coordenadas para determinar la nueva posición
de la imagen corresponde a la esquina superior izquierda del elemento
<div>.


Posicionamiento fijo.
• Cuando una caja se posiciona de forma fija, la forma de obtener el origen
de coordenadas para interpretar su desplazamiento es idéntica al
posicionamiento absoluto. De hecho, si el usuario no mueve la página
HTML en la ventana del navegador, no existe ninguna diferencia entre
estos dos modelos de posicionamiento.

• La principal característica de una caja posicionada de forma fija es que su
posición es inamovible dentro de la ventana del navegador. El
posicionamiento fijo hace que las cajas no modifiquen su posición ni
aunque el usuario suba o baje la página en la ventana de su navegador.


Posicionamiento flotante.
• Una caja flotante tratará de situarse lo más a la izquierda o lo más a la
derecha posible.
• La caja flotante deja de pertenecer al flujo normal de la página, esto
implica que las demás tratarán de ocupar si lugar.


• Las cajas flotantes tienen en cuenta el espacio ocupado por otras cajas flotantes,
pero no el espacio de cajas no flotantes (solapamiento):

• En caso de que una caja flotante no encuentre espacio para situarse lo buscará en
la línea inferior:


• La propiedad CSS que permite posicionar de forma flotante una caja se
denomina float:

• El valor none permite anular el posicionamiento flotante de forma que el
elemento se muestre en su posición original.


• Los elementos que se encuentran alrededor de una caja flotante adaptan sus contenidos para
que fluyan alrededor del elemento posicionado:

• La propiedad clear permite modificar el comportamiento por defecto del posicionamiento
flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante.



• Ejemplo práctico: Estructura con 3 columnas.


Visualización.
• CSS define 4 propiedades para controlar la visualización de los
elementos:
– display
– visibility
– overflow
– Z-index

• Con estas 4 propiedades podemos hacer visibles o invisibles
las cajas y por lo tanto controlar los solapamientos, crear
efectos avanzados etc…


Visualización.
Display y visibility.
• La propiedad display permite ocultar completamente un elemento haciendo que
desaparezca de la página. Como el elemento oculto no se muestra, el resto de
elementos de la página se mueven para ocupar su lugar.
• Por otra parte, la propiedad visibility permite hacer invisible un elemento, lo que
significa que el navegador crea la caja del elemento pero no la muestra. En este
caso, el resto de elementos de la página no modifican su posición, ya que aunque
la caja no se ve, sigue ocupando sitio.


Visualización.
• Las posibilidades de la propiedad display son mucho más avanzadas que
simplemente ocultar elementos. En realidad, la propiedad display modifica
la forma en la que se visualiza un elemento.

• Como se puede observar con display podremos forzar que un elemento de
bloque se muestre como un elemento de línea y viceversa.


Visualización.

• Ejemplo:


Visualización.
Overflow.
• CSS define la propiedad overflow para controlar la forma en la que se visualizan los
contenidos que sobresalen de sus elementos.

• Los valores de la propiedad overflow tienen el siguiente significado:
 visible: el contenido no se corta y se muestra sobresaliendo la zona reservada para
visualizar el elemento. Este es el comportamiento por defecto.
 hidden: el contenido sobrante se oculta y sólo se visualiza la parte del contenido que
cabe dentro de la zona reservada para el elemento.
 scroll : solamente se visualiza el contenido que cabe dentro de la zona reservada
para el elemento, pero también se muestran barras de scroll que permiten visualizar el
resto del contenido.
 auto: el comportamiento depende del navegador, aunque normalmente es el
mismo que la propiedad scroll. Ramón Ríos Sieiro 73

Visualización.
• Z-index
• Cuanto más alto sea el valor numérico, más cerca del usuario se muestra
la caja. Un elemento con z-index: 10 se muestra por encima de los
elementos con z-index: 8.
• La propiedad z-index sólo tiene efecto en los elementos posicionados,
por lo que es obligatorio que la propiedad z-index vaya acompañada de la
propiedad position


• Como el valor de la propiedad color se hereda, normalmente se establece la
propiedad color en el elemento body para establecer el color de letra de todos los
elementos de la página:
body { color: #777; }

• La única excepción de este comportamiento son los enlaces que se crean con la etiqueta <a>.
Aunque el color de la letra se hereda de los elementos padre a los elementos hijo, con los
enlaces no sucede lo mismo, por lo que es necesario indicar su color de forma explícita:

body, a { color: #777; }


• Font- Family: Permite especificar el tipo de letra (fuente) que queremos utiliza.
• Se pueden definir varias fuentes. Si una de ellas no está instalada se usará la siguiente.
• Como no es posible asegurar que el usuario tenga alguna fuente de las definidas, CSS
también permite indicar nombres genéricos de fuentes,que indican el aspecto del texto.

Valor genérico Fuente con aspecto similar

serif Times New Roman, Times, Georgia

sans - serif Arial, Helvética, Verdana

cursive Comic Sans

fantasy Impact
monospace Courier New

• Cuando la propiedad font-family toma un valor igual a sans-serif, el diseñador no indica al
navegador que debe utilizar la fuente Arial, sino que debe utilizar "la fuente que más se
parezca a Arial de todas las que tiene instaladas el usuario".


• font-Size: Permite especificar el tamaño de la fuente, de 3 formas:
– Tamaño absoluto:
• Especificando una medida en varias unidades: px , cm.
• Utilizando los valores: xx-small, x-small, small, medium, large, x-
large.

– Tamaño relativo: Toman como referencia el tamaño de letra del
elemento padre.
• Mediante un porcentaje.
• Mediante la unidad em.
• Utilizando los valores:larger, smaller.


• font – weight:

• Los valores que normalmente se utilizan son normal (el valor
por defecto) y bold para los textos en negrita. El valor normal
equivale al valor numérico 400 y el valor bold al valor
numérico 700.


• font- style: Normalmente la propiedad font-style se emplea
para mostrar un texto en cursiva mediante el valor italic.

shorthand : font
• CSS proporciona una propiedad tipo "shorthand" denominada font y que permite
indicar de forma directa algunas o todas las propiedades de la tipografía.
• Los dos únicos valores que se deben incluir obligatoriamente al utilizar la
propiedad font son el tamaño y el tipo de letra.
• El orden en el que se deben indicar las propiedades del texto es el siguiente:
– En primer lugar y de forma opcional se indican el font-style, font-variant y font-weight
en cualquier orden.
– A continuación, se indica obligatoriamente el valor de font-size seguido opcionalmente
por el valor de line-height (INTERLINEADO) separado por una barra inclinada (/):
– Por último, se indica obligatoriamente el tipo de letra a utilizar.


• text – align : define la alineación del texto.

• La propiedad text-align no sólo alinea el texto que contiene un
elemento, sino que también alinea todos sus contenidos (si
son elementos de línea) , como por ejemplo las imágenes.


• En realidad, esta propiedad establece la alineación de los contenidos (texto,
imágenes) que se encuentran dentro de un elemento de bloque.

• La única imagen que se muestra centrada es la que se encuentra dentro del <div>,
ya que la propiedad text-align no alinea un elemento sino sus contenidos:


• line-height: permite controlar la altura ocupada por cada línea de texto, es decir el
interlineado.

• Siempre que el número vaya sin unidades, se interpreta como múltiplo del tamaño
de la letra:

Estas 3 definiciones
son equivalentes.


• text-decoration:

• text-transform:


• vertical – align: Permite controlar la alineación vertical de varios elementos en una
misma línea.


• Los pseudoelementos para el texto nos permiten referirnos a una parte concreta
del texto: primera letra, primer párrafo …
• Para referirnos a un pseudoelemento utilizamos los : después de la etiqueta.
 firs letter: Permite referirnos a la primera letra:

 first line: Hacemos referencia a la primera línea:

• Con los pseudo elementos se pueden conseguir efectos interesantes sobre
el texto:


• Tamaño,color y decoración.
– Los estilos básicos para los enlaces se realizan modificando el texto del
mismo con las propiedades vistas anteriormente:


• Pseudoclases:
 CSS también permite aplicar diferentes estilos a un mismo enlace en función
de su estado.

 Para ello hace uso de las llamadas pseudoclases, en concreto para los enlaces
utiliza las 4 siguientes:

 link: Enlace a un sitio que aún no ha sido visitado.
 hover: El puntero está situado sobre el enlace.
 visited: El enlace ha sido activado.
 active: El enlace está sindo pinchado por el usuario.
 Para hacer referencia a una pseudoclase utilizamos los : después de la
referencia a la etiqueta a sin dejar ningún espacio en blanco por delante:

a:hover { text-decoration: none; }
 Por defecto los navegadores muestran los enlaces no visitados de color azul y
subrayados y los enlaces visitados de color morado.

• Enlaces con imágenes a la izquierda del texto:


• Enlaces con forma de botón:


• Por defecto las listas ordenadas se muestran con numeración decimal.
• Las listas desordenadas con circulo negro.
• Con list-style-type podemos controlar esta apariencia:

• Si queremos quitar todo tipo de numeración o símbolo ponemos esta
propiedad a none.

• Para añadir imágenes a la lista:

• La propiedad shorthand que permite establecer estilo, posición o imagen
es list-style:


• Menú vertical sencillo:
– 1. Definir anchura del menú.


- 2. Eliminar las viñetas automáticas y todos los márgenes y espaciados
aplicados por defecto:

- 3. Añadir un borde al menú de navegación y establecer el color de fondo y los
bordes de cada elemento del menú:


– 4. Aplicar estilos a los enlaces:
• Mostrarlos como un elemento de bloque para que ocupen todo el espacio de
cada <li> del menú:

• Añadir un espacio de relleno y modificar los colores y la decoración por defecto:


1. Eliminar la anchura y el borde del elemento
• Menú horizontal sencillo: <ul> y aplicar las propiedades float y clear:
– Partiendo del CSS del
menú vertical anterior:

2. Modificar la propiedad float de los elementos
<li> del menú:

3. Modificar el padding y los bordes de los enlaces
que forman el menú:

http://alvit.de/css-showcase/css-navigation-techniques-showcase.php

Tablas.
• Podemos especificar para las tablas (table) y para sus celdas(th,td) diversas
propiedades, como width, height, background o Font, todas ellas ya conocidas.

Si quisiéramos fusionar los bordes de las
celdas adyacentes:


FORMULARIOS.
• Alinear y formatear etiquetas:
– Los elementos <input> y <label> de los formularios son elementos en línea, por lo que el
aspecto que muestran los formularios por defecto, es similar al de la siguiente imagen:

– Vamos a aplicar los estilos necesarios para mostrar los label y los input alineados como
en la siguiente imagen:


FORMULARIOS.
• En primer lugar, se muestran los elementos <label> como elementos de bloque,
para que añadan una separación para cada campo del formulario. Además, se
añade un margen superior para no mostrar juntas todas las filas del formulario:

• El botón del formulario también se muestra como un elemento de bloque y se le
añade un margen para darle el aspecto final deseado:


FORMULARIOS.
• Si quisiéramos alinear las label a la izquierda de los input:

• Es necesario añadir un nuevo elemento (por ejemplo un <div>) que encierre a
cada uno de los campos del formulario (<label> y <input>). El esquema de la
solución propuesta es el siguiente:


FORMULARIOS.
• Resaltar el campo seleccionado:
– CSS define la pseudo-clase :focus, que permite aplicar estilos especiales al
elemento que en ese momento tiene el foco o atención del usuario.


Bibliografía y Webs:
• Libros:
– CSS3. Anaya Multimedia. Miguel Ángel Acera.
– Introducción a CSS (http://www.librosweb.es/css/)

• Webs útiles:
– http://www.w3schools.com/css/default.asp
– http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html
– http://www.alvit.de/handbook/
– http://www.cssmatic.com/
– http://lesliefranke.com/files/reference/csscheatsheet.html


Introducción a CSS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Introducción a CSS

Similar a Introducción a CSS (20)

Más de Ramón RS

Más de Ramón RS (6)

Último

Último (20)

Introducción a CSS