SlideShare ist ein Scribd-Unternehmen logo
1 von 7
Color de primer plano: la propiedad 'color'
La propiedad color describe el color de primer plano de un elemento.
Por ejemplo, todos los títulos <h1> de un documento en color rojo oscuro.
h1 {
color: #ff0000;
}
Los colores se pueden introducir como valores hexadecimales, como en el
ejemplo anterior: #ff0000; pueden usar los nombres de los colores: "red"
(rojo), o bien como valores rgb: (rgb(255,0,0)).
La propiedad 'background-color'
La propiedad background-color describe el color de fondo de los
elementos.
El elemento <body> contiene todo el contenido de un documento HTML.
Así pues, para cambiar el color de fondo de una página, la propiedad
background-color debería aplicarse al elemento <body>.
También se pueden aplicar colores de fondo a otros elementos, entre ellos,
a los encabezados y al texto. En el ejemplo que sigue se aplicarán
diferentes colores a los elementos <body> y <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Fíjese cómo hemos aplicado dos propiedades a <h1> separándolas
por medio de un punto y coma.
Imágenes de fondo [background-image]
La propiedad CSS background-image se usa para insertar una imagen
de fondo.
Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que
ves, o bien puedes usar cualquier otra imagen.
Para insertar la imagen de la mariposa como imagen de fondo de una
página web, aplica sencillamente la propiedad background-image al
elemento <body> y especifica la localización de la imagen.
body {
background-color: #FFCC66;
background-image: url("../graficos/butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
NOTA: Especificar la ubicación de la imagen: url("butterfly.gif"), si está
en la misma carpeta.
Para referenciar a otra carpeta url("../imagenes/butterfly.gif") o
imágenes de internet url("http://www.html.net/butterfly.gif").
Repetir la imagen de fondo [background-repeat]
En el ejemplo anterior, por defecto, la mariposa se repite tanto en el eje
horizontal como en el vertical para ocupar toda la pantalla. La propiedad
background-repeat controla este comportamiento.
La tabla siguiente resume los cuatro valores diferentes para la propiedad
background-repeat. Valor Descripción
Background-repeat: repeat-x La imagen se repite en el eje horizontal
background-repeat: repeat-y La imagen se repite en el eje vertical
background-repeat: repeat La imagen se repite en el eje horizontal
y vertical
background-repeat: no-repeat La imagen no se repite
Por ejemplo, para evitar que se repita una imagen de fondo, el código
que tendríamos que usar sería el siguiente:
body {
background-color: #FFCC66;
background-image: url("../graficos/butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Propiedades css
Propiedades css

Weitere ähnliche Inhalte

Ähnlich wie Propiedades css

Ähnlich wie Propiedades css (11)

64 Php. Manejando Fuentes
64 Php. Manejando Fuentes64 Php. Manejando Fuentes
64 Php. Manejando Fuentes
 
Introduccion css
Introduccion cssIntroduccion css
Introduccion css
 
Capítulo 4box model
Capítulo 4box modelCapítulo 4box model
Capítulo 4box model
 
Introdu css clase1
Introdu css clase1Introdu css clase1
Introdu css clase1
 
Unidad #2
Unidad #2Unidad #2
Unidad #2
 
Unidad #2
Unidad #2Unidad #2
Unidad #2
 
Html 2
Html 2Html 2
Html 2
 
88 Php. Imagenes En Tablas
88 Php. Imagenes En Tablas88 Php. Imagenes En Tablas
88 Php. Imagenes En Tablas
 
Box model carolina sanchez
Box model carolina sanchezBox model carolina sanchez
Box model carolina sanchez
 
08body
08body08body
08body
 
Programacion php
Programacion phpProgramacion php
Programacion php
 

Kürzlich hochgeladen

Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOluismii249
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...jlorentemartos
 
AEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptxAEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptxhenarfdez
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIAFabiolaGarcia751855
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024IES Vicent Andres Estelles
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxroberthirigoinvasque
 
La Evaluacion Formativa SM6 Ccesa007.pdf
La Evaluacion Formativa SM6  Ccesa007.pdfLa Evaluacion Formativa SM6  Ccesa007.pdf
La Evaluacion Formativa SM6 Ccesa007.pdfDemetrio Ccesa Rayme
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docxEliaHernndez7
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxFernando Solis
 
Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024IES Vicent Andres Estelles
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCCarlosEduardoSosa2
 
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdfPROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdfEduardoJosVargasCama1
 
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdfFICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdfRaulGomez822561
 
Factores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdfFactores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdfJonathanCovena1
 
PLAN LECTOR 2024 integrado nivel inicial-miercoles 10.pptx
PLAN LECTOR 2024  integrado nivel inicial-miercoles 10.pptxPLAN LECTOR 2024  integrado nivel inicial-miercoles 10.pptx
PLAN LECTOR 2024 integrado nivel inicial-miercoles 10.pptxCamuchaCrdovaAlonso
 

Kürzlich hochgeladen (20)

Novena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan EudesNovena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan Eudes
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
 
AEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptxAEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptx
 
Lecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigosLecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigos
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
Sesión de clase APC: Los dos testigos.pdf
Sesión de clase APC: Los dos testigos.pdfSesión de clase APC: Los dos testigos.pdf
Sesión de clase APC: Los dos testigos.pdf
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
 
La Evaluacion Formativa SM6 Ccesa007.pdf
La Evaluacion Formativa SM6  Ccesa007.pdfLa Evaluacion Formativa SM6  Ccesa007.pdf
La Evaluacion Formativa SM6 Ccesa007.pdf
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
 
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdfPROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
 
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdfFICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
Usos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicasUsos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicas
 
Factores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdfFactores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdf
 
PLAN LECTOR 2024 integrado nivel inicial-miercoles 10.pptx
PLAN LECTOR 2024  integrado nivel inicial-miercoles 10.pptxPLAN LECTOR 2024  integrado nivel inicial-miercoles 10.pptx
PLAN LECTOR 2024 integrado nivel inicial-miercoles 10.pptx
 

Propiedades css

  • 1.
  • 2. Color de primer plano: la propiedad 'color' La propiedad color describe el color de primer plano de un elemento. Por ejemplo, todos los títulos <h1> de un documento en color rojo oscuro. h1 { color: #ff0000; } Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: #ff0000; pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)). La propiedad 'background-color' La propiedad background-color describe el color de fondo de los elementos. El elemento <body> contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedad background-color debería aplicarse al elemento <body>. También se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarán diferentes colores a los elementos <body> y <h1>.
  • 3. body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; } Fíjese cómo hemos aplicado dos propiedades a <h1> separándolas por medio de un punto y coma.
  • 4. Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo. Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves, o bien puedes usar cualquier otra imagen. Para insertar la imagen de la mariposa como imagen de fondo de una página web, aplica sencillamente la propiedad background-image al elemento <body> y especifica la localización de la imagen. body { background-color: #FFCC66; background-image: url("../graficos/butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; } NOTA: Especificar la ubicación de la imagen: url("butterfly.gif"), si está en la misma carpeta. Para referenciar a otra carpeta url("../imagenes/butterfly.gif") o imágenes de internet url("http://www.html.net/butterfly.gif").
  • 5. Repetir la imagen de fondo [background-repeat] En el ejemplo anterior, por defecto, la mariposa se repite tanto en el eje horizontal como en el vertical para ocupar toda la pantalla. La propiedad background-repeat controla este comportamiento. La tabla siguiente resume los cuatro valores diferentes para la propiedad background-repeat. Valor Descripción Background-repeat: repeat-x La imagen se repite en el eje horizontal background-repeat: repeat-y La imagen se repite en el eje vertical background-repeat: repeat La imagen se repite en el eje horizontal y vertical background-repeat: no-repeat La imagen no se repite Por ejemplo, para evitar que se repita una imagen de fondo, el código que tendríamos que usar sería el siguiente: body { background-color: #FFCC66; background-image: url("../graficos/butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }