• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Id’s y classes
 

Id’s y classes

on

  • 525 views

Tercer parte en el curso de HTML

Tercer parte en el curso de HTML

Statistics

Views

Total Views
525
Views on SlideShare
525
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Id’s y classes Id’s y classes Presentation Transcript

    • 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%