Post on 26-Jul-2015
INTRODUCCIÓN A HTML CON CSS
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
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>
<link href="styles/style.css" type="text/css" rel="stylesheet" />
<link href="styles/style.css" type="text/css" rel="stylesheet" />
<link href="styles/style.css" type="text/css" rel="stylesheet" />
ES UNA BUENA PRÁCTICA PONER LOS ESTILOS EN UN
ARCHIVO SEPARADO DEL HTML
Estructura básica de un HTML
<!DOCTYPE html> <html lang="es">
<head> </head> <body> </body>
</html>
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.
Terminología CSS
h1 { font-size: 20px;
}
Selector
Valor
Propiedad
Manejo de CSS
1. Por identificador
2. Por clase
3. Por nombre de etiqueta
4. Por jerarquía
5. Por agrupación
Por identificador
<p id="introduccion">Lorem ipsum</p>
#introduccion{ color: #3300FF; }
HTML
CSS
Por clase
<p class="grande">Lorem ipsum</p>
.grande{ font-size: 40px; }
CSS
HTML
Por nombre de etiqueta
<h1>Lorem ipsum</h1>
h1{ font-family: Verdana; }
CSS
HTML
Por jerarquía
<p><strong>Lorem</strong> ipsum</p>
p strong{ color: #AAAAAA; }
CSS
HTML
Por agrupación
<p id="primero">Lorem ipsum</p> <p id="segundo">Lorem ipsum</p>
#primero, #segundo{ color: #336600; }
CSS
HTML
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
Colores en hexadecimal
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
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
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
Estilos de ligas
<a href="http://www.google.com">Google</a>
a:link, a:visited{
} a:hover, a:active{
}
CSS
HTML