Download - Tema 7 - Introducción a html con css
![Page 1: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/1.jpg)
INTRODUCCIÓN A HTML CON CSS
![Page 2: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/2.jpg)
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
![Page 3: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/3.jpg)
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>
![Page 4: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/4.jpg)
<link href="styles/style.css" type="text/css" rel="stylesheet" />
![Page 5: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/5.jpg)
<link href="styles/style.css" type="text/css" rel="stylesheet" />
![Page 6: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/6.jpg)
<link href="styles/style.css" type="text/css" rel="stylesheet" />
ES UNA BUENA PRÁCTICA PONER LOS ESTILOS EN UN
ARCHIVO SEPARADO DEL HTML
![Page 7: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/7.jpg)
Estructura básica de un HTML
<!DOCTYPE html> <html lang="es">
<head> </head> <body> </body>
</html>
![Page 8: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/8.jpg)
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.
![Page 9: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/9.jpg)
Terminología CSS
h1 { font-size: 20px;
}
Selector
Valor
Propiedad
![Page 10: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/10.jpg)
Manejo de CSS
1. Por identificador
2. Por clase
3. Por nombre de etiqueta
4. Por jerarquía
5. Por agrupación
![Page 11: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/11.jpg)
Por identificador
<p id="introduccion">Lorem ipsum</p>
#introduccion{ color: #3300FF; }
HTML
CSS
![Page 12: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/12.jpg)
Por clase
<p class="grande">Lorem ipsum</p>
.grande{ font-size: 40px; }
CSS
HTML
![Page 13: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/13.jpg)
Por nombre de etiqueta
<h1>Lorem ipsum</h1>
h1{ font-family: Verdana; }
CSS
HTML
![Page 14: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/14.jpg)
Por jerarquía
<p><strong>Lorem</strong> ipsum</p>
p strong{ color: #AAAAAA; }
CSS
HTML
![Page 15: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/15.jpg)
Por agrupación
<p id="primero">Lorem ipsum</p> <p id="segundo">Lorem ipsum</p>
#primero, #segundo{ color: #336600; }
CSS
HTML
![Page 16: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/16.jpg)
Propiedades básicas: Estilos de texto
• color
• font-family
• font-size
• font-weight
• font-style
• text-decoration
Color del texto en valor
hexadecimal
Familia tipográfica (Arial, Verdana,
etc.)
Valor en pixeles que determina el tamaño del texto
![Page 17: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/17.jpg)
Colores en hexadecimal
![Page 18: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/18.jpg)
Propiedades básicas: Estilos de texto
• color
• font-family
• font-size
• font-weight
• font-style
• text-decoration
Propiedad que determina si el texto es normal o en estilo bold. Valores posibles:
• bold • normal • 100 • 900
![Page 19: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/19.jpg)
Propiedades básicas: Estilos de texto
• color
• font-family
• font-size
• font-weight
• font-style
• text-decoration
Propiedad que determina si el texto es normal o en estilo itálico. Valores posibles:
• italic • oblique • normal
![Page 20: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/20.jpg)
Propiedades básicas: Estilos de texto
• color
• font-family
• font-size
• font-weight
• font-style
• text-decoration
Propiedad que proporciona estilos adicionales como:
• underline • overline • line-through • none
![Page 21: Tema 7 - Introducción a html con css](https://reader034.vdocuments.co/reader034/viewer/2022042602/55b459e6bb61eb4e6a8b4736/html5/thumbnails/21.jpg)
Estilos de ligas
<a href="http://www.google.com">Google</a>
a:link, a:visited{
} a:hover, a:active{
}
CSS
HTML