1. Algunos usos
1.1. Fuentes
1.1.1. Tamaño
1.1.2. Tipo
1.1.3. Color
1.2. Color de Fondo
1.3. Imagen de Fondo
1.4. Bordes
1.4.1. Varios tipos
1.4.2. Grosores
1.4.3. Colores
1.5. Elementos de Página
1.5.1. Alineación
1.5.2. Distribución
1.5.3. Ubicación
2. Cascading Style Sheets
2.1. Complementa a HTML
2.1.1. Da diseño
2.1.2. Da presentación
2.2. Sintaxis
2.2.1. Propia
2.2.2. Indefinida
2.3. Utilizadas sólo en HTML
2.4. Abriendo el recurso
2.4.1. El código se muestra
2.5. Especificación Stándard Reciente
2.5.1. CSS3
2.5.1.1. Características nuevas
2.5.1.1.1. Algunos browsers no las soportan
2.6. Aplicas estilos
2.6.1. Elementos Únicos
2.6.2. Generalizados
2.6.2.1. Selectores
3. Con CSS
3.1. Sintaxis Stándard
3.1.1. Browsers estandarizados
3.1.1.1. Internet Explorar
3.1.1.1.1. Compatibilidaddiferente
3.1.1.2. Interpretacióndiferente
3.2. Revisar Compatibilidad con navegador
3.2.1. Tips
3.2.1.1. Usar versión CSS2
3.2.1.2. Utilizar navegadores recientes
3.2.1.3. Notificar que no se soporta
3.2.1.4. Adaptar el sitio
3.2.1.4.1. Intsalación de software nuevo
4. Antes de CSS
4.1. Capas de Contenido / Presentación
4.1.1. Combinadas
4.1.2. Interdependientes
4.2. Cambio en diseño = Cambio en el archivo
4.3. Atributos especiales en tags html
4.3.1. No generalizable
4.3.2. Poco escablable
4.3.3. Poco Mantenible
5. Sintaxis
5.1. Selectores
5.1.1. Identidicadores: o texto
5.1.1.1. Referencia a elemento o grupo de elementos
5.1.1.1.1. TAG NAME
5.1.1.1.2. CLASE
5.1.1.1.3. ID
5.2. Propiedades
5.2.1. Características Particulares de elementos
5.2.2. En ejecución
5.2.2.1. El valor cambia
5.2.3. Conjunto de valores limitados
5.2.4. Mas de un valor a la vez
5.2.4.1. Algunas propiedades
5.2.5. Ej. - text-allign - border -font-size
5.3. Reglas
5.3.1. Conjunto de estilos
5.3.1.1. Aplicados a un elemento o elementos
5.3.2. Regla Simple
5.3.2.1. Asignar conjunto de estilo
5.3.2.1.1. definidos en el tag span
5.3.3. Regla Anidada
5.3.3.1. Selectores separados por espacios
5.3.3.2. El de la derecha se encuentra dentro de la izquierda
5.3.4. Regla Múltiple
5.3.4.1. Conjuntos de elementos separados con ", "
5.3.4.2. Ambos conjuntos siguen la regla
5.3.5. Para defiinir estilos
5.3.5.1. Selector
5.3.5.1.1. Abrir llave {
6. Integrar CSS a HTML
6.1. Inline
6.1.1. Atributo style
6.1.1.1. EJ; <p style="font-weight; bold; font-size: 30%"> ...
6.1.2. Aplica sólo al elemento
6.1.3. Dentro del tag del atributo HTML
6.2. Interna (Embebida)
6.2.1. tags <style> </style>
6.2.1.1. Ej. <style type="text/css"> ..... </style>
6.2.2. Atributo type type="text/css"
6.2.2.1. browser interpreta estilo
6.2.3. Ubicado en tag <head>
6.3. CSS Externa
6.3.1. Archivo externo .css
6.3.1.1. Con reglas de estilo
6.3.2. tag <link>
6.3.2.1. Inlcuye la referencia
6.3.2.2. Atributos
6.3.2.2.1. rel
6.3.2.2.2. type
6.3.2.2.3. href
6.3.2.3. Ej: <link rel="stylesheet" type="text/css" href="./css/style.css"/>"
6.3.3. Dentro del HEAD
6.3.4. Venatajas
6.3.4.1. Reusable
6.3.4.1.1. Reutlizable en otros archivos
6.3.4.2. Simple
6.3.4.2.1. menos código
6.3.4.2.2. Reglas agrupadas en otro documento
6.3.4.3. Independencia
6.3.4.3.1. Separa capas
6.3.4.4. Mantenibe
6.3.4.4.1. Modiicación independiente
6.3.4.5. Escalable
6.3.4.5.1. Añade
6.3.4.5.2. Reduce
6.3.4.5.3. Elimina
6.3.4.6. Modular
6.3.4.6.1. Crear otros archivos
7. Jerarquía Estilos CSS
7.1. 1. Estilo inline
7.2. 2. Selector ID
7.3. 3. Selector de Clase
7.4. 4. Selector nombe tag
8. Unidades de Media
8.1. Pixeles (px)
8.1.1. Dimension en pixeles
8.1.1.1. Relación directa con resolución
8.2. Porcentaje (%)
8.2.1. Dimensión en porcentaje
8.2.1.1. Relación al tamaño de la ventana
8.3. Puntos (pt)
8.3.1. 1/72 de pulgada
8.3.2. Para impresión
8.4. Emes (em)
8.4.1. relativa al tamaño de la letra "m"
8.4.1.1. oucpa más espacio
8.5. Verificar unidades de medida soportadas
9. Colores
9.1. Reciben valor con color modificado
9.2. Hexadecimal
9.2.1. Valores hexadecimal
9.2.1.1. #RRGGBB
9.3. RGB
9.3.1. Valores de intensidad por componente
9.3.1.1. Ej. > rgb(0,0,0) rango 0-255 > rgb (0%, 0%, 0%)
9.4. Predefinidos
9.4.1. Colores preestablecidos
9.5. Fondo
9.5.1. atributo "background-color"
9.5.1.1. parámetro color varios formatos
9.5.1.2. Aplica hasta antes del borde
9.5.1.3. No aplica en la zona del margen
9.5.2. Página
9.5.2.1. Declararlo en Body
10. Tipografía
10.1. Tipo de letra dentro de un selector
10.2. Verificar Soporte
10.3. Propiedad "Font-Family"
10.3.1. priorizar orden de aparación
10.4. Ej: font-family: Arial, helvetica,....
10.5. "" Si es más de una palabra
11. Tamaño Fuente
11.1. Propiedad "Font-Size"
11.2. Tamaño Porcentaje (%) Pixeles (px) Puntos (pt) Emes (em)
11.2.1. Predefinidos
11.2.1.1. Depende del browser
12. Color Fuente
12.1. Propiedad "Color"
12.2. Valores
12.2.1. Hexadecimal
12.2.2. Predefinido
12.2.3. rgb (0,0,0) 0 a 255
13. Bordes
13.1. Propiedad "Border"
13.1.1. Grosor
13.1.1.1. Ancho de línea
13.1.2. Estilo
13.1.2.1. Tipo de línea
13.1.2.1.1. Indentificador Predeterminado
13.1.3. Color
13.1.3.1. Códigos de color (varios formatos)
13.1.4. Parámetros Modificables
13.1.4.1. Border width
13.1.4.2. Border color
13.1.4.3. Border Style
13.1.4.4. Varios valores
13.1.4.4.1. 1 valor = 4 aristas
13.1.4.4.2. 2 valores
13.1.4.4.3. 4 valores
13.1.4.5. Aristas específicos
13.1.4.5.1. Border Top
13.1.4.5.2. Border Right
13.1.4.5.3. Border Bottom
13.1.4.5.4. Border Left
13.1.4.5.5. Reciben 3 valores
13.1.4.6. Modificar Aristas (más específico)
13.1.4.6.1. Border Top Style
13.1.4.6.2. Border Right Width
13.1.4.6.3. Border Bottom Color
14. Listas
14.1. Ej Número > Lowe alpha > decimal
14.2. Modifica Viñeta o número
14.3. No aplica a <li>
14.4. Remover "none"
14.5. Ej Viñeta: > Disc > Square > Circle
14.6. Posición
14.6.1. list-style-position
14.6.1.1. inside
14.6.1.2. outside
14.6.2. afuera o dentro del contenedor
14.7. Viñeta Personalizada
14.7.1. list-style-image
14.7.1.1. url como valor
15. Imagen
15.1. Propiedad "background-image"
15.1.1. recibe url
15.2. propiedad "background-position"
15.2.1. Posición XY de la imagen
15.2.1.1. 2 identificadores
15.2.1.1.1. 1°valor
15.2.1.1.2. 2° valor
15.2.1.1.3. sin 2° valor
15.2.1.2. 2 valores
15.2.1.2.1. orígen 0%,0%
15.2.1.2.2. defualt 50%
15.3. propiedad "background-repeat"
15.3.1. Repetir imagen en X Y
15.3.1.1. Valores
15.3.1.1.1. No Repeat
15.3.1.1.2. Repeat
15.3.1.1.3. repeat-x
15.3.1.1.4. repeat-y
15.4. Gradiente
15.4.1. Imagen de fondo degrada repetida
15.5. Fondo único
15.5.1. ponerla en el body
16. Reglas útiles
16.1. wrapper
16.1.1. ancho relativo al contenedor
16.2. nav
16.2.1. Lista vertical en horizontal
16.2.1.1. para menús
16.3. Float
16.3.1. flota elementos a la izquierda o derecha
16.3.2. clear manda el elemento debajo
16.4. Recomendaciones
16.4.1. Archivos separados del HTML
16.4.2. Generalizar estilos
16.4.3. Revisar compatibilidad
16.4.4. Estilos generales
16.4.4.1. clases y tags
16.4.5. No repetir IDs
16.4.6. Revisar sintaxis
16.4.6.1. case sensitive
16.4.7. Visibilidad de la página web
16.4.8. Tipografía Web Friendly