Html5+css3 02

615 views
399 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
615
On SlideShare
0
From Embeds
0
Number of Embeds
61
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5+css3 02

  1. 1. HTML5+CSS3el presente del desarrollo web electivo | escuela de diseño y multimedia | jorge cantú +
  2. 2. qué es CSS? Cascading Style Sheets (Hojas de Estilo en Cascada) • describe la presentación semántica (aspecto y formato) de un documento escrito en lenguaje de marcas. • la información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. • separación del contenido de la presentación, entregando control centralizado de la visualización de varios documentos sin alterar su contenido.
  3. 3. estructura CSS 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: permite modificar el aspecto de una característica del elemento. Valor: indica el nuevo valor de la característica modificada en el elemento.
  4. 4. selectores CSS universal: afecta a todos y cada uno de los elementos (etiquetas y divs) presentes en el codigo del html. Se indica mediante un asterisco (*). ejemplo: * {... } de etiqueta: afecta a todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. ejemplo: p {... } de ID: afecta a un elemento de la página a través de su atributo id. El atributo id no se puede repetir en dos elementos diferentes de una misma página. ejemplo: #nombredediv {... } de clase: afecta a los elementos que utilizan el atributo class de HTML para indicar la regla CSS que se le debe aplicar. Este selector permiten reutilizar los mismos estilos para varios elementos diferentes. ejemplo: .nombredeclase {... }
  5. 5. CSS3 más control sobre la forma • Las especificaciones anteriores CSS tienen bastantes utilidades para aplicar estilos, pero los desarrolladores se ven forzados a usar trucos para conseguir efectos tan deseados como bordes redondeados o sombreado de elementos en la página. • CSS3 incorpora nuevos mecanismos para tener un mayor control sobre el estilo con el que se muestran los elementos de las páginas, sin tener que recurrir a trucos o hacks, que a menudo complicaban el código.
  6. 6. CSS3 csszengarden.com css1k.com
  7. 7. propiedades nuevas CSS3 Bordes border-color border-image border-radius box-shadow Fondos background-origin background-clip background-size capas con múltiples imágenes de fondo Color colores HSL colores HSLA colores RGBA Opacidad Texto text-shadow text-overflow Rotura de palabras largas Web Fonts Interfaz box-sizing resize outline nav-top, nav-right, nav-bottom, nav-left Selectores Selectores por atributos Modelo de caja básico overflow-x, overflow-y Degradados CSS3 Degradados lineales Degradados radiales Degradados lineales de repetición Degradados radiales de repetición Otros creación de múltiples columnas de texto propiedades orientadas a discurso o lectura automática de páginas web animaciones CSS3
  8. 8. CSS3 Test de compatibilidad • http://fmbip.com/litmus • http://css3test.com/ • http://dowebsitesneedtobeexperiencedexactlythesameinev erybrowser.com/
  9. 9. compatibilidad CSS3 Para conseguir la máxima compatibilidad con los navegadores muchos desarrolladores web añaden propiedades específicas del navegador utilizando extensiones como: -webkit- para Safari y Google Chrome -ms- para Internet Explorer -moz-para Firefox -o-para Opera Como con cualquier propiedad CSS, si un navegador no soporta una extensión propietaria, simplemente lo ignora. Esta práctica no es recomendada por el W3C, sin embargo, en muchos casos, es la única manera en que es posible probar una propiedad y hacerla compatible con un navegador.
  10. 10. generadores CSS3 • http://css3.me/ • http://css3generator.com/ • http://css3please.com/ • http://css-tricks.com/examples/ButtonMaker/ • http://www.colorzilla.com/gradient-editor/ • http://border-image.com/ • http://css3menu.com/ • http://debray.jerome.free.fr/index.php?outils/Generateur-de- multi-colonnes-en-css3

×