SlideShare una empresa de Scribd logo
1 de 13
ID’s y Classes y DisenoBasico Mas HTML y CSS
Que es un Class? Un Class es un grupo de elementos especiales. Puede ser muchos elementos del mismo class en la misma pagina. Son diferenciada desde los elementos que no tienen Class Las reglas de un Class son aplicado sobre las reglas de un elemento. En HTML los Class aparecen asi: <divclass=“texto”></div> En CSS los Class aparecen asi: .texto
Que es un ID? Un ID es la identificador o identificacion por un elemento. Cada id solamente puede aparecer una sola vez en cada pagina. Como solamente puede ser utilizada una vez las reglas CSS que estan conectado a los ID son considerado mas importante de los Class. Las reglas de un ID son aplicado sobre las reglas de un class o elemento En HTML aparecen asi: <div id=“cabeza”> </div> En CSS aparecen asi: #cabeza
Porque necesitamos Ids y Classes? Necesitamos los Ids y Class para poner estilos diferentes en partes de la pagina web. Los ID son utiles para seleccionar una area especifica.  Normalmente lo utiliza con <div> para crear los varios partes de la pagina Los Class son utiles para crear estilos que van a ser repetidos en la pagina, con elementos como texto (h1, h2, p,), listas (ol, ul, li), y con imágenes (img) o vinculos (a).
Usos Communes de ID’s y Classes
Diseño común de una Pagina de Web
El Codigo <body> <div id=“contenedor”> 	<div id=“cabeza”></div> <div id=“navegacion”></div> <div id=“columna1”></div> <div id=“pie”></div> </div> </body>
Creando el Contenedor Selector: #contenedor Background-Color: #e9e9e9 Border Style: Solid BorderWidth: 1px Margin-Left: auto Margin-Right: auto Width: 720px
Creando la Cabeza Selector: #cabeza Background Color: #ffffff Border Style-Bottom: Solid BorderWidth-Bottom: 1px Width: 720px Height: 125px
Creando la Navegación Selector: #navegacion Background-color:#ffffff Border Style: Solid BorderWidth: 1px Margin 10px Padding 10px Width: 178px Float: Left
Creando la Columna Selector: #columna 1 Background-color:#ffffff Border Style: Solid BorderWidth: 1px Margin 10px Padding 10px Width: 458px Float: Right
Creando el Pie Selector: #pie Background Color: #ffffff Border Style-Top: Solid BorderWidth-Top: 1px Width:720px Height:130px Clear:Both
Poniendo el Fondo Selector: body BackgroundImage: Background.jpg Background Position: Fixed Font Size: 62.5%

Más contenido relacionado

Similar a Id’s y classes (20)

Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Diseño web con css
Diseño web con cssDiseño web con css
Diseño web con css
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Hojas de estilo_css
Hojas de estilo_cssHojas de estilo_css
Hojas de estilo_css
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Hojas De Estilo Css
Hojas De Estilo CssHojas De Estilo Css
Hojas De Estilo Css
 
Programación web modelado en cajas
Programación web modelado en cajasProgramación web modelado en cajas
Programación web modelado en cajas
 
Html
HtmlHtml
Html
 
Introducción CSS
Introducción CSSIntroducción CSS
Introducción CSS
 
Clase 07 04 08
Clase 07 04 08Clase 07 04 08
Clase 07 04 08
 
SEO
SEOSEO
SEO
 
Html1
Html1Html1
Html1
 
Html juan miro y manuel poveda acabado
Html juan miro y manuel poveda acabadoHtml juan miro y manuel poveda acabado
Html juan miro y manuel poveda acabado
 
Maquetacion
MaquetacionMaquetacion
Maquetacion
 
CSS
CSSCSS
CSS
 
Organización de contenido en dreamweaver
Organización de contenido en dreamweaverOrganización de contenido en dreamweaver
Organización de contenido en dreamweaver
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 

Último

2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
RigoTito
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
lupitavic
 
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
MiNeyi1
 
🦄💫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
EliaHernndez7
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
El Fortí
 

Último (20)

ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
 
Infografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfInfografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdf
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
 
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
 
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJOACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
 
🦄💫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
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 

Id’s y classes

  • 1. ID’s y Classes y DisenoBasico Mas HTML y CSS
  • 2. Que es un Class? Un Class es un grupo de elementos especiales. Puede ser muchos elementos del mismo class en la misma pagina. Son diferenciada desde los elementos que no tienen Class Las reglas de un Class son aplicado sobre las reglas de un elemento. En HTML los Class aparecen asi: <divclass=“texto”></div> En CSS los Class aparecen asi: .texto
  • 3. Que es un ID? Un ID es la identificador o identificacion por un elemento. Cada id solamente puede aparecer una sola vez en cada pagina. Como solamente puede ser utilizada una vez las reglas CSS que estan conectado a los ID son considerado mas importante de los Class. Las reglas de un ID son aplicado sobre las reglas de un class o elemento En HTML aparecen asi: <div id=“cabeza”> </div> En CSS aparecen asi: #cabeza
  • 4. Porque necesitamos Ids y Classes? Necesitamos los Ids y Class para poner estilos diferentes en partes de la pagina web. Los ID son utiles para seleccionar una area especifica. Normalmente lo utiliza con <div> para crear los varios partes de la pagina Los Class son utiles para crear estilos que van a ser repetidos en la pagina, con elementos como texto (h1, h2, p,), listas (ol, ul, li), y con imágenes (img) o vinculos (a).
  • 5. Usos Communes de ID’s y Classes
  • 6. Diseño común de una Pagina de Web
  • 7. El Codigo <body> <div id=“contenedor”> <div id=“cabeza”></div> <div id=“navegacion”></div> <div id=“columna1”></div> <div id=“pie”></div> </div> </body>
  • 8. Creando el Contenedor Selector: #contenedor Background-Color: #e9e9e9 Border Style: Solid BorderWidth: 1px Margin-Left: auto Margin-Right: auto Width: 720px
  • 9. Creando la Cabeza Selector: #cabeza Background Color: #ffffff Border Style-Bottom: Solid BorderWidth-Bottom: 1px Width: 720px Height: 125px
  • 10. Creando la Navegación Selector: #navegacion Background-color:#ffffff Border Style: Solid BorderWidth: 1px Margin 10px Padding 10px Width: 178px Float: Left
  • 11. Creando la Columna Selector: #columna 1 Background-color:#ffffff Border Style: Solid BorderWidth: 1px Margin 10px Padding 10px Width: 458px Float: Right
  • 12. Creando el Pie Selector: #pie Background Color: #ffffff Border Style-Top: Solid BorderWidth-Top: 1px Width:720px Height:130px Clear:Both
  • 13. Poniendo el Fondo Selector: body BackgroundImage: Background.jpg Background Position: Fixed Font Size: 62.5%