Búsqueda personalizada

Cómo ordenar las propiedades CSS al escribirlas

Se trata de una propuesta para escribir las propiedades CSS que consiste en ir de fuera hacia dentro

  1. Comportamiento: display, overflow, clear
  2. Posición: position, float, top, left, …
  3. Tamaño: width, height
  4. Márgenes y bordes: margin, border, padding
  5. Texto: font, text, …
  6. Fondos y colores: background, color

fuente: marcos de miguel

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en CSS | Responder

EL Atributo Overflow de CSS

En este artículo  vamos a explicar una propiedad interesante de CSS, contemplada en la especificación CSS 2, Overflow. Es un atributo de esos que nos servirán para maquetar las capas de una web de una manera más versátil y detallada.
Overflow sirve en el modelado de cajas para indicar al navegador qué es lo que debe hacer con el contenido que no cabe dentro de una capa, según las dimensiones que se le han asignado.

Como sabemos, a las capas (elementos DIV) podemos asignarles un tamaño, en anchura y altura. Pero muchas veces el contenido que colocamos en la capa sobrepasa el espacio que hemos destinado a ella. Entonces lo que suele ocurrir es que la capa crece lo suficiente para que el contenido colocado dentro quepa. Habitualmente las capas crecen en altura, por lo que a más contenido más tamaño tendrá en altura. Este es un comportamiento que podemos alterar con el uso del atributo overflow.

Dicho de otro modo, overflow permite que se recorte el contenido de una capa, para mostrar únicamente el contenido que quepa, según sus dimensiones. Para acceder al contenido que no se muestra, porque no cabe en la capa, se puede configurar overflow para que aparezcan unas barras de desplazamiento.

Así pues, pasemos directamente a ver cuáles son los atributos posibles con el atributo overflow:

visible: Este valor indica que se debe mostrar todo el contenido de la capa, aunque no quepa en tamaño con la que la hemos configurado. En Internet Explorer ocurre que capa crece en tamaño lo suficiente para que quepa todo el contenido que hemos colocado dentro. En Firefox ocurre que la capa tiene el tamaño marcado, pero el contenido se sigue viendo, aunque fuera del espacio donde de la capa, pudiendo superponerse a un texto o imagen que hubiera debajo. El contenido no se recorta en caso alguno, es decir, siempre estará visible.
hidden: Este valor indica que los contenidos que, por el tamaño de la capa, no quepan en la misma, se deben recortar. Por ello, la capa tendrá siempre el tamaño configurado, pero los contenidos en ocasiones podrán no verse por completo.
scroll: Este valor indica que la capa debe tener el tamaño que se haya configurado inicialmente y que además se deben mostrar unas barras de desplazamiento, para mover el contenido de la capa dentro del espacio de la misma. Las barras de desplazamiento siempre salen, se requieran o no.
auto: Con este valor también se respetarán las dimensiones asignadas a una caja. El contenido será recortado, pero aparecerán las barras de desplazamiento para moverlo. Sin embargo, en este caso las barras de desplazamiento podrán salir o no, depende de si son necesarias o no para ver todo el contenido de la capa.
Así pues, el atributo overflow nos permitirá tener un mayor control sobre los espacios que destinamos a cada caja de nuestro diseño. Es muy utilizado para mostrar textos largos, que se desean integrar dentro de otro texto o una interfaz donde no tenemos espacio disponible para colocarlos o no deseamos que crezcan más de la cuenta. Por ejemplo para mostrar código fuente dentro del texto de un artículo, como sigue:

<html>
<head>
   <title>Título</title>
</head>

<body>

Cuerpo…

</body>
</html>
Este ejemplo, habremos podido apreciar la barra de desplazamiento vertical, se obtiene con un atributo overflow: auto;. El código utilizado es como sigue:

<div style=”overflow: auto; width: 300px; height: 100px; background-color:#ededed; border: 1px solid #990000;”>
CONTENIDO….
</div>

Ahora veamos otro ejemplo, en el que simplemente se recorta el texto que no cabe en la capa. Hemos indicado overflow: hidden, por lo que el texto que sobra no se va a visualizar.
Esta capa tiene un contenido mayor del que cabe en el espacio que he asignado con el atributo width y height. Como le he puesto overflow: hidden, lo que ocurrirá es que parte del texto que estoy colocando no se va a ver…
En este caso vemos como el texto aparece recortado, porque no cabe en el espacio asignado de la capa. El código sería como el que sigue:

<div style=”overflow: hidden; width: 200px; height: 50px; border: 1px solid #990000;”>
CONTENIDO…
</div>

fuente: desarrollo web

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en CSS | Responder

CSS: Propiedades

Ahora que ya hemos visto cómo se definen estilos en un documento HTML, así como todas las posibilidades en cuanto a jerarquías, clases, …, nos vamos a centrar en qué es lo que podemos poner en cada una de esas parejas propiedad:valor que decíamos que definen un estilo.

Para facilitar su identificación, los vamos a dividir en las siguientes categorías:
Propiedes:

* Formato de bloque
* Las fuentes
* Texto
* Color y fondo
* Listas
Hay propiedades en las que necesitaremos especificar alguna longitud (por ejemplo, en los márgenes). Para ello, usaremos esta notación:
[-]NNtipo

- es el signo, y es opcional (es lo que quieren decir los corchetes, que se trata de algo opcional, los corchetes no hay que ponerlos).

NN es la cantidad, y tipo es la magnitud. Esta última puede ser relativa o absoluta.

Las magnitudes relativas son em (el alto de la M mayúscula), ex (la mitad de la altura de la M mayúscula, que viene a ser aproximadamente la altura de la x minúscula), px (píxel). Las magnitudes absolutas son pt (puntos), pc(picas), in (inches, es decir, pulgadas), mm (milímetros), cm (centímetros).

Hay otras propiedades en las que tendremos que especificar un color; para ello hay tres posibilidades: escribiéndolo de la misma forma que en HTML, con la notación #RRGGBB, siendo RR, GG, BB los valores en hexadecimal de las componentes roja, verde y azul del color, usando algún nombre predefinido, o usando la función rgb(R,G,B), donde R, G, B son los valores en decimal de las componentes roja, verde y azul del color.

Un último detalle a comentar antes de pasar al estudio de las propiedades y sus posibles valores, es el siguiente: desde el punto de vista de las hojas de estilo, existen tres tipos de elementos HTML: de bloque (que son los que hacen empezar línea nueva, como
, las cabeceras, …), incrustados en línea (que no alteran la línea en la que se encuentran, como , , …) y de lista (que son los elementos de una lista delimitados por

•). Todo elemento de bloque se considera rodeado por una caja, con propiedades de márgenes, borde, padding y fondo. Además, la caja que lo rodea tiene un cierto ancho, y una cierta alineación con respecto al documento.

 fuente web taller

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en CSS | Responder

Novedades