SlideShare uma empresa Scribd logo
1 de 3
Baixar para ler offline
Ejemplo de Clases en CSS 
En el siguiente ejemplo se observara el funcionamiento de las clases en CSS 
 Código html sin el uso de clases: 
Como se observa se declarara las propiedades a cada objeto en el código css donde el texto al cargar el archivo html estará de color blanco, pero existe otra forma de hacerlo más abreviado proporcionando una clase a dicho texto.
 Código html con el uso de clases: 
Ahora dentro de las etiquetas div se declara una clase con nombre clase_objeto_blanco la cual vamos a utilizar en nuetro código css. Ahora en la segunda imagen le ponemos la propiedad de color blanco al selector con el nombre de dicha clase la cual esta precedida por un punto, con esto todas las clases que tengan ese nombre van a heredar la propiedad de color blanco como se observa en la siguiente imagen.
Ejemplo de clases en css

Mais conteúdo relacionado

Destaque

Maicol garcia y lessly tique
Maicol garcia y lessly tiqueMaicol garcia y lessly tique
Maicol garcia y lessly tiqueLessly Tique
 
Repositorios taller-nora-medina-2014ppt
Repositorios taller-nora-medina-2014pptRepositorios taller-nora-medina-2014ppt
Repositorios taller-nora-medina-2014pptmariaauxiliadora79
 
Laboratorio para el área tecnológica Fgrb m4 u2_gpo24
Laboratorio para el área tecnológica Fgrb m4 u2_gpo24Laboratorio para el área tecnológica Fgrb m4 u2_gpo24
Laboratorio para el área tecnológica Fgrb m4 u2_gpo24Germán Reyes
 
CV - Christian Rimbaut - Acheteur international 2
CV - Christian Rimbaut - Acheteur international 2CV - Christian Rimbaut - Acheteur international 2
CV - Christian Rimbaut - Acheteur international 2Christian Rimbaut
 
Colección permacultura 18 colemnas en la casa
Colección permacultura 18 colemnas en la casa Colección permacultura 18 colemnas en la casa
Colección permacultura 18 colemnas en la casa laarveja
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Merly QA
 
Le comparatif France Suisse reserve des surprises
Le comparatif France Suisse reserve des surprisesLe comparatif France Suisse reserve des surprises
Le comparatif France Suisse reserve des surprisesColombe DISPARD-MELGRANI
 
Cubical Drift : Studio de jeux vidéo indépendant
Cubical Drift : Studio de jeux vidéo indépendantCubical Drift : Studio de jeux vidéo indépendant
Cubical Drift : Studio de jeux vidéo indépendantFrench Tech Côte d'Azur
 
Visita a la candelaria
Visita  a la  candelariaVisita  a la  candelaria
Visita a la candelariananitagalvis25
 
Visita a la candelaria gabriel parrado
Visita a la candelaria gabriel parradoVisita a la candelaria gabriel parrado
Visita a la candelaria gabriel parradonanitagalvis25
 
Réinventez la productivité avec Microsoft Dynamics
Réinventez la productivité avec Microsoft Dynamics Réinventez la productivité avec Microsoft Dynamics
Réinventez la productivité avec Microsoft Dynamics Eskape
 
Seug.miracles du maquillage.2
Seug.miracles du maquillage.2Seug.miracles du maquillage.2
Seug.miracles du maquillage.2zet
 
memoire-Raquel-version-finale+annexes
memoire-Raquel-version-finale+annexesmemoire-Raquel-version-finale+annexes
memoire-Raquel-version-finale+annexesRaquel Pollo Gonzalez
 

Destaque (20)

Embraer Courses
Embraer CoursesEmbraer Courses
Embraer Courses
 
Encuesta estadistica
Encuesta estadisticaEncuesta estadistica
Encuesta estadistica
 
Taller nora-medina-pam
Taller nora-medina-pamTaller nora-medina-pam
Taller nora-medina-pam
 
Maicol garcia y lessly tique
Maicol garcia y lessly tiqueMaicol garcia y lessly tique
Maicol garcia y lessly tique
 
Repositorios taller-nora-medina-2014ppt
Repositorios taller-nora-medina-2014pptRepositorios taller-nora-medina-2014ppt
Repositorios taller-nora-medina-2014ppt
 
Laboratorio para el área tecnológica Fgrb m4 u2_gpo24
Laboratorio para el área tecnológica Fgrb m4 u2_gpo24Laboratorio para el área tecnológica Fgrb m4 u2_gpo24
Laboratorio para el área tecnológica Fgrb m4 u2_gpo24
 
Plagio.
Plagio.Plagio.
Plagio.
 
CV - Christian Rimbaut - Acheteur international 2
CV - Christian Rimbaut - Acheteur international 2CV - Christian Rimbaut - Acheteur international 2
CV - Christian Rimbaut - Acheteur international 2
 
Atelier abécédaire
Atelier abécédaireAtelier abécédaire
Atelier abécédaire
 
Colección permacultura 18 colemnas en la casa
Colección permacultura 18 colemnas en la casa Colección permacultura 18 colemnas en la casa
Colección permacultura 18 colemnas en la casa
 
Sapeur teste
Sapeur testeSapeur teste
Sapeur teste
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.
 
CV frans
CV fransCV frans
CV frans
 
Le comparatif France Suisse reserve des surprises
Le comparatif France Suisse reserve des surprisesLe comparatif France Suisse reserve des surprises
Le comparatif France Suisse reserve des surprises
 
Cubical Drift : Studio de jeux vidéo indépendant
Cubical Drift : Studio de jeux vidéo indépendantCubical Drift : Studio de jeux vidéo indépendant
Cubical Drift : Studio de jeux vidéo indépendant
 
Visita a la candelaria
Visita  a la  candelariaVisita  a la  candelaria
Visita a la candelaria
 
Visita a la candelaria gabriel parrado
Visita a la candelaria gabriel parradoVisita a la candelaria gabriel parrado
Visita a la candelaria gabriel parrado
 
Réinventez la productivité avec Microsoft Dynamics
Réinventez la productivité avec Microsoft Dynamics Réinventez la productivité avec Microsoft Dynamics
Réinventez la productivité avec Microsoft Dynamics
 
Seug.miracles du maquillage.2
Seug.miracles du maquillage.2Seug.miracles du maquillage.2
Seug.miracles du maquillage.2
 
memoire-Raquel-version-finale+annexes
memoire-Raquel-version-finale+annexesmemoire-Raquel-version-finale+annexes
memoire-Raquel-version-finale+annexes
 

Semelhante a Ejemplo de clases en css

Semelhante a Ejemplo de clases en css (7)

Programación web modelado en cajas
Programación web modelado en cajasProgramación web modelado en cajas
Programación web modelado en cajas
 
Lenguaje de programación II-Clase4.pptx
Lenguaje de programación II-Clase4.pptxLenguaje de programación II-Clase4.pptx
Lenguaje de programación II-Clase4.pptx
 
Programación_del_lado_del_servidor......
Programación_del_lado_del_servidor......Programación_del_lado_del_servidor......
Programación_del_lado_del_servidor......
 
2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)
 
Definicion galeria de imagenes
Definicion galeria de imagenesDefinicion galeria de imagenes
Definicion galeria de imagenes
 
Leguaje de programacion C#
Leguaje de programacion C#Leguaje de programacion C#
Leguaje de programacion C#
 
Guia de css para principiantes
Guia de css para principiantesGuia de css para principiantes
Guia de css para principiantes
 

Mais de OVAWEB

Mantener valores en los campos de texto de un formulario PHP
Mantener valores en los campos de texto de un formulario PHPMantener valores en los campos de texto de un formulario PHP
Mantener valores en los campos de texto de un formulario PHPOVAWEB
 
Ejemplo validación
Ejemplo validaciónEjemplo validación
Ejemplo validaciónOVAWEB
 
Ejemplo de formulario
Ejemplo de formularioEjemplo de formulario
Ejemplo de formularioOVAWEB
 
Ejemplo de css
Ejemplo de cssEjemplo de css
Ejemplo de cssOVAWEB
 
Los Formularios en HTML
Los Formularios en HTMLLos Formularios en HTML
Los Formularios en HTMLOVAWEB
 
Las Tablas en HTML
Las Tablas en HTMLLas Tablas en HTML
Las Tablas en HTMLOVAWEB
 
Listas en HTML
Listas en HTMLListas en HTML
Listas en HTMLOVAWEB
 
Imágenes en HTML
Imágenes en HTMLImágenes en HTML
Imágenes en HTMLOVAWEB
 
Párrafos en HTML
Párrafos en HTMLPárrafos en HTML
Párrafos en HTMLOVAWEB
 

Mais de OVAWEB (9)

Mantener valores en los campos de texto de un formulario PHP
Mantener valores en los campos de texto de un formulario PHPMantener valores en los campos de texto de un formulario PHP
Mantener valores en los campos de texto de un formulario PHP
 
Ejemplo validación
Ejemplo validaciónEjemplo validación
Ejemplo validación
 
Ejemplo de formulario
Ejemplo de formularioEjemplo de formulario
Ejemplo de formulario
 
Ejemplo de css
Ejemplo de cssEjemplo de css
Ejemplo de css
 
Los Formularios en HTML
Los Formularios en HTMLLos Formularios en HTML
Los Formularios en HTML
 
Las Tablas en HTML
Las Tablas en HTMLLas Tablas en HTML
Las Tablas en HTML
 
Listas en HTML
Listas en HTMLListas en HTML
Listas en HTML
 
Imágenes en HTML
Imágenes en HTMLImágenes en HTML
Imágenes en HTML
 
Párrafos en HTML
Párrafos en HTMLPárrafos en HTML
Párrafos en HTML
 

Último

LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxAlexander López
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadMiguelAngelVillanuev48
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptJavierHerrera662252
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMidwarHenryLOZAFLORE
 
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPOAREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPOnarvaezisabella21
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfjeondanny1997
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxJOSEFERNANDOARENASCA
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxazmysanros90
 
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptxGoogle-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptxAlexander López
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
Explorando la historia y funcionamiento de la memoria ram
Explorando la historia y funcionamiento de la memoria ramExplorando la historia y funcionamiento de la memoria ram
Explorando la historia y funcionamiento de la memoria ramDIDIERFERNANDOGUERRE
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx241522327
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx241523733
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELmaryfer27m
 
Segunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxSegunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxMariaBurgos55
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxNombre Apellidos
 
Hernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxHernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxJOSEMANUELHERNANDEZH11
 
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxEl_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxAlexander López
 
El uso de las tic en la vida ,lo importante que son
El uso de las tic en la vida ,lo importante  que sonEl uso de las tic en la vida ,lo importante  que son
El uso de las tic en la vida ,lo importante que son241514984
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptchaverriemily794
 

Último (20)

LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidad
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptx
 
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPOAREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptx
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptx
 
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptxGoogle-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
Explorando la historia y funcionamiento de la memoria ram
Explorando la historia y funcionamiento de la memoria ramExplorando la historia y funcionamiento de la memoria ram
Explorando la historia y funcionamiento de la memoria ram
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFEL
 
Segunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxSegunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptx
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
 
Hernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxHernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptx
 
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxEl_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
 
El uso de las tic en la vida ,lo importante que son
El uso de las tic en la vida ,lo importante  que sonEl uso de las tic en la vida ,lo importante  que son
El uso de las tic en la vida ,lo importante que son
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
 

Ejemplo de clases en css

  • 1. Ejemplo de Clases en CSS En el siguiente ejemplo se observara el funcionamiento de las clases en CSS  Código html sin el uso de clases: Como se observa se declarara las propiedades a cada objeto en el código css donde el texto al cargar el archivo html estará de color blanco, pero existe otra forma de hacerlo más abreviado proporcionando una clase a dicho texto.
  • 2.  Código html con el uso de clases: Ahora dentro de las etiquetas div se declara una clase con nombre clase_objeto_blanco la cual vamos a utilizar en nuetro código css. Ahora en la segunda imagen le ponemos la propiedad de color blanco al selector con el nombre de dicha clase la cual esta precedida por un punto, con esto todas las clases que tengan ese nombre van a heredar la propiedad de color blanco como se observa en la siguiente imagen.