960 y css
DESCRIPTION
Presentación dia 3 diplomado xpertTRANSCRIPT
El css
El nombre hojas de estilo en cascada viene del
inglés Cascading Style Sheets, del que toma sus
siglas. CSS es un lenguaje usado para definir la
presentación de un documento estructurado
escrito en HTML o XML (y por extensión en
XHTML). El W3C (World Wide Web Consortium)
es el encargado de formular la especificación de
las hojas de estilo que servirán de estándar para
los agentes de usuario o navegadores.
Tipos de Style Nº1
Una hoja de estilo externa, es una hoja de estilo
que está almacenada en un archivo diferente al
archivo donde se almacena el código HTML de la
página Web. Esta es la manera de programar
más potente, porque separa completamente las
reglas de formateo para la página HTML de la
estructura básica de la página.
Tipos de Style Nº2
Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML. (Va a la derecha dentro del elemento <head>.) De esta manera se obtiene el beneficio de separar la información del estilo del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página Web.
Tipos de Style Nº3
Un estilo en línea (inline) es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro o estructurado que debería ser, pero funciona. Éste es el método recomendado para maquetar correos electrónicos en HTML.
Diagramado de página en
CSS
Teoría de los 960px
960 Grid System es un framework CSS, que no
es más que una declaración de estilos que
dispone las clases necesarias para implementar
columnas en una página web, de diversos
tamaños, con las que maquetar nuestros
contenidos fácil y ordenadamente.
960 Grid System
960 Grid System
Variantes de 960 Grid
El propio framework dispone de dos variantes distintas, para hacer páginas utilizando 12 ó 16 columnas. No es que necesitemos utilizar todas las columnas disponibles para realizar la maquetación, sino que la rejilla tendrá esas divisiones verticales donde podemos situar los elementos. La variante de 12 columnas da menos posibilidades para repartir los espacios, pero en muchos de los casos será más que suficiente para crear cualquier estructura de página. En cuanto a la variante de 16 columnas, da una gama mayor de posibles anchos para las columnas, que puede ser necesaria en diseños con un nivel de detalle más alto.
Anchuras posibles con la
variante de 12 columnas
Con la primera de las variantes de 960 Grid
podemos hacer divisiones en hasta 12 columnas
distintas. Teniendo en cuenta los márgenes a la
izquierda y la derecha de las columnas, las
anchuras de las que disponemos serán las
siguientes:
Anchuras posibles con la
variante de 12 columnas
1: 60px 2: 140px 3: 220px 4: 300px 5: 380px 6: 460px 7: 540px
8: 620px 9: 700px 10: 780px 11: 860px 12: 940px
Espacio entre columnas
Anchuras posibles con la
variante de 16 columnas
1: 40px 2: 100px 3: 160px 4: 220px 5: 280px 6: 340px 7: 400px 8: 460px 9: 520px
10: 580px 11: 640px 12: 700px 13: 760px 14: 820px 15: 880px 16: 940px
Propiedades CSS
Propiedades de fuentes
Font Family (Familia de fuente)
Font Style (Estilo de fuente)
Font Variant (Variante de fuente )
Font Weight (Peso de fuente)
Font Size (Tamaño de fuente)
Font (Fuente)
