   Cascading Style Sheets (CSS) son una forma de    controlar la apariencia de los documentos HTML de    forma organizada...
 Antes de la aparición de los estilos, la presentación se manejaba directamente  dentro de los elementos HTML por medio d...
 Estandarizar la presentación de un sitio web completo.   Haciendola fácil de mantener. Diferentes usuarios pueden conta...
 Propiedades de fuentes Propiedades de color y fondo   Margin (Margen) Propiedades de texto            Border (Borde)  ...
Una hoja de estilos consiste en un conjunto de reglas.Cada regla esta formada por:                        h2 {      El Se...
 Inline Styles                                  <h2 style="color: blue; background: green;">                             ...
   Los estilos son normalmente almacenados en    hojas de estilo.   Una hoja de estilo puede ser aplicada a varias    pá...
p,li,th,td{ font-size: 75%;}body {background-color: #ffffff; } h1,h2,h3,hr{color:black;}
   Una hoja de estilo puede ser interna o externa.   Las hojas de estilo internas son creadas dentro    del documento ht...
   Un ejemplo de hoja de estilo interna.<head>  <style type="text/css">     hr {color: sienna}     p {margin-left: 20px} ...
   Un ejemplo de hoja de estilo externa    referenciada.<head>  <link rel="stylesheet" type="text/css" href=“estilo.css" ...
  ¿Qué estilo será usado si hay mas de uno   especificado para un mismo elemento html? Se podría decir que hay una hoja ...
   Si la referencia a una hoja de estilo externa es    colocada debajo de una hoja de estilo interna,    la externa tiene...
   Tiene tres partes:1. El  selector. Es el tag html que se desea    definir.2. La   propiedad. Es el atributo que se des...
selector {propiedad: valor}   Si el valor tiene más de una palabra se deben    poner entre comillas.               p {fon...
   Es una buena práctica definir una propiedad    por línea.p{text-align: center;color: black;font-family: arial}
   Se puede definir distintos estilos por elemento    clasificándolos.                p.right {text-align: right}        ...
   En general:<[sel] class=“clase1 clase2 …"> Párrafo.</[sel]>   También podemos definir clases    independientes de un ...
Define el espacio entre los elementos html.
   Define el espacio entre el borde del elemento y    el contenido del elemento.
Css power
Upcoming SlideShare
Loading in …5
×

Css power

348 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
348
On SlideShare
0
From Embeds
0
Number of Embeds
88
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css power

  1. 1.  Cascading Style Sheets (CSS) son una forma de controlar la apariencia de los documentos HTML de forma organizada y eficiente. Con CSS usted será capaz de: * Agregar un nuevo aspecto a tu viejo HTML * Completamente restyle un sitio web con sólo unos pocos cambios en el código CSS * Utilice el "estilo" de crear en cualquier página web que desee Una hoja de estilo puede, y debe ser, completamente separado de los documentos HTML.
  2. 2.  Antes de la aparición de los estilos, la presentación se manejaba directamente dentro de los elementos HTML por medio de atributos. Por ejemplo: <h2 align="center"> <font color=“blue" size=“3" face="Times New Roman, serif"> <i>Seminario de HTML UCEMA</i> </font> </h2> CSS permite separar el contenido de un documento de su presentación. En el documento HTML: En el documento HTML: En la hoja de estilos se define el formato En la hoja de estilos se define el formato <h2>Seminario de HTML <h2>Seminario de HTML de los de los UCEMA</h2> UCEMA</h2> encabezados h2: encabezados h2: h2 {{ h2 text-align: center; text-align: center; color: blue; color: blue; font: italic large "Times New Roman", font: italic large "Times New Roman", serif; serif; }}
  3. 3.  Estandarizar la presentación de un sitio web completo. Haciendola fácil de mantener. Diferentes usuarios pueden contar con diferentes estilos acordes a sus necesidades. Ejemplos:  Estilos para personas con dificultades visuales,  Estilos para dispositivos móviles,  Estilos para dispositivos monocromos,  Estilos para impresión,  Etc. Los documentos HTML se reducen en tamaño y complejidad.
  4. 4.  Propiedades de fuentes Propiedades de color y fondo Margin (Margen) Propiedades de texto Border (Borde) Padding (Relleno)  espaciado de palabras Contenido  alineación Propiedades de caja  Margen  Borde  Relleno Estilos de listas
  5. 5. Una hoja de estilos consiste en un conjunto de reglas.Cada regla esta formada por: h2 {  El Selector (nombre del estilo) text-align: center; color: blue;  La Declaración (define el estilo) font: italic large "Times New Roman", serif;  Propiedad } .textoresaltado {  Valor font-family: Arial, Helvetica, sans-serif; font-size: 12px;¿Qué podemos hacer con los estilos? font-style: normal; font-weight: bold; /* Esto es un Redefinir estilos de Etiquetas HTML. comentario */ Crear Estilos Personalizados para color: #000000; } uso genérico (Clases) #logo { Crear Estilos para un elemento background-image: url("/img/logo.gif"); background-position:center; HTML específico (por Id) background-repeat:no-repeat; height: 50px; width: 150px; position: absolute; left: 0px; top: 0px; }
  6. 6.  Inline Styles <h2 style="color: blue; background: green;"> <h2 style="color: blue; background: green;"> Utilizando el atributo “style” se define el Curso HTML UCEMA Curso HTML UCEMA </h2> </h2> estilo de un elemento HTML en forma individual. <head> <head> Embedded Style <style type="text/css"> <style type="text/css"> h2 { { h2 Se define la regla CSS dentro de un font-style: italic; font-style: italic; font-weight: bold; documento HTML. Se puede aplicar a font-weight: bold; color: blue; color: blue; cualquier elemento de ese documento. }} </style> </style> Hojas de Estilos externas </head> </head> <body> <body> Un archivo CSS independiente que se <h2>Curso HTML UCEMA</h2> <h2>Curso HTML UCEMA</h2> encuentra referenciado en cada uno de </body> </body> los documentos HTML que desean <head> <head> <link rel=stylesheet type="text/css“ utilizarlo. <link rel=stylesheet type="text/css“ href=“estilos.css"> href=“estilos.css"> </head> </head>
  7. 7.  Los estilos son normalmente almacenados en hojas de estilo. Una hoja de estilo puede ser aplicada a varias páginas web. Esto centraliza los cambios. Una página web puede utilizar mas de una hoja de estilo.
  8. 8. p,li,th,td{ font-size: 75%;}body {background-color: #ffffff; } h1,h2,h3,hr{color:black;}
  9. 9.  Una hoja de estilo puede ser interna o externa. Las hojas de estilo internas son creadas dentro del documento html y utilizan el tag style y son creadas dentro del head. Una hoja de estilo externa tiene la extensión .css.
  10. 10.  Un ejemplo de hoja de estilo interna.<head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style></head>
  11. 11.  Un ejemplo de hoja de estilo externa referenciada.<head> <link rel="stylesheet" type="text/css" href=“estilo.css" /></head> En este caso, la hoja de estilo se llama estilo.css.
  12. 12.  ¿Qué estilo será usado si hay mas de uno especificado para un mismo elemento html? Se podría decir que hay una hoja de estilo “virtual” en la que la prioridad de definiciones es la siguiente:1. Default del navegador2. Hoja de estilo externa3. Hoja de estilo interna4. Atributo style (más alta prioridad)
  13. 13.  Si la referencia a una hoja de estilo externa es colocada debajo de una hoja de estilo interna, la externa tiene mayor prioridad.
  14. 14.  Tiene tres partes:1. El selector. Es el tag html que se desea definir.2. La propiedad. Es el atributo que se desea definir.3. El valor. Es el valor del atributo.
  15. 15. selector {propiedad: valor} Si el valor tiene más de una palabra se deben poner entre comillas. p {font-family: "sans serif"} Se pueden agrupar selectores así: h1,h2,h3,h4,h5,h6 { color: green }
  16. 16.  Es una buena práctica definir una propiedad por línea.p{text-align: center;color: black;font-family: arial}
  17. 17.  Se puede definir distintos estilos por elemento clasificándolos. p.right {text-align: right} p.center {text-align: center} En el html: <p class="right"> Párrafo a la derecha. </p> <p class="center"> Párrafo al centro. </p>
  18. 18.  En general:<[sel] class=“clase1 clase2 …"> Párrafo.</[sel]> También podemos definir clases independientes de un selector para asignarlas indistintamente a cualquier tag. .center {text-align: center}
  19. 19. Define el espacio entre los elementos html.
  20. 20.  Define el espacio entre el borde del elemento y el contenido del elemento.

×