guía rápida para dominar el css
TRANSCRIPT
![Page 1: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/1.jpg)
Social Marketing that Performs
![Page 2: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/2.jpg)
Guía Rápida para dominar el CSS
![Page 3: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/3.jpg)
¿Para qué sirve? El CSS se usa para darle estilo al HTML
es decirEl CSS se usa para definir la apariencia (diseño) del
HTMLHTML con CSS
HTML sin CSS
![Page 4: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/4.jpg)
¿Cómo funciona? Para cada cambio que quieras hacer en la
apariencia de tu HTML debes crear una regla en CSS Una regla de CSS consiste en:
Selector {Atributo: Valor; }
Lo cual se traduce a:
DONDE hacer el cambio {QUE cambio hacer: CUANTO cambio hacer; }
![Page 5: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/5.jpg)
Componentes Una regla de CSS se compone de:
Selector {Atributo: Valor; }
Selector: Es un elemento o contenido que se encuentra en tu HTML
Puede ser un texto, una imagen, un video, un botón, ¡lo que sea que haya configurado en la pantalla!
![Page 6: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/6.jpg)
Componentes Una regla de CSS se compone de:
Selector {Atributo: Valor; }
Atributo: Es una propiedad o característica que posee el contenido seleccionado.
Puede ser el tamaño, la posición, el color, la tipografía, el fondo, ¡o incluso la presencia misma de un contenido, siendo que tienes la posibilidad de eliminarlo de la pantalla!
![Page 7: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/7.jpg)
Componentes Una regla de CSS se compone de:
Selector {Atributo: Valor; }
Valor: Es la medida en la cual se especifica un atributo.
Esta definición se puede expresar como una medida de porcentaje, una cantidad de pixels, una combinación hexadecimal, una url web, u otra dependiendo del atributo seleccionado.
![Page 8: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/8.jpg)
¿Cómo lo aplico en TFM? En el paso “Marca blanca”
(“Whitelabel”), en la sección “Hoja de estilos de la aplicación” haz click sobre el ícono de pantalla completa para visualizar el contenido cargado en cada pantalla de tu app y así poder seleccionarlo para escribir tus propias reglas de CSS.
![Page 9: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/9.jpg)
¿Cómo lo aplico en TFM?
Simplemente haz click sobre un elemento, y entonces el selector y el esqueleto de la regla de CSS aparecerán automáticamente en tu panel izquierdo para que los completes con los atributos y valores que desees.
Una vez que los definas, haz click sobre el ícono de guardar ¡y podrás observar los cambios en pantalla!
![Page 10: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/10.jpg)
Algunos Ejemplos
![Page 11: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/11.jpg)
Ejemplos Para eliminar un contenido:
Selector {Display: none;}
Atención: Al aplicar este cambio todo el contenido que se encontraba debajo del selector eliminado será desplazado hacia arriba.
![Page 12: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/12.jpg)
Ejemplos Para ocultar un contenido:
Selector {Visibility: hidden;}
Atención: Al aplicar este cambio todos los contenidos mantendrán sus posiciones originales dado que el selector ocultado, si bien ya no será visible en pantalla, aún se le respetará el espacio que ocupaba.
![Page 13: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/13.jpg)
Ejemplos Para cambiar la posición de un contenido:
Selector {Position: relative;Top: 50px;Right: 200px;}
![Page 14: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/14.jpg)
Ejemplos Para cambiar el color de un contenido:
Selector {Color: #F781D8;}
![Page 15: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/15.jpg)
Ejemplos Para cambiar el tamaño de la tipografía:
Selector {Font-size: 50px;}
A esta regla se le puede agregar también:Font-family: Courier New;Font-weight: bold;Text-align: center;Text-transform: uppercase;
![Page 16: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/16.jpg)
Ejemplos Para cambiar el fondo de un contenido:
Selector {Background: url(http://tfmadmin.s3.amazonaws.com/Demo/LogoTFM.png);}
A esta regla se le puede agregar también:Background-repeat: no-repeat;Background-size: 50%;Background-position: 100px 200px;
![Page 17: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/17.jpg)
Ejemplos Para aplicar un cambio a una pantalla específica de la aplicación, agrega el prefijo que corresponda: .home.registered Selector {Atributo: Valor;}
Prefijos por Pantalla:
Preview: .comingPromosHome: .homeVariantes del home: Home - Antes de Participar: .home.start Home - Luego de Participar: .home.registered Home - Finalizada la Acción: .home.finished Registro: .registerRanking de Participaciones: .viewentriesParticipación Específica: .entry
![Page 18: Guía Rápida para dominar el CSS](https://reader035.vdocuments.net/reader035/viewer/2022062303/557b490fd8b42a13388b4d97/html5/thumbnails/18.jpg)
Ejemplos Para escribir una aclaración o dejar una nota interna que sirva de recordatorio:
/* Escribe tu texto de esta forma */