1. HTML5+CSS3el presente del desarrollo web
electivo | escuela de diseño y multimedia | jorge cantú
+

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. 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. 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. 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. CSS3
csszengarden.com
css1k.com

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. CSS3
Test de compatibilidad
• http://fmbip.com/litmus
• http://css3test.com/
• http://dowebsitesneedtobeexperiencedexactlythesameinev
erybrowser.com/

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. 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