PDF de programación - Curso de maquetación – CSS y Bootstrap

SOPRA
Curso de Maquetación

CSS Y BOOTSTRAP 3



U S AR I N T E R N A S O L A M E N T E



Versión 1.00 del jueves, 19 de mayo de 2016



Estado : Trabajo





19 de mayo de 2016 – CURSO DE MAQUETACIÓN – CSS Y BOOTSTRAP

SOPRA / Curso de Maquetación
HTML5


1. Herramientas a utilizar en el curso

2. Qué es CSS

Índice

7

8

2.1. Para qué sirve ______________________________________________________________ 8

2.2. Cómo funciona _____________________________________________________________ 8

2.3. Aplicar las hojas de estilo a un documento HTML __________________________________ 9
Hoja de estilos externa ___________________________________________________________________ 9
Elemento STYLE ________________________________________________________________________ 9
Atributo STYLE _________________________________________________________________________ 9

2.3.1.
2.3.2.
2.3.1.

3.

4.

5.

CSS2 Help Sheet

CSS3 Help Sheet

Selectores

10

11

12

5.1.

Selectores universales _______________________________________________________ 12

5.2.

Selectores de atributo _______________________________________________________ 12
Selección por el valor de un atributo _______________________________________________________ 12
Selección basándose en una sub-cadena dentro del valor de un atributo _________________________ 13
Selección basándose en elementos delimitados dentro del valor de un atributo ____________________ 13

5.2.1.
5.2.2.
5.2.3.

5.3.

Selector de secundarios (hijos) ________________________________________________ 14

5.4.

Selector de descendientes ___________________________________________________ 14

5.5.

Selector de hermano adjacente _______________________________________________ 15

5.6.

Selectores de hermano general _______________________________________________ 16

6.

Pseudo-clases

17

6.1. Pseudoclases de enlace y acción de usuario ______________________________________ 17
link __________________________________________________________________________________ 17
visited _______________________________________________________________________________ 17
focus ________________________________________________________________________________ 17
hover ________________________________________________________________________________ 17
active ________________________________________________________________________________ 18

6.1.1.
6.1.2.
6.1.3.
6.1.4.
6.1.5.

6.2. Pseudoclase de negación (not) ________________________________________________ 18

6.3. Pseudoclase de idioma (lang) _________________________________________________ 19

6.4. Pseudoclase de destino (target) _______________________________________________ 19

© Sopra Group, 2016 / Versión: 1.00 / Estado Trabajo / Ref. : 20150901-110953-p



2/90



19 de mayo de 2016 – CURSO DE MAQUETACIÓN – CSS Y BOOTSTRAP

SOPRA / Curso de Maquetación
HTML5


6.5. Pseudoclases de entrada (valid, invalid) _________________________________________ 20

6.6. Pseudoclases de estado (enabled y disabled) _____________________________________ 20

6.7. Pseudoclases estucturales ____________________________________________________ 20
root _________________________________________________________________________________ 21
nth-child(n) y nth-last-child(n) ____________________________________________________________ 21
nth-of-type(n) y nth-last-of-type(n) ________________________________________________________ 22
first-child y last-child ___________________________________________________________________ 23
first-of-type y last-of-type _______________________________________________________________ 23
only-child_____________________________________________________________________________ 23
only-of-type __________________________________________________________________________ 23
empty _______________________________________________________________________________ 23

6.7.1.
6.7.2.
6.7.3.
6.7.4.
6.7.5.
6.7.6.
6.7.7.
6.7.8.

6.8.

Índice de pseudo-clases estándar ______________________________________________ 24

7.

Pseudoelementos

25

7.1.

first-letter ________________________________________________________________ 25

7.2.

first-line __________________________________________________________________ 25

7.3. Contenido generado usando before y after ______________________________________ 25

7.4.

La función counter __________________________________________________________ 26
Configuración del contador (counter-reset) _________________________________________________ 26
Incrementar el contador (counter-increment) _______________________________________________ 26
Mostrando el contador__________________________________________________________________ 27
El uso de dos o más contadores ___________________________________________________________ 27
El uso de contadores anidados (counters)___________________________________________________ 27
Dando estilo a los contadores ____________________________________________________________ 28

7.4.1.
7.4.2.
7.4.3.
7.4.4.
7.4.5.
7.4.6.

7.5.

Sintaxis con doble dos puntos de CSS3 para pseudoelementos _______________________ 28

8. Hacks de CSS

29

8.1. Comentarios condicionales ___________________________________________________ 29

8.2. Hacks de Internet Explorer por Versón __________________________________________ 30

8.3. Hack de Chrome ___________________________________________________________ 31

8.4. Hack para Firefox ___________________________________________________________ 31

9.

Algunos consejos para principiantes

32

9.1. Utilizar una página de reinicialización de estilos __________________________________ 32

9.2. Comprender la diferencia entre id y class_____________________________________ 32

9.3. Añadir comentarios al CSS____________________________________________________ 32

9.4.

enternder la potencia de !important ___________________________________________ 32

9.5.

Evitar el uso de tablas _______________________________________________________ 33

© Sopra Group, 2016 / Versión: 1.00 / Estado Trabajo / Ref. : 20150901-110953-p



3/90



19 de mayo de 2016 – CURSO DE MAQUETACIÓN – CSS Y BOOTSTRAP

SOPRA / Curso de Maquetación
HTML5


9.6.

Esconder el texto detrás de una imagen _________________________________________ 33

9.7. Utilizar código optimizado (shorthand) _________________________________________ 33

10. HTML5Reset v1.6.1

11. Normalize v4.1.1

12. Qué es Bootstrap

13.

Instalación de Bootstrap 3

14.

Introducción a Bootstrap

34

38

48

49

51

14.1.

Inicialización y definición de páginas en Bootstrap ________________________________ 51
Requerimiento del doctype de HTML5 _____________________________________________________ 51
El metadato viewport ___________________________________________________________________ 51

14.1.1.
14.1.2.

14.2. Sistema de rejilla ___________________________________________________________ 52
14.2.1. Media queries _________________________________________________________________________ 52
Características de cada rejilla _____________________________________________________________ 53
14.2.2.

14.3. Tipografías y enlaces ________________________________________________________ 53
Titulares _____________________________________________________________________________ 53
Texto ________________________________________________________________________________ 54
Texto destacado _______________________________________________________________________ 54
Clases CSS para alinear texto _____________________________________________________________ 55
Clases CSS para indicar el tipo de contenido _________________________________________________ 55
Direcciones ___________________________________________________________________________ 56
Blockquotes __________________________________________________________________________ 57
Listas de definición _____________________________________________________________________ 57

14.3.1.
14.3.2.
14.3.3.
14.3.4.
14.3.5.
14.3.6.
14.3.7.
14.3.8.

14.4. Normalización de estilos _____________________________________________________ 58

14.5. Ejemplos _________________________________________________________________ 58
Diseño fijo (Fixed Layout) ________________________________________________________________ 59
Diseño fluido (Fluid Layout) ______________________________________________________________ 59
Autoajustado de columnas _______________________________________________________________ 59
Reestablecimiento de columnas __________________________________________________________ 59
Desplazamiento de columnas ____________________________________________________________ 60
Anidación de columnas _________________________________________________________________ 60
Ordenación de columnas ________________________________________________________________ 61

14.5.1.
14.5.1.
14.5.2.
14.5.3.
14.5.4.
14.5.5.
14.5.6.

15. Componentes

62

15.1.

Iconos (glyphicons) _________________________________________________________ 62
Cómo utilizar los iconos _________________________________________________________________ 62

15.1.1.

15.2. Menús desplegables ________________________________________________________ 62
Deshabilitando elementos del menú _______________________________________________________ 63

15.2.1.

© Sopra Group, 2016 / Versión: 1.00 / Estado Trabajo / Ref. : 20150901-110953-p



4/90



19 de mayo de 2016 – CURSO DE MAQUETACIÓN – CSS Y BOOTSTRAP

SOPRA / Curso de Maquetación
HTML5


15.2.2.

Títulos de sección ______________________________________________________________________ 63

15.3. Grupos de