[6] bases del funcionamiento de css - jorge...
TRANSCRIPT
![Page 1: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/1.jpg)
LMSGI-Unidad 5-CSSJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
[6]bases del funcionamiento
de CSSLMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red
![Page 2: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/2.jpg)
LMSGI-Unidad 5-CSSJorge 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
![Page 3: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/3.jpg)
LMSGI-Unidad 5-CSSJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Ejemplo de mal HTML, etiqueta font
• <font face=“Arial” color=“red”>Texto</font>
![Page 4: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/4.jpg)
LMSGI-Unidad 5-CSSJorge 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
![Page 5: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/5.jpg)
LMSGI-Unidad 5-CSSJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento más apropiado
•HTMLDescripción de elementos
•CSSCómo se deben presentar esos elementos en pantalla
![Page 6: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/6.jpg)
LMSGI-Unidad 5-CSSJorge 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
![Page 7: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/7.jpg)
LMSGI-Unidad 5-CSSJorge 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)
![Page 8: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/8.jpg)
LMSGI-Unidad 5-CSSJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
![Page 9: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/9.jpg)
LMSGI-Unidad 5-CSSJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Proceso de estandarización
first publicworking draftt WORKING
DRAFTCANDIDATE
RECOMMENDATIONlast call PROPOSAL
RECOMMENDATION
RECOMMENDATIONRESCINDED
RECOMMENDATION
ABANDONEDRECOMMENDATION
![Page 10: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/10.jpg)
LMSGI-Unidad 5-CSSJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Compatibilidad
•http://caniuse.com (uso de CSS3 en los navegadores)•http://css3test.com (compatibilidad de mi navegador)
![Page 11: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/11.jpg)
LMSGI-Unidad 5-CSSJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
![Page 12: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/12.jpg)
LMSGI-Unidad 5-CSSJorge 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
![Page 13: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/13.jpg)
LMSGI-Unidad 5-CSSJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Prefijos para nuevas propiedades.Propiedades prefijadas
div{-moz-columns:3;-webkit-columns:3;columns:3;
}
![Page 14: [6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos](https://reader030.vdocuments.co/reader030/viewer/2022040411/5edb184caa8629317168ab8e/html5/thumbnails/14.jpg)
LMSGI-Unidad 5-CSSJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Navegadores para probar nuevas características
•Chrome Canaryhttps://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/