diw3_traspas

Hojas de Estilo CSS (II)

Diseño de Interfaces Web

DAW

Tema 3

Sergio de Mingo (IES G.M. Jovellanos)

Diseño de Interfaces Web (DAW) Hojas de Estilo CSS (II) Tema 3 1 / 34

1 Visualización

2 Estilos de elementos

3 Hacks y filtros


Visualización

Visualización de elementos

Son propiedades que permiten modificar la visualización de loselementos de un documento

Muy usados en combinación con JS o JQuery

Permiten conseguir que dinámicamente aparezcan y desaparezcanelementos de un documento sin necesidad de recargar o pedir eldocumento de nuevo al servidor

Este año veremos display y visibility


Visualización

Propiedad display

La propiedad display permite determinar la visualización delelemento en cuestión (como bloque, el línea, como tabla, etc.) oincluso ocultarlo

Un elemento ocultado no se muestra y el resto de elementos ocupansu lugar como si no existiera

Posee muchos valores posibles. Este año solo veremos tres:

block: Visualizar como bloque

inline: Visualizar el elemento en la propia línea

none: Oculta el elemento


Visualización

Propiedad visibility

La propiedad visibility permite ocultar o no un elemento, aunqueen este caso, el resto no ignoran su posición

Sus valores son:

visible: Visualizar el elemento

hidden: Oculta el elemento

collapse: Sirve para ocultar filas o columnas en tablas. Para el restode elementos, el resultado es similar a hidden


Visualización

Relación entre display, float y position

Pueden existir incoherencias entre los valores de estas tres propiedades

Se resuelven de la siguiente forma:

Si display vale none se ignoran float y position

Si position vale absolute o fixed, se considera que float valenone y display vale block

Para otros casos y siempre que float no valga none, la caja seposiciona de forma flotante y siempre se la considera block


Visualización

Pseudoclases

Nos permiten seleccionar un elemento concreto pero cuando seencuentra en un estado concreto. Las comunes para cualquierelemento son:

hover: Se aplica al elemento si este tiene el cursor sobre el

active: Se aplica al elemento si este está siendo clickeado

focus: Se aplica al elemento si tiene el foco del ratón (muy usado coninputs)


Visualización

Desbordamiento y solapamiento

El desbordamiento describe que hacer cuando los contenidos de unacaja superan las dimensiones de esta, por anchura, por altura o porambas

Esto se controla con la propiedad overflow. Sus valores son lossiguientes:

visible: El contenido no se corta y sobresale por el borde de la caja

hidden: El contenido sobrante no se muestra

scroll: El contenido sobrante no se muestra pero se visualizan barrasde scroll para llegar hasta el

auto: Depende del navegador. Normalmente es scroll


Visualización

Desbordamiento y solapamiento

Cuando un elemento se desborda sobre otro podemos controlar laposición tridimensional de cada uno

Quien se muestra delante y quien detrás

La propiedad para controlarlo es z-index

Su valor es numérico: 0 señala el fondo y a medida que crece la caja seacerca (virtualmente) hacia el usuario


Visualización

Anchuras y alturas máximas y mínimas

Podemos establecer medidas de alturas y anchuras máximas y mínimaspara cada elemento

Para esto podemos usar:

max-width

min-width

max-height

min-height


Visualización

Anchuras y alturas máximas y mínimas

Estas propiedades no funcionan con las últimas versiones de InternetExplorer

Las propiedades relacionadas con la anchura no tienen validez paraelementos de fila y las de altura no lo tienen para los elementos decolumna


Estilos de elementos

Estilo de texto

Algunas propiedades ya las conocemos

Nos centraremos en algunas que no hemos mencionado:

font-family

text-align

vertical-align

line-height



Familia de letra

Determina el tipo de letra usado en ese elemento

Podemos indicar, el tipo concreto, la familia genérica

Permite indicar más de un valor

El navegador irá probando cada uno de los valores hasta encontrar unoválido.

font-family: Arial, Helvetica,sans-serif;



Alineamiento vertical y horizontal

Para el alineamiento horizontal usamos la propiedad text-align conlos valores left, center y right

Para el alineamiento vertical usamos vertical-align

Los valores más usados para esta última son: baseline, sub,super, top, middle y bottom



Otras propiedades

line-height Determina la altura de línea

word-spacing Determina el espacio entre palabras

text-indent Fija el sangrado de la primera línea del párrafo

text-decoration Decoración del texto (subrayado, tachado, etc.)



Estilo de enlaces

Para decorar enlaces podemos usar selectores de pseudoclase paraenlaces (además de los ya estudiados)

:visited: Los visitados

:link: Los no visitados



Estilo de enlaces

Podemos usar también otras técnicas como eliminar el subrayado context-decoration

También usando bordes y colores de fondo podemos mostrar enlacescomo si fueran botones

Usar imágenes como fondo permite asociar pequeñas imágenesicónicas a enlaces



Estilo de tablas

Para las tablas podemos controlar también su estilo de bordes

border-collapse Fusiona o separa bordes de celdas adyacentes

border-spacing Controla la separación de bordes entre celdasadyacentes

empty-cells Permite visualizar o esconder celdas vacías

Con background y sus derivados podemos controlar el fondo de cadacelda



Estilo de listas

Las listas son elementos muy versátiles y que permiten gran cantidadde configuraciones:

list-style-type Estilo de las viñetas

list-style-image Determina imagen para cada viñeta



Estilo de listas

Incluso podemos mostrar los elementos horizontalmente. Muy usadoen menús y barras de navegación horizontales

ul.menu {background: #F4F4F4;list-style: none;margin: 0;padding: 0;

}

ul.menu li {float: left;width: 20}



Estilo de formularios

Mostrar botones como si fueran enlaces:

.enlace {border: 0;padding: 0;background-color:

transparent;color: blue;border-bottom: 1px solid

blue;}



Estilo de formularios

Introducir un ligero padding en las cajas de texto también aporta unefecto visual mejorado

Alinear etiquetas y elementos de entrada es otro truco que aportaseriedad a los formularios. Simplemente hemos de meter label e inputdentro de una misma capa. Luego al elemento label le añadiremos unfloat:left y un width determinado para separarlo del elemento deentrada


Hacks y filtros

Centrado

El centrado de capas y elementos es una de las pesadillas un diseñadorweb

La gran cantidad de resoluciones de cada dispositivo lo convierte enuna tarea difícil

El centrado puede ser horizontal y/o vertical


Hacks y filtros

Centrado horizontal

Es el centrado más fácil de conseguir. El centrado vertical es máscomplicado y se usa menos.

Consiste en meter todo el contenido que queremos centrar en unacapa con anchura fija (mejor relativa) y margenes laterales con valorauto. Los márgenes superior e inferior pueden dejarse a 0

El margen auto centra el elemento respecto de su elementocontenedor, en este caso body


Hacks y filtros

Centrado horizontal

<div id=’contenedor’><h1>Título</h1><p>.....

</div>

#contenedor{width:300px;margin: 0 auto;

}


Hacks y filtros

Sombras y transparencias

CSS 3 aporta una propiedad específica para el control de la sombraproyectada por un elemento

Su uso es algo complicado. Solo veremos su uso más simple

Se suele usar con cuatro argumentos pero podemos utilizar muchosmás


Hacks y filtros


Su valor se compone de cuatro medidas y un color:

medida 1 Indica el desplazamiento horizontal de la sombra

medida 2 Indica el desplazamiento horizontal de la sombra

medida 3 El radio utilizado para difuminar la sombra. A menosradio, sombra más sólida

medida 4 El radio con el que se expande la sombra. Si se estableceun valor positivo, la sombra se expande en todasdirecciones. Si se utiliza un valor negativo, la sombra secomprime.


Hacks y filtros


La opacidad de un elemento se controla con la propiedad opacity

Puede no estar contemplada por todos los navegadores

Se controla con un valor entre 0.0 y 1.0. A mayor valor, mayoropacidad del elemento


Hacks y filtros

Filtros para Internet Explorer

La incompatibilidad de ciertas propiedades CSS con las diferentesversiones de Internet Explorer es bien conocida

Los propios desarrolladores de IE han incluido un mecanismo algochapucero para determinar reglas especiales que solo serán procesadaspor el e ignoradas por el resto de navegadores

Se denominan filtros

Se basan en comentarios HTML que solo IE sabe procesar


Hacks y filtros

Filtros para Internet Explorer

Incluiríamos esta sentencia dentro de nuestro HEAD para cargarbasico_ies.css si el navegador del cliente es IE

<!–[if IE]><style type="text/css»@import ("basico_ie.css");</style><![endif]–>


Hacks y filtros

Versión para imprimir

Podemos crear una CSS concreta destinada a la impresión en papel dedocumentos HTML

Especialmente útil para páginas o aplicaciones destinadas a grandestextos: periódicos, blogs, etc.

Son CSS muy básicas que consisten principalmente en ocultar losprincipales elementos visuales para permitir una impresión austera yeconómica


Hacks y filtros


Primero ocultamos los elementos irrelevantes:

#cabecera, #menu, #lateral, #comentarios {display: none !important;

}

Luego corregimos la estructura eliminando los elementos flotante:

body, #contenido, #principal, #pie {float: none !important;width: auto !important;margin: 0 !important;padding: 0 !important;

}


Hacks y filtros


La clausula important no ha salido hasta el momento. Esta clausulahace que el navegador ignore la redefinición en cascada de esa regladando prioridad a la regla que lo acompaña.

Únicamente nos queda enlazar la CSS usando el atributomedia=print en la cabecera de nuestro documento

<link ... href=’/css/imprimir.css’ media=’print’ />


(cc) 2011-2013 Sergio de Mingo

Some rights reserved. This work is licensed under a Creative CommonsAttribution-Share Alike 3.0 Spain License, available athttp://creativecommons.org/licenses/by-sa/3.0/

http://apuntes-fp.blogspot.com

[email protected]


diw3_traspas

Documents

Transcript of diw3_traspas