HTML5+CSS3el presente del desarrollo web

electivo | escuela de diseño y multimedia | jorge cantú

+

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.

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.

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

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.

CSS3

csszengarden.com

css1k.com

propiedades nuevas CSS3

Bordesborder-colorborder-imageborder-radiusbox-shadow

Fondosbackground-originbackground-clipbackground-sizecapas con múltiples imágenes de fondo

Colorcolores HSLcolores HSLAcolores RGBAOpacidad

Textotext-shadowtext-overflowRotura de palabras largasWeb Fonts

Interfazbox-sizingresizeoutlinenav-top, nav-right, nav-bottom, nav-left

SelectoresSelectores por atributos

Modelo de caja básicooverflow-x, overflow-y

Degradados CSS3Degradados linealesDegradados radialesDegradados lineales de repeticiónDegradados radiales de repetición

Otroscreación de múltiples columnas de textopropiedades orientadas a discurso o lectura automática de páginas webanimaciones CSS3

CSS3

Test de compatibilidad

• http://fmbip.com/litmus

• http://css3test.com/

• http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

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.

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