Curso de Diseño Web Profesor: Mario Figge. CSS  Las hojas de estilo en cascada (Cascading Style Sheets) son un lenguaje formal usado para definir la.

Presentación del tema: "Curso de Diseño Web Profesor: Mario Figge. CSS  Las hojas de estilo en cascada (Cascading Style Sheets) son un lenguaje formal usado para definir la."— Transcripción de la presentación:

1 Curso de Diseño Web Profesor: Mario Figge

2 CSS  Las hojas de estilo en cascada (Cascading Style Sheets) son un lenguaje formal usado para definir la presentación de un documento escrito en HTML (y por extensión en XHTML).

3 CSS  CSS ZenGarden (csszengarden.com)csszengarden.com

4 Reglas de Estilo  Por medio de CSS definimos un conjunto de reglas.  Cada regla comienza con un selector que especifica un elemento HTML, y define propiedades que se aplican a ese elemento.  p { font-family: arial; margin-left: 10px; color: green; }

5 Reglas de Estilo  Las reglas de estilo pueden almacenarse en el mismo archivo, o bien en un archivo.css externo, que puede ser invocado desde diferentes páginas.

6 Reglas inline Esto es un párrafo…

7 Reglas en <!— p { font-family: arial; margin-left: 10px; color: green; } -->

8 Reglas en un archivo externo  En la seccion del archivo HTML incluimos una referencia a la hoja de estilos:

9 Colores en CSS  Colores con nombre p { color: red; }  Codigos RGB: Valores para Rojo, Verde y Azul entre 0 y 255 h2 { color: rgb(255, 0, 0); }  Codigos Hexadecimales: Valores para Rojo, Verde y Azul entre 0 y FF h4 { color: #FF0000; }

10 Tipografía en CSS (I): Fuentes Estándar  Si la tipografía no existe en el equipo del navegador, será reemplazada automáticamente. p { font-family: Georgia; }  Nombres con espacios van entre comillas h2 { font-family: "Times New Roman"; }  Tipografías Alternativas p { font-family: Arial, Helvetica, sans-serif; }  Nombres génericos: serif, sans-serif, cursive, fantasy, monospace

11 Tipografía en CSS (II): @font-face www.fontsquirrel.com/fontface/generator Este código debe estar antes de las reglas donde se usa la tipografía. @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } h1 { font-family: ' MyWebFont ', Arial, serif; }

12 Tipografía en CSS (III): Google Fonts www.google.com/webfonts Este código debe estar antes de las reglas donde se usa la tipografía. h1 { font-family: 'Ubuntu', Arial, serif; font-weight: 400; }

13 Unidades de medida en CSS  Unidades de medida absolutas:  px  in  cm  mm  pt (1/72 de pulgada)  pc (12 puntos) p { font-size: 14px; }  Para una pantalla, el número de pixeles por pulgada está determinado por la estimación (a menudo incorrecta) que tiene el sistema operativo sobre la resolución de la pantalla.

14 Unidades de medida en CSS  Unidades de medida relativas:  %  em (1em es el alto de la letra M)  ex(1ex es el alto de la letra x)  Las unidades son relativas al elemento que la contiene. body { font-size:15px;} p { font-size:1.2em;}  El tamaño de letra del párrafo será un 20% mayor al tamaño definido en el body (que lo contiene).

15 Unidades de medida en CSS  Unidades de medida relativas:  %  em (1em es el alto de la letra M)  ex(1ex es el alto de la letra x) body { font-size: 0.9em; }  El tamaño de letra del texto de la página debe ser el 90% del tamaño por defecto (que depende de cada navegador).  CSS Em Calculator CSS Em Calculator

16  Fin