PDF de programación - Edición HTML - Estilos CSS - Diseño visual

MINISTERIO
DE EDUCACIÓN
Y CIENCIA

SECRETARÍA GENERAL
DE EDUCACIÓN
Y FORMACIÓN PROFESIONAL

DIRECCIÓN GENERAL
DE EDUCACIÓN,
FORMACIÓN PROFESIONAL
E INNOVACIÓN EDUCATIVA

CENTRO NACIONAL
DE INFORMACIÓN Y
COMUNICACIÓN EDUCATIVA

Edición HTML

Estilos CSS

Diseño visual

C/ TORRELAGUNA, 58
28027 - MADRID

Índice de contenido

Diseño visual........................................................................................................................ 3
Cómo se muestran los elementos.................................................................................... 3
Posición flotante............................................................................................................... 4
Zonas de flotación prohibidas............................................................................................... 5
Posición de un elemento.................................................................................................. 8
Visibilidad....................................................................................................................... 10
Recortes............................................................................................................................. 11
Desbordamiento............................................................................................................. 12
Alineamiento vertical ..................................................................................................... 13
Apariencia del cursor..................................................................................................... 14
Apilar capas................................................................................................................... 14
Absolutamente relativo....................................................................................................... 15

Estilos CSS – Diseño visual

2 de 16

DISEÑO VISUAL
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.

CÓMO SE MUESTRAN LOS ELEMENTOS
CÓMO SE MUESTRAN LOS ELEMENTOS

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

Resultado

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.

POSICIÓN FLOTANTE
POSICIÓN FLOTANTE

Se trata de una propiedad que encuentra su principal aplicación en las imágenes, aunque

Estilos CSS – Diseño visual

3 de 16

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.

ZONAS DE FLOTACIÓN PROHIBIDAS
ZONAS DE FLOTACIÓN PROHIBIDAS

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.

Estilos CSS – Diseño visual

4 de 16

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:

• 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.


• 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.

Estilos CSS – Diseño visual

5 de 16

Vamos a comprobar con un ejercicio práctico lo que acabamos de comentar.

• 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:

• margin:50px y border:thin solid blue para el primero
• margin:10px y border:thin dotted red para el segundo
•

también sería conveniente que al selector body le añadieras el estilo
margin:0px

• Añade un nuevo párrafo sin características especiales.
• Modifica los valores de los márgenes en la pestaña

y alterna con

para comparar los efectos visuales obtenidos.

• Selecciona una palabra del primer párrafo encerrándola entra el delimitador <span>

y su cierre </span>. Aplícale al delimitador el estilo border:thin solid red.

• Haz exactamente lo mismo con la palabra anterior o posterior a la que acabas de

trabajar.
• Como tienes a la vista el resultado selecciona un grupo de palabras que incluyan un
salto de línea y enciérralas entre <span> y </span> para aplicarles el mismo estilo
para comprobar la ausencia de los
de antes y ve a la pestaña
bordes al final y al principio de línea.

• Si quieres puedes guardar la página como actividad92.html

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

.

y arrastramos hasta la nueva
Podremos moverla de un sitio a otro si pulsamos sobre
posición o bien modificar su tamaño utilizando los tiradores de los vértices y el centro de los
lados.

Estilos CSS – Diseño visual

6 de 16

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.

• Crea una página nueva con dos párrafos y selecciónalos

• Pulsa

para crear una capa que los incluya.

• Desplaza la capa hacia otra posición y haz clic para situar el cursor fuera de la

capa.

• Pulsa nuevamente

para crear una capa vacía y teclea un párrafo para darle

• Haz un doble clic