TPRG11 Miiisii S05 Es01

ESCENARIO: TPRG11_MIIISII_S05_ES01
Módulo III: Desarrolla aplicaciones web y móviles. Submódulo II: Desarrolla aplicaciones móviles
Competencia Profesional: IV.- Desarrolla aplicaciones para dispositivos móviles sobre plataformas abiertas
Nombre del Alumno (a): Grupo:
Instrucciones: Sigue las instrucciones del docente para crear una aplicación utilizando
CSS3.
Indicaciones para el docente: explicar al alumno los códigos que a continuación se transcriben sobre el
uso de CSS3. Indicar al alumno observar las diferencias conforme se agrega código.
SELECTORES CSS3
1. Transcribir el siguiente código en un documento HTML con el nombre index.html. (Se recomienda hacer
uso de la herramientas básicas del editor mientras se escribe el código, además del panel de
propiedades que permite la creación de los atributos de cada etiqueta de una forma más sencilla)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width,
height=device-height, target-densitydpi=device-dpi" />
<script type="text/javascript" src="cordova.js"></script>
<title>Ejercicio de estilos CSS3</title>
<link rel="stylesheet" href="css/ejerciciocss3.css" />
</head>
<body>
<h1>Receta de té helado </h1>
<img src="img/tehelado.png" alt="tefrio" height="160"
width="160"/>
<ul>
<li id="primero" >Hervir agua</li>
<li id="segundo" >Mezclar Té</li>
<li id="tercero" >Agregar Limón y azúcar</li>
<li id="cuarto" >Enfriar</li>
<li id="quinto" >Disfrute!</li>
</ul>
</body>
</html>
2. Crear una carpeta llamada “img” y colocar dentro la imagen

“tehelado.png” ubicada en la carpeta de paquete didáctico.
3. Crear una nueva carpeta llamada “css” dentro del proyecto

(www/css/)
4. Crear dentro de la carpeta “css” un documento nuevo de
tipo CSS con el nombre ejerciciocss3 y poner el siguiente código:
body,h1{margin:0;padding:0;}
html,body{height:100%}
body{background:#f5bd07;}
ul{margin:127px auto 0; padding:0; width:90%;}
h1{font-size:30px; font-weight:normal; background:#000; color:#FFF;
height:52px; text-align:right}
img{position:absolute; top:0}
li{list-style-type:none; background:#000000; height:45px; margin-
bottom:10px; color:#FFF; text-indent:22px; line-height:45px}
5. Hasta este momento se ha ingresado código css

directamente desde el editor, para los siguientes puntos será
necesario trabajar con la opción “Edit CSS Rules” del menú
contextual que aparece tras dar clic derecho sobre el editor de
código del archivo index.html, y a través del panel CSS Styles.
6. Agregar un Selector CSS3 a la etiqueta <li id="primero" > (clic derecho sobre la etiqueta y “Edit CSS
Rules”
7. Del panel de reglas CSS que se lanza seleccionar en Tipo de Selector: ID, Selector: primero, Style
Sheet: css/ejerciciocss3.css.
8. Una vez creada la regla será necesario agregar las propiedades de la regla, para esto nos dirigimos al
panel CSS y ubicar la regla creada anteriormente (para habilitarlo Window>Web>CSS Styles):
9. A través de las opciones del panel seleccionamos la propiedad Background y establecemos su valor a:
#733C0A. Si retornamos al documento ejerciciocss3.css y analizamos el código, podremos a partir de
ahora utilizar una manera distinta de anexar código al documento CSS:
#primero{background:#733C0A}
10. Agregar un selector al segundo elemento de la lista de la misma forma que el anterior, obteniendo:
#segundo{background:#ab5110}
11. Para el tercer elemento agregamos la siguiente línea al código css.

#tercero{background:#CD5D14}
12. Para el penúltimo elemento agregamos la siguiente línea:

#cuarto{background:#E46516}
13. El último elemento de lo lista lo seleccionaremos con la siguiente línea:

#quinto{background:#ff721d}
14. Finalmente editamos la regla asignado a la etiqueta <li> y agregamos las siguientes propiedades.
li{ border-radius:10px; box-shadow:2px 2px 2px rgba(0,0,0,2.5); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,2.5)
}
Obtenemos la siguiente presentación.

TPRG11 Miiisii S05 Es01

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

TPRG11 Miiisii S05 Es01

Încărcat de

Drepturi de autor:

Formate disponibile

ESCENARIO: TPRG11_MIIISII_S05_ES01

Nombre del Alumno (a): Grupo:

2. Crear una carpeta llamada “img” y colocar dentro la imagen

3. Crear una nueva carpeta llamada “css” dentro del proyecto

5. Hasta este momento se ha ingresado código css

11. Para el tercer elemento agregamos la siguiente línea al código css.

12. Para el penúltimo elemento agregamos la siguiente línea:

13. El último elemento de lo lista lo seleccionaremos con la siguiente línea:

Obtenemos la siguiente presentación.

S-ar putea să vă placă și