Hojas de estilo
¿Cuáles son los códigos
de color de HTML ?
• Los códigos de colores son formas de representar
los colores que vemos cada día en un formato
que un ordenador puede interpretar y mostrar.
Comúnmente utilizado en sitios web y otras
aplicaciones de software, hay una gran variedad
de formatos, incluidos los códigos de color HEX,
RGB y HSL valores y nombres de colores HTML,
entre otros.
Los códigos de color Hex
• Valores de bytes código Hex de 00, que es la más
baja intensidad de un color, a lo que representa el
nivel más alto de intensidad. El color blanco, por
ejemplo, se obtienen por la mezcla de los tres
colores primarios en su máxima intensidad, y en
el código Hex de color de #FFFFFF.
Los códigos de color Hex
• Los más populares son los códigos Hex de color;
tres bytes números hexadecimal (es decir,
compuesto de seis dígitos), con cada byte, o de
un par de caracteres en el código Hex, que
representa la intensidad de rojo, verde y azul en
el color, respectivamente.
Los códigos de color Hex
• Negro, la ausencia de cualquier color de la
pantalla, es todo lo contrario, con cada color que
se muestra en su nivel más bajo posible
intensidad y un código de color Hex #000000.
Los códigos de color Hex
• Los tres colores primarios, rojo, verde y azul,
están elaborados con una mezcla la mayor
intensidad del color deseado con la menor
intensidad de los otros dos:
• Con los navegadores modernos para toda la
gama de color de 24 bits, 16.777.216 colores
diferentes posibilidades.
Los códigos de color Hex
Ejercicio 1
• Crear tres archivos con 3 colores diferentes:
background-color: lightcoral;
background-color:#CD5C5C;
background-color: rgb(205, 92, 205);
TIPOS DE LETRA
• <FONT FACE="times new roman">TIMES NEW
ROMAN</FONT>
• <FONT FACE="tahoma">TAHOMA</FONT>
• <font color="red">Este texto está en
ROJO</font>
Ejercicio 2
• Crear un cuarto archivo con diferentes estilos de
letras y agregar imágenes.
Ejercicio 3: CSS
• BODY {color:green }
• P {color:red;
• font-size:20px;
• font-family:Courier;
• font-weight:bold;
• font-style:italic;
• line-height:30px;
• letter-spacing:5px;
• text-decoration:underline;
• text-transform:capitalize;
• text-align:left;
• text-indent:30px; }
• font-size: 20px; define el tamaño de los
caracteres.
• font-family: Courier; Indica el nombre (o
nombres) del tipo de letra que se va a emplear.
• font-weight: bold; Aquí se especifica el peso o
grosor de la fuente. Pueden emplearse literales
como lighter, normal (por defecto) o bold.
También se pueden utilizar números entre 100 y
900, escritos de 100 en 100 (no sirve 190, pero sí
200).
• font-style:italic; Solamente tiene dos
posibilidades: normal (por defecto) o italic que
es el empleado en el ejemplo que estamos
analizando, y que hace que el texto tenga cierta
inclinación.
• line-height:30px; Sirve para establecer la
distancia entre líneas consecutivas de un mismo
párrafo.
• line-height:30px; Sirve para establecer la
distancia entre líneas consecutivas de un mismo
párrafo
• word-spacing:5px; Establece la separación
entre las palabras de la línea.
• text-decoration:underline; Con este
parámetro, que no influye en el tamaño, puedes
acompañar al texto de una delgada línea
decorativa que puede estar en tres posiciones
distintas, como underline (el típico subrayado
debajo de la línea), through (en el centro de la
línea -tachado-) o overline (encima del texto).
• text-transform:capitalize; Curioso efecto que
provee de cuatro posibilidades: capitalize que
convierte en mayúscula la primera letra de cada
palabra del texto, como puedes ver en el
ejemplo, donde el texto original no es así.
uppercase para convertir todas las letras a
mayúsculas y lowercase para lo contrario, es
decir, convertir todas las letras a minúsculas.
• text-indent:30px Produce que la primera línea
del párrafo se escriba adentrada (indentada) un
cierto espacio hacia la derecha o hacia la
izquierda, dependiendo de la alineación activa.
Ejercicio 4
• Crear un quinto archivo y agregar el achivo [Link]
• <head>
• <title>Style</title>
• <LINK REL="stylesheet" TYPE="text/css"
HREF="[Link]">
• </head>
Ejercicio 5
• Conectar todas las páginas.
