hand Inicio

SERVICIOS

Salir

nochedía

CSS básico

2100 palabras
8 minutos
July 6, 2020

Si desarrollas webs, el css es absolutamente indispensable, ya sea a nivel de mínimos para hacer una interfaz espartana, o con un conocimiento elevado para poder dotar de una estética decente a nuestro proyecto

En cualquier caso, es más sencillo de lo que quizás pueda parecer

Prólogo

Curso básico de css

Dicho así suena a poco, pero el css (Cascade Style Sheet) es la parte visible de la web y es evidentemente esencial, y por tanto dominar el css es obligado en tanto en cuanto sabemos que la estética puede ayudar mucho a convertir

Ojo, la estética sin contenido no convierte (a no ser que estés vendiendo estética), pero el contenido con estética gana muchos puntos

Y por estética no me refiero a tener un diseño concreto, sino a tener un diseño, donde normalmente aplica aquello de menos es más

Si alguno te dice que la estética no sirve, que lo importante es el copywriting, dile que ponga todo su texto sin separaciones de párrafo, con una letra pequeña y con poco contraste con el fondo, a ver si la estética importa o no

Vamos allá

  1. Prólogo
  2. Introducción
  3. Repaso a las normas más comunes de css
  4. Trabajar con clases
  5. Seleccionar elementos
  6. Unidades
  7. Comentario

Introducción

Cómo funciona el css

El css es un conjunto de instrucciones que definen unas propiedades estéticas determinadas de un documento html (tienes el curso básico de html aquí)

Y lo definimos en el propio documento de html, de distintas formas

Es decir, definimos los estilos css mediante

  • el atributo style que bien puede estar dentro del mismo elemento html (de forma inline)
  • separado dentro de los tags <style> (donde utilizaremos los class o los id para referirnos a los elementos que queremos estilar)
  • o separado en un archivo aparte

En cualquier caso esto sería todo, ahora se trataría de ir añadiendo normas css y listos

El problema del css

Si hacemos lo anterior, terminaremos con una lista enorme de reglas css que rápidamente se convertirá en un monstruo ingobernable

Ingobernable en el sentido de

  • Nos costará organizar toda la maraña de css
  • Nos costará encontrar qué estilo hace qué
  • Nos costará no ser redundantes
  • Nos costará identificar qué estilos se pueden borrar

Este curso no va de solucionar este problema, pero es algo que harás sí o sí, simplemente me limito a mencionarte la mejor opción para mi que es el CSS in JS, que te permite vincular unas normas css a un componente de tipo React

Esto sería lo mismo que dividir tus normas css en distintos archivos e importarlos para distintas partes de tu documento html, pero de una forma automatizada y con el poder de JavaScript para introducir variables y funciones

Hay otras alternativas y al final también dependerá de para qué estés programando, pero lo dejo aquí

Fuentes (tipografía)

Antes de empezar con algunas de las normas css más habituales, hablemos de las fuentes

Es quizá el elemento más importante de tu documento: la fuente que vayas a utilizar

Cómo funciona?

Tenemos que importarlas

Una de las aproximaciones populares es bajarse la fuente de algún servicio online (el mejor es el Google WebFonts Helper, puedes leer algo más del tema en la entrada que hice sobre el tema aquí)

Lo haríamos así

Con la parte display=swap estamos diciendo que mientras que la fuente se vaya cargando, que el navegador utilice alguna fuente que ya tenga disponible (que venga con el sistema operativo) para que el usuario empiece a ver contenido

Y con la parte family=Barriecito|Gothic+A1|Lacquer|Roboto le estoy diciendo que me importe 4 fuentes distintas

Lo que se recomienda es utilizar sólo 2 fuentes por temas de velocidad (y por lo tanto puntuación en el ranking de Google), pero siempre dependerá del objetivo de tu página web (que no tiene porque ser el querer posicionarse bien por SEO)

Viewport

Otro tema importante que posiblemente nunca utilicemos es el de definir el <meta name="viewport" />

Esto es importante porque tiene una incidencia directa en la estética de nuestra página web, así que aunque no sea css encaja muy bien en el universo css

Qué es el viewport?

Es el área visible de la pantalla, lo que el usuario ve quitando todos los elementos sobrantes (por ejemplo quitando el espacio que ocupe la barra de scroll)

Qué le estamos diciendo al navegador?

Con content="width=device-width,initial-scale=1" le estamos diciendo que el viewport esté en consonancia con las medidas del device y que parta de una escala de 1

Sin esta instrucción, los navegadores intentarían mostrar las páginas haciendo la siguiente equivalencia:

  • Si tu escritorio es de 1080p, tu pantalla de móvil se comportará como si también fuera de 360p

Es esa época donde todo se veía muy pequeño y tenías que hacer zoom constantemente

Si le especificamos esa instrucción, entonces los navegadores lo que harán es no hacer esta equivalencia y decir

  • Si tu página tiene 1080px, y el móvil tiene 360px, pues yo te muestro 360px y tu ya verás

A partir de ahí ya es responsabilidad nuestra adaptar el contenido para que sea responsive

Podríamos cambiar estos valores por JavaScript, pero es muchísimo mejor adaptar el responsive con normas css

Repaso a las normas más comunes de css

Este sería un ejemplo de documento html con un archivo css externo que nos servirá como esqueleto

En este archivo estamos importando el archivo styles.css y es en ese archivo que definimos las normas css

Aquí me limito a definir las fuentes para los elementos <body>, <h1>, <h2> y <h3>

En el primer caso, ya que todos los elementos se encuentran dentro del <body>, esto quiere decir que esos estilos se aplicarán en todos esos elementos

Pero en css cuanto más específico más preferencia hay, por lo que por ejemplo en los elementos <h1> prevalecerá la norma que hemos definido para ese elemento al ser más específica

Un detalle, en css todas las reglas o normas deben terminar con punto y coma ;

CSS para fuentes y texto

font-family

Sirve para definir la fuente que queremos utilizar (ya lo hemos visto antes)

Por qué ponemos más de una? Por si acaso esa no existe o tarda en cargarse, normalmente vamos añadiendo fuentes que son más comunes (fuentes que están por defecto en distintos sistemas operativos)

A esas combinaciones se les llama fontstacks y existen distintas opciones

Si la fuente es una palabra basta con ponerla tal cual, pero si son dos palabras con espacios en blanco en medio necesitamos comillas

font-size

Para establecer el tamaño, históricamente definido con píxeles font-size: 18px;

font-weight

Negrita? Normal? lo definimos aquí, en números o en palabras

font-style

Por si quieres cursiva, o por si quieres contrarrestar la cursiva que viene por defecto en tags como por ejemplo el <em>

text-transform

Útil cuando queremos mostrar un texto en mayúsculas, no hace falta cambiar el texto!

text-decoration

Lo utilizaremos sobre todo para los links <a> y evitar que se decoren por defecto (y decorarlos como queramos nosotros)

text-align

Para alinear el texto en horizontal con por ejemplo text-align: center;, útil en esos casos donde no puedas utilizar las propiedades flex o grid (que las vemos en un momento)

letter-spacing

Muy útil para alterar la fuente a nivel de los espacios entre letras y adaptarlas a tu gusto

El impacto de cambiar esta propiedad es alto, la tipografía puede parecer otra

word-spacing

Lo mismo que antes, pero definiendo espacio entre palabras en lugar de entre letras

line-height

La distancia entre líneas, tiene también un impacto alto en la estética de la página

color

Auto-explicativo, pero que sepas que el color lo podemos definir de distintas maneras

Yo soy siempre de utilizar la versión HEX (las 2 primeras)

writing-mode

Para escribir en horizontal o en vertical, aunque también podríamos hacerlo simplemente rotando el elemento

CSS para color de fondo y más

background-color

Para especificar el color del fondo, con colores planos, con transparencias o con gradientes (puedes echarle un ojo a el generador de gradientes kuworking aquí)

border

Para añadir un borde definiendo el grueso, el estilo y el color, por separado o (mejor) en una única línea

border-radius

Posiblemente el elemento más utilizado en css por su altísimo impacto en la estética, los bordes redondeados

CSS para espacios

padding y margin

Padding para el espacio entre el texto (o contenido) y el borde

Margin para el espacio entre el borde y lo demás

En un ejemplo

Y el resultado es éste

image

CSS para bloques

display

Display nos define la manera en cómo estructuramos el contenido con css

Las grandes opciones son flex y grid, y nos permiten estructurar la malla de contenidos de cierta manera (que es algo compleja y no lo daremos aquí)

Las otras opciones son block, inline y inline-block

Un elemento con display: block; ocupan una nueva línea cada uno, o dicho de otro modo no permiten que otros elementos se sitúen a su derecha o a su izquierda

Los elementos inline sí lo permiten

image

La diferencia entre inline e inline-block es por lo tanto que el segundo sí que hace caso a la propiedad height mientras que el primero no

En otras palabras, el inline-block viene a ser una mezcla de inline y block

width y height

Para especificar el ancho y alto del contenido, normalmente ese ancho y ese alto no lo sabremos ya que dependerá de lo que vaya dentro, y eso acostumbra a no estar fijado

Es por eso que las propiedades relativas nos son muy útiles

overflow

Si el contenido es mayor que el contenedor, que queremos que pase? Que salga? Que no se muestre? Que aparezcan scrolls? Con overflow: auto; o overflow: hidden; lo podemos delimitar

CSS para efectos con el ratón

css nos da la opción a hacer cambios en base a movimientos del ratón, algo que se parece mucho a programar con css

El más evidente es definirlo para cuando el ratón pase por encima, aunque este efecto no se observará cuando estemos en el móvil (y por eso mismo la tendencia es a no utilizar esos efectos a no ser que tu público esté muy definido en cuanto a qué device utilice)

image

Trabajar con clases

Es lo que hemos estado haciendo todo el rato, es la manera que tenemos para apuntar a un elemento concreto

Lo podemos hacer con clases o con identificadores, o también con selectores

image

Seleccionar elementos

Acabamos de ver un ejemplo arriba de cómo seleccionar elementos, bien con id, bien con classes, bien con selectores

De selectores hemos visto el nth-of-type() que nos permite seleccionar un elemento basado en la posición que ocupe, o una serie de elementos utilizando la variable por defecto n

Pero los selectores nos permiten mucho más

Desde seleccionar elementos que tengan una jerarquía determinada, hasta seleccionar elementos con una propiedad determinada

Por ejemplo:

image

Con el operador > le decimos que la relación entre los dos elementos es de padre - hijo

Con el selector [propiedad = valor] estamos seleccionando sólo aquellos elementos que cumplan esa condición, algo potentísimo y que dotan de cierta capacidad de programación el lenguaje css

Ojo con el selector, aquí utilizamos un sólo símbolo de =, mientras que en todos los lenguajes de programación utilizaríamos == o ' ===' para comparar

Tenemos otros selectores

(que lo sepas)

Unidades

Terminamos con las unidades

Hay dos maneras de expresar medidas en css, las absolutas y las relativas

Si vamos con unidades absolutas, si el usuario decide cambiar el tamaño del texto en su navegador, nuestra página web ignorará esos cambios

Esa es la única razón para utilizar unidades relativas, y es discutida ya que cuánta gente realmente cambia el tamaño del texto de esta manera? Lo habitual es cambiar el nivel del zoom de la página

Dicho esto, la opción existe y aunque está algo escondida dentro del navegador, puede utilizarse

Bien, pues si queremos cubrir esa posibilidad, podemos utilizar unidades relativas

El coste? Que perdemos la perspectiva ya que es más complicado de leer un font-size: 2.6em; que un font-size: 18px

Las unidades em y rem

Las unidades em nos son muy útiles porque heredan de sus padres y nos permiten modificar el tamaño de un modo relativo

Por ejemplo, imaginemos que tenemos un texto responsive que cambia entre 14px, 16px y 18px

Si definimos un tamaño de texto como font-size: 1.2em;, ese tamaño se adaptará a lo anterior y siempre será 1.2em de 14px o de 16px o de 18px

En cambio las unidades rem no dependen de nada, son absolutas, pero se definen respecto al tamaño de fuente de la raíz del documento, y sobre todo, son también relativas a lo que el navegador diga en su configuración

El problema es lo que he dicho antes, que 18px se leen fácilmente, però 0.75rem no

Lo podemos solucionar?

Sí, podemos hacer lo siguiente

Qué conseguimos con esto?

Estamos igualando las unidades de los píxeles con las unidades rem

Así, si queremos poner 27px sabemos que podemos poner 2.7rem y será lo mismo

Y por lo tanto ya no tenemos excusas para no utilizar unidades relativas

Unidades viewport

Por último, las unidades viewport, que serían equivalentes a utilizar porcentajes

La diferencia sería que el porcentaje incluiría elementos como el scroll que pueda haber, mientras que el viewport no lo incluye

Sin más

Comentario

Con esto ya tenemos una idea de cómo funciona el css

Evidentemente hasta que no se practica uno no acaba recordando las normas más comunes, pero una vez entendida la estructura ya es un tema de memorizar

Por qué es importante tener una idea general sin profundizar demasiado? Porque ahora con esto ya podremos entender qué son los sass, los stylus, o mi opción preferida los css-in-js

No necesitamos ser unos gurus del css para entender lo anterior, pero sí necesitamos saber cómo funciona el css

Pues ya lo tenemos

🙋‍♂️

Qué tal el curso?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]