JMiur [E]

Estas son algunas de las propiedades que nos permiten controlar el diseño de una página web; el tamaño de los distintos objetos, su ubicación y la forma en que los vemos.

Las propiedades width y height establecen el ancho y el alto de los elementos ya que debemos recordar que TODO lo que vemos en una página es un rectángulo.

sintaxis en HTML
elemento {width: valor;}
por ejemplo: div {width: 80%;}
elemento {height: valor;}
por ejemplo: div {height: 50px;}

sintaxis en JAVASCRIPT
elemento.style.width='valor';
por ejemplo: this.style.width='80%';
elemento.style.height='valor';
por ejemplo: this.style.height='50px';

Por defecto, su valor es auto pero podemos indicar cualquier otro, expresándolo en cm, mm, in, pt, pc, px, em, ex o como un porcentaje.

El valor nunca puede ser negativo y en muchos casos (por ejemplo, las imágenes), indicando uno de ellos, el otro adopta el valor proporcional correspondiente y no es necesario expresarlo.

Asociadas con estas, hay otras propiedades que nos permiten establecer los anchos y altos máximos y mínimos de los elementos:

sintaxis en HTML
elemento {max-width: valor;}
minWidth {min-width: valor;}
elemento {max-height: valor;}
elemento {min-height: valor;}
por ejemplo: div {max-width: 500px; min-width: 10px; max-height:: 200px; min-height: 10px;}

sintaxis en JAVASCRIPT
elemento.style.maxWidth='valor';
elemento.style.minWidth='valor';
elemento.style.maxHeight='valor';
elemento.style.minHeight='valor';
por ejemplo: this.style.maxWidth='500px';

Al igual que las anteriores, los valores admitidos son cm, mm, in, pt, pc, px, em, ex o un porcentaje.






La propiedad display nos permite definir la forma en que se mostrará un elemento.

sintaxis en HTML
elemento {display: valor;}
por ejemplo: div {display: nine;}

sintaxis en JAVASCRIPT
elemento.style.display='valor';
por ejemplo: this.style.display='none';

Los valores posibles son:

block el objeto se muestra como un bloque (un elemento adyacente se muestra debajo)
none el objeto permanece oculto
inline el objeto tiene las dimensiones de su contenido (un elemento adyacente se muestra al lado)
inline-block es similar al anterior pero el contenido se muestra como bloque; los elementos adyacentes se muestran en la misma línea

Hay otros valores posibles: inline-table, table, table-cell, table-row-group, table-column-group, table-column, table-row, table-header-group, table-footer-group, table-caption se utilizan para definir la forma en que se muestran las columnas y las filas de una tabla y list-item, marker, compact, run-in casi no tiene uso práctico

Todos los elementos de una página son de tipo block o de tipo inline. Por ejemplo, DIV es un objeto de tipo block y SPAN es de tipo inline. La diferencia entre ellos es que, los llamados bloques comienzan en una nueva línea y, generalmente, contienen a otros elementos. Por el contrario, los elementos inline sólo contienen datos.

El valor por defecto depende del tipo de objeto. Las siguientes son definidas como bloques: ADDRESS, BLOCKQUOTE, BODY, CENTER, COL, COLGROUP, DD, DIR, DIV, DL, DT, FIELDSET, FORM, FRAME, Hx, HR, IFRAME, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PRE, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR, UL.

Lorem ipsum dolor sit amet consectetuer adipiscing elit sed [ ESTE ES EL ELEMENTO A MODIFICAR ] diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


La propiedad visibility nos permite mostrar u ocultar un elemento.

En principio, parece ser lo mismo que la anterior pero es fundamentalmente distinta ya que, a diferencia de display=none, el elemento no "desaparece" de la página sino que conserva el espacio.

sintaxis en HTML
elemento {visibility: valor;}
por ejemplo: div {visibility: hidden;}

sintaxis en JAVASCRIPT
elemento.style.visibility='valor';
por ejemplo: this.style.visibility='hidden';

Tiene dos valores posibles: visible o hidden (para las tablas hay una posibilidad más, el valor collapse que es similar a hidden)

Lorem ipsum dolor sit amet consectetuer adipiscing elit sed [ ESTE ES EL ELEMENTO A MODIFICAR ] diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


La propiedad clip se utiliza para "recortar" elementos o, lo que es lo mismo, establecer que parte de este será visible.

sintaxis en HTML
elemento {clip: valor;}
por ejemplo: img {clip: rect(0px,50px,50px,0px);}

sintaxis en JAVASCRIPT
elemento.style.clip='valor';
por ejemplo: this.style.clip='rect(0px,50px,50px,0px)';

El valor por defecto es auto y para modificarlo, debemos utilizar este tipo de formato:

rect(top right bottom left)

donde top, right, bottom y left indican el tamaño. Por ejemplo, top especifica que todo lo que está por encima de ese valor es recortado; lo mismo ocurre con los otros parámetros.

Su uso es bastante complejo y limitado porque la propiedad position tiene que ser establecida como absolute.


overflow se utiliza para determinar qué ocurrirá si un elemento es más grande que el objeto que lo contiene.

sintaxis en HTML
elemento {overflow: valor;}
por ejemplo: div {overflow: hidden;}

sintaxis en JAVASCRIPT
elemento.style.overflow='valor';
por ejemplo: this.style.overflow='hidden';

Los posibles valores son:

visible si el elemento es grande, no se corta sino que aparecen barras de desplazamientos
scroll se fuerza a que se muestren barras de desplazamiento aunque el contenido sea menor que el contenedor
hidden todo lo que excede es cortado
auto deja que el navegador decida si las barras de desplazamiento son o no son necesarias

El valor por defecto es visible excepto para BODY y TEXTAREA que tienen el valor auto.

Hay dos propiedades que complementan la anterior.

overflow-x establece la forma en que se manejará el contenido si excede el ancho del objeto y overflow-y hará lo mismo si excede el alto del objeto.

sintaxis en HTML
elemento {overflow-x: valor;}
por ejemplo: div {overflow-x: hidden;}
elemento {overflow-y: valor;}
por ejemplo: div {overflow-y: hidden;}

sintaxis en JAVASCRIPT
elemento.style.overflowX='valor';
por ejemplo: this.style.overflowX='hidden';
elemento.style.overflowY='valor';
por ejemplo: this.style.overflowY='hidden';



Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


vertical-align establece el alineamiento vertical de un elemento.

sintaxis en HTML
elemento {vertical-align: valor;}
por ejemplo: div {vertical-align:bottom;}

sintaxis en JAVASCRIPT
elemento.style.verticalAlign='valor';
por ejemplo: this.style.verticalAlign='bottom';

Por defecto, es baseline y puede tomar estos otros valores: top, middle, bottom, text-top, text-bottom. Además, en los textos, pueden usarse los valores sub y super.

position establece la posición de un elemento

sintaxis en HTML
elemento {position: valor;}
por ejemplo: div {position:relative;}

sintaxis en JAVASCRIPT
elemento.style.position='valor';
por ejemplo: this.style.position='relative';

Los posibles valores son:

static es el valor por defecto
relative permite ubicar el elemento de manera relativa a su posición normal
absolute permite ubicar el elemento de absoluta indicando la posición exacta dentro de la página
fixed se posiciona de manera relativa a la ventana del navegador

La propiedad position se combina con otras cuatro que son las que definen los valores de esa posición cuando se utiliza relative o absolute.

top, right, bottom y left establecen las coordenadas de un elemento.

sintaxis en HTML
elemento {top: valor;}
elemento {right: valor;}
elemento {bottom: valor;}
elemento {left: valor;}
por ejemplo: div {top:10px; left:0px; bottom:20px; right:0px;}

sintaxis en JAVASCRIPT
elemento.style.top='valor';
elemento.style.right='valor';
elemento.style.bottom='valor';
elemento.style.left='valor';
por ejemplo: this.style.left='10px';

Los valores pueden ser expresados en cm, mm, in, pt, pc, px, em o ex.

En Internet Explorer hay una serie de propiedades alternativas que controlan el tamaño y la posición:

elemento.style.posWidth='valor';
elemento.style.posHeight='valor';
elemento.style.posTop='valor';
elemento.style.posRight='valor';
elemento.style.posBottom='valor';
elemento.style.posLeft='valor';

La propiedad z-index establece el orden del elemento, es decir, si irá arriba o abajo de otro.

sintaxis en HTML
elemento {z-index: valor;}
por ejemplo: div {z-index:-1;}

sintaxis en JAVASCRIPT
elemento.style.zIndex='valor';
por ejemplo: this.style.zIndex='-1';

Sólo funciona si la propiedad position ha sido establecida como absloute o relative y los valores pueden ser positivos o negativos. Ver Ubicando elementos con CSS [1 2 3]

SUMARIO:
  • Las propiedades CSS (background)
  • Las propiedades CSS (border)
  • Las propiedades CSS (margin, padding y outline)
  • Las propiedades CSS (textos 1ª parte)
  • Las propiedades CSS (textos 2ª parte)
  • Las propiedades CSS (textos 3ª parte)
  • 22 comentarios:

    La Blogueria  

    Maravillosa explicación. Con esto, ya tenemos, además del estupendo manual HTML en La Bolsa, una guía sencilla y completa de CSS: Gracias.

    Responder
    JMiur  

    Gracias, La Bloguería. En realidad, sólo me limito a enumerar las propiedades sin entrar en detalles y, como ves, son MUCHAS :D

    PD: Ya faltan menos :X

    Responder
    Anónimo  

    muchas gracias, esta completo y muy bien explicado, te luciste con la forma en que muestras los datos =)

    Responder
    JMiur  

    Eso dependerá de cada caso. Por ejemplo, una ventana modal requiere que se muestre por encima sin importar cual sea el contenido de la página y para eso, se suelen usar valores de z-index muy altos de tal forma de asegurarse que siempre esté por encima.

    Lo mismo podría ocurrir si uno quisiera tener contenidos superpuestos de alguna forma y permutarlos al hacer click, por ejemplo, con un menú.

    Es, una herramienta como cualquier otra, útil o no, dependiendo de las circunstancias y de como la utilicemos.

    Responder
    La hormiguita  

    Da lo mismo donde se lo escriba..... S.O.S, saco bandera blanca... le puedo mandar un mail para explicarle bien......:(

    Responder
    JMiur  

    Hazlo y veremos.

    Responder
    Martin Rocha  

    JMiur si quiero ocultar un texto en una entrada pero que si lo indexen los buscadores que es mejor, usar hidden o darle el mismo color del fondo? y estar al final o al principio condiciona en la indexacion?
    Desde ya muchas gracias.

    Responder
    JMiur  

    El CSS no es leído por los buscadores y por lo tanto es lo mismo.

    Sí debe tenerse en cuenta que los textos ocultos que no son accesibles para los visitantes es decir, que no se despliegan y se muestran ante la acción de un usuario, son muy mal considerados por todos los buscadores y pueden implicar una penalización. Lee este artículo de Google.

    Responder
    Martin Rocha  

    Garcias JMiur mejor no hago eso jeje.
    Entncs cual seria la mejor opcion si quiero que el buscador indexe un dato pero que no se vea, en mi caso es "pelicula onlie" pero esto no lo agrego en el titulo pero si quiero que el buscador so tome el post como online.
    Alguna etiqueta alt, descripction?
    Un saludo JMiur que estes bien.

    Responder
    JMiur  

    Si hay una imagen puedes colocar eso en el atributo ALT; si es un video puedes poner un texto visible dentro de la entrada.

    Responder
    Martin Rocha  

    y se puede aplicar algo asi como un alt al post mismo sin ser especificamente a una im o video o su efecto es el mismo al post en gral?

    Responder
    JMiur  

    El atributo ALT sólo se aplica a la etiqueta IMG

    Si usas los condicionales para optimizar la etiqueta TITLE, puedes agregar la palabra online o cualquier otra en el título de las entradas individuales; es la etiqueta básica que leen los buscadores y no tiene nada que ver con el título que se pone en la entrada misma; por ejemplo:

    <title><data:blog.pageName/> ONLINE : nombreBlog</title>

    Responder
    luchosar  

    Maravilloso !

    Responder
    luchosar  

    La mejor explicacion que he encontrado en la red.
    Por favor orienteme en algo.
    Estoy tratando de colocar un logo en la cabecera, pero no logro la ubicacion, este es mi css:
    img.loguito {
    border: 0px;
    left: 10%;
    padding: 10px;
    margin:5px 0 0 5px;
    height: 280px;
    width: 300px;
    position: absolute;
    top: 25px;
    z-index: 2;
    }

    Responder
    luchosar  

    Por favor mire esta imagen, aqui explico mejor: http://www.showfactory.co/wp-content/uploads/2012/04/ubicacion.png

    JMiur  

    Puden ser muchas razones; debería ver el ejemplo concreto online para decirte el motivo; puede ser que el logo esté en el DIV erróneo o que la posicion absoluta hace referencia a una posición relativa equivocada o vaya uno a saber. Sin verlo es imposible decir nada.

    Responder
    luchosar  

    Gracias por su respuesta.
    Dejare ese proyecto en remojo mientras termino este otro.
    Mi sitio subetunoticia.com es una web donde los usuarios suben sus propias noticias despues de registrarse, pero ocurre que las imagenes que suben aparecen una encima de la otra, puedria usted orientarme que debo corregir para que esto no ocurra ? este es la web: http://www.subetunoticia.com/de-quien-es-esta-calle/
    Muchas gracias de nuevo por su gentil apreciacion.

    Responder
    luchosar  

    logre hacerlo agregando :
    float: left;
    clear: none;

    Responder
    piXel  

    JMiur.. cómo andas??
    Estuve jugando un poco en este sitio (http://www.questampa.com.ar/), con las imágenes y CSS, pero resulta que al publicar una imagen todas se expanden automáticamente a su máximo tamaño, sin importar las propiedades de alto y ancho que colore en el post..

    Supongo que debe ser algún estilo pre-definido de la planilla lo que está cambiando el tamaño, pero no logro darme cuenta cual es... me podrás dar una mano?

    JMiur  

    En tu plantilla, parece haber dos reglas de estilo iguales pero, con distintas propiedades; la primera dice:

    .post img {
    padding:0px;
    /* width:auto !important;*/
    /* height:auto !important;*/
    margin:0;
    border:5px solid #e6e6e6;
    }

    y la segunda dice:

    .post img {
    margin:0 auto 10px;
    display:block;
    border:5px solid #e6e6e6;
    width:569px !important;
    height:auto;
    }

    y ese es el problema. La segunda, indica que las imagenes tengan siempre un ancho de 569 pixeles; deberías unificar ambas reglas y, en todo caso, eliminar la propiedad width que has agregado.

    piXel  

    Ahí estaba!! jaja muchas gracias!!. ya me estaba mariando entre tantos estilos..

    Saludos.

    JMiur  

    Perfecto, PiXel :D

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR