Tema 7 - Introducción a html con css

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>

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

Lorem ipsum

#introduccion{ color: #3300FF; }

HTML

CSS

Por clase

Lorem ipsum

.grande{ font-size: 40px; }

CSS

HTML

Por nombre de etiqueta

<h1>Lorem ipsum</h1>

h1{ font-family: Verdana; }

CSS

HTML

Por jerarquía

Lorem ipsum

p strong{ color: #AAAAAA; }

CSS

HTML

Por agrupación

Lorem ipsum Lorem ipsum

#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


• 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


• 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


• 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

Tema 7 - Introducción a html con css

Documents

Transcript of Tema 7 - Introducción a html con css