Mariela Tapia
Hojas de Estilo
• Hojas de Estilo en Cascada (Cascade Stylesheets)
• El organismo W3C (World Wide Web Consortium), encarga...
Por qué usar CSS
• El ejemplo anterior utiliza la etiqueta <font> con sus atributos
color, face y size para definir el col...
Por qué usar CSS
• Y si queremos cambiar el diseño del sitio!!!
Por qué usar CSS
• Con las hojas de estilo sólo debemos crear unas cuantas líneas
y cambiaremos de diseño las veces que qu...
Por qué usar CSS
• Y así de fácil podemos pasar de esto
Por qué usar CSS
• A esto
Colores
• Colores por palabras clave
• Colores en hexadecimal
#ffff00 (amarillo)
• RGB define un color indicando la
cantid...
Estructura CSS
@charset "utf-8";
Selector{Propiedad1: valor; Propiedad2: valor;Propiedad3: valor; }
Selector{
Propiedad1: ...
Glosario Básico
• Regla: cada uno de los estilos que componen una hoja de estilos
CSS. Cada regla está compuesta de una pa...
Formas de Incluir CSS
• Dentro del mismo Tag
Formas de Incluir CSS
• Dentro del mismo HTML
Formas de Incluir CSS
• En un archivo CSS externo
Selectores
• CSS está formada por una parte llamada "selector" y otra
parte llamada "declaración".
• La declaración indica...
Selector de tipo o etiqueta
afectaaunelementoHTMLotag
• Ejemplo 1
• Realice una hoja HTML con
las etiquetas <h1> <h2>
<p>
...
Selector de tipo o etiqueta
• Ejemplo 2
Selector de tipo o etiqueta
• Ejemplo 2
Selector descendente
Ejemplo3
Selector de clase
afectaaungrupo deelementosHTML
Ejemplo4
Selector de clase
Ejemplo4
Selector de clase
Selectores ID
afectaaunúnicoelementoHTML
Unidades de medida
• Las medidas en CSS se emplean para definir el alto, el ancho,
los márgenes, tamaño de letra, etc
• La...
Unidades de medida absolutas
Unidades de Medida Relativas
• La unidad em hace referencia al tamaño en puntos de la letra
que se está utilizando. Si se ...
Modelo de cajas
• El modelo de cajas o box model hace que todos los elementos
de las páginas se representen mediante cajas...
Modelo de cajas
• Las cajas se forman de 6 partes
Modelo de cajas
• Contenido (content): se trata del contenido HTML del
elemento (las palabras de un párrafo, una imagen, e...
Márgenes
• Margin es el espacio que hay desde el borde de la
caja hasta el próximo elemento
• Ejemplo6
Márgenes shorthand
• Valores que puede tener
• Margin: 30px; Margin: 30px 10px;
Márgenes shorthand
• Valores que puede tener
• Margin: 30px 10px 20px; Margin: 30px 10px 20px 5px;
Relleno
• Padding es el espacio desde el contenido de la caja hasta el
borde de la caja.
Bordes
• Anchura: thin (borde delgado), medium (borde normal) y thick
(borde ancho).
• border-top-width, border-right-widt...
Bordes
Bordes
Fondos
• El fondo puede ser un color simple o una imagen.
• El fondo solamente se visualiza en el área ocupada por el
cont...
Hojas de estilo en Cascada
• http://|www.docstoc.com/docs/23984045/Hojas-de-Estilo-
(CSS)
• http://aldeasocial.com/2010/03...
• http://coding.smashingmagazine.com/2009/07/13/css-3-
cheat-sheet-pdf/
• http://librosweb.es/css/
• Generador de texto si...
Upcoming SlideShare
Loading in...5
×

Css

233

Published on

empezando a trabajar con CSS conceptos básicos

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
233
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Css"

  1. 1. Mariela Tapia
  2. 2. Hojas de Estilo • Hojas de Estilo en Cascada (Cascade Stylesheets) • El organismo W3C (World Wide Web Consortium), encargado de crear todos los estándares relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el lenguaje HTML • Publicado en 1996 • Amplia el lenguaje HTML separando el diseño en hojas CSS • Vincula documentos HTML con plantillas de diseño • CSS3
  3. 3. Por qué usar CSS • El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, el tipo y el tamaño de letra de cada elemento <p> de la página. • Si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font> • Si el sitio web entero se compone de 100 páginas diferentes, habría que definir 5000 etiquetas <font>
  4. 4. Por qué usar CSS • Y si queremos cambiar el diseño del sitio!!!
  5. 5. Por qué usar CSS • Con las hojas de estilo sólo debemos crear unas cuantas líneas y cambiaremos de diseño las veces que queramos
  6. 6. Por qué usar CSS • Y así de fácil podemos pasar de esto
  7. 7. Por qué usar CSS • A esto
  8. 8. Colores • Colores por palabras clave • Colores en hexadecimal #ffff00 (amarillo) • RGB define un color indicando la cantidad de color rojo, verde y azul que se debe mezclar para obtener ese color. rgb(71, 98, 176) rgb(27%, 38%, 69%)
  9. 9. Estructura CSS @charset "utf-8"; Selector{Propiedad1: valor; Propiedad2: valor;Propiedad3: valor; } Selector{ Propiedad1: valor; Propiedad2: valor; Propiedad3: valor; } /* así se escribe los comentarios */ • EL borrador de CSS3 tiene 239 propiedades.
  10. 10. Glosario Básico • Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y por último, un símbolo de "llave de cierre" (}). • Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. • Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS. • Propiedad: característica que se modifica en el elemento seleccionado, como por ejemplo su tamaño de letra, su color de fondo, etc. • Valor: establece el nuevo valor de la característica modificada en el elemento.
  11. 11. Formas de Incluir CSS • Dentro del mismo Tag
  12. 12. Formas de Incluir CSS • Dentro del mismo HTML
  13. 13. Formas de Incluir CSS • En un archivo CSS externo
  14. 14. Selectores • CSS está formada por una parte llamada "selector" y otra parte llamada "declaración". • La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacerlo". • Selector Universal
  15. 15. Selector de tipo o etiqueta afectaaunelementoHTMLotag • Ejemplo 1 • Realice una hoja HTML con las etiquetas <h1> <h2> <p> • Cree una hoja de estilo para los selectores h1 h2 p con la propiedad color
  16. 16. Selector de tipo o etiqueta • Ejemplo 2
  17. 17. Selector de tipo o etiqueta • Ejemplo 2
  18. 18. Selector descendente Ejemplo3
  19. 19. Selector de clase afectaaungrupo deelementosHTML Ejemplo4
  20. 20. Selector de clase Ejemplo4
  21. 21. Selector de clase
  22. 22. Selectores ID afectaaunúnicoelementoHTML
  23. 23. Unidades de medida • Las medidas en CSS se emplean para definir el alto, el ancho, los márgenes, tamaño de letra, etc • Las medidas son valores numéricos positivos en entero o decimal seguido de una unidad de medida, no debe haber espacios en blanco entre el número y la unidad de medida. Font-size=18pt; • Css tiene dos tipos e unidades de medida: absolutas que son un valor real y relativas que dependen de otra medida. • La ventaja de las unidades absolutas es que su valor es directamente el valor que se debe utilizar y su desventaja es que son muy poco flexibles y no se adaptan fácilmente a los diferentes medios.
  24. 24. Unidades de medida absolutas
  25. 25. Unidades de Medida Relativas • La unidad em hace referencia al tamaño en puntos de la letra que se está utilizando. Si se utiliza una tipografía de 12 puntos, 1em equivale a 12 puntos. El valor de 1ex se puede aproximar por 0.5 em • La gran ventaja de las unidades relativas es que siempre mantienen las proporciones del diseño de la página • E
  26. 26. Modelo de cajas • El modelo de cajas o box model hace que todos los elementos de las páginas se representen mediante cajas rectangulares. • Las cajas se crean automáticamente cada vez que se inserta una etiqueta HTML
  27. 27. Modelo de cajas • Las cajas se forman de 6 partes
  28. 28. Modelo de cajas • Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.) • Relleno (padding): espacio libre opcional existente entre el contenido y el borde. • Borde (border): línea que encierra completamente el contenido y su relleno. • Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno. • Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno. • Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes
  29. 29. Márgenes • Margin es el espacio que hay desde el borde de la caja hasta el próximo elemento • Ejemplo6
  30. 30. Márgenes shorthand • Valores que puede tener • Margin: 30px; Margin: 30px 10px;
  31. 31. Márgenes shorthand • Valores que puede tener • Margin: 30px 10px 20px; Margin: 30px 10px 20px 5px;
  32. 32. Relleno • Padding es el espacio desde el contenido de la caja hasta el borde de la caja.
  33. 33. Bordes • Anchura: thin (borde delgado), medium (borde normal) y thick (borde ancho). • border-top-width, border-right-width, border-bottom-width, border-left-width • Color • border-top-color, border-right-color, border-bottom-color, border-left-color • Estilo • border-top-style, border-right-style, border-bottom-style, border-left-style
  34. 34. Bordes
  35. 35. Bordes
  36. 36. Fondos • El fondo puede ser un color simple o una imagen. • El fondo solamente se visualiza en el área ocupada por el contenido y su relleno, ya que el color de los bordes se controla directamente desde los bordes y las zonas de los márgenes siempre son transparentes. • background-color • background-image: url("imagenes/fondo.png") • background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit • background-position: permite indicar la distancia que se desplaza la imagen de fondo respecto de su posición original situada en la esquina superior izquierda
  37. 37. Hojas de estilo en Cascada • http://|www.docstoc.com/docs/23984045/Hojas-de-Estilo- (CSS) • http://aldeasocial.com/2010/03/hagase-la-luz-y-se-invento-el- css/ • http://books.google.com.ec/books?id=ZgI2WfHjPiEC&printsec =frontcover&dq=css&hl=es&sa=X&ei=mwmEUcOfKMu_0QHP uIDYBA&ved=0CD0Q6AEwAg#v=onepage&q=css&f=false • http://www.tedmontgomery.com/tutorial/grphccol/bkgrdlnk. html (fondos web) • http://www.w3schools.com/cssref/playit.asp?filename=playcs s_font-family (Fuentes guardas en la web) • http://www.w3schools.com/css/css_background.asp
  38. 38. • http://coding.smashingmagazine.com/2009/07/13/css-3- cheat-sheet-pdf/ • http://librosweb.es/css/ • Generador de texto simulado • http://www.blindtextgenerator.com/es
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×