Capitulo 15
Ejercicios: https://uniwebsidad.com/libros/css/capitulo-15
Solucion ejercisios Capitulo 15
Ejercicios: https://uniwebsidad.com/libros/css/capitulo-16
martes, 2 de junio de 2020
Capitulo 12
Por este motivo, hace varios años la estructura de las páginas HTML se definía mediante tablas. El desarrollo de CSS ha permitido que se puedan realizar los mismos diseños sin utilizar tablas HTML. Cambiar el aspecto de una página creada con CSS es tan fácil como modificar unas pocas reglas en las hojas de estilos. Sin embargo, realizar la misma modificación en una página creada con tablas supone un esfuerzo muy superior y es más probable cometer errores.
De hecho, los navegadores que utilizan las personas discapacitadas pueden tener dificultades con la estructura de las páginas complejas creadas con tablas HTML. No obstante, diseñar una página web exclusivamente con CSS no garantiza que la página sea accesible. En cualquier caso, si el usuario accede al sitio con una conexión de banda ancha y la página es de un tamaño medio o reducido, las diferencias son casi imperceptibles. Utilizar tablas para crear la estructura completa de una página es tan absurdo como utilizar por ejemplo la etiqueta para crear párrafos de texto.
Por estos motivos, la estructura basada en tablas ha dado paso a la estructura basada exclusivamente en CSS.
De hecho, los navegadores que utilizan las personas discapacitadas pueden tener dificultades con la estructura de las páginas complejas creadas con tablas HTML. No obstante, diseñar una página web exclusivamente con CSS no garantiza que la página sea accesible. En cualquier caso, si el usuario accede al sitio con una conexión de banda ancha y la página es de un tamaño medio o reducido, las diferencias son casi imperceptibles. Utilizar tablas para crear la estructura completa de una página es tan absurdo como utilizar por ejemplo la etiqueta para crear párrafos de texto.
Por estos motivos, la estructura basada en tablas ha dado paso a la estructura basada exclusivamente en CSS.
12.1. centrar una pagina horizontalmente.
Por ese motivo, normalmente se opta por diseños con una anchura fija limitada a un valor aceptable para mantener la legibilidad del texto. Por otra parte, los navegadores alinean por defecto las páginas web a la izquierda de la ventana. Cuando la resolución de la pantalla es muy grande, la mayoría de páginas de anchura fija alineadas a la izquierda parecen muy estrechas y provocan una sensación de vacío. La solución más sencilla para evitar los grandes espacios en blanco consiste en crear páginas con una anchura fija adecuada y centrar la página horizontalmente respecto de la ventana del navegador.
Las siguientes imágenes muestran el aspecto de una página centrada a medida que aumenta la anchura de la ventana del navegador. En este ejemplo, el elemento padre del es la propia página , por lo que se consigue centrar el elemento respecto de la ventana del navegador.
Las siguientes imágenes muestran el aspecto de una página centrada a medida que aumenta la anchura de la ventana del navegador. En este ejemplo, el elemento padre del es la propia página , por lo que se consigue centrar el elemento respecto de la ventana del navegador.
12.2. Centrar una página verticalmente
Cuando se centra una página web de forma horizontal, sus márgenes laterales se adaptan dinámicamente de forma que la página siempre aparece en el centro de la ventana del navegador, independientemente de la anchura de la ventana. De la misma forma, cuando se centra una página web verticalmente, el objetivo es que sus contenidos aparezcan en el centro de la ventana del navegador y por tanto, que sus márgenes verticales se adapten de forma dinámica en función del tamaño de la ventana del navegador.
A continuación se muestra la forma de centrar una página web respecto de la ventana del navegador, es decir, centrarla tanto horizontalmente como verticalmente.
Si el valor auto se puede utilizar para que los márgenes laterales se adapten dinámicamente, también debería ser posible utilizar el valor auto para los márgenes verticales. Desafortunadamente, la propiedad margin: auto no funciona tal y como se espera para los márgenes verticales y la página no se muestra centrada.
Para determinar el desplazamiento necesario, se realiza un cálculo matemático sencillo. Como se ve en la tercera figura del esquema anterior, el punto central de la página debe desplazarse hasta el centro de la ventana del navegador.
12.3. Estructura layout.
12.3.1. Diseño a 2 columnas con cabecera y pie de pagina.
El objetivo de este diseño es definir una estructura de página con cabecera y pie, un menú lateral de navegación y una zona de contenidos. La anchura de la página se fija en
700px, la anchura del menú es de 150px y la anchura de los contenidos es de 550px:
Figura 12.8 Esquema del diseño a 2 columnas con cabecera y pie de página
La solución CSS se basa en el uso de la propiedad
float para los elementos posicionados como el menú y los contenidos y el uso de la propiedad clear en el pie de página para evitar los solapamientos ocasionados por los elementos posicionados con float.
Figura 12.9 Propiedades CSS necesarias en el diseño a dos columnas con cabecera y pie de página
El código HTML y CSS mínimos para definir la estructura de la página sin aplicar ningún estilo adicional son los siguientes:
#contenedor {
width: 700px;
}
#cabecera {
}
#menu {
float: left;
width: 150px;
}
#contenido {
float: left;
width: 550px;
}
#pie {
clear: both;
}
<body>
<div id="contenedor">
<div id="cabecera">
</div>
<div id="menu">
</div>
<div id="contenido">
</div>
<div id="pie">
</div>
</div>
</body>
En los estilos CSS anteriores se ha optado por desplazar tanto el menú como los contenidos hacia la izquierda de la página (
float: left). Sin embargo, en este caso también se podría desplazar el menú hacia la izquierda (float:left) y los contenidos hacia la derecha (float: right).
El diseño anterior es de anchura fija, lo que significa que no se adapta a la anchura de la ventana del navegador. Para conseguir una página de anchura variable y que se adapte de forma dinámica a la ventana del navegador, se deben aplicar las siguientes reglas CSS:
#contenedor {
}
#cabecera {
}
#menu {
float: left;
width: 15%;
}
#contenido {
float: left;
width: 85%;
}
#pie {
clear: both;
}
Si se indican la anchuras de los bloques que forman la página en porcentajes, el diseño final es dinámico. Para crear diseños de anchura fija, basta con establecer las anchuras de los bloques en píxel.
12.3.2. Diseño a 3 columnas con cabecera y pie de página.
Además del diseño a dos columnas, el diseño más utilizado es el de tres columnas con cabecera y pie de página. En este caso, los contenidos se dividen en dos zonas diferenciadas: zona principal de contenidos y zona lateral de contenidos auxiliares:
Figura 12.10 Esquema del diseño a tres columnas con cabecera y pie de página
La solución CSS emplea la misma estrategia del diseño a dos columnas y se basa en utilizar las propiedades
float y clear:
Figura 12.11 Propiedades CSS necesarias en el diseño a 3 columnas con cabecera y pie de página
El código HTML y CSS mínimos para definir la estructura de la página sin aplicar ningún estilo adicional son los siguientes:
#contenedor {
}
#cabecera {
}
#menu {
float: left;
width: 15%;
}
#contenido {
float: left;
width: 85%;
}
#contenido #principal {
float: left;
width: 80%;
}
#contenido #secundario {
float: left;
width: 20%;
}
#pie {
clear: both;
}
<body>
<div id="contenedor">
<div id="cabecera">
</div>
<div id="menu">
</div>
<div id="contenido">
<div id="principal">
</div>
<div id="secundario">
</div>
</div>
<div id="pie">
</div>
</div>
</body>
El código anterior crea una página con anchura variable que se adapta a la ventana del navegador. Para definir una página con anchura fija, solamente es necesario sustituir las anchuras en porcentajes por anchuras en píxel.
Al igual que sucedía en el diseño a dos columnas, se puede optar por posicionar todos los elementos mediante
float: left o se puede utilizar float: left para el menú y la zona principal de contenidos y float: right para el contenedor de los contenidos y la zona secundaria de contenidos.12.4. Alturas/Anchuras máximas y mínimas.
Cuando se diseña la estructura de una página web, se debe tomar la decisión de optar por un diseño de anchura fija o un diseño cuya anchura se adapta a la anchura de la ventana del navegador.
Sin embargo, la mayoría de las veces sería conveniente una solución intermedia: que la anchura de la página sea variable y se adapte a la anchura de la ventana del navegador, pero respetando ciertos límites. En otras palabras, que la anchura de la página no sea tan pequeña como para que no se puedan mostrar correctamente los contenidos y tampoco sea tan ancha como para que las líneas de texto no puedan leerse cómodamente.
CSS define cuatro propiedades que permiten limitar la anchura y altura mínima y máxima de cualquier elemento de la página. Las propiedades son
max-width, min-width, max-height y min-height.| Propiedad | max-width |
|---|---|
| Valores | unidad de medida | porcentaje | none | inherit |
| Se aplica a | Todos los elementos salvo filas y grupos de filas de tablas |
| Valor inicial | none |
| Descripción | Permite definir la anchura máxima de un elemento |
| Propiedad | min-width |
|---|---|
| Valores | unidad de medida | porcentaje | inherit |
| Se aplica a | Todos los elementos salvo filas y grupos de filas de tablas |
| Valor inicial | 0 |
| Descripción | Permite definir la anchura mínima de un elemento |
| Propiedad | max-height |
|---|---|
| Valores | unidad de medida | porcentaje | none | inherit |
| Se aplica a | Todos los elementos salvo columnas y grupos de columnas de tablas |
| Valor inicial | none |
| Descripción | Permite definir la altura máxima de un elemento |
| Propiedad | min-height |
|---|---|
| Valores | unidad de medida | porcentaje | inherit |
| Se aplica a | Todos los elementos salvo columnas y grupos de columnas de tablas |
| Valor inicial | 0 |
| Descripción | Permite definir la altura mínima de un elemento |
De esta forma, para conseguir un diseño de anchura variable pero controlada, se podrían utilizar reglas CSS como la siguiente:
#contenedor {
min-width: 500px;
max-width: 900px;
}
Las propiedades que definen la altura y anchura máxima y mínima se pueden aplicar a cualquier elemento, aunque solamente suelen utilizarse para estructurar la página. En general, las propiedades más utilizadas son
max-width y min-width, ya que no es muy habitual definir alturas máximas y mínimas.
Desafortunadamente, Internet Explorer 6 y las versiones anteriores no soportan ninguna de las cuatro propiedades sobre ningún elemento. Hasta que se incorpore en las nuevas versiones del navegador, es preciso recurrir a trucos que simulen el comportamiento de las propiedades:
max-width equivalente para Internet Explorer:div {
max-width: 800px;
width: expression(document.body.clientWidth > 801? "800px": "auto");
}
min-width equivalente para Internet Explorer:div {
min-width:800px;
width: expression(document.body.clientWidth < 801? "800px": "auto" );
}
max-height equivalente para Internet Explorer:div {
max-height: 300px;
overflow: hidden;
height: expression(this.scrollHeight > 301? "300px" : "auto" );
}
min-height equivalente para Internet Explorer:div {
min-height:300px;
overflow: hidden;
height: expression(this.scrollHeight < 301? "300px" : "auto" );
}
12.5. Estilos avanzados.
El principal inconveniente de los diseños mostrados anteriormente es que no se puede garantizar que todas las columnas se muestren con la misma altura. Si las columnas tienen algún color o imagen de fondo, este comportamiento no es admisible, ya que se vería que alguna columna no llega hasta el final de la columna más larga y el diseño final parecería inacabado. La más conocida es la técnica faux columns y que simula el color/imagen de fondo de las columnas laterales mediante la imagen de fondo de la columna central de contenidos. Más recientemente se ha presentado el proyecto «In Search of the One True Layout» que busca definir una serie de técnicas que permitan crear de forma sencilla cualquier estructura de página basada en columnas.
Capitulo 11
11.1 Estilos basicos.
11.1.1. Mostrar un botón como un enlace.
Como ya se vio anteriormente, el estilo por defecto de los enlaces se puede modificar para que se muestren como botones de formulario. Ahora, los botones de formulario también se pueden modificar para que parezcan enlaces.
Las reglas CSS del ejemplo anterior son las siguientes:
.enlace {
border: 0;
padding: 0;
background-color: transparent;
color: blue;
border-bottom: 1px solid blue;
}
11.1.2. Mejores en los campos de texto.
Por defecto, los campos de texto de los formularios no incluyen ningún espacio de relleno, por lo que el texto introducido por el usuario aparece pegado a los bordes del cuadro de texto.
Añadiendo un pequeño
padding a cada elemento <input>, se mejora notablemente el aspecto del formulario:
La regla CSS necesaria para mejorar el formulario es muy sencilla:
form.elegante input {
padding: .2em;
}
11.1.3. Labels alineadas y formateadas.
En primer lugar, se muestran los elementos como elementos de bloque, para que añadan una separación para cada campo del formulario.
Para mostrar un formulario tal y como aparece en la imagen anterior no es necesario crear una tabla y controlar la anchura de sus columnas para conseguir una alineación perfecta.
Para mostrar un formulario tal y como aparece en la imagen anterior no es necesario crear una tabla y controlar la anchura de sus columnas para conseguir una alineación perfecta.
11.2. Estilos avanzados.
11.2.1. Formulario en varias columnas.
Los formularios complejos con decenas de campos pueden ocupar mucho espacio en la ventana del navegador. Además del uso de pestañas para agrupar los campos relacionados en un formulario, también es posible mostrar el formulario a dos columnas, para aprovechar mejor el espacio.
11.2.2. Resaltar el campo seleccionado.
Una de las mejoras más útiles para los formularios HTML consiste en resaltar de alguna forma especial el campo en el que el usuario está introduciendo datos. Para ello, 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.
Añadiendo la pseudo-clase
:focus después del selector normal, el navegador se encarga de aplicar esos estilos cuando el usuario activa el elemento:input:focus {
border: 2px solid #000;
background: #F3F3F3;
}
Desafortunadamente, la pseudo-clase
:focus no funciona en navegadores obsoletos como Internet Explorer 6, por lo que si la página debe visualizarse de la misma forma en todos los navegadores, es preciso recurrir a soluciones con JavaScript.Capitulo 10
10.1. Estilos básicos.
El código HTML y CSS del ejemplo anterior se muestra a continuación
El estándar CSS 2.1 define dos modelos diferentes para el tratamiento de los bordes de las celdas.
El modelo collapse fusiona de forma automática los bordes de las celdas adyacentes, mientras que el modelo separate fuerza a que cada celda muestre sus cuatro bordes.
La propiedad border-spacing sólo controla la separación entre celdas y por tanto, no se puede utilizar para modificar el tipo de modelo de bordes que se utiliza.
Ejemplo de propiedad border-spacing
Además, como no se ha establecido de forma explícita ningún modelo de bordes, el navegador utiliza el modelo separate.
El estándar CSS 2.1 define dos modelos diferentes para el tratamiento de los bordes de las celdas.
El modelo collapse fusiona de forma automática los bordes de las celdas adyacentes, mientras que el modelo separate fuerza a que cada celda muestre sus cuatro bordes.
La propiedad border-spacing sólo controla la separación entre celdas y por tanto, no se puede utilizar para modificar el tipo de modelo de bordes que se utiliza.
Ejemplo de propiedad border-spacing
Además, como no se ha establecido de forma explícita ningún modelo de bordes, el navegador utiliza el modelo separate.
10.2. Estilos avanzados
El valor hide indica que las celdas vacías no se deben mostrar.
La propiedad caption-side permite controlar la posición del título de la tabla.
Si también se quiere modificar la alineación horizontal del título, debe utilizarse la propiedad text-align.
La propiedad caption-side permite controlar la posición del título de la tabla.
Si también se quiere modificar la alineación horizontal del título, debe utilizarse la propiedad text-align.
Capitulo 9
9.1. Estilos basicos.
9.1.1. Viñetas personalizadas.
Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una viñeta formada por un pequeño círculo de color negro. No obstante, CSS define varias propiedades para controlar el tipo de viñeta que muestran las listas, además de poder controlar la posición de la propia viñeta. La propiedad básica es la que controla el tipo de viñeta que se muestra y que se denomina list-style-type. Los valores gráficos son disc, circle y square y muestran como viñeta un círculo relleno, un círculo vacío y un cuadrado relleno respectivamente.
Cuando se requiere personalizar el aspecto de las viñetas, se debe emplear la propiedad list-style-image, que permite mostrar una imagen propia en vez de una viñeta automática.
Si no se encuentra la imagen o no se puede cargar, se muestra la viñeta automática correspondiente .
Cuando se requiere personalizar el aspecto de las viñetas, se debe emplear la propiedad list-style-image, que permite mostrar una imagen propia en vez de una viñeta automática.
Si no se encuentra la imagen o no se puede cargar, se muestra la viñeta automática correspondiente .
9.1.2. Menu vertical.
Los sitios web correctamente diseñados emplean las listas de elementos para crear todos sus menús de navegación. Utilizando la etiqueta de HTML se agrupan todas las opciones del menú y haciendo uso de CSS se modifica su aspecto para mostrar un menú horizontal o vertical.
A continuación se muestra la transformación de una lista sencilla de enlaces en un menú vertical de navegación.
Lista de enlaces original:
Aspecto final del menú vertical:
El proceso de transformación de la lista en un menú requiere de los siguientes pasos:
9.2. Estilos avanzados.
9.2.1. Menú horizontal básico.
Partiendo de la misma lista de elementos del menú vertical, resulta muy sencillo crear un menú de navegación horizontal. La clave reside en modificar el posicionamiento original de los elementos de la lista.
Código HTML del menú horizontal:
<ul>
<li><a href="#">Elemento 1</a></li>
<li><a href="#">Elemento 2</a></li>
<li><a href="#">Elemento 3</a></li>
<li><a href="#">Elemento 4</a></li>
<li><a href="#">Elemento 5</a></li>
</ul>
Aspecto final del menú horizontal:
9.2.2. Menús avanzados.
El código fuente de los menús de la imagen anterior y muchos otros se puede encontrar en http://exploding-boy.com/images/cssmenus/menus.html
Además de los menús horizontales de pestañas, haciendo uso de las propiedades de CSS se pueden crear menús verticales y horizontales muy avanzados:
Capitulo 8
8.1. Estilos básicos.
8.1.1. Establecer la anchura y altura de las imágenes.
No obstante, si se utilizan alturas/anchuras diferentes de las reales, el navegador deforma las imágenes y el resultado estético es muy desagradable.
El motivo es que normalmente dos imágenes diferentes no comparten la misma altura/anchura. En la práctica, esta forma de trabajo produce una sobrecarga de estilos que la hace inviable.
<img src="imagen.png" width="120" height="250" />
8.1.2. Eliminar el borde de la imágenes con enlaces.
Cuando una imagen forma parte de un enlace, los navegadores muestran por defecto un borde azul grueso alrededor de las imágenes. Por tanto, una de las reglas más utilizadas en los archivos CSS es la que elimina los bordes de las imágenes con enlaces:
img {
border: none;
}
8.2. Estilos avanzados.
8.2.1. Sombra (drop shadow)
La mayoría de aplicaciones de diseño gráfico permiten añadir una sombra a las imágenes. CSS no incluye propiedades que permitan mostrar de forma sencilla sombras en los elementos.
A continuación se muestra una técnica sencilla para añadir sombra a las imágenes.
La técnica mostrada se presentó por primera vez en la página web http://wubbleyew.com/tests/dropshadows.htm y consiste en la utilización de un par de elementos alrededor del elemento que va a mostrar una sombra. La ventaja de este método es que es sencillo y solamente requiere añadir un par de por cada elemento. Además, como la sombra es una imagen muy grande, el efecto funciona con elementos de cualquier tamaño.
Suscribirse a:
Entradas (Atom)