1. Unidades de Media
1.1. Pixeles (px)
1.1.1. Dimension en pixeles
1.1.1.1. Relación directa con resolución
1.2. Porcentaje (%)
1.2.1. Dimensión en porcentaje
1.2.1.1. Relación al tamaño de la ventana
1.3. Puntos (pt)
1.3.1. 1/72 de pulgada
1.3.2. Para impresión
1.4. Emes (em)
1.4.1. relativa al tamaño de la letra "m"
1.4.1.1. oucpa más espacio
1.5. Verificar unidades de medida soportadas
2. Colores
2.1. Reciben valor con color modificado
2.2. Hexadecimal
2.2.1. Valores hexadecimal
2.2.1.1. #RRGGBB
2.3. RGB
2.3.1. Valores de intensidad por componente
2.3.1.1. Ej. > rgb(0,0,0) rango 0-255 > rgb (0%, 0%, 0%)
2.4. Predefinidos
2.4.1. Colores preestablecidos
2.5. Fondo
2.5.1. atributo "background-color"
2.5.1.1. parámetro color varios formatos
2.5.1.2. Aplica hasta antes del borde
2.5.1.3. No aplica en la zona del margen
2.5.2. Página
2.5.2.1. Declararlo en Body
3. Integrar CSS a HTML
3.1. Inline
3.1.1. Atributo style
3.1.1.1. EJ; <p style="font-weight; bold; font-size: 30%"> ...
3.1.2. Aplica sólo al elemento
3.1.3. Dentro del tag del atributo HTML
3.2. Interna (Embebida)
3.2.1. tags <style> </style>
3.2.1.1. Ej. <style type="text/css"> ..... </style>
3.2.2. Atributo type type="text/css"
3.2.2.1. browser interpreta estilo
3.2.3. Ubicado en tag <head>
3.3. CSS Externa
3.3.1. Archivo externo .css
3.3.1.1. Con reglas de estilo
3.3.2. tag <link>
3.3.2.1. Inlcuye la referencia
3.3.2.2. Atributos
3.3.2.2.1. rel
3.3.2.2.2. type
3.3.2.2.3. href
3.3.2.3. Ej: <link rel="stylesheet" type="text/css" href="./css/style.css"/>"
3.3.3. Dentro del HEAD
3.3.4. Venatajas
3.3.4.1. Reusable
3.3.4.1.1. Reutlizable en otros archivos
3.3.4.2. Simple
3.3.4.2.1. menos código
3.3.4.2.2. Reglas agrupadas en otro documento
3.3.4.3. Independencia
3.3.4.3.1. Separa capas
3.3.4.4. Mantenibe
3.3.4.4.1. Modiicación independiente
3.3.4.5. Escalable
3.3.4.5.1. Añade
3.3.4.5.2. Reduce
3.3.4.5.3. Elimina
3.3.4.6. Modular
3.3.4.6.1. Crear otros archivos
4. Algunos usos
4.1. Fuentes
4.1.1. Tamaño
4.1.2. Tipo
4.1.3. Color
4.2. Color de Fondo
4.3. Imagen de Fondo
4.4. Bordes
4.4.1. Varios tipos
4.4.2. Grosores
4.4.3. Colores
4.5. Elementos de Página
4.5.1. Alineación
4.5.2. Distribución
4.5.3. Ubicación
5. Tipografía
5.1. Tipo de letra dentro de un selector
5.2. Verificar Soporte
5.3. Propiedad "Font-Family"
5.3.1. priorizar orden de aparación
5.4. Ej: font-family: Arial, helvetica,....
5.5. "" Si es más de una palabra
6. Tamaño Fuente
6.1. Propiedad "Font-Size"
6.2. Tamaño Porcentaje (%) Pixeles (px) Puntos (pt) Emes (em)
6.2.1. Predefinidos
6.2.1.1. Depende del browser
7. Color Fuente
7.1. Propiedad "Color"
7.2. Valores
7.2.1. Hexadecimal
7.2.2. Predefinido
7.2.3. rgb (0,0,0) 0 a 255
8. Bordes
8.1. Propiedad "Border"
8.1.1. Grosor
8.1.1.1. Ancho de línea
8.1.2. Estilo
8.1.2.1. Tipo de línea
8.1.2.1.1. Indentificador Predeterminado
8.1.3. Color
8.1.3.1. Códigos de color (varios formatos)
8.1.4. Parámetros Modificables
8.1.4.1. Border width
8.1.4.2. Border color
8.1.4.3. Border Style
8.1.4.4. Varios valores
8.1.4.4.1. 1 valor = 4 aristas
8.1.4.4.2. 2 valores
8.1.4.4.3. 4 valores
8.1.4.5. Aristas específicos
8.1.4.5.1. Border Top
8.1.4.5.2. Border Right
8.1.4.5.3. Border Bottom
8.1.4.5.4. Border Left
8.1.4.5.5. Reciben 3 valores
8.1.4.6. Modificar Aristas (más específico)
8.1.4.6.1. Border Top Style
8.1.4.6.2. Border Right Width
8.1.4.6.3. Border Bottom Color
9. Reglas útiles
9.1. wrapper
9.1.1. ancho relativo al contenedor
9.2. nav
9.2.1. Lista vertical en horizontal
9.2.1.1. para menús
9.3. Float
9.3.1. flota elementos a la izquierda o derecha
9.3.2. clear manda el elemento debajo
9.4. Recomendaciones
9.4.1. Archivos separados del HTML
9.4.2. Generalizar estilos
9.4.3. Revisar compatibilidad
9.4.4. Estilos generales
9.4.4.1. clases y tags
9.4.5. No repetir IDs
9.4.6. Revisar sintaxis
9.4.6.1. case sensitive
9.4.7. Visibilidad de la página web
9.4.8. Tipografía Web Friendly
10. Listas
10.1. Ej Número > Lowe alpha > decimal
10.2. Modifica Viñeta o número
10.3. No aplica a <li>
10.4. Remover "none"
10.5. Ej Viñeta: > Disc > Square > Circle
10.6. Posición
10.6.1. list-style-position
10.6.1.1. inside
10.6.1.2. outside
10.6.2. afuera o dentro del contenedor
10.7. Viñeta Personalizada
10.7.1. list-style-image
10.7.1.1. url como valor
11. Imagen
11.1. Propiedad "background-image"
11.1.1. recibe url
11.2. propiedad "background-position"
11.2.1. Posición XY de la imagen
11.2.1.1. 2 identificadores
11.2.1.1.1. 1°valor
11.2.1.1.2. 2° valor
11.2.1.1.3. sin 2° valor
11.2.1.2. 2 valores
11.2.1.2.1. orígen 0%,0%
11.2.1.2.2. defualt 50%
11.3. propiedad "background-repeat"
11.3.1. Repetir imagen en X Y
11.3.1.1. Valores
11.3.1.1.1. No Repeat
11.3.1.1.2. Repeat
11.3.1.1.3. repeat-x
11.3.1.1.4. repeat-y
11.4. Gradiente
11.4.1. Imagen de fondo degrada repetida
11.5. Fondo único
11.5.1. ponerla en el body
12. Sintaxis
12.1. Selectores
12.1.1. Identidicadores: o texto
12.1.1.1. Referencia a elemento o grupo de elementos
12.1.1.1.1. CLASE
12.1.1.1.2. ID
12.2. Propiedades
12.2.1. Características Particulares de elementos
12.2.2. En ejecución
12.2.2.1. El valor cambia
12.2.3. Conjunto de valores limitados
12.2.4. Mas de un valor a la vez
12.2.4.1. Algunas propiedades
12.2.5. Ej. - text-allign - border -font-size