SlideShare una empresa de Scribd logo
1 de 9
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.
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
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.
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).
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.
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.
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.
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.
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

Más contenido relacionado

Similar a ETIQUETAS DE CSS.pptx

Similar a ETIQUETAS DE CSS.pptx (20)

Css
CssCss
Css
 
hojas de_estilo_css
 hojas de_estilo_css hojas de_estilo_css
hojas de_estilo_css
 
Introdu css clase1
Introdu css clase1Introdu css clase1
Introdu css clase1
 
Atributos Css
Atributos CssAtributos Css
Atributos Css
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
guia sintaxis css.pdf
guia sintaxis css.pdfguia sintaxis css.pdf
guia sintaxis css.pdf
 
CSS 5 - Unidades y Valores
CSS 5 - Unidades y ValoresCSS 5 - Unidades y Valores
CSS 5 - Unidades y Valores
 
Capitulo 6 - Texto
Capitulo 6 - TextoCapitulo 6 - Texto
Capitulo 6 - Texto
 
Box model carolina sanchez
Box model carolina sanchezBox model carolina sanchez
Box model carolina sanchez
 
20. practica html
20. practica html20. practica html
20. practica html
 
TAREA DEL CSS
TAREA DEL CSSTAREA DEL CSS
TAREA DEL CSS
 
Comandos html
Comandos htmlComandos html
Comandos html
 
Box Model
Box ModelBox Model
Box Model
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Introduccion css
Introduccion cssIntroduccion css
Introduccion css
 
Formato del texto en css
Formato del texto en cssFormato del texto en css
Formato del texto en css
 
Tema 7 - Introducción a html con css
Tema 7 - Introducción a html con cssTema 7 - Introducción a html con css
Tema 7 - Introducción a html con css
 
Que es css
Que es cssQue es css
Que es css
 
Curso HTML 5 & jQuery - Leccion 7
Curso HTML 5 & jQuery - Leccion 7Curso HTML 5 & jQuery - Leccion 7
Curso HTML 5 & jQuery - Leccion 7
 
CSS_2020.pdf
CSS_2020.pdfCSS_2020.pdf
CSS_2020.pdf
 

Último

Taller construcción de Prototipos Uno uML
Taller construcción de Prototipos Uno uMLTaller construcción de Prototipos Uno uML
Taller construcción de Prototipos Uno uMLAderMogollonLuna
 
LAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdf
LAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdfLAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdf
LAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdfwilangelfmendoza
 
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.karlapatriciapms16
 
TALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdf
TALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdfTALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdf
TALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdfMiguelGomez900779
 
PPT SESION 5 ARTE Y CREATIVIDAD (1).pptx
PPT SESION 5 ARTE Y CREATIVIDAD (1).pptxPPT SESION 5 ARTE Y CREATIVIDAD (1).pptx
PPT SESION 5 ARTE Y CREATIVIDAD (1).pptxNeymaRojasperez1
 
DIAPOSITIVAS DRENAJE POSTURAL E INHALACIONES (3).pptx
DIAPOSITIVAS DRENAJE POSTURAL E INHALACIONES (3).pptxDIAPOSITIVAS DRENAJE POSTURAL E INHALACIONES (3).pptx
DIAPOSITIVAS DRENAJE POSTURAL E INHALACIONES (3).pptxjoselinepolar
 
PPT obligaciones ambientales oefa minan.pptx
PPT obligaciones ambientales oefa minan.pptxPPT obligaciones ambientales oefa minan.pptx
PPT obligaciones ambientales oefa minan.pptxDanmherJoelAlmironPu
 

Último (7)

Taller construcción de Prototipos Uno uML
Taller construcción de Prototipos Uno uMLTaller construcción de Prototipos Uno uML
Taller construcción de Prototipos Uno uML
 
LAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdf
LAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdfLAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdf
LAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdf
 
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
 
TALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdf
TALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdfTALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdf
TALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdf
 
PPT SESION 5 ARTE Y CREATIVIDAD (1).pptx
PPT SESION 5 ARTE Y CREATIVIDAD (1).pptxPPT SESION 5 ARTE Y CREATIVIDAD (1).pptx
PPT SESION 5 ARTE Y CREATIVIDAD (1).pptx
 
DIAPOSITIVAS DRENAJE POSTURAL E INHALACIONES (3).pptx
DIAPOSITIVAS DRENAJE POSTURAL E INHALACIONES (3).pptxDIAPOSITIVAS DRENAJE POSTURAL E INHALACIONES (3).pptx
DIAPOSITIVAS DRENAJE POSTURAL E INHALACIONES (3).pptx
 
PPT obligaciones ambientales oefa minan.pptx
PPT obligaciones ambientales oefa minan.pptxPPT obligaciones ambientales oefa minan.pptx
PPT obligaciones ambientales oefa minan.pptx
 

ETIQUETAS DE CSS.pptx

  • 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