Popiedades CSS a tablas y a enlaces
Propiedades CSS de las tablas
A) Alineación del texto
La tabla aún es un poco confusa de leer, de manera que vamos a especificar que la alineación del texto sea un poco más clara. La norma adicional que se muestra a continuación alineará a la izquierda los encabezamientos para que encajen con el contenido (por defecto, los navegadores centran los títulos de las tablas):
Ahora mismo, todas las celdas están alineadas verticalmente en el centro. Si lo prefieres, puedes definir que el texto se alinee en la parte superior o inferior de la celda, o cualquier posición de vertical-align que quieras. Las siguientes reglas establecen que el texto se alinee en la parte superior.
A) Bordes
La tabla ya queda un poco mejor, pero aún cuesta un poco leer cada línea. Ahora aplicaremos algunos bordes para hacer que todo sea más fácil de leer. Estos se establecen de manera independiente para cada parte de la tabla y después se puede decidir cómo se deberían combinar.
Para realizar esto utilizamos la propiedad border (borde). Se pueden aplicar las siguientes propiedades unidad de medida | thin | medium | thick ) Ejemplo
El color de de los bordes se controla con las cuatro propiedades: border-top-color, border-right-color, border-bottom-color, border-left-color.
Ejemplo:
CSS permite establecer el estilo de cada uno de los bordes mediante las siguientes propiedades: border-top-style, border-right-style, border-bottom-style, border-left-style. Ejemplo
La
propiedad CSS border-radius permite a los desarrolladores Web definir qué tan redondeadas serán las esquinas. La redondez de cada esquina está definida usando uno o dos valores para el radio que define su forma dependiendo si es un círculo o una elipse.
border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius
Ejemplo
A) Relleno
La propiedad Padding. Establece la anchura de algunas o todas las zonas de relleno de los elementos Utilizando la propiedad padding, es posible establecer de forma abreviada el mismo
valor a todas las zonas de relleno de un elemento:
padding: 10px;
Lapropiedad padding es tan poderosa que permite establecer una, dos, tres o las cuatro zonas de relleno de forma simultánea.
Si se indican dos valores, el primero hace referencia a los rellenos verticales y el segundo es el valor de los rellenos horizontales, de modo que las siguientes reglas CSS son equivalentes:
padding: 10px 20px;
padding-top: 10px;
padding-right: 20px;padding-bottom: 10px;padding-left: 20px;si se indican cuatro valores, el primero es el relleno superior, el segundo es elrelleno derecho, el tercero es el relleno inferior y el cuarto es el relleno izquierdo. Ejemplo
E) Margen
CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento.
margin-top, margin-right, margin-bottom, margin-left
Podemos utilizar la propiedad background, para dar color al fondo. Ejemplo
En la siguiente tabla se muestran algunas propiedades que complementan lo anterior
Veamos cada una de las instrucciones, en todos los siguientes ejemplo el código HTML es el siguiente
<body>
<h3>Propiedad</h3>
<h4>Título</h4>
<table class="a">
<caption>Tabla 1: </caption>
<tr> <th>Columna 1</th> <th>Columna 2</th> <th>Columna 3</th> </tr>
<tr> <td>Fila 1</td> <td>Fila 1</td> </tr>
<tr> <td>Fila 2</td><td>Fila 2</td> </tr>
<tr> <td>Fila 3</td><td>Fila 3</td> </tr>
</table>
<br><br><h4>Titulo </h4>
<table class="b">
<caption>Tabla 2: </caption>
<tr> <th>Columna 1</th> <th>Columna 2</th> <th>Columna 3</th> </tr>
<tr> <td>Fila 1</td> <td>Fila 1</td> </tr>
<tr> <td>Fila 2</td> <td>Fila 2</td> </tr>
<tr> <td>Fila 3</td><td>Fila 3</td> </tr>
</table>
</body>
1. Caption-side
A las tablas se les puede poner un título con ayuda de la etiqueta caption. Por
defecto, el título siempre se muestra en la parte superior de la tabla:
La propiedad caption-side dispone de dos valores para controlar la posición del título de la tabla: top es el valor por defecto y muestra el título antes de la tabla, mientras que bottom muestra el título después de la tabla.
El siguiente ejemplo es el resultado de aplicar la propiedad caption-side:
bottom
1. Table-layout
La propiedad table-layout indica el algoritmo que debe utilizar el navegador para mostrar la tabla. Sólo se definen dos algoritmos: automático y fijo.
1. border-collapse
La propiedad border-collapse se utiliza para fusionar los bordes. La representación de los bordes de tabla es dividida en dos categorías:
"fusión" y "separación" (collapsed - separated). Esta propiedad especifica qué modo de presentación de borde hay que usar.
Ejemplo
1. Border-spacing
La propiedad de espaciado de borde especifica la distancia entre los bordes de celdas adyacentes (sólo para el modelo de bordes separados). Ejemplo
Css para enlaces
¿Elementos de bloque y elementos en línea?
Cada unode los elementos de html tienen una propiedad de visibilidad (display) muy
importante, que nos permitirá moverlos adecuadamente como deseemos. Esta
propiedad es en bloque o en línea.
article, header, nav etc son elementos de bloque, y los enlaces son elementos en línea.
Vamos a un ejemplo donde colocaremos bordes a los elementos para ver su visualización
Como se muestra en el ejemplo tenemos un
elemento header con borde negro que ocupa el 100% del ancho, ya que es un
componente de bloque. Dentro de header tenemos un elemento elemento h1 que
también es de bloque y ya se había dicho que inserta el salto de línea
automatico, lo hace, no por ser titulo, sino por tener una visibilidad de
bloque aunque el texto no abarque el 100% del ancho, si colocas un borde a h1,
se podrá observar que el borde abarca el 100%. La etiqueta <nav> contiene
un borde rojo con el 100% de ancho por la misma razón por ser de bloque.
Sin embargo la etiqueta <a>, tiene una
visibilidad de línea, por lo tanto los tres enlaces se colocan en la misma
línea abarcando un ancho predefinido a su contenido.
Cambiando la presentación a los enlaces
Ahora nuestro objetivo es que los enlaces no parescan enlaces, sino botones de menú, una opción muy sencilla es mediante la pseudoclase hover. Esta es una propiedad que ocurre cuando colocamos el mouse encima de un elemento.
Aplicaremos a la regla de la etiqueta <a> un margen para la separación entre los enlaces, un padding para el espacio entre el borde y el texto del enlace y quitaremos el molesto subrayado. En la pseudoclase hover colocamos color de fondo y color del texto, todas la propiedades de <a>
también las contiene a:hover.
Ahora podemos jugar con los bordes, solo el izquierdo, solo el de abajo o esquinas redondas y el color del fondo con background, y tendremos muchos diseños para botones. En las figuras 3 y 4 no se muestra el html, porque no ha sufrido ningún cambio.
Y bueno, diran – “¿ y la visibilidad(dispaly) para que servia?- , pues nada mas y nada menos que para hacer magia, ahora este menú horizontal lo voy a convertir en vertical con solo mover su visibilidad. Dentro del css de <a> colocamos display: block;
Comentarios
Publicar un comentario