Estilos>>Diseño visual
Bajo el epígrafe de diseño visual se incluyen propiedades referidas a la forma en que podemos controlar cómo se muestra un elemento, cómo aparecerá una imagen en relación a otro elemento, el posicionamiento de un elemento respecto a su posición habitual o con una posición fija dentro de la página, la determinación de la visibilidad de un elemento y el orden en el que se mostrarán las capas si estas se superponen, la creación de recortes para mostrar la información y cómo mostrarla cuando supera el espacio asignado.
Ya hemos visto que hay elementos en bloque y en línea y que su forma de construir el cuadro contenedor difiere bastante. Mediante el uso de CSS podemos indicarle al navegador que debe mostrar un elemento creando un tipo de cuadro distinto al que le correspondería por su naturaleza. En el editor de CSS de N|VU podrás acceder a esta propiedad dentro de la pestaña caja.
Propiedad: display
Valores: aunque
podríamos considerar otros recogidos en la
especificación vamos a tener en cuenta sólo inline
y block para intercambiar la forma de
presentación de las dos principales disposiciones.
Ejemplo 1
Si utilizo el selector span para marcar una palabra de una
frase y aplicarle un estilo lo normal es que ese estilo genere un
cuadro de elemento en línea ya que esa es la presentación
predeterminada para los fragmentos de texto. A continuación
se repite este mismo texto aplicándole la propiedad
display:block a la palabra
presentación.
Resultado
Si utilizo el selector span para marcar una palabra de una frase y aplicarle un estilo lo normal es que ese estilo genere un cuadro de elemento en línea ya que esa es la presentación predeterminada para los fragmentos de texto. A continuación se repite este mismo texto aplicándole la propiedad display:block a la palabra presentación.
Ejemplo 2
En el segundo ejemplo marcaremos los párrafos con
display:inline
Este es el segundo párrafo. Ahora repetimos los dos párrafos correspondientes a este ejemplo y aparecerán uno a continuación de otro como si no hubiese salto de párrafo.
Resultado
En el segundo ejemplo
marcaremos el segundo párrafo con display:inline
Este es el segundo párrafo. Ahora repetimos los dos párrafos correspondientes a este ejemplo y aparecerán uno a continuación de otro como si no hubiese salto de párrafo.
Se trata de una propiedad que encuentra su principal aplicación en las imágenes, aunque también nos permitirá situar elementos textuales y conseguir interesantes efectos de inclusión, especialmente si utilizamos como complemento los fondos. En el editor de CSS de N|VU podrás acceder a esta propiedad dentro de la pestaña caja.
Propiedad: float
Valores: left
hará flotar el elemento afectado en la zona izquierda, right
en la derecha y none
impedirá la flotación haciendo que
el elemento se
muestre en la posición que le corresponde en el flujo de la
página.
Ejemplos: En el ejemplo que se muestra se
han creado dos identificadores a los que se les ha aplicado la
propidedad float y algunas más de
fondos,
márgenes y rellenos para que su presentación
visual tenga "aire" entre las diferentes zonas. Ver
ejemplo
Si no nos interesa que a un determinado elemento se le añadan zonas flotantes podemos indicarlo mediante una propiedad específica. En el editor de CSS de N|VU podrás acceder a esta propiedad dentro de la pestaña caja.
Propiedad: clear
Valores: left
impedirá la flotación de un
elemento a la
izquierda del que lleva la propiedad, right
hará lo propio a la derecha y
both
afectará a ambos lados.
Ejemplos: Se repite el ejemplo anterior pero se ha evitado la flotación de la zona a la que habíamos llamado mancheta. Ver ejemplo
Antes de continuar recordemos cual es el proceso habitual de generación de páginas en una ventana de ordenador. Es lo que se denomina flujo normal:
Vamos a comprobar con un ejercicio práctico lo que acabamos de comentar.
margin:50px y border:thin
solid blue para el primero margin:10px y border:thin
dotted red para el segundobody le añadieras el
estilo margin:0px 
y
alterna con 
para
comparar los efectos visuales obtenidos.<span>
y su
cierre </span>.
Aplícale al delimitador el
estilo border:thin solid red.<span>
y </span> para aplicarles el
mismo estilo de antes y ve a
la pestaña
para comprobar la ausencia
de los bordes al final y al principio de línea.Para poder modificar la apariencia visual disponemos en CSS2
de la posibilidad de alterar el flujo normal especificando la
posición de los elementos. Se trata de una propiedad muy
potente y, aunque podemos aplicarla directamente sobre cualquier
elemento, la recomendación sería que lo hicieras
creando contenedores de bloque con la etiqueta <div>
y
especificando en
ellos la posición.
Así
pues, antes de ver los valores y los efectos de los mismos comentemos
que N|VU dispone de un icono que nos permite generar una capa, que
no es más que un contenedor en bloque, con una simple
pulsación sobre el icono 
que creará una capa
vacía
que se irá rellenando con el contenido que vayamos
tecleando. Si lo que pretendemos es crear una capa a partir de contenidos
que ya estaban incluidos en la página basta con que los
señalemos arrastrando y pulsemos el mismo icono para que se
genere el contenedor para englobarlos a todos. Tanto en uno como en
otro caso la capa generada lo es con posición absoluta, por
lo que si lo único que pretendíamos era insertar
una etiqueta div puede resultar más cómodo
hacerlo utilizando el selector desplegable de tipo de
párrafo o tecleando las etiquetas de apertura y cierre tras
haber marcado el texto que queremos convertir en div y elegido insertar
html.
Cuando nos situemos sobre una capa posicionada absolutamente
el programa lo
indicará haciendo aparecer sus límites y
modificando el icono de las capas que aparecerá como 
.
Podremos moverla de un sitio
a otro si pulsamos sobre 
y
arrastramos hasta la nueva posición o bien modificar su
tamaño utilizanod los tiradores de los vértices y
el centro de los lados.
Para modificar los estilos que afectan a la capa bastará con hacer doble clic sobre su interior y modificar o añadir las propiedades que necesitemos.
para
crear una capa que los incluya.
para
crear una capa vacía y teclea un párrafo para
darle contenido. background-color para
adjudicarle un color de
fondo.
para modificar el orden en
que se apilan. Puedes realizar todo el trabajo sobre la
pestaña ,
pero
para ver el efecto deberás pulsar sobre una zona fuera de
las capas, de forma que no esté señalada ninguna
de ellas.Habrás comprobado que al crear las capas N|VU ha
introducido unos códigos de estilo. Como las hemos movido
hasta situarlas en un punto concreto de la página ha
utilizado el valor absolute que es uno de
los posibles. En el editor de CSS de N|VU podrás
acceder a esta propiedad dentro de la pestaña caja. El tema
del posicionamiento es uno de los de mayor repercusión para
el diseño de páginas con CSS. Puedes consultar
una ampliación
de conceptos que te ayudará a comprender este tema
en profundidad.
Propiedad: position
Valores: Esta propiedad
indicará la forma de calcular la posición del
elemento utilizando los valores absolute,
relative, fixed
y static, que es el valor por
defecto, pero para completar el cálculo
será necesario
añadir luego las propiedades left,
top, bottom
o right
indicando las distancias en cualquiera de las unidades admitidas
respecto a la caja contenedora. Estas distancias habra que indicarlas
en el editor de CSS de N|VU dentro de la pestaña caja en la
sección desplazamientos.
Ejemplos:
Absolute. Ver
ejemplo
Relative. La posición
relativa se calcula a partir
de la posición que ocuparía un elemento si
siguiera el flujo normal. El resto de los elementos no se ajustan a la
posición modificada por lo que puede ocurrir que el elemento
se superponga sobre otros. Ver
ejemplo
Fixed. Se trata de una variante de la
posición
absoluta cuyo efecto es similar al de las imágenes de fondo
que se mantienen en una posición fija independientemente del
desplazamiento de la página. Cuando se aplican a un medio
impreso, formando algo similar a una cabecera, se repiten en todas las
páginas. Ver
ejemplo
Static
es el valor por defecto y no produce ninguna modificación en
el posicionamiento del elemento, por lo que su misión puede
ser más bien la de restablecer el flujo de la
página después de haber situado algún
elemento posicionado.
Internet Explorer
6 no soporta la posición fixed. Para
poder utilizarla y que se vea en este navegador hay que aplicar un
parche que veremos en la sección de recursos.Como el nombre de la propiedad sugiere se refiere a la posibilidad de hacer que un elemento resulte visible o invisible. Su utilidad reside en la combinación con scripts que permitan mostrar u ocultar capas al realizar determinadas acciones con el ratón, pero este tema excede los contenidos de este curso, aunque puedes realizar alguna búsqueda sobre "javascript para mostrar y ocultar capas" para encontrar referencias. En el editor de CSS de N|VU podrás acceder a esta propiedad dentro de la pestaña caja.
Propiedad: visibility
Valores: Visible
que es el
valor por defecto o hidden para ocultarla
Ejemplos: Ver el código del ejemplo
Tenemos la posibilidad de "encerrar" un elemento dentro de un recuadro con unas dimensiones determinadas. El resto del contenido quedará recortado y no se mostrará. Esta propiedad no está incluida en el editor CSS de N|VU por lo que habrá que insertar el código manualmente.
Propiedad: clip
Valores: Para definir la zona de
recorte estableceremos las coordenadas de un rectángulo que
hará de ventana visible del documento. Los valores que se
aplican indican la posición de los vértices
superior izquierdo, superior derecho,
inferior derecho e inferior izquierdo respecto a los bordes
superior e izquierdo del contenedor en el que se encuentra la
imagen, y se anotan en la forma rect (valor, valor,
valor, valor)donde el primer valor sirve para calcular la
distancia hasta el borde superior, el segundo la distancia de ese
vértice hasta el borde izquierdo, el tercero se calcula de
nuevo respecto al borde superior y el último se calcula
respecto al borde izquierdo y sirve para determinar la distancia del
último vertice (y también del primero del que
sólo conocíamos su distancia al borde superior)
Ver
ejemplo
Internet Explorer
6 no soporta la propiedad clip.
¿Qué ocurre cuando definimos unas dimensiones exactas para un elemento y el contenido del mismo desborda los límites establecidos? Dependerá de los valores que adopte la propiedad que controla el desbordamiento. En el editor de CSS de N|VU podrás acceder a esta propiedad dentro de la pestaña caja.
Propiedad: overflow
Valores: Si no se especifica
valor de overflow los navegadores
utilizarán visible
como valor por defecto. Los valores posibles son:
Visible: Se desprecia la
altura establecida, ampliándola hasta el tamaño
necesario para que se pueda mostrar todo el contenido. Hay una
diferencia importante en el modo de realizar este ajuste
automático de la altura: Internet Explorer desplaza hacia
abajo el resto de los elementos, mientras que Mozilla, Konqueror o
Galeón hacen la ampliación pero mantienen la
referencia de la altura original para mostrar los siguientes elementos,
con lo que el resultado es que el contenido del elemento que se
autoamplia se superpone al de los siguientes.Hidden: Se recorta el
contenido mostrando lo que cabe en las dimensiones establecidas, pero
no se muestran barras de desplazamiento para poder acceder al resto del
contenido Scroll:
Se incorporan al
bloque barras de desplazamiento horizontal y vertical, incluso si no
son necesarias porque el contenido ocupe menos espacio que el
establecido en las dimensiones del elemento. Igual que en el caso
anterior se recorta el contenido, pero ahora sí que podremos
visualizarlo al disponer de barras de desplazamiento. Auto:
Si el contenido no puede
mostrarse completo en las dimensiones marcadas se incorpora una barra
de desplazamiento vertical para poder acceder a lo que no queda
visible. Si existe algún elemento que desborde las
dimensiones horizontales también se incluiría una
barra de desplazamiento horizontal. Es una propiedad que tiene su principal aplicación para las imágenes, cosa que ya se podía hacer con HTML, pero puede aplicarse a cualquier elemento en línea. Esta propiedad no está incluida en el editor CSS de N|VU por lo que habrá que insertar el código manualmente.
Propiedad: vertical-align
Valores y ejemplos:
Se utiliza la imagen para
mostrar el efecto de cada valor
baseline
el elemento
afectado alinea su borde inferior con el borde inferior del elemento
padre. sub
el elemento afectado
alinea su borde inferior como si fuera un subíndicesuper
el elemento afectado
alinea su borde inferior como si fuera un superíndice top
el elemento afectado
alinea su borde superior con el borde superior del elemento
más alto de la línea, independientemente de que
sea texto o imagen
text-top el
elemento
afectado alinea su borde superior con el borde superior de la fuente
base del elemento padre (nótese
que no toma en cuenta las modificaciones del tamaño
de
la fuente) middle
el elemento afectado
alinea su línea central con con medio del elemento padre bottom el
elemento afectado
alinea su borde inferior con el elemento más bajo de la línea
(en
este caso se toma en cuenta la modificación de
tamaño de la fuente que ha desplazado el borde inferior de
la letra j) text-bottom el elemento
afectado alinea su borde inferior con el borde inferior de la fuente
base del elemento padre (nótese que no toma en cuenta el
elemento más bajo)
longitud expresada en
cualquiera de las unidades válidas, tomando como referencia
el borde inferior del elemento afectado e indicadas en positivo (.3cm) o en negativo (-10px)
porcentaje
donde la
posición 0% equivaldría
a baseline, pudiendo expresarlo en negativo
(-50%)o
positivo
(100%)El navegador modifica de forma automática la forma en que muestra el cursr en función de la posición del ratón sobre los elementos de la página, pero también podemos especificarlo mediante estilos. Esta propiedad no está incluida en el editor CSS de N|VU por lo que habrá que insertar el código manualmente.
Propiedad: cursor
Valores y ejemplos: Pasando el
ratón sobre cada uno de los valores verás cambiar
el cursor de acuerdo a cada uno de ellos: crosshair,default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help
.
Además de poder colocar las capas en la posición que se desee, también se puede decidir el orden en el que se irán apilando, de forma que unas zonas se superpongan a otras. Esta propiedad sólo puede aplicarse a capas que tengan establecido el atributo position. En el editor de CSS de N|VU podrás acceder a esta propiedad dentro de la pestaña caja.
Propiedad: z-index
Valor: Se aplican valores numéricos, de forma que un valor más alto indica que el elemento está por encima de los demás que tengan valor más bajo o que no tengan establecida propiedad de profundidad
Ejemplo:
<div id="salmon" style="position:relative;
background-color: rgb(255, 204, 204); border: thin solid rgb(0, 51,
102); width:220px;
height:200px; z-index:1">
<div id="naranja" style="position:absolute; margin-left:40px;
margin-top: 40px; background-color: rgb(255, 221, 119); border: thin
solid rgb(255, 170, 102);
width:340px; height:170px; z-index:2"></div>
</div>
