PAW

Lic. en Sistemas de Información

PAW

Lic. en Sistemas de Información

Speaker:

A.S. Pablo Cesar CHALE

pcchale@gmail.com

CSS

Formato de texto

Índice:

  1. Introducción
  2. Selectores
  3. Formato de Texto
  4. El modelo de caja
  5. Layouts
  6. Media Querys
  7. Animaciones

Tipografía

font-family:

Lista de fuentes a utilizar

Terminar con la familia genérica

[ serif | Sans Serif | Cursive | Fantasy | Monospace ] 


		
 Texto de Ejemplo

Texto de Ejemplo

¿Serif?

WebFonts

@font-face

Ancho de la letra

font-weight:

[ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ]

[ normal | bold ]

[ bolder | lighter ]

Inclinación de la letra

font-style:

[ normal | italic | oblique ]

Tamaño de la letra

font-size:

Tamaño Absoluto

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

Tamaño relativo

[ larger | smaller ]

Unidades de medida de longitud

Font-relative

em, ex, rem,

lh, rlh

Ojo con los %

Viewport-percentage

vw, vh, vmin, vmax

Absolute lengths

unit name equivalence
cm centimeters 1cm
mm millimeters 1mm = 1/10th of 1cm
Q quarter-millimeters 1Q = 1/40th of 1cm
in inches 1in = 2.54cm = 96px
pc picas 1pc = 1/6th of 1in
pt points 1pt = 1/72th of 1in
px pixels 1px = 1/96th of 1in

Color de la letra

color:

Lista de nombres

Básica

Black , Silver , Gray , White , Maroon , Red , Purple , Fuchsia
Green , Lime , Olive , Yellow , Navy , Blue , Teal , Aqua

transparent

Lista de nombres

Extendida

Forma Numérica

Hexadecimal

#rgb

#rrggbb

#ff0000 ->       

#00ff00 ->       

#0000ff ->       

#555555 ->       

#11AAFF ->       

Forma Numérica

RGB Byte

rgb(0..256, 0..256, 0..256)

rgba(0..256, 0..256, 0..256, 0..1)

rgb(256, 0, 0) ->       

rgba(256, 0, 0, 0.5) ->       

rgb(0, 256, 0) ->       

rgb(0, 256, 0, 0.5) ->       

rgb(0, 0, 256) ->       

rgb(0, 0, 256, 0.5) ->       

rgb(85, 85, 85) ->       

rgba(85, 85, 85, 0.5) ->       

rgb(17, 170, 256) ->       

rgba(17, 170, 256, 0.5) ->       

Forma Numérica

RGB Porcentaje

rgb(0..100%, 0..100%, 0..100%)

rgba(0..100%, 0..100%, 0..100%, 0..100%)

rgb(100%, 0, 0) ->       

rgba(100%, 0, 0, 50%) ->       

rgb(0, 100%, 0) ->       

rgba(0, 100%, 0, 50%) ->       

rgb(0, 0, 100%) ->       

rgba(0, 0, 100%, 50%) ->       

rgb(33%, 33%, 33%) ->       

rgba(33%, 33%, 33%, 50%) ->       

rgb(6%, 66%, 100%) ->       

rgba(6%, 66%, 100%, 50%) ->       

Subrayado y más

text-decoration:

[underline | overline | line-through | blink ]

text-decoration-style

[solid | double | dotted | dashed | wavy ]

text-decoration-color:

text-decoration-skip:

mayúsculas y / o minúsculas

text-transform:

[capitalize | uppercase | lowercase ]

Espacio entre las letras

letter-spacing:


		
 Texto 

		
 Texto 

		
 Texto

Texto

Texto

Texto

Espacio entre palabras

word-spacing:

Alto de la linea

line-height:

Alineación

text-align:

[ left | right | center | justify ]

Sangría de primera línea

text-indent:

Sombras

text-shadow:

offset-x | offset-y | blur-radius | color


		
 Texto 

>

Texto

y mucho más