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

Desarrollo de páginas web

Nombre de la materia
Desarrollo de páginas web

Nombre de la Licenciatura
Ingeniería en sistemas Computacionales

Nombre del alumno

Miguel Angel Sauza Anastacio
Matrícula
010462578

Nombre de la Tarea
Hojas de estilo

Unidad #
Unidad 3

Nombre del Profesor

Martha Gabriela López Alegría
Fecha
23 de enero de 2023

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.

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

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 página web?

Las CSS (coding style sheets) u hojas de estilo en cascada son los archivos responsables de definir la
apariencia de una página web. Facilitan la gestión y la apariencia corporativa de un sitio web, ya que
todas las páginas de un sitio pueden compartir la misma hija de estilo y los cambios de apariencia
quedan centralizados en estos archivos. Además, separan la presentación del contenido, por lo que
podemos cambiar la estética de una página sin tener que cambiar su contenido (HTML).

Una hoja de estilos no es más que un archivo de texto con extensión .css. aunque las hijas de estilo se
definieran a mediados de los noventa, han tenido especial repercusión a partir de si última versión
(CSS3), en combinación con HTML5. Como ya veremos, gracias a las nuevas CSS podremos aplicar
incluso distintas hojas de estilo dependiendo del dispositivo en el que se presente la página web
(pantalla grande, móvil, papel…).

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

Selector universal

Se define con * y se aplica a todos los elementos de la página.

● ¿Permite aplicar un estilo único?

Selector de etiqueta HTML

Indica el estilo que se va a un elemento o etiqueta concreto.

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

Pseudoclases

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

Existen selectores especiales para especificar elementos que tiene unas determinadas propiedades.
Son como clases “virtuales”, ya que no especifican en el HTML, pero representan las posiciones o
estados en los que se puede encontrar un elemento mientras se visualiza en el navegador.

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

Los píxeles como tamaño para nuestra fuente

De forma tradicional se ha utilizado el píxel como la unidad de medida para el tamaño de las fuentes.
De hecho, los navegadores web suelen tener como valor por defecto para la fuente de un documento,
16PX.

II. Conocer las propiedades mas comunes de los selectores.

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; Convierte el texto en cursiva. Las opciones son

italic, oblique y normal.

font-weight: bold; Indica el grosor o anchura de una fuente. Los

valores son normal, bold, bolder, lighter o las
centenas comprendidas entre 100 y 900.

vertical-aling: 50%; Determina la alineación vertical. El valor puede

ser un porcentaje u una palabra clave como
baseline, middle, sub, super, text-top, text-
bottom, top, bottom.

background-image:textura.gif; Determina la alineación vertical. El valor puede

se un porcentaje o una palabra clave como
baseline, middle, sub, super, text-top, text-
bottom, top, bottom.

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

border-botton-width: medium; Determina el ancho del borde de un elemento.

Los valores para el ancho son thin, médium y
thick o una longitud.

display: none; Modo de mostrar la información en un bloque.

Los valores son block, inline, list-item y none.

Anote su descripción

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

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 (;).

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

10.- pt ( 3 ) Propieda que indica la alineación horizontal del

texto.

Escriba las referencias bibliográficas (formato APA).

Oros Cabello, J. C. (2014). Diseño de páginas Web con XHTML, JavaScript y CSS. RA-MA
Editorial. Recuperado de https://elibro.net/es/ereader/utel/106414?page=292.