igual rights

Aprendiendo sobre propiedades básicas #1.

El código te puede parecer chino mandarín cuando no lo entiendes, así que perderle el miedo es la clave para poder utilizarlo a tu favor. Las posibilidades que te ofrece son infinitas así que, vamos paso por paso, y aprendamos un poco qué hace cada propiedad. Ten en cuenta que lo expongo aquí son mis propias visiones/maneras de entender el código; y que la manera en la que expreso el contenido tratará de ser lo más simple posible.

  • Width. Ancho. Lo que mide un elemento de lado a lado horizontal.
  • Height. Largo. Lo que mide un elemento desde arriba hasta abajo.
  • Padding. Relleno. No te guíes por la traducción literal, el padding entiéndelo como el espacio que rellena un elemento.
  • Padding-top(bottom,left,right). Igual que lo de arriba, pero afectando sólo a uno de los lados del elemento, es decir, se generará un espacio entre el borde de la caja y el contenido sólo por el extremo que queramos.
  • Background. Fondo. Para esta propiedad se puede poner un color, con el código hexadecimal (por ejemplo: #FFFFFF) o una imagen (más adelante explicaré cómo hacerlo). Pero, además, ofrece muchas más propiedades y variables que explicaré en los posteriores tutoriales.
  • Border. Borde. Un elemento que rodea a otro en toda su extensión. Puede ser de un ancho y estilo variable.
  • Border-top(bottom,left,right). Un borde que sólo afecta a uno de los lados del elemento, a nuestra elección.
  • Border-radius. Borde circular (convierte el elemento en un círculo/elipsis). Se puede medir en píxeles o en porcentajes.
  • Margin. Margen o sangría. A diferencia del padding que lo que hace es poner espacio dentro del elemento (lo expande), el margin es el espacio que dejaremos fuera de la caja o elemento con respecto a otros elementos.
  • Margin-top(bottom,left,right). El margen que queremos dejar sólo por uno de los lados del elemento con respecto al exterior.
  • Font. Fuente. El tamaño de la letra y su tipografía ahora se pueden simplificar, por ejemplo: font:12px Arial. Hasta no hace mucho se colocaban por separado: font-size:12px;font-family;Arial. Si sigues escribiéndolo de esta manera estás desfasadX, puedes ahorrarte código y tiempo de la manera simplificada. Con respecto a las fuentes haré un tutorial más extenso así que no me voy a entretener ahora con ello.
  • Color. El color de la fuente. Tiene que ir seguido de un código hexadecimal, principalmente (ejemplo: color:#FFFFFF), pero hay otras variables que ya analizaremos.
  • Letter-spacing. El espacio entre las letras de un texto. E j e m p l o, algo así.
  • Text-align. Alineación del texto. Puede ir a la izquierda (left), centrado (center), derecha (right), justificado (justify), etc.
  • Text-transform. Transformación del texto. Puede hacerse el texto en mayúsculas (uppercase), minúsculas (lowercase), escribir sólo las iniciales en mayúsculas (capitalize), etc.
  • Text-shadow. Sombra del texto. Se puede colocar la sombra y establecer el color de la misma.
  • Font-style. El estilo de la fuente. Puede ser cursiva (italic), oblicua (oblique) o normal.
  • Font-weight. El peso de la fuente. Puede ser negrita (bold), más negrita (bolder), más fina (lighter), etc. También se puede medir en parámetros, del 100-900 (siendo 100 más suave, 900 más negrita).
  • Line-height. Determina la altura de una línea dentro de un elemento, normalmente se usa para alinear el texto. Se puede determinar en píxeles o en porcentajes.

A priori, se puede decir que controlando estas propiedades se puede empezar a entender el código. Es algo así como el primer pasito, quedan muchísimos más por dar pero, ¡paciencia! Puedes ir probando a manejarte con estos elementos y ver cómo funcionan.

¿Tienes dudas sobre alguna propiedad en concreto? ¡Pregunta! También puedes sugerir tutoriales sobre una propiedad que no esté mencionada ya aquí (mi intención es profundizar poco a poco en cada una de estas propiedades listadas antes de pasar a propiedades más avanzadas).

Si te ha servido este tutorial, me harías un favor compartiéndolo, reblogueándolo o dándole a “me gusta”. ¡Un saludo! ;-)

Eu quero pra sempre ser o cara dessa foto I want forever be the guy of thia pic

I’m so fucking happy for being where i’m, for my body, my transition and the peoples around me,  beautifull trans peoples and allies. Happy visibility day for us in Brazil