hojas de estilos · 2017. 9. 24. · quis nostrud exercitation ullamco laboris nisi ut aliquip ex...
TRANSCRIPT
![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](https://reader033.vdocuments.mx/reader033/viewer/2022060920/60ac5be67c16d43fc139e0c5/html5/thumbnails/1.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022060920/60ac5be67c16d43fc139e0c5/html5/thumbnails/2.jpg)
¿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](https://reader033.vdocuments.mx/reader033/viewer/2022060920/60ac5be67c16d43fc139e0c5/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022060920/60ac5be67c16d43fc139e0c5/html5/thumbnails/4.jpg)
¿ 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](https://reader033.vdocuments.mx/reader033/viewer/2022060920/60ac5be67c16d43fc139e0c5/html5/thumbnails/5.jpg)
¿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](https://reader033.vdocuments.mx/reader033/viewer/2022060920/60ac5be67c16d43fc139e0c5/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022060920/60ac5be67c16d43fc139e0c5/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022060920/60ac5be67c16d43fc139e0c5/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022060920/60ac5be67c16d43fc139e0c5/html5/thumbnails/9.jpg)
¿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](https://reader033.vdocuments.mx/reader033/viewer/2022060920/60ac5be67c16d43fc139e0c5/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022060920/60ac5be67c16d43fc139e0c5/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022060920/60ac5be67c16d43fc139e0c5/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022060920/60ac5be67c16d43fc139e0c5/html5/thumbnails/13.jpg)
RELACIONAR CON HTML
• DE ID
- HTML<P id=“nombre_id”>Esto es un párrafo</P>
- CSS#nombre_id {propiedades}