Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a Tema 7 - Introducción a html con css
Similar a Tema 7 - Introducción a html con css (20)
Más de Pamela Rodriguez
Tema 7 - Introducción a html con css
- 1. INTRODUCCIÓN A HTML CON CSS
- 2. El lenguaje de los estilos • Lenguaje orientado a objetos • Se definen estilos: colores, fondos, bordes, tamaños, etc. • No funciona por si mismo, trabaja en conjunto con HTML. • NO FUNCIONA IGUAL EN TODOS LOS NAVEGADORES
- 3. Estructura básica de un HTML <!DOCTYPE html> <html lang="es"> <head> <link href="styles/style.css" type="text/css" rel="stylesheet" /> </head> <body> </body> </html>
- 4. <link href="styles/style.css" type="text/css" rel="stylesheet" />
- 5. <link href="styles/style.css" type="text/css" rel="stylesheet" />
- 6. ES UNA BUENA PRÁCTICA PONER LOS ESTILOS EN UN ARCHIVO SEPARADO DEL HTML <link href="styles/style.css" type="text/css" rel="stylesheet" />
- 7. Estructura básica de un HTML <!DOCTYPE html> <html lang="es"> <head> </head> <body> </body> </html>
- 8. Reglas generales de CSS • Verificar que todas las llaves abiertas estén debidamente cerradas. • Nunca omitir puntos y comas. • Utilizar nombres representativos para todas las clases.
- 9. Terminología CSS Selector h1 { Valor font-size: 20px; } Propiedad
- 10. Manejo de CSS 1. Por identificador 2. Por clase 3. Por nombre de etiqueta 4. Por jerarquía 5. Por agrupación
- 11. Por identificador HTML <p id="introduccion">Lorem ipsum</p> CSS #introduccion{ color: #3300FF; }
- 12. Por clase HTML <p class="grande">Lorem ipsum</p> CSS .grande{ font-size: 40px; }
- 13. Por nombre de etiqueta HTML <h1>Lorem ipsum</h1> CSS h1{ font-family: Verdana; }
- 14. Por jerarquía HTML <p><strong>Lorem</strong> ipsum</p> CSS p strong{ color: #AAAAAA; }
- 15. Por agrupación HTML <p id="primero">Lorem ipsum</p> <p id="segundo">Lorem ipsum</p> CSS #primero, #segundo{ color: #336600; }
- 16. Propiedades básicas: Estilos de texto Color del texto • color en valor hexadecimal • font-family • font-size Familia tipográfica (Arial, Verdana, • font-weight etc.) • font-style Valor en pixeles que determina el • text-decoration tamaño del texto
- 18. Propiedades básicas: Estilos de texto • color Propiedad que determina si el • font-family texto es normal o en estilo bold. Valores posibles: • font-size • bold • normal • font-weight • 100 • 900 • font-style • text-decoration
- 19. Propiedades básicas: Estilos de texto • color Propiedad que determina si el • font-family texto es normal o en estilo itálico. Valores posibles: • font-size • italic • oblique • font-weight • normal • font-style • text-decoration
- 20. Propiedades básicas: Estilos de texto • color • font-family Propiedad que proporciona • font-size estilos adicionales como: • underline • font-weight • overline • line-through • font-style • none • text-decoration
- 21. Estilos de ligas HTML <a href="http://www.google.com">Google</a> CSS a:link, a:visited{ } a:hover, a:active{ }