Your SlideShare is downloading. ×
Curso De Css
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Curso De Css

638
views

Published on

Curso que hice de introducción al CSS

Curso que hice de introducción al CSS


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
638
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. Curso de CSS Por Martí Planellas
    • 2. ¿Qué es el CSS?
      • Cascading Style Sheets .
      • Separa presentación de contenido.
      • Permite cambiar totalmente el aspecto de la web sin tocar el código fuente de la misma.
      • Es compatible, en gran parte, con todos los navegadores existentes.
      • Es estándar.
    • 3. CSS y HTML
      • Linking
        • <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=“ url” >
      • Embedding
        • <style type=&quot;text/css&quot;>… </style>
      • Inline
        • <p style=&quot;color:red;font-size:20px&quot;>…</p>
    • 4. Sintaxis
      • Tipos de selectores
        • HTML: p{ color: #000; font-weight: bold; }
        • ID: #titulo{ font-size: 20pt; }
        • Class: .rojo{ color:red; }
        • Pseudoclase Link:
          • A:link{ color: blue; }
          • A:visited{ color: red; }
          • A:active{ color: black; }
          • A:hover{ text-decoration: underline; }
        • Pseudoelemento: p:first-letter{}, p:first-line{}, :before, :after
        • Agrupación: H1,H2,H3,H4{ font-size: 20pt; }
    • 5. Sintaxis
      • URLs
        • url (&quot;http://www.salle.url.edu/&quot;)
        • url (http://ecampus.salle.url.edu/)
        • url ('imagenes/fondo.jpg')
        • url (../botones/adelante.gif)
      • Longitudes
        • Unidades relativas: em (font-size), ex (x-height)
        • Unidades absolutas: px, pt, in, cm, mm.
      • Colores
        • Palabras clave: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white i yellow.
        • RGB: rgb(255,0,0), #ff0000 (RRGGBB) , #ff0 (RGB)
    • 6. Herencia
      • Todos los elementos heredan las propiedades de sus padres.
      • Selectores contextuales:
        • #titulo .rojo{ color: red; }
        • A .negro{ color: black; }
        • .rojo .negro{ color: red; }
      • !important
        • A .negro{ color: black !important; }
    • 7. El CSS Box Model
    • 8. El CSS Box Model
      • Bordes
        • Border: 1px #000 solid;
        • Border-left: 1px #FFF dashed;
        • Border-style: dotted, solid, dashed, double;
      • Márgenes/Paddings
        • Margin: 25px;
        • Margin: 20px, 25px, 10px, 0;
        • Margin: 10px, auto;
        • Margin-top: 20px;
    • 9. Problemática con IE
      • Internet Explorer
      • Width: 100px;
      • Padding: 0, 20px;
      • Mozilla Firefox (y otros)
      • Width: 100px;
      • Padding: 0, 20px;
      100px 100px 140px 20px 20px 100px 20px 20px 100px 60px
    • 10. Solución
      • Condicional, CSS sólo para IE
        • <!--[if IE]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=“ie.css”> <![endif]-->
        • <!--[if IE 5]>
        • <!--[if IE 5.0]>
        • <!--[if IE 5.5]>
        • <!--[if IE 6]>
        • <!--[if IE 7]>
        • <!--[if gte IE 5]>
        • <!--[if lt IE 6]>
        • <!--[if lte IE 5.5]>
        • <!--[if gt IE 6]>
    • 11. Posicionamiento
      • Definir siempre un ancho (width) !!
      • Flujo normal
        • Position: static;
      • Posicionamiento Absoluto
        • Position: absolute;
      • Posicionamiento Relativo
        • Position: relative;
    • 12. Flujo Normal
      • Sigue el flujo que seguiría el texto en una pagina HTML.
      • No sirve para posicionar elementos.
      • Es el que hay por defecto.
      • Puede tener dos tipos de contexto
        • Formato de bloque: Las cajas se sitúan una debajo de otra ocupando todo el ancho disponible.
        • Formato inline : Las cajas se sitúan una al lado de otra y su anchura se ajusta al contenido.
    • 13. Posicionamiento Absoluto
      • Un elemento posicionado absoluto se saca del flujo normal e ignora (y es ignorado por) todos sus vecinos, está sólo limitado por su bloque contenedor.
      • Control: left, right, top, bottom,
      • Recomendado para contenido estático.
    • 14. Posicionamiento Relativo
      • Se comporta de acuerdo al flujo normal.
      • Control flotante: float: left; float: right;
      #cont{ width: 100%; padding: 10px; } #left{ position: relative; float: left; width: 40%; } #right{ position: relative; float: right; width: 40%; } #center{ position:relative; float:left; width: 20%; margin-left: 10px; } #left #right #cont #center
    • 15. Visualización
      • Visibility
        • Visible
        • Hidden
      • Overflow
        • Hidden
        • Scroll (scroll-x, scroll-y)
        • Auto
      • Display
        • None
        • Block
        • Inline
    • 16. “ Truquitos”
      • Margenes negativos.
      • Pseudoclasse :hover en divs.
      • Centrado multinavegador:
        • body{ text-lign: center; }
        • #wrap{ width: 800px; margin: 0 auto; text-align:left; }
    • 17. Páginas útiles
      • W3C:
      • http://www.w3schools.com/css/
      • Validador
      • http://jigsaw.w3.org/css-validator/
      • WebDeveloper Toolbar
      • https://addons.mozilla.org/en-US/firefox/addon/60
      • Galerias de CSS:
      • http://www.google.es/search?q=css+gallery
    • 18. Gracias por venir!  http://www.radleb.net/cursos

    ×