1. ETIQUETAS DE CSS PARA FONT FAMILY
DEFINE UNA LISTA DE FUENTES O
FAMILIAS DE FUENTES, CON UN
ORDEN DE PRIORIDAD, PARA
UTILIZAR EN UN ELEMENTO
SELECCIONADO. A DIFERENCIA DE
LA MAYORÍA DE LAS PROPIEDADES
CSS, LOS VALORES SE SEPARAN
CON COMAS (",") PARA INDICAR
QUE SON VALORES
ALTERNATIVOS.
<nombre de familia o genérico>
puede ser un
<nombre de familia> o un
<nombre genérico>
nombre de familia
El nombre de la familia de la fuente. Por ejemplo, 'Times' y
'Helvética' son nombres de familia. Los nombres de familia que
contengan espacios, deben escribirse entre comillas (por
ejemplo: "Times New Roman").
nombre genérico
Se han definido los siguientes nombres genéricos:
serif, sans-serif, cursive, fantasy, monospace.
Los nombres genéricos son palabras claves y no deben ponerse
entre comillas.
2. ETIQUETAS CSS FONT DE ESTILO
1. Una forma de obtener una variante de un tipo de letra es
inclinar las letras.
2. En Tipografía se distinguen dos formas de
inclinación:oblicua: la forma de la letra no cambia,
simplemente se inclinaitálicas: además de inclinarse, la
forma de algunas letras cambia
3. ETIQUETAS CSS FONT DE TAMAÑO
• El navegador tiene definidos una serie de
tamaños que se llaman xx-small, x-small, small,
medium, large, x-large y xx-large. Estos
tamaños el navegador los elige en función de la
resolución de la pantalla, el tamaño de la
fuente, etc.
• A continuación se encuentra cada uno de los
nombres de tamaños absolutos a su propio
tamaño: xx-small, x-small, small, medium,
large, x-large y xx-large.
4. ETIQUETA CSS FONT DE VARIANTE
• En CSS 2, la propiedad font-variant únicamente admitía
los valores normal y small-caps, que permite mostrar un
tipo de letra en versalitas.
• Las versalitas son tipos en las que todos los caracteres
están en mayúsculas, aunque con el tamaño de las
minúsculas (en principio, con la altura de la letra x del
tipo, aunque no siempre es así).
• Enlace externoEn CSS 3, font-variant se ha convertido en
una propiedad compuesta, que además de las versalitas
permite seleccionar varias características tipográficas
disponibles en las fuentes OTF (y en algunos casos, TTF).
5. ETIQUETAS CSS PARA COLOR •RGB
• Los códigos RGB se pueden expresar de distintas
formas:
• rgb(rojo, verde, azul), donde rojo, verde y azul
son números enteros desde 0 a 255.
• rgb(rojo, verde, azul), donde rojo, verde y azul
son porcentajes desde 0% hasta 100%.
• #RRGGBB, donde RR, GG y BB son números
hexadecimales desde 00 hasta FF.
• #RGB, donde R, G y B son números
hexadecimales desde 0 hasta F (el navegador
transforma esos números en números de dos
cifras repitiendo el valor, es decir, F se convierte
en FF, 6 en 66, etc.Las más utilizadas son la
tercera y la primera.
6. ETIQUETAS CSS DE FONDOS DE IMAGEN
• La propiedad background-image establece cualquier
imagen como fondo de un elemento. La sintaxis es la
siguiente background-image:
url("nombre_de_la_imagen"), en la que el nombre de la
imagen debe indicar el nombre (y la extensión) de la
imagen, así como el camino absoluto o relativo desde la
hoja de estilo. Las comillas que rodean el nombre de la
imagen sólo son necesarias si hay espacios en blanco en
el nombre de la imagen. Se pueden utilizar comillas
simples (') o dobles ("). Si hay espacios en blanco entre url
y el paréntesis, los navegadores no muestran la imagen
de fondo
• En el ejemplo siguiente, se utiliza la imagen siguiente:
Imagen para fondo. Esta imagen se llama tartan.png y se
encuentra en la misma carpeta que la hoja de estilo.
7. ETIQUETAS DE CSS DE FONDOS DE
COLOR
• fondo: background-colorbackground-
colorRecomendación CSS2 Mozilla
Developer NetworkLa propiedad
background-color establece el color de
fondo de cualquier elemento.
• El color de fondo se muestra por detrás
de la imagen, por lo que la imagen debe
tener transparencia para que se pueda
ver el color de fondo.
8. ETIQUETAS CSS DE FONDO DE REPETICION
Por omisión, los navegadores repiten la imagen de fondo
tanto en vertical como en horizontal. La propiedad
background-repeat permite controlar esa repetición. los
posibles valores de background-repeat son:
• no-repeat: la imagen no se repite
• repeat-x: la imagen se repite únicamente en
horizontal
• repeat-y: la imagen se repite únicamente en vertical
• repeat: la imagen se repite en horizontal y vertical
La propiedad background-repeat admite uno o dos
valores:
• si sólo se da un valor, el valor se aplica tanto en
horizontal como en vertical.
• Si se dan dos valores, el primero se aplica en
horizontal y el segundo en vertical.
9. ETIQUETA CSS DE FONDO DE POSICION
La propiedad background-position permite establecer la posición
de la imagen de fondo. A esta propiedad hay que darle dos
valores: la posición horizontal y la posición vertical.
Los posibles valores de background-position son:
• valores numéricos (porcentajes o distancias)
• Left, center y right: establecen la posición horizontal
(izquierda, centro y derecha, respectivamente)
• Top, center, bottom: establece la posición vertical (arriba, en
medio, abajo, respectivamente)
Hay que tener en cuenta que la imagen de fondo se posiciona
respecto al elemento y que el tamaño de los elementos puede
estar definido explícitamente o definido por su contenido.
En el ejemplo siguiente se da imagen de fondo a una división
<div> cuyo tamaño se establece en la hoja de estilo. La división es
lo bastante grande como para ver claramente la imagen de fondo
abajo a la derecha