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

🦄💫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
 
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
 
6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria
Wilian24
 

Último (20)

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
 
🦄💫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
 
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...
 
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
 
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
 
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
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
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
 
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
 
Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024
 
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
 
La Evaluacion Formativa SM6 Ccesa007.pdf
La Evaluacion Formativa SM6  Ccesa007.pdfLa Evaluacion Formativa SM6  Ccesa007.pdf
La Evaluacion Formativa SM6 Ccesa007.pdf
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdf
 
PP_Comunicacion en Salud: Objetivación de signos y síntomas
PP_Comunicacion en Salud: Objetivación de signos y síntomasPP_Comunicacion en Salud: Objetivación de signos y síntomas
PP_Comunicacion en Salud: Objetivación de signos y síntomas
 
Actividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docxActividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docx
 
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
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria
 
Posición astronómica y geográfica de Europa.pptx
Posición astronómica y geográfica de Europa.pptxPosición astronómica y geográfica de Europa.pptx
Posición astronómica y geográfica de Europa.pptx
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 

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%