PDF de programación - [6] bases del funcionamiento de CSS

bases del funcionamiento

[6]

de CSS

LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet

[6.1] introducción a CSS

LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet

Ejemplo de mal HTML, etiqueta font

• <font face=“Arial” color=“red”>Texto</font>

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet

limitaciones de HTML

• No es fácil armonizar semántica y formato en un solo
lenguaje
• HTML, hoy en día, es puramente semántico
• Es más fácil de mantener un sitio web si el contenido y el
formato se independizan
• No es un lenguaje pensado para dar formato, está
pensado para ser simple

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet

Funcionamiento más apropiado
•HTMLDescripción de elementos

•CSSCómo se deben presentar esos
elementos en pantalla

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet

[6.2] versiones de CSS

LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet

Versiones CSS

• CSS1 (1996)

• Formatos de texto, párrafo, caja, lista, tamaños de imágenes,-

• CSS2 (1998) y CSS 2.1

• Posicionamiento, tipos de medio

• CSS3 (actual)

• http://www.w3.org/Style/CSS/current-work
• 30 módulos en trabajo, estándar vivo (parte de HTML5)

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet

Proceso de estandarización

first public
working draftt

WORKING

DRAFT

last call

CANDIDATE

RECOMMENDATION

PROPOSAL

RECOMMENDATION

ABANDONED

RECOMMENDATION

RESCINDED

RECOMMENDATION

RECOMMENDATION

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet

Compatibilidad

• http://caniuse.com (uso de CSS3 en los navegadores)
• http://css3test.com (compatibilidad de mi navegador)

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet

Prefijos

• Las nuevas propiedades (sin compatibilidad) a veces usan
prefijos:
• -moz- Mozilla
• -webkit- Motor de Safari, Chrome y (ahora) Opera
• -ms- Microsoft
• -o- Versiones anteriores de Opera

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet

Prefijos para nuevas propiedades.
Propiedades prefijadas

div{

}

-moz-columns:3;
-webkit-columns:3;
columns:3;

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet

Navegadores para probar nuevas
características
• Chrome Canary
https://www.google.es/chrome/browser/canary.html
• Firefox:

• Nightly (primeras pruebas de características)
• Developer Edition (más estable, para desarrolladores)
• Beta (Más cerca del Firefox normal)
• https://www.mozilla.org/en-US/firefox/channel/desktop/

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet