3.4 Actividades de transferencia del conocimiento.

3.4.4 Realiza los ejercicios propuestos de Css (CSS_Laboratorio_2_Selectores)

Cree una carpeta con el Nombre CSS_LaboratorioNo2_nombre. Ejemplo (CSS_LaboratorioNo2_Sivelys_SC). En

esta carpeta guarde cada ejercicio: Como Ejercicio1, Ejercicio2…

Los SELECTORES se encargan de hallar o encontrar los elementos a los cuales aplicará la regla.

Los selectores según los elementos que intervienen son:

⮚ Selector Universal
⮚ Selector de Elemento o etiqueta
⮚ Selector de Clase
⮚ Selector de Id.

1. De acuerdo con el documento intro_css.pdf en el 1.3.1 Selector Universal.

Responde:

⮚ ¿Qué permite crear el selector Universal?

o permite seleccionar y aplicar estilos a todos los elementos de una página web.
⮚ ¿Por medio de que se representa el Selector Universal?
o Por medio de un asterisco (*)

Realiza el siguiente ejercicio y practica el selector Universal (guárdelo como ejercicio_1):

Margin: Es la propiedad que indica el margen que existe entre un elemento y los que tenga al lado.
Padding: Es la propiedad que establece el espacio de relleno requerido por todos los lados de un elemento. El
área de padding es el espacio entre el contenido del elemento y su borde (border)
Padding-top: 10px; padding Superior
Padding-right: 10px; padding derecha
Padding-bottom: 10px; padding Inferior
Padding-left: 10px; padding izquierda

Las diferencias son que:

Al definir el margin estamos creando un espacio entre una capa y otra.
Al definir el padding estamos indicando el espacio que existe entre el borde de la capa y lo que exista dentro de
ella.

AHORA HÁGALO USTED

EJERCICIO 1.1

Crear una página HTML utilizando (Selector universal), en el cual modifiques las propiedades Margin
y padding para sus diferentes lados(superior, inferior, derecha e izquierda), observa que pasa . Utiliza valores
de 10 a 90 px . Guárdalo como Ejercicio 1.1

2. De acuerdo al documento intro_css.pdf en el 1.3.2 Selector de Etiqueta.

Responde:

¿Dónde se utiliza el selector de etiqueta?

 se utiliza para seleccionar y aplicar estilos a todos los elementos de un tipo específico en una página
web.
¿Cómo se presenta el selector de etiqueta?
 Con el nombre de la etiqueta a la cual se le vaya a colocar el estilo. Ejemplo
p{
color: blue;
font-size: 16px;
}

Práctica el siguiente código donde se utiliza el selector de Etiqueta (guárdelo como ejercicio_2):
Recuerda que la Imagen la tienes que tener guardada en tu misma carpeta, coloca la que desees acorde al texto.

AHORA HÁGALO USTED

EJERCICIO 2.1

Crear una página HTML Agregue 3 Títulos con h1, h2 y h3, realice un solo estilo para los tres,
colocando el mismo tipo de letra, el mismo color, Font.style: Italic y Font Weight:bold. Utilizando
(Selector de etiqueta). Guárdalo como Ejercicio 2.1

Para este ejercicio, puedes tener en cuenta lo siguiente:

3. De acuerdo al documento intro_css.pdf en el 1.3.3. Selectores de clase.

Responde:

⮚ ¿Qué permite crear el Selector de Clase?

o se utiliza para seleccionar y aplicar estilos a elementos HTML que tienen asignada una clase
específica.
⮚ ¿Cómo se pueden aplicar las clases?
o Las clases son atributos que se pueden agregar a los elementos HTML mediante el atributo
‘class’.
⮚ ¿Qué se utiliza para crear una clase?
o se utiliza un punto (.) seguido del nombre de la clase que se desea seleccionar.

Práctica el siguiente código, con selector de Clase (guárdelo como ejercicio_3):

AHORA HÁGALO USTED

EJERCICIO 3.1

Crear una página HTML, donde coloque un párrafo y crea tu propio estilo, utilizando selector de clase,
en ese estilo puedes utilizar las siguientes propiedades y valores si deseas:
font-family:""Courier New", Courier, monospace";
font-weight:800;
color:#0F15E1;
text-decoration:underline;

(Guárdelo como ejercicio_3.1)

4. De acuerdo al documento intro_css.pdf en el 1.3.4. Selectores ID.

Responde:

⮚ ¿Qué son selectores ID?

o Los ID son atributos que se pueden agregar a los elementos HTML mediante el atributo
id.
⮚ ¿Qué se utiliza para crear un selector ID?
o Se utiliza un símbolo de almohadilla (#) seguido del nombre del ID que se desea
seleccionar. El nombre del ID debe ser único dentro del documento HTML y solo puede
asignarse a un solo elemento.

Práctica el siguiente código, utilizando selectores ID (guárdelo como ejercicio_4):

AHORA HÁGALO USTED

EJERCICIO 4.1

Crear una página HTML y define dos estilos utilizando (Selectores ID.). (Guárdelo como ejercicio_4.1)

5. De acuerdo con todo lo visto, Cree una página HTML de un valor (Responsabilidad, Respeto,
Solidaridad, Compromiso, Tolerancia, etc). El que usted desee, en dicha página va utilizar los estilos que
quieras realizados en el archivo CSS, utilizando todos los selectores. (Recuerda que tienes que crear un
archivo aparte .CSS y llamarlo en tu página HTML. ((Guárdelo como ejercicio_5)

6. Leer los siguientes puntos en el archivo intro_css.pdf y practica uno de los puntos en el ejercicio
anterior:
⮚ Propiedades de Listas
⮚ Propiedades de Fondos
⮚ Propiedades de Cajas
⮚ Novedades CSS

Esta actividad debe ser enviada por TERRITORIUM Y  google Drive dentro de la carpeta evidencias, dentro de la
carpeta que lleva su nombre, dentro de la carpeta de HTML.  EL archivo se debe llamar:
CSS_LaboratorioNo2_nombre del Aprendiz (Ejemplo:  CSS_LaboratorioNo2_nombre Sivelys Sarmiento Crespo)