mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-06 00:56:54 +00:00
893 lines
30 KiB
HTML
893 lines
30 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html lang="es-es">
|
|
<head>
|
|
|
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
|
|
|
|
|
|
|
|
|
|
|
|
<title>CSS: diseño visual</title>
|
|
<meta name="author" content="Raúl Luna">
|
|
<!-- parche de compatibilización con CSS 2 para navegadores microsoft --><!--[if lt IE 7]>
|
|
<script src="../ie7/ie7-standard-p.js" type="text/javascript"></script>
|
|
<![endif]-->
|
|
|
|
|
|
|
|
|
|
<link href="../nvu2005.css" type="text/css" rel="stylesheet">
|
|
|
|
<link href="../multi1.css" type="text/css" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="css10.css" type="text/css">
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div id="localizador">
|
|
<p>Estilos>>Diseño visual</p>
|
|
|
|
</div>
|
|
|
|
<div id="flechadcha">
|
|
<a href="absolutamenterelativo.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="css9.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
|
|
<div class="solapas">
|
|
<ul>
|
|
|
|
|
|
<li class="activo"><a href="css10.html">Diseño visual</a></li>
|
|
|
|
|
|
<li><a href="absolutamenterelativo.html">Absolutamente relativo</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="principal">
|
|
|
|
|
|
<h2>Diseño visual</h2>
|
|
|
|
|
|
<p> 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.</p>
|
|
|
|
|
|
<h3>Cómo se muestran los elementos</h3>
|
|
|
|
|
|
<div>
|
|
<p>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.</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p><strong>Propiedad: </strong><code>display</code></p>
|
|
|
|
|
|
<p><strong>Valores:</strong> aunque
|
|
podríamos considerar otros recogidos en la
|
|
especificación vamos a tener en cuenta sólo <code>inline</code>
|
|
y <code>block</code> para intercambiar la forma de
|
|
presentación de las dos principales disposiciones. </p>
|
|
|
|
|
|
<div class="ejemplo">
|
|
<p> <strong>Ejemplo 1</strong></p>
|
|
|
|
|
|
<p>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 <span style="border: 1px dotted orange;">presentación</span>
|
|
predeterminada para los fragmentos de texto. A continuación
|
|
se repite este mismo texto aplicándole la propiedad
|
|
<code>display:block</code> a la palabra
|
|
presentación. </p>
|
|
|
|
|
|
<p><strong>Resultado</strong></p>
|
|
|
|
|
|
<p>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 <span style="border: 1px dotted orange; display: block;">presentación</span>
|
|
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.</p>
|
|
|
|
|
|
<p><strong>Ejemplo 2 </strong></p>
|
|
|
|
|
|
<p>En el segundo ejemplo marcaremos los párrafos con
|
|
<code>display:inline</code></p>
|
|
|
|
|
|
<p>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.</p>
|
|
|
|
|
|
<p><strong>Resultado</strong></p>
|
|
|
|
|
|
<p style="display: inline;">En el segundo ejemplo
|
|
marcaremos el segundo párrafo con <code>display:inline</code></p>
|
|
|
|
|
|
<p style="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.</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p> </p>
|
|
|
|
|
|
<h3>Posición flotante</h3>
|
|
|
|
|
|
<p>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. </p>
|
|
|
|
|
|
<p><b>Propiedad:</b> <code>float</code> </p>
|
|
|
|
|
|
<p><b>Valores:</b> <code>left</code>
|
|
hará flotar el elemento afectado en la zona izquierda, <strong><code>right</code>
|
|
</strong> en la derecha y <strong><code> none</code>
|
|
</strong>impedirá la flotación haciendo que
|
|
el elemento se
|
|
muestre en la posición que le corresponde en el flujo de la
|
|
página. </p>
|
|
|
|
|
|
<div class="ejemplo">
|
|
<p><b>Ejemplos:</b> En el ejemplo que se muestra se
|
|
han creado dos identificadores a los que se les ha aplicado la
|
|
propidedad <code>float</code> y algunas más de
|
|
fondos,
|
|
márgenes y rellenos para que su presentación
|
|
visual tenga "aire" entre las diferentes zonas. <a href="javascript:void(0)" onclick="window.open('muestra12.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=690,height=400')">Ver
|
|
ejemplo </a></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h2>Zonas de flotación prohibidas</h2>
|
|
|
|
|
|
<p>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. </p>
|
|
|
|
|
|
<p><b>Propiedad:</b> <code>clear</code></p>
|
|
|
|
|
|
<p><b>Valores: </b><code>left</code><strong>
|
|
</strong>impedirá la flotación de un
|
|
elemento a la
|
|
izquierda del que lleva la propiedad, <code>right</code><strong>
|
|
</strong>hará lo propio a la derecha y <code>
|
|
both</code><strong>
|
|
</strong>afectará a ambos lados.</p>
|
|
|
|
|
|
<div class="ejemplo">
|
|
<p><b>Ejemplos:</b> Se repite el ejemplo anterior
|
|
pero se ha evitado la flotación de la zona a la que
|
|
habíamos llamado mancheta. <a href="javascript:void(0)" onclick="window.open('muestra13.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=690,height=500')">Ver
|
|
ejemplo </a></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>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 <strong>flujo normal</strong>:</p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>Los elementos de bloque generan cajas de bloque que se
|
|
sitúan verticalmente, una a continuación de otra
|
|
en su orden de aparición en la página, comenzando
|
|
por la parte superior de la ventana. El espaciado vertical entre un
|
|
elemento y el siguiente se calcula tomando el mayor valor de margen
|
|
superior o inferior de los elementos implicados.<br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>Los elementos en línea generan cajas de
|
|
línea que se disponen horizontalmente uno a
|
|
continuación de otro en su orden de aparición en
|
|
la página, desde el inicio del bloque que las contiene. Si
|
|
hay dos cajas de línea contiguas sus espaciados horizontales
|
|
se mantienen, sumándose sus anchuras. Cuando una caja de
|
|
línea ocupa más del espacio disponible se rompe
|
|
automáticamente generando una nueva caja en el
|
|
renglón inferior. En ese caso, los bordes,
|
|
márgenes y rellenos no tienen aplicación en el
|
|
borde de ruputura ni en el de inicio de la siguiente caja.</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<div class="practicas">
|
|
<img style="width: 29px; height: 29px; float: left;" alt="Actividad 92" title="Actividad 92" src="../imagenes/numeracion/noventaydos.gif">
|
|
<p>Vamos a
|
|
comprobar con un ejercicio práctico lo que acabamos de
|
|
comentar.</p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>Crea una página nueva con dos
|
|
párrafos y aplícales a cada uno de ellos un
|
|
estilo en línea que recoja las siguientes propiedades:
|
|
|
|
<ul>
|
|
|
|
|
|
<li><code>margin:50px</code> y <code>border:thin
|
|
solid blue</code> para el primero </li>
|
|
|
|
|
|
<li><code>margin:10px</code> y <code>border:thin
|
|
dotted red</code> para el segundo</li>
|
|
|
|
|
|
<li>también sería conveniente que al
|
|
selector <code>body</code> le añadieras el
|
|
estilo <code>margin:0px</code> </li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>Añade un nuevo párrafo sin
|
|
características especiales.</li>
|
|
|
|
|
|
<li>Modifica los valores de los márgenes en la
|
|
pestaña <img style="width: 99px; height: 21px;" alt="Código fuente" src="../imagenes/pestanacodigofuente.png">
|
|
y
|
|
alterna con <img style="width: 103px; height: 20px;" alt="Vista preliminar" src="../imagenes/pestanavistapreliminar.png">
|
|
para
|
|
comparar los efectos visuales obtenidos.</li>
|
|
|
|
|
|
<li>Selecciona una palabra del primer párrafo
|
|
encerrándola entra el delimitador <code><span></code>
|
|
y su
|
|
cierre <code></span></code>.
|
|
Aplícale al delimitador el
|
|
estilo <code>border:thin solid red</code>.</li>
|
|
|
|
|
|
<li>Haz exactamente lo mismo con la palabra anterior o
|
|
posterior a la que acabas de trabajar.</li>
|
|
|
|
|
|
<li>Como tienes a la vista el resultado selecciona un grupo de
|
|
palabras que incluyan un salto de línea y
|
|
enciérralas entre <code><span></code>
|
|
y <code></span></code> para aplicarles el
|
|
mismo estilo de antes y ve a
|
|
la pestaña <img style="width: 103px; height: 20px;" alt="Vista preliminar" src="../imagenes/pestanavistapreliminar.png">
|
|
para comprobar la ausencia
|
|
de los bordes al final y al principio de línea.</li>
|
|
|
|
|
|
<li>Si quieres puedes guardar la página como <strong>actividad92.html</strong></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>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 <code><div></code>
|
|
y
|
|
especificando en
|
|
ellos la posición. </p>
|
|
|
|
|
|
<img class="flotder" alt="Capa creada con N|VU" src="imagenes/imagendecapa.png" style="width: 302px; height: 155px;">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 <img alt="Icono de capa" style="width: 25px; height: 24px;" src="imagenes/icocapa.png">
|
|
que creará una capa
|
|
vacía
|
|
que se irá rellenando con el contenido que vayamos
|
|
tecleando. <br>
|
|
|
|
|
|
<p>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 <span class="refmenu">insertar<img class="imgcentr" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="flechamenu.png">html</span>. </p>
|
|
|
|
|
|
<p>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 <img style="width: 24px; height: 26px;" alt="Icono de capa activa" title="Icono de capa activa" src="imagenes/icocapaactiva.png">.
|
|
Podremos moverla de un sitio
|
|
a otro si pulsamos sobre <img alt="Tirador para mover capas" title="Tirador para mover capas" style="width: 16px; height: 16px;" src="imagenes/tiradordecapa.png"> 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. </p>
|
|
|
|
|
|
<p>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.</p>
|
|
|
|
|
|
<div class="practicas">
|
|
<img style="width: 29px; height: 29px; float: left;" alt="Actividad 93" title="Actividad 93" src="../imagenes/numeracion/noventaytres.gif">
|
|
<ul>
|
|
|
|
|
|
<li>Crea una página nueva con dos
|
|
párrafos y selecciónalos </li>
|
|
|
|
|
|
<li>Pulsa <img alt="Icono de capa" style="width: 25px; height: 24px;" src="imagenes/icocapa.png">
|
|
para
|
|
crear una capa que los incluya.</li>
|
|
|
|
|
|
<li>Desplaza la capa hacia otra posición y haz clic
|
|
para situar el cursor fuera de la capa.</li>
|
|
|
|
|
|
<li>Pulsa nuevamente <img alt="Icono de capa" style="width: 25px; height: 24px;" src="imagenes/icocapa.png">
|
|
para
|
|
crear una capa vacía y teclea un párrafo para
|
|
darle contenido. </li>
|
|
|
|
|
|
<li>Haz un doble clic en el interior de una de las capas y
|
|
utiliza la propiedad <code>background-color</code> para
|
|
adjudicarle un color de
|
|
fondo.</li>
|
|
|
|
|
|
<li>Arrastra la nueva capa de forma que se superponga sobre la
|
|
anterior. </li>
|
|
|
|
|
|
<li>Utiliza los iconos <img style="width: 48px; height: 25px;" alt="Iconos para ordenar el apilamiento de capas" title="Iconos para ordenar el apilamiento de capas" src="imagenes/icoordendecapas.png">
|
|
para modificar el orden en
|
|
que se apilan. Puedes realizar todo el trabajo sobre la
|
|
pestaña <img style="width: 103px; height: 20px;" alt="Vista preliminar" src="../imagenes/pestanavistapreliminar.png">,
|
|
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.</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h3>Posición de un elemento</h3>
|
|
|
|
|
|
<p>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 <code>absolute</code> 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 <a href="absolutamenterelativo.html">ampliación
|
|
de conceptos</a> que te ayudará a comprender este tema
|
|
en profundidad.</p>
|
|
|
|
|
|
<p><strong>Propiedad</strong>: <code>position</code></p>
|
|
|
|
|
|
<p><strong>Valores:</strong> Esta propiedad
|
|
indicará la forma de calcular la posición del
|
|
elemento utilizando los valores <code>absolute</code>,
|
|
<code><strong>relative</strong></code>, <code>fixed</code>
|
|
y <code>static</code>, que es el valor por
|
|
defecto, pero para completar el cálculo
|
|
será necesario
|
|
añadir luego las propiedades <code>left</code>,
|
|
<code>top</code><strong>, </strong><code>bottom</code><strong>
|
|
</strong> o <code>right</code>
|
|
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.</p>
|
|
|
|
|
|
<div class="ejemplo">
|
|
<p><b>Ejemplos:</b> </p>
|
|
|
|
|
|
<p><code>Absolute</code>. <a href="javascript:void(0)" onclick="window.open('muestra14.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=690,height=400,resizable=yes')">Ver
|
|
ejemplo</a></p>
|
|
|
|
|
|
<p><code>Relative</code>. 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. <a href="javascript:void(0)" onclick="window.open('muestra15.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=760,height=350,scrollbars=auto,resizable=yes')">Ver
|
|
ejemplo</a></p>
|
|
|
|
|
|
<p><code>Fixed</code>. 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. <a href="javascript:void(0)" onclick="window.open('muestra16.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=760,height=350')">Ver
|
|
ejemplo</a></p>
|
|
|
|
|
|
<p><code>Static</code>
|
|
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. </p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="avisos"><img style="width: 28px; height: 25px;" alt="Atención" src="../imagenes/atencion.gif">Internet Explorer
|
|
6 no soporta la posición <code>fixed. </code>Para
|
|
poder utilizarla y que se vea en este navegador hay que aplicar un
|
|
parche que veremos en la sección de recursos.</div>
|
|
|
|
|
|
<h3>Visibilidad</h3>
|
|
|
|
|
|
<p>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.</p>
|
|
|
|
|
|
<p><strong>Propiedad:</strong> <code>visibility</code>
|
|
</p>
|
|
|
|
|
|
<p><strong>Valores: </strong>Visible<strong> </strong>
|
|
que es el
|
|
valor por defecto o <code>hidden</code> para ocultarla</p>
|
|
|
|
|
|
<p><strong>Ejemplos:</strong> Ver el
|
|
código del ejemplo</p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li><a href="javascript:void(0)" onclick="window.open('muestra17.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=450,height=250')">Ver
|
|
un ejemplo en funcionamiento </a><br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li><a href="javascript:void(0)" onclick="window.open('muestra18.htm','','statusbar=0,menubar=0,toolbar=0,scrollbar=1,top=0,left=0,width=800,height=630,resizable=yes')">Ver
|
|
el código</a><br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<h2>Recortes</h2>
|
|
|
|
|
|
<p>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. </p>
|
|
|
|
|
|
<p><strong>Propiedad:</strong> <code>clip</code>
|
|
</p>
|
|
|
|
|
|
<p><strong>Valores: </strong>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 <code>rect (valor, valor,
|
|
valor, valor)</code>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)<strong>
|
|
<a href="javascript:void(0)" onclick="window.open('muestra19.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=790,height=450')">Ver
|
|
ejemplo</a></strong></p>
|
|
<div class="avisos"><img style="width: 28px; height: 25px;" alt="Atención" src="../imagenes/atencion.gif">Internet Explorer
|
|
6 no soporta la propiedad <code>clip. </code></div>
|
|
<p>
|
|
</p>
|
|
|
|
|
|
<h3> Desbordamiento</h3>
|
|
|
|
|
|
<p>¿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.</p>
|
|
|
|
|
|
<p><strong>Propiedad:</strong> <code>overflow</code>
|
|
</p>
|
|
|
|
|
|
<p><strong>Valores: </strong>Si no se especifica
|
|
valor de <code>overflow</code> los navegadores
|
|
utilizarán <code>visible</code>
|
|
como valor por defecto. Los valores posibles son:</p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li><code>Visible</code>: 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.<br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li><code>Hidden</code>: 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 <br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li><code>Scroll</code><strong>:</strong>
|
|
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. <br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li><code>Auto</code><strong>:</strong>
|
|
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. </li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<p><a href="javascript:void(0)" onclick="window.open('muestra20.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=690,height=700')">Ver
|
|
ejemplo </a></p>
|
|
|
|
|
|
<h3> Alineamiento vertical </h3>
|
|
|
|
|
|
<p>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.</p>
|
|
|
|
|
|
<p><strong>Propiedad:</strong> <code>vertical-align</code></p>
|
|
|
|
|
|
<p><strong>Valores y ejemplos: </strong></p>
|
|
|
|
|
|
<p>Se utiliza la imagen <img src="../imagenes/atencion.gif" height="25" width="28"> para
|
|
mostrar el efecto de cada valor </p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li><code>baseline</code><strong> </strong>
|
|
el elemento
|
|
afectado alinea su borde inferior con el borde inferior del elemento
|
|
padre. <strong><img src="../imagenes/atencion.gif" alt=" " style="vertical-align: baseline;" height="25" width="28"></strong></li>
|
|
|
|
|
|
<li><strong> </strong><code>sub</code><strong>
|
|
</strong>el elemento afectado
|
|
alinea su borde inferior como si fuera un subíndice<strong><img src="../imagenes/atencion.gif" alt=" " style="vertical-align: sub;" height="25" width="28"></strong></li>
|
|
|
|
|
|
<li><strong> </strong><code>super</code><strong>
|
|
</strong>el elemento afectado
|
|
alinea su borde inferior como si fuera un superíndice <img src="../imagenes/atencion.gif" alt=" " style="vertical-align: super;" height="25" width="28"></li>
|
|
|
|
|
|
<li><strong> </strong><code>top</code><strong>
|
|
</strong>el elemento afectado
|
|
alinea su borde superior con el borde superior del elemento
|
|
más alto de la línea, independientemente de que
|
|
sea <span class="grande">texto</span> o imagen<img src="../imagenes/flechaarriba.gif" height="29" width="29">
|
|
<strong><strong><img src="../imagenes/atencion.gif" style="vertical-align: top;" alt=" " height="25" width="28"></strong></strong></li>
|
|
|
|
|
|
<li><code> text-top</code><strong> </strong>el
|
|
elemento
|
|
afectado alinea su borde superior con el borde superior de la fuente
|
|
base del elemento padre<strong> </strong>(nótese
|
|
que no toma en cuenta las modificaciones del <span class="muygrande">tamaño</span>
|
|
<strong><strong><img src="../imagenes/atencion.gif" style="vertical-align: text-top;" alt=" " height="25" width="28"></strong></strong>de
|
|
la fuente) </li>
|
|
|
|
|
|
<li><strong> </strong><code>middle</code><strong>
|
|
</strong>el elemento afectado
|
|
alinea su línea central con con medio del elemento padre <strong><strong><img src="../imagenes/atencion.gif" alt=" " style="vertical-align: middle;" height="25" width="28"></strong></strong></li>
|
|
|
|
|
|
<li><code>bottom</code><strong> </strong>el
|
|
elemento afectado
|
|
alinea su borde inferior con el elemento más <span class="grande">bajo</span> de la línea<strong>
|
|
<strong><img src="../imagenes/atencion.gif" alt=" " style="vertical-align: bottom;" height="25" width="28"></strong></strong>(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) </li>
|
|
|
|
|
|
<li><code> text-bottom</code> 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 <span class="muygrande">bajo</span>)
|
|
<img src="../imagenes/atencion.gif" alt=" " style="vertical-align: text-bottom;" height="25" width="28"></li>
|
|
|
|
|
|
<li><code> longitud</code> expresada en
|
|
cualquiera de las unidades válidas, tomando como referencia
|
|
el borde inferior del elemento afectado e indicadas en positivo (.3cm)<img src="../imagenes/atencion.gif" style="vertical-align: 0.3cm;" height="25" width="28"> o en negativo (-10px)<strong>
|
|
<img src="../imagenes/atencion.gif" alt=" " style="vertical-align: -10px;" height="25" width="28"></strong></li>
|
|
|
|
|
|
<li><code> porcentaje</code><strong> </strong>
|
|
donde la
|
|
posición 0% <strong><img src="../imagenes/atencion.gif" alt=" " style="vertical-align: 0%;" height="25" width="28"></strong>equivaldría
|
|
a <code>baseline</code>, pudiendo expresarlo en negativo
|
|
(-50%)<strong><img src="../imagenes/atencion.gif" style="vertical-align: -50%;" height="25" width="28"></strong>o
|
|
positivo
|
|
(100%)<strong><img src="../imagenes/atencion.gif" alt=" " style="vertical-align: 100%;" height="25" width="28"></strong></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<h3>Apariencia del cursor</h3>
|
|
|
|
|
|
<p>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.</p>
|
|
|
|
|
|
<p><strong>Propiedad:</strong> <code>cursor</code></p>
|
|
|
|
|
|
<p><strong>Valores y ejemplos: </strong>Pasando el
|
|
ratón sobre cada uno de los valores verás cambiar
|
|
el cursor de acuerdo a cada uno de ellos: <code><span style="cursor: crosshair;">crosshair,</span><span style="cursor: default;">default</span>, <span style="cursor: pointer;">pointer</span>, <span style="cursor: move;">move</span>, <span style="cursor: e-resize;">e-resize</span>, <span style="cursor: ne-resize;">ne-resize,</span> <span style="cursor: nw-resize;">nw-resize</span>, <span style="cursor: n-resize;">n-resize</span>, <span style="cursor: se-resize;">se-resize</span>, <span style="cursor: sw-resize;">sw-resize</span>, <span style="cursor: s-resize;">s-resize</span>, <span style="cursor: w-resize;">w-resize</span>, <span style="cursor: text;">text</span>, <span style="cursor: wait;">wait</span>, <span style="cursor: help;">help</span></code>
|
|
. </p>
|
|
|
|
|
|
<h3>Apilar capas</h3>
|
|
|
|
|
|
<p>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.</p>
|
|
|
|
|
|
<p><strong>Propiedad:</strong> <code>z-index</code></p>
|
|
|
|
|
|
<p><strong>Valor:</strong> 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</p>
|
|
|
|
|
|
<div class="ejemplo" id="ejemploapilarcapas">
|
|
<p><strong>Ejemplo:</strong></p>
|
|
|
|
|
|
<div id="rosa" style="border: thin solid rgb(0, 51, 102); position: relative; background-color: rgb(255, 204, 204); width: 220px; height: 200px; z-index: 1;">
|
|
<div id="naranja" style="border: thin solid rgb(255, 170, 102); position: absolute; margin-left: 40px; margin-top: 40px; background-color: rgb(255, 221, 119); width: 340px; height: 170px; z-index: 2;"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="codigo2" style="position: relative; top: -150px; z-index: 3;">
|
|
<p><code><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"><br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<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><br>
|
|
|
|
|
|
</div> </code>
|
|
<br>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p> </p>
|
|
|
|
|
|
<div class="practicas">
|
|
<img style="width: 29px; height: 29px; float: left;" alt="Actividad 94" title="Actividad 94" src="../imagenes/numeracion/noventaycuatro.gif">
|
|
<ul>
|
|
|
|
|
|
<li>Experimenta con las propiedades para el diseño
|
|
visual con CSS e incorpora aquellas que necesites a tus documentos o a
|
|
tu hoja de estilo.</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|