Documentos de Académico
Documentos de Profesional
Documentos de Cultura
DOMINGO
DEPARTAMENTO DE CIENCIAS DE LA COMPUTACIÓN - DCCO-SS
2020
Contenido
2. Sistemas de Objetivos...................................................................................................3
Conocer las funciones que contiene CSS conjunto con los grids, contenedores, imágenes y alertas
4. Conclusiones.................................................................................................................... 9
5. Recomendaciones............................................................................................................. 9
6. Bibliografía/ Referencias................................................................................................10
1. Introducción
Por medio del presente informe, daremos a conocer el concepto básico de CSS, y a su
vez el módulo de diseño de cuadrícula CSS junto con sus botones y contenedores en
CSS. Primero que nada, CSS un lenguaje de hoja de estilo que se creó para controlar
el cual es esencial para crear páginas web complejas. Asimismo, los Grids son un
método de diseño centrado en cuadrículas, formado por filas y columnas que nos
ayudarán con el diseño de la página web, mientras que los contenedores nos ayudan a
expandir los elementos para completar el espacio libre o los suprime para tratar de
2. Sistemas de Objetivos
2.1. Objetivo General:
Conocer las funciones que contiene CSS conjunto con los grids, contenedores,
imágenes y alertas que se utilizan para desarrollar un sitio web.
3. Desarrollo
¿Qué es CSS?
La institución W3C (World Wide Web Consortium), fue responsable de crear todos
los estándares relacionados con la web y surgió crear un lenguaje de estilo específico
para el lenguaje HTML. Se presentaron nueve propuestas, de las cuales solo dos se
tomaron en cuenta y fueron CHSS (Cascading HTML Style Sheets) y la SSP (Stream-
based Style Sheet Proposal). Con el paso del tiempo, W3C apostó por el progreso y la
normalización de CSS.
Como HTML, CSS (Cascading Style Sheets) o Cascading Style Sheets en español, no
es un lenguaje de programación ni un lenguaje de marcado. Es un lenguaje de hoja de
estilo que le permite aplicar estilos de manera selectiva a elementos en documentos
HTML. Por ejemplo, si desea seleccionar todos los elementos de párrafo en una
página HTML y colorear el texto dentro de ellos de rojo [ CITATION MDN20 \l 2058 ].
Como referencia tenemos lo siguiente:
Una vez definido los elementos de cuadrícula (sin tomar en cuenta el código del color
utilizado) vamos a obtener el siguiente resultado.
Figure 3 Desarrollo final de los elementos de cuadrícula.
Propiedad de Visualización
Filas de cuadrícula
Brechas de cuadrícula
Para adaptar el tamaño del espacio vamos a utilizar uno de los siguientes atributos:
Grid-column-gap
Grid-row-gap
Grid-gap
Líneas de cuadrícula
Las líneas entre columnas se llaman líneas de columna, mientras que las líneas entre
filas se llaman líneas de fila.
Para lograr insertar una imagen vamos a utilizar el atributo “src” (source) en donde
contiene el “path” (ruta o ubicación) de nuestro archivo de imagen. También
abarcamos el atributo “alt” (alternative), en donde contiene un texto que debería
especificar lo que contiene la imagen [ CITATION MDN20 \l 2058 ].
Para implementar un botón básico en CSS vamos a escribir las siguientes líneas de
código.
Figure 12 Código para un botón básico.
Para lograr insertar una imagen vamos a utilizar el atributo “src” (source) en donde
contiene el “path” (ruta o ubicación) de nuestro archivo de imagen. También
abarcamos el atributo “alt” (alternative), en donde contiene un texto que debería
especificar lo que contiene la imagen [ CITATION MDN20 \l 2058 ].
Aquí se realiza el desarrollo del laboratorio con capturas de pantallas del proceso paso
a paso. Cada captura debe tener un pie de imagen con la descripción de la misma, y
debajo de la captura un párrafo de descripción de lo que se hizo para llegar a este
paso.
4. Conclusiones
En resumen, CSS es una técnica de creación que tiene como objetivo separar la
estructura de la presentación y mejorar la usabilidad y la experiencia del usuario del
sitio web, lo que permite un desarrollo web receptivo y reduce el tiempo de
procesamiento y carga. Estos factores se pueden utilizar en intentos exitosos o
intentos fallidos. Marca la diferencia entre el tiempo.
Por otro lado, el uso de imágenes, grids, alertas y botones es muy importante para el
desarrollo de una página web, pues en este tiempo es importante para que un sitio web
sea intuitivo y fácil para el usuario que accede a cualquier página.
5. Recomendaciones
6. Bibliografía/ Referencias
[1] MDN, «Documentación web de MDN,» 10 11 2020. [En línea]. Available:
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/CSS_basics#:~:te
xt=CSS%20(Hojas%20de%20Estilo%20en,tal%20lugar%20de%20la%20pantalla%3F.
[2] W. Tompson, «w3schools,» 18 02 2015. [En línea]. Available:
https://www.w3schools.com/css/css_grid.asp.
[3] A. Castillo, «Eniun,» 08 11 2010. [En línea]. Available:
https://www.eniun.com/posicion-comportamiento-contenedores-css/.