Bienvenid@s – Slides – CSS

View Github Repository Open presentation in a new window

jonmircha

See all presentation from jonmircha

Bienvenid@s – Slides – CSS

0 0

slides-css

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

On Github jonmircha / slides-css

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

Etiquetas HTML Identificadores Clases 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 { ... }

Pseudoclases / elementos

Son estados o usos especiales de los Selectores CSS Por ej. Al estar el ratón sobre un enlacea:hover { ... } Por ej. El primer elemento de una lista ordenadaol>li:first-child { ... }

Reglas para maquetar CSS

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

Unidades de Medida CSS

Absolutas
  • Pixeles (px)
  • Puntos (pt)
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:

RGB-Medios Digitales 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 CSS

Partes del modelo de caja

Contenido:    content Relleno:    padding Borde:    border Imagen de fondo:    background-image Color de fondo:    background-color Margen:    margin

Propiedades importantes del modelo de caja

Border: Borde, es la linea que delimita los elementos divide el margin del padding Padding: Relleno, distancia interna que hay entre los márgenes del elemento(top,right,bottom,left) y su contenido 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

CSS para Resetear y Normalizar

Muchas Gracias

j@bextlan.com

#bextlanweb