sábado, 28 de febrero de 2009

Modos resumidos en CSS

Los modos resumidos, son una manera de ahorrar espacio y texto en nuestras propiedades CSS, consiste en meter en una simple linea todos lo valores que son necesarios para establecer las propiedades de un objeto o texto.


Pero las únicas propiedades que permiten esto son aquellas como margin, padding, border, font y background que tienen multiples subpropiedades exclusivas, por ejemplo; font tiene font-size, font-family, font-style, etcétera, que se pueden meter en la propiedad mayor font.

Esto tiene muchas ventajas, el problema viene de que puede en muchos aspectos hacer más complicadas las cosas para otros diseñadores web menos expertos, más si es para trabajos en grupo.

Las subpropiedades por otro lado no pueden contener los elementos de otras subpropiedades aunque sean del mismo tipo.

Ejemplos de resumir propiedades CSS con Font:

Modo normal
font-family:arial, helvética, sans-serif;
font-size:2em;
font-style:italic
Modo resumido
font: 2em italic arial, helvética, sans-serif;
Como pueden ver la diferencia es notable y ambas dan el mismo resultado (notese que los valores de font-family van al final).

Padding, Margin y la regla del reloj
En los casos especiales de Padding y Margin se aplican la regla del reloj donde los valores se ordenan: Arriba, derecha, abajo, izquierda, en sentido de las manecillas del reloj.

En el caso de padding, se tienen las propiedades (aprenda el orden): padding-top, padding-right, padding-botom y padding-left.

En modo normal
padding-top: 15px
padding.right: 5px
padding-botom:  15px
padding-left: 5px

En modo resumido lo podríamos poner como:
padding:15px 5px 15px 5px;

o como:
padding:15px 5px;

Esto es debido a que si arriba y abajo comparten el mismo valor y derecha e izquierda tienen la misma situación, por tanto se pueden expresar en valores verticales y horizontales, esto es, simplificar en dos valores simples.

El otro caso sería cuando el valor final, padding-left, es igual a padding-right, pero los valores de arriba y abajo son distintas.

En modo normal
padding-top: 9px
padding.right: 5px
padding-botom:  20px
padding-left: 5px
En modo resumido
padding:9px 5px 20px;

Como padding-top y padding-botom tienen diferente valor no podemos resumirlos más y tienen que ponerse según su orden: arriba, derecha, abajo, izquierda. Pero como el valor de padding-left, es igual a padding-right se permite excluir el último valor tomando como referente padding-right.

Así entonces resumir tiene enormes ventajas que cualquiera puede exprimir si tiene la suficiente paciencia y comprenda que, a veces, el lenguaje optimizado puede tener sus inconvenientes, sobre todo si se trabaja con gente inexperta que sólo aprende lo básico de CSS.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.