HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex...

13
HOJAS DE ESTILOS Andrés Felipe Parra Ceballos

Transcript of HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex...

Page 1: HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 1 rure dolor In reprehenderlt In voluptate velit

HOJAS DE ESTILOSAndrés Felipe Parra Ceballos

Page 2: HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 1 rure dolor In reprehenderlt In voluptate velit

¿QUÉ SON LAS HOJAS DE ESTILOS?

Son conjuntos de instrucciones, a

veces en forma de archivo anexo,

que se asocian a los archivos de

texto y se ocupan de los aspectos de

formato y de presentación de los

contenidos.

Page 3: HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 1 rure dolor In reprehenderlt In voluptate velit

LENGUAJES

Page 4: HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 1 rure dolor In reprehenderlt In voluptate velit

¿ QUE ES CSS?

• Son las siglas de hojas de estilos en cascadas o en ingles Cascading Style

Sheets

Page 5: HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 1 rure dolor In reprehenderlt In voluptate velit

¿COMO ENLAZARLO A HTML?

Page 6: HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 1 rure dolor In reprehenderlt In voluptate velit

INTERNAS

Page 7: HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 1 rure dolor In reprehenderlt In voluptate velit

EXTERNAS

Page 8: HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 1 rure dolor In reprehenderlt In voluptate velit

EN LINEA

Page 9: HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 1 rure dolor In reprehenderlt In voluptate velit

¿COMO UTILIZAR CSS?

Page 10: HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 1 rure dolor In reprehenderlt In voluptate velit

TIPOS DE SELECTORES

• DE ETIQUETA:

Se utiliza para darleun estilo a unaetiqueta HTML enespecifico.

Ejemplo:

p{color:red}

DE CLASE:Permite establecerun formato de estiloa diferenteselementos de lapagina web.

Ejemplo:.nombre_cualquiera{propiedades}

DE IDEspecifica el formato de un elemento en concreto.

Ejemplo:#nombre_id{propiedades}

Page 11: HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 1 rure dolor In reprehenderlt In voluptate velit

TIPOS DE SELECTORES

• DE GRUPO

Para darle formato avarias etiquetas

EJEMPLO

H2,h1,p {Propiedades}

UNIVERSAL

Para todos loselementos

EJEMPLO*{propiedades}

Page 12: HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 1 rure dolor In reprehenderlt In voluptate velit

RELACIONAR CON HTML

• DE CLASE:

-HTML<P class=“NombreDeClase”>Esto es un párrafo</P>

-CSS.NombreDeClase{Propiedades}

Page 13: HOJAS DE ESTILOS · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 1 rure dolor In reprehenderlt In voluptate velit

RELACIONAR CON HTML

• DE ID

- HTML<P id=“nombre_id”>Esto es un párrafo</P>

- CSS#nombre_id {propiedades}