curso de diseño web profesor: mario figge. css las hojas de estilo en cascada (cascading style...
TRANSCRIPT
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 de un documento escrito en HTML (y por extensión en XHTML).
CSS
CSS ZenGarden (csszengarden.com)
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;}
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.
Reglas inline
<p style="color: red;"> Esto es un párrafo…</p>
Reglas en <head>
<style type="text/css"><!—
p { font-family: arial;margin-left: 10px; color: green;}
-->
</style>
Reglas en un archivo externo En la seccion <head> del archivo
HTML incluimos una referencia a la hoja de estilos:
<link rel="stylesheet" type="text/css" href="estilos.css" >
Colores en CSS
Colores con nombrep { color: red; }
Codigos RGB: Valores para Rojo, Verde y Azul entre 0 y 255h2 { color: rgb(255, 0, 0); }
Codigos Hexadecimales: Valores para Rojo, Verde y Azul entre 0 y FFh4 { color: #FF0000; }
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 comillash2 { font-family: "Times New Roman"; }
Tipografías Alternativasp { font-family: Arial, Helvetica, sans-serif; }
Nombres génericos: serif, sans-serif, cursive, fantasy, monospace
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;
}
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.
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
h1 {
font-family: 'Ubuntu', Arial, serif;
font-weight: 400;
}
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.
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).
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
Fin