CSS (CASCADE STYLE SHEET)

Comienza Ya. Es Gratis
ó regístrate con tu dirección de correo electrónico
CSS (CASCADE STYLE SHEET) por Mind Map: CSS (CASCADE STYLE SHEET)

1. Para qué sirve?

1.1. Complemetar a HTML

1.1.1. Con Visualización moderna

1.1.2. Estilos visuales

1.2. Aplicar estilo visual

1.2.1. Elemetos generales

1.2.2. Elementos individuales

2. Cómo se integra a HTML?

2.1. como archivo externo

2.1.1. <head> <link rel="stylesheet" href="estilos.css"> </head> <body> <p>Párrafo en color azul </p> </body>

2.2. como atributo (en línea)

2.2.1. ejemplo:<p style ="color : red;">Párrafo en color rojo</p>

2.3. Incrustado en la cabecera

2.3.1. ejemplo: <head> <style> p { color : green } </style></head> <body> <p>Párrafo en color vede</p> </body>

3. Qué tipos de selectores existen?

3.1. * : UNIVERSAL

3.1.1. Afecta a todos los elementos de la página web.

3.1.1.1. ejemplo: * { padding : 20px }

3.2. Por tipo

3.2.1. Se aplica a un tipo de Tag o etiqueta HTML.

3.2.1.1. ejemplo: h1 { color : red; }

3.3. Por clases

3.3.1. Se le asigna una clase a una etiqueta o elemento dentro de la página y sólo a este se le apolica el estilo.

3.3.1.1. ejemplo: <h1 class ="clase".... en CSS: .clase{ color : green }

3.4. Por id

3.4.1. Se le asigna un id a una etiqueta o elemento dentro de la página y sólo a este se le apolica el estilo.

3.4.1.1. ejemplo: <h1 id ="id".... en CSS: #id{ color : green }

4. Estructutura CSS

4.1. SELECTOR { PROPIEDAD : VALOR }

4.1.1. EJEMPLO: * { color : blue; }

5. Qué puedo modificar?

5.1. Color

5.1.1. RGB

5.1.1.1. ejemplo: rgb(1,1,1}9

5.1.2. hexadecimal

5.1.2.1. ejemplo: #FFFFFF

6. Modelo de cajas

6.1. Márgenes (margin)

6.1.1. margin margin - top margin - bottom margin - left margin - right

6.1.1.1. ancho de los margenes tamaño margen superior tamaño margen inferior tamaño margen izquierdo tamaño margen derecho

6.1.1.1.1. medidas: longitud (px) / porcentaje (%) / auto

6.2. Bordes (border)

6.2.1. border

6.2.1.1. estilo, ancho y color del borde. Puede complementarse con: top, bottom, left, right

6.2.2. border-radius

6.2.2.1. curvatura de borde

6.2.3. border-style

6.2.3.1. estilo del borde. Puede modificar los bordes: top, bottom, left, right

6.2.4. border-color

6.2.4.1. color del borde. Puede modificar los bordes: top, bottom, left, right

6.2.5. border-width

6.2.5.1. ancho del borde. Puede modificar los bordes: top, bottom, left, right

6.3. Padding o relleno

6.3.1. padding padding-top padding-right padding-bottom padding-left

6.3.1.1. tamaño del relleno Tamaño del relleno superior, derecho, inferior e izquierdo