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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[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.

Anexos

Bitacoras.com