Id’s y classes

528 views
452 views

Published on

Tercer parte en el curso de HTML

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
528
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Id’s y classes

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

×