Css
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Css

on

  • 322 views

empezando a trabajar con CSS conceptos básicos

empezando a trabajar con CSS conceptos básicos

Statistics

Views

Total Views
322
Views on SlideShare
319
Embed Views
3

Actions

Likes
1
Downloads
23
Comments
1

1 Embed 3

http://www.unemi.edu.ec 3

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

Css Presentation Transcript

  • 1. Mariela Tapia
  • 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. 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. Por qué usar CSS • Y si queremos cambiar el diseño del sitio!!!
  • 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. Por qué usar CSS • Y así de fácil podemos pasar de esto
  • 7. Por qué usar CSS • A esto
  • 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. 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. 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. Formas de Incluir CSS • Dentro del mismo Tag
  • 12. Formas de Incluir CSS • Dentro del mismo HTML
  • 13. Formas de Incluir CSS • En un archivo CSS externo
  • 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. 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. Selector de tipo o etiqueta • Ejemplo 2
  • 17. Selector de tipo o etiqueta • Ejemplo 2
  • 18. Selector descendente Ejemplo3
  • 19. Selector de clase afectaaungrupo deelementosHTML Ejemplo4
  • 20. Selector de clase Ejemplo4
  • 21. Selector de clase
  • 22. Selectores ID afectaaunúnicoelementoHTML
  • 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. Unidades de medida absolutas
  • 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. 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. Modelo de cajas • Las cajas se forman de 6 partes
  • 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. Márgenes • Margin es el espacio que hay desde el borde de la caja hasta el próximo elemento • Ejemplo6
  • 30. Márgenes shorthand • Valores que puede tener • Margin: 30px; Margin: 30px 10px;
  • 31. Márgenes shorthand • Valores que puede tener • Margin: 30px 10px 20px; Margin: 30px 10px 20px 5px;
  • 32. Relleno • Padding es el espacio desde el contenido de la caja hasta el borde de la caja.
  • 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. Bordes
  • 35. Bordes
  • 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. 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. • 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