Curso De Css

840 views
739 views

Published on

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
840
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Curso De Css

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

    ×