• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Curso De Css
 

Curso De Css

on

  • 934 views

Curso que hice de introducción al CSS

Curso que hice de introducción al CSS

Statistics

Views

Total Views
934
Views on SlideShare
924
Embed Views
10

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 10

http://www.linkedin.com 7
https://www.linkedin.com 2
http://www.slideshare.net 1

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

Curso De Css Curso De Css Presentation Transcript

  • Curso de CSS Por Martí Planellas
  • ¿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.
  • 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>
  • 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; }
  • 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)
  • 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; }
  • El CSS Box Model
  • 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;
  • 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
  • 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]>
  • Posicionamiento
    • Definir siempre un ancho (width) !!
    • Flujo normal
      • Position: static;
    • Posicionamiento Absoluto
      • Position: absolute;
    • Posicionamiento Relativo
      • Position: relative;
  • 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.
  • 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.
  • 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
  • Visualización
    • Visibility
      • Visible
      • Hidden
    • Overflow
      • Hidden
      • Scroll (scroll-x, scroll-y)
      • Auto
    • Display
      • None
      • Block
      • Inline
  • “ Truquitos”
    • Margenes negativos.
    • Pseudoclasse :hover en divs.
    • Centrado multinavegador:
      • body{ text-lign: center; }
      • #wrap{ width: 800px; margin: 0 auto; text-align:left; }
  • 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
  • Gracias por venir!  http://www.radleb.net/cursos