Css

1,599 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
1,599
On SlideShare
0
From Embeds
0
Number of Embeds
81
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css

  1. 1. CSS
  2. 2. ¿Qué es CSS? Css Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir . Permite a los desarrolladores el control total sobre estilo y formato de sus documentos. ¿Para qué sirve? CSS se utiliza para dar estilo a documentos HTML y XHTML, separando el contenido de la presentación.
  3. 3. ¿Cómo funciona? Cada regla/estilo CSS está compuesta por un selector y una o más declaraciones. Ejemplo: p{ font-family: small Arial, sans-serif; color: red; background-color:black; } p (párrafo)es el selector, y las 3 líneas entre llaves son declaraciones (en las que font y color y background se denominan propiedades a las que asignamos un valor.
  4. 4. Ubicación de las reglas css Estilos propios del navegador: Estilos definido por el usuario en el navegador Estilo en línea Estilo incrustado en la hoja html Estilo definido en una hoja externa Se vinculan a la página web mediante un elemento link. Ejemplo: <link href=quot;hojadeestilos.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot;/>
  5. 5. Estilo en línea Se colocan como valor del atributo style de cualquier elemento XHTML. (mejor evitar) Ejemplo : <p style=quot;color:redquot;>Esto es un párrafo rojo</p> Son los menos eficientes y más difíciles a la hora de cambiar estilos, ya que hay que hacerlo tag a tag.
  6. 6. Estilo embebido en la hoja html Estilos definidos dentro de un elemento <style type=quot;text/cssquot;> </style> dentro de la sección <head> de la página html Ejemplo : <head> <title>Mi pagina</title> <style type=quot;text/cssquot;> p{color: red; font:0.9em Arial} </style> </head> ....
  7. 7. Tipos de selectores De elementos p {.. . declaraciones.. .} De ID (sólo aparecen una vez en el documento) #piePagina {. . . declaraciones..} (Observa que el # llama a un id) De clase .nombreclase {... declaraciones.. .} (Observa que el punto define una clase) Contextuales o descendentes p #piePagina {. . . declaraciones. . . }
  8. 8. Tipos de selectores De grupo p, Ii, table {. . . declaraciones.. .} De pseudoclase a:visited {. . . declaraciones...) a:hover{..declaraciones..} De pseudoelemento p:first-letter {. . . declaraciones. . .}
  9. 9. Unidades de los valores de css Cada porpiedad va a tener un valor cuya medida se puede expresar Mediante una palabra con significado propio: Por ejemplo: solid, thin, blue, … ejemplo práctico: <p style=quot;border:2px red solidquot;>Esto está bordeado solido en rojo</p> que produce lo siguiente: Esto está bordeado solido en rojo
  10. 10. Medidas % porcentaje in inch cm centimetros mm millimetros em 1em es igual al tamaño de la fuente actual. 2em mide 2 veces el tamaño de la fuente actual. Ejemplo., si un elemento se está visualizando con una fuente de 12pt, entonces '2em' será 24 puntos. ex un ex es la altura de la letra x (altura de la letra x => aprox. 0.5em) pt point (1 pt= 1/72 inch) pc pica (1 pc=12 puntos) px pixel (un punto en una pantalla de ordenador)
  11. 11. Colores Unidades Descripción color_name Un nombre de color (ejemplo. red) rgb(x,x,x) Un valor RGB (ejemplo. rgb(255,0,0)) rgb(x%, x%, x%) Un valor pocentual de RGB (ej. rgb(100%,0%,0%)) #rrggbb Un valor hexadecimal (ejemplo. #ff0000)
  12. 12. El atributo CLASS .nombreclase {.....declaraciones ......} (ojo con el punto, es lo que caracteriza este selector) Definimos un estilo independientemente de los elementos donde se aplica el mismo. Para asignar la clase que debemos modificar incluir atributos CLASS en los lugares donde queramos aplicar estilos.
  13. 13. El atributo CLASS A la hora de aplicarlo: <p class=quot;citaquot;>quot;Muchos años después, frente al pelotón ...</p> A la hora de definirlo .cita {font-weight: bold; color: red;} El punto inicial es necesario para mantener la definición de este estilo desvinculada de cualquier elemento del documento. Si queremos restringir el uso de este estilo a un tipo de elemento, podemos definirlo como: p.cita {font-weight: bold; color: red;}
  14. 14. El atributo ID Definición #ejemplo {font-weight: bold;} Uso <p id=quot;ejemploquot;>Esto es el párrafo de ejemplo.</p> El mismo atributo id sólo puede usuarse en un elemento. Debe ser único.

×