Nombre de la materia

Desarrollo de páginas web

Nombre de la Licenciatura
Ingeniería en sistemas Computacionales

Nombre del alumno

Jonathan David Chable Dionisio
Matrícula
010209881

Nombre de la Tarea
Hojas de estilo

Unidad #
Unidad 3

Nombre del Profesor

MONICA ARIAS CRISOSTOMO

Fecha
30/05/2020
 Unidad 3: Manejo de estilos en el diseñ o de pá ginas web
Desarrollo de pá ginas web

Tarea 3

"Es difícil pensar en diseño, pero no pensar en ello, puede ser desastroso."

-- Ralph Caplan

Objetivos:
● Conocer los fundamentos del lenguaje de diseño CSS
● Conocer las principales propiedades de los selectores CSS.

Instrucciones:

● Orós, J. C. (2014). Propiedades de las hojas de estilo. Diseño de páginas Web con XHTML, JavaScript y CSS
(pp. 291- 304)

● Recio, J. A. (2016). El formato CSS3. HTML5, CSS3 y JQuery: curso práctico (pp. 93- 143)

Forma de evaluación:

Criterio Ponderación Calificación obtenida

Presentación 10%

Desarrollo de Actividad 90%

Actividad II
Ejercicio I 25%
Ejercicio II 25%
Ejercicio III 40%

P
 Unidad 3: Manejo de estilos en el diseñ o de pá ginas web
Desarrollo de pá ginas web

Desarrollo de la actividad:

I. Identifica las caracteristicas del lenguaje CSS .

Contesta las siguientes 5 cuestiones por medio de la lectura de los recursos en plataforma.
(Valor 25%)

● ¿Son los archivos responsables de definir la apariencia de una pagina web?

Se trata de un pseudo lenguaje con el que se puede describir la forma en la que se ve la página
web, sin tener en cuenta el contenido. Es decir: yo creo el contenido de la página web y con la hoja
de estilo describo la forma en la que se verá.

● ¿Indica a qué elementos se va a aplicar la regla de estilo?

Cualquier elemento HTML es un posible selector CSS1. El selector es simplemente

el elemento que está conectado a un estilo particular. Por ejemplo, el selector en:

P { text-indent: 3em }

es P.

Selectores de clase

Un selector sencillo puede tener diferentes clases, permitiendo así al mismo

elemento tener diferentes estilos. Por ejemplo, un autor puede querer mostrar el
código en un color diferente dependiendo del idioma:

code.html { color: #191970 }

code.css { color: #4b0082 }

El ejemplo de arriba ha creado dos clases, css y html para usar con el

elemento CODE de HTML. El atributo CLASS se usa en HTML para indicar la clase
de un elemento, por ejemplo,

<P CLASS=advertencia>Solo se permite una clase por selector.

Por ejemplo, code.html.proprietario no es válida.</p>

● ¿Permite aplicar un estilo único?

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza

habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una
página.

P
 Unidad 3: Manejo de estilos en el diseñ o de pá ginas web
Desarrollo de pá ginas web

● ¿Representan las posiciones o estados en los que se puede encontrar un elemento mientras se
visualiza en el navegador?

El posicionamiento fijo es de hecho una forma especializada del posicionamiento absoluto; los
elementos con posicionamiento fijo están fijos en relación con la ventana o viewport del navegador
en vez de estarlo en relación con el elemento continente; incluso si se desplaza la página, se
mantienen exactamente en la misma posición en la ventana del navegador .

● ¿Unidad de medida que establece el tamaño de acuerdo al tamaño de la fuente actual?

viewportwidth y viewportheight
Estas unidades son una opción interesante para definir alturas y anchuras en dispositivos. Las
unidades son abrevidadas con las siglas "vw" y "vh". Su medida es equivalente a un centésimo de
la anchura o altura del dispositivo donde se está visualizando la web. Por ejemplo, si deseamos
asignarle a un elemento una altura igual al tamaño completo del dispositivo, le aplicaremos el valor
100vp.

II. Conocer las propiedades mas comunes de los selectores.

P
 Unidad 3: Manejo de estilos en el diseñ o de pá ginas web
Desarrollo de pá ginas web

Describe las propiedades y valores listados en el cuadro, que pueden ser utilizadas por los
selectores.

Propiedades y valores de los selectores.

Etiquetas Descripción
font-style:italic; Normalmente, la propiedad font-style se utiliza
para mostrar un texto en cursiva (también llamada
itálica o bastardilla). En el siguiente ejemplo, se
modifica el estilo de la letra que muestra el párrafo:
<p style="font-style: italic;">Lorem ipsum dolor
sit amet, consectetuer <em>adipiscing elit</em>.
font-weight: bold; La propiedad font-weight permite establecer el
grosor con el que se muestran las letras del texto.
Normalmente, la propiedad font-weight se emplea
para mostrar un texto en negrita (valor bold ):
vertical-aling: 50%; Controla el posicionamiento vertical de los
elementos en línea contenidos en otro elemento
background-image:textura.gif; Establece la imagen de fondo de un elemento, en
este caso un GIF
La propiedad border-bottom-width permite
border-botton-width: medium;
establecer la anchura del borde inferior de un
elemento de diferentes formas. En primer lugar, es
posible utilizar las
palabras thin, medium y thick para mostrar un
borde fino, normal y grueso respectivamente
display: none; Usar display: none no dejará espacio donde el
elemento se encontraba, pero visibility: hidden;
dejará un espacio vacío

Anote su descripción

Los selectores son la parte de la regla CSS que indica a qué elemento o elementos
de la página se deben aplicar los cambios de estilo. Como ves, se llama "selector"
porque "selecciona" una parte de la página.

III. Conocer las definiciones y propiedades nos permiten desarrollar hojas de estilo de forma
correcta.

P
 Unidad 3: Manejo de estilos en el diseñ o de pá ginas web
Desarrollo de pá ginas web

Relaciona los conceptos con la descripción de la siguiente tabla ingresando el número

correspondiente a la respuesta correcta en los paréntesis. (Valor 40%)

Respuestas Definiciónes/Descripción
1.- !important
( 10 ) Medida que establece el tamaño en puntos
2.- font-size ( 5 ) Este posicionamiento permite acomodar los
elementos de una página según cambien las
dimensiones y orientación de la página.
3.- text-aling ( 7 ) Medida que establece el tamaño en píxeles.
4.- Lista de declaraciones ( 6 ) Es el modo de posicionamiento por defecto.
5.- flexbox ( 9 ) Se define con * y se aplica a todos los
elementos de la pagina.
6.- Estática ( 8 ) Para indicar las dimensiones de un elementos se
utilizan estas propiedades.
7.- px ( 2 ) Propiedad que indica el tamaño de la fuente.
8.- width, height ( 1 ) Si un atributo tiene esta palabra clave se le da
mayor prioridad.
9.- Selector universal ( 4 ) Son pares propiedad:valor, separados por punto
y coma (;).
10.- pt ( 3 ) Propiedad que indica la alineación horizontal del
texto.

Escriba las referencias bibliográficas (formato APA).

Bibliografía
@Manz. (s.f.). Lenguaje CSS. Obtenido de Lenguaje CSS: https://lenguajecss.com/
Eguiluz, J. (2006-2020). uniwebsidad. Obtenido de uniwebsidad: https://uniwebsidad.com/libros/css

P
Unidad 3: Manejo de estilos en el diseñ o de pá ginas web
Desarrollo de pá ginas web