Skip to content

Latest commit

 

History

History
187 lines (136 loc) · 9.63 KB

propiedades.md

File metadata and controls

187 lines (136 loc) · 9.63 KB
Raw

#Propiedades Hemos visto una forma de aplicar estilos a nuestro HTML, en el siguiente capítulo veremos otras formas, pero de momento nos vamos a quedar aquí y vamos a ver en detalle algunas de las propiedades más usadas en CSS.

Modificar el color

La propiedad color se puede usar en cualquier elemento, aunque principalmente se usa para modificar el color del texto, esta no es su única función1.

Existen múltiples formas de especificar el color, aquí veremos tres, mediante su:

Ahora vamos a ver tres formas equivalentes de representar el color rojo:

h1{
    color: rgb(255, 0, 0);
}
h1{
    color: #F00;
}
h1{
    color: rgba(255, 0, 0, 1);
}

Ejemplo interactivo: Lección 1 - Snippet 1.

En RGB si indica en cada uno de los valores la cantidad de Rojo (Red), Verde (Green) y Azul (Blue) que tiene que combinar. Este valor puede ser un porcentaje o un valor comprendido entre 0 y 255, siendo 255 equivalente a 100%.

Por otro lado comentar que el valor hexadecimal "FF" equivale a "255". Existen múltiples conversores de decimal a hexadecimal y viceversa, la principal ventaja de usar este formato es que ocupa menos caracteres y por tanto menos espacio en disco (lo cual es óptimo para mejorar los tiempos de carga de un fichero2). Por último, cuando un valor hexadecimal contiene 3 caracteres significa que cada uno de ellos se repite dos veces, ej: #faf es igual que #ffaaff.

Cuando lleguemos al apartado de "Estilos con DevTools" veremos una manera sencilla de usar un círculo cromático para conocer/elegir el color de un elemento.

Modificar la fuente

Para modificar las propiedades de la fuente (font) tenemos distintas propiedades:

  • font-size: nos permite especificar el tamaño de la fuente
  • font-style: nos permite darle estilo a la fuente (p.e.: normal o italic)
  • font-family: establece una lista de fuentes (Arial, Helvetica, sans-serif;)
  • font-weight: nos permite especificar el ancho de la fuente (bold, 400, 600, ...)
  • font: atajo para establecer varias propiedades

Ejemplo interactivo: Lección 1 - Snippet 2.

font-size

En cuanto al tamaño hay varias formas de especificarlo, pero vamos a ver cómo especificar el tamaño usando unidades de longitud, por ejemplo:

  • px: representan un tamaño absoluto.
  • em: representan un valor relativo respecto al elemento DOM padre.
  • rem (root em): representan un valor relativo respecto al elemento body.

Un elemento puede tener múltiples estilos como vemos a continuación:

h1{
    color: #F00;
    font-size: 16px;
}

Al igual que con los colores, veremos cómo jugar con estos valores usando Chrome DevTools.

font-style

Los valores que puede contener son: normal | italic | oblique | inherit, "inherit" significa que tome el valor del elemento padre, y "oblique" e "italic" indican que la fuente se muestre el cursiva:

h1{
    color: #F00;
    font-size: 16px;
    font-style: italic;
}

font-family

Esta propiedad indica la fuente que queremos usar, por defecto3 sólo se pueden especificar fuentes que tenga el usuario instaladas en su sistema operativo, ¿pero cómo sabemos cuales son?. Bueno, existen algunas fuentes que se considera seguras y que por tanto podemos contar con que estarán disponibles en casi cualquier sistema operativo.

Además de esto podemos introducir una lista de fuentes separadas por comas, de este modo en caso de que no se encuentre la primera fuente especificada se intentará con las posteriores.

Aquí podemos ver un ejemplo:

body{
    font-family: "Times New Roman", Times, serif;
}

Si nos fijamos también veremos que aquellas fuentes que tengan nombres compuestos (con espacios) deben ir encerradas entre comillas dobles.

En la siguiente lección veremos una forma sencilla de utilizar fuentes que no estén instaladas en el sistema operativo usando CSS3.

font-weight

Esta propiedad hace referencia al grosor de la fuente y puede tomar múltiples valores: ```normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit````

De aquí merece la pena mencionar:

  • Que "normal" es sinónimo de "400" y "bold" de "700", este último representaría una negrita
  • No todos los valores están disponibles para todas las fuentes, de hecho salvo que se usen fuentes personalizadas es difícil encontrar fuentes con anchos distintos a 400 o 700.

Un ejemplo:

body{
    font-family: "Times New Roman", Times, serif;
    font-weight: 700;
}

font

Como comentábamos esta es una forma de agrupar múltiples valores en una sola propiedad, no es trivial de recordar y por tanto no te recomiendo que la uses mientras estás empezando porque puede darte problemas.

Para que te suene si te lo encuentras en el código de alguien tiene este aspecto:

h1{
   font: bold 1.2em Helvetica, Arial, sans-serif;
}

Modificar el texto

Para modificar el texto (text) tenemos otras propiedades:

  • text-align: para alinear el texto (left, right, center, justify)
  • text-decoration: permite añadir un subrayado, tachar una palabra, etc (underline, line-throught, ...)
  • text-transform: permite transformar en mayúsculas, minúculas, etc (uppercase, lowercase, capitalize, ...)
  • line-height: permite ajustar el interlineado usando unidades como vimos antes (px, em, rem, ...).

Puedes ver el detalle de cada una de las propiedades haciendo clic sobre el enlace en cada una.

Por simplificar aquí te mostramos algunos ejemplos:

h1{
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
}
.p{
    line-height: 1.5em;
}

Otras etiquetas habituales

No es el objetivo de este curso ver todas las propiedades CSS ya que son muchas y la mejor forma de aprenderlas es con la práctica, pero antes de terminar esta lección me gustaría nombrarte algunas más:

  • background y background-color: que como su nombre indica nos permite cambiar el fondo de un elemento (ver más).
  • list-style, list-style-image y list-type: nos permite modificar la imagen que precede a los elementos de una lista, etc (ver más).

Ejemplos:

body{ background-color: #efefef; }
h1{ background: url("fondo-encabezado.jpg") no-repeat center; }

li{ list-style: none; }
li{ list-style: square outsite; }
li{ list-style-image: url("punto.jpg"); }
li{ list-style-type: upper-roman; }

Ejemplo interactivo:

Luego veremos cómo usar DevTools para editar estos estilos "en caliente", aprender los valores que admiten las propiedades y en definitiva cómo experimentar de manera rápida y sencilla.

Nota: en ocasiones cuando a elemento sólo se le define una propiedad te encontrarás que algunas personas lo escriben en una sola línea.

Chuleta CSS

Ya hemos visto unos pocos estilos, conforme avancemos seguramente te cueste recordarlos así que al igual que con HTML aquí te dejo una chuleta de CSS3 con sus propiedades, y no te asustes, no creo que haya nadie que se las conozca todas, a lo largo de este curso te explicaré sólo aquellas que necesitarás con frecuencia y te enseñaré como puedes seguir luego descubriendo más por tu cuenta.

Aclaraciones:

  1. En este artículo se puede leer cómo la propiedad color no sólo afecta al texto
  2. Una hoja de estilos de un proyecto mediano puede tener de cientos a miles de líneas, en estos casos reducir el número de caracteres puede ayudar a reducir el tamaño del fichero en bastantes KB lo que hace que la página cargue un poco más rápido.
  3. En CSS 2.1 no se podían usar fuentes personalizadas, esta es una nueva características incorporada en CSS3.