Introducción a las Hojas de Estilo (CSS)

Comienza Ya. Es Gratis
ó regístrate con tu dirección de correo electrónico
Rocket clouds
Introducción a las Hojas de Estilo (CSS) por Mind Map: Introducción a  las Hojas de Estilo  (CSS)

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