Bienvenid@s

Al Curso de Diseño y Programación Web de Bextlán

Slides

jonmircha.github.io/slides-css

Un especial agradecimiento a

TOD@S USTEDES QUE HAN DEPOSITADO SU CONFIANZA EN ESTE CURSO

=D

por @jonmircha fundador de @bextlan

Jonathan MirCha

Ing. en Sistemas
Mtro. en Comunicación con Medios Virtuales

Creativo de la Web - Docente Digital - Frontend

Maratonista

CSS

Hojas de Estilos en Cascada (Cascading Style Sheets)


Es un lenguaje usado para definir la presentación de un documento HTML


Su objetivo es separar el contenido (HTML) de la presentación

Sintaxis CSS:

selector
{
    atributo:valor;
    atributo:valor;
    atributo:valor;
}

Selectores CSS

  1. Etiquetas HTML
  2. Identificadores
  3. Clases
  4. Pseudo clases/elementos

Identificadores


Elemento único en el documento

HTML como atributo ej.
<div id="unico">contenido</div>

CSS como selector ej.
#unico { ... }

Clases


Cuando tenemos que dar estilos a varios elementos

HTML como atributo ej.
<div class="redondo">contenido</div>

CSS como selector ej.
.redondo { ... }

Pseudo
clases / elementos


Son estados o usos especiales de los Selectores CSS

Por ej. Al estar el ratón sobre un enlace
a:hover { ... }

Por ej. El primer elemento de una lista ordenada
ol>li:first-child { ... }

Reglas para maquetar CSS

  1. Define los estilos en el siguiente orden:
    • CSS para resetear o normalizar
    • Etiquetas HTML
    • Identificadores
    • Clases
    • Media Queries
  2. Ve de lo General a lo Particular y hazlo alfabéticamente
  3. Definir un tamaño de fuente al Documento HTML
  4. CSS Orientado a Objetos

Unidades de Medida CSS

  1. Absolutas
    • Pixeles (px)
    • Puntos (pt)
  2. Relativas
    • Porcentajes (%)
      Relativo al selector padre
    • Em's (em)
      Ancho de la M son relativos al selector padre
    • Rem's (rem)
      Root em son relativos al selector html

Equivalencias de unidades



100% = 1em = 16px = 12pt

pxtoem.com

Colores


Sistemas:


  1. RGB-Medios Digitales
  2. CMYK-Medios Impresos


En HTML el RGB se maneja en código hexadecimal
(base 16, Dígitos del 0-9 y de la A-F)

6 dígitos, una pareja por cada canal de color


R G B
# 00 00 00 negro 000 black
# FF 00 00 rojo F00 red
# FF FF 00 amarillo FF0 yellow
# 00 FF 00 verde 0F0 green
# 12 34 56
# F0 F8 FF aliceblue
# FF EE 34
# FF FF FF blanco FFF white

Sitios Recomendados:

HTML


Colores


Libros


Fuentes


Iconos con Fuentes


Compatibilidad HTML5


Modelo de Caja en CSS

El modelo de caja o "box model" es una de las característica más importante de CSS, ya que condiciona el diseño de la web.


El modelo de caja hace que todos los elementos de un documento HTML se representen mediante cajas rectangulares. CSS permite controlar el aspecto de todas las cajas (contenedores).

CSS permite definir la altura y anchura de cada caja, el margen existente entre cajas y el espacio de relleno interior que muestra cada caja.


Además, CSS permite controlar la forma en la que se visualizan pero la mayoría de cajas no muestran ningún color de fondo ni ningún borde, no son visibles a simple vista.

Modelo de Caja CSS en la vida real

¡WTF!   \?_?/

Modelo de Caja
Modelo de Caja CSS
Modelo de Caja

Partes del modelo de caja

  1. Contenido:    content
  2. Relleno:    padding
  3. Borde:    border
  4. Imagen de fondo:    background-image
  5. Color de fondo:    background-color
  6. Margen:    margin

Propiedades importantes del modelo de caja

  1. Border: Borde, es la linea que delimita los elementos divide el margin del padding

  2. Padding: Relleno, distancia interna que hay entre los márgenes del elemento(top,right,bottom,left) y su contenido

  3. Margin Margen, distancia externa que hay entre los elementos y los márgenes del documento u otros elementos (top,right,bottom,left)

Propiedades y Ejemplos de Border

  • border-width: thin | thick | medium | 10px | 1em;
  • border-style: solid | dashed | dotted;
  • border-color: #F60 | orange;
  • border: thin solid #F60; -> shorthand

Ejemplos de Margin y Padding

  • 4 margenes/bordes
  • top/bottom = verticales
  • left/right = horizontales
  • 1 valor = Se aplica a los 4 lados
  • margin: 1em;
  • padding: 1em;
  • 2 valores:
    • 1° es para top y bottom
    • 2° es para left y right
  • margin: 1em 2em;
  • padding: 0 1em;
  • 3 valores:
    • 1° es para top
    • 2° es para left y right
    • 3° es para bottom
  • margin: 1em auto 2em;
  • padding: 2em 0 .5em;
  • 4 valores: En sentido de las manecillas del reloj
    • 1° es para top
    • 2° es para right
    • 3° es para bottom
    • 4° es para left
  • margin: 1em 3em 2em 0;
  • padding: 2em 1em 0 .5em;
  • Especificando cada lado
    • margin-top, margin-right, margin-bottom, margin-left
    • padding-top, padding-right, padding-bottom, padding-left

Los atributos del modelo de caja (border, margin y padding) por defecto aumentarán el ancho(width) y alto(height) de la misma.


+INFO

Otra perspectiva

Modelo de Caja

CSS para Resetear y Normalizar

Muchas Gracias

j@bextlan.com

#bextlanweb