CSS

Nilmar Efraín Hernández Peña

CSS

cONCEPTO

CascadING style sheetS

CSS es un lenguaje que nos permite otorgar atributos a los elementos de los documentos realizados en HTML, CSS permite realizar una separación del diseño (formato y estilos) de los contenidos de las páginas web. [1, Página 13]

+info

ELEMENTOS

Cascada, herencia y prioridad

Unidades y valores

Sintaxis

Selección, propiedades y valores

Modelo de caja

CONCLUSIÓN

CSS nos permite dar formato al documento de HTML sin afectar o interferir en la estructura del mismo, lo que lo hace muy práctico para asignar estilo a nuestras páginas o sitios web.Al desarrollar esta infografía apredendí muchos de los elementos que contiene este lenguaje de estilos, y el cómo implementarlo junto a HTML.

FUENTES

REFERENCIAS

VS

+info

+info

oprime

Modelo de caja

Los elementos de CSS son básicamente rectangulares. Cada elemento tiene un “Cuadrado” propio (box en inglés). Estos cuadrados se pueden reducir en tamaño y se pueden mover, “amontonar” unos sobre otros, e incluso, representarlos superpuestos. Además de las medidas y la posición, el cuadrado modelo regula también la relación de un cuadrado con los elementos vecinos o, simplemente, con otros elementos dentro del mismo documento. [3, Página 46]

[1] E. E. Condor Tinoco y I. Soria Solis, «Programación web con CSS, JavaScript, PHP y AJAX.,» 2014. [En línea]. Available: https://books.google.com.mx/books?id=QRG-CQAAQBAJ&lpg=PA1&ots=Vq0VhWTjVv&dq=CSS&lr&hl=es&pg=PA1#v=onepage&q=CSS&f=false. [Último acceso: 23 Septiembre 2023]. [2] A. Durango, «Diseño web con CSS: 2° Edición,» 2015. [En línea]. Available: https://books.google.com.mx/books?id=bCXsCgAAQBAJ&lpg=PA11&ots=mJCr3SRkW3&dq=CSS&lr&hl=es&pg=PA11#v=onepage&q=CSS&f=false. [Último acceso: 23 Septiembre 2023]. [3] R. G. Schulz, «Diseño web con CSS,» 2009. [En línea]. Available: https://books.google.com.mx/books?id=ZgI2WfHjPiEC&lpg=PA45&ots=7oXufZWOZf&dq=CSS&lr&hl=es&pg=PP1#v=onepage&q=CSS&f=false. [Último acceso: 23 Septiembre 2023].

Cascada y Herencia

"Cascading" en CSS se refiere a cómo se aplican múltiples reglas a un elemento. Las reglas pueden provenir de diferentes fuentes, como el propio estilo del navegador, hojas de estilo externas y reglas en línea. CSS también sigue un principio de herencia, lo que significa que los estilos aplicados a un elemento se heredan por sus elementos secundarios, a menos que se anulen explícitamente.

Prioridad

CSS utiliza reglas de prioridad para determinar qué estilo se aplica cuando varias reglas se aplican al mismo elemento. La prioridad generalmente se basa en la especificidad del selector, la ubicación de la regla (por ejemplo, una regla en línea tiene más prioridad que una en una hoja de estilo externa) y la importancia (a través de la propiedad !important).

Unidades y valores

CSS utiliza diferentes unidades para medir propiedades, como píxeles (px), porcentaje (%), em (em), entre otras. También puedes utilizar colores en formato hexadecimal (#RRGGBB) o nombrar colores predefinidos.

1. Programación web con CSS, JavaScript, PHP y AJAX: https://books.google.com.mx/books?id=QRG-CQAAQBAJ&lpg=PA1&ots=Vq0VhWTjVv&dq=CSS&lr&hl=es&pg=PA1#v=onepage&q=CSS&f=false 2. Diseño web con CSS: 2° Edición: https://books.google.com.mx/books?id=bCXsCgAAQBAJ&lpg=PA11&ots=mJCr3SRkW3&dq=CSS&lr&hl=es&pg=PA11#v=onepage&q=CSS&f=false 3. Diseño web con CSS: https://books.google.com.mx/books?id=ZgI2WfHjPiEC&lpg=PA45&ots=7oXufZWOZf&dq=CSS&lr&hl=es&pg=PP1#v=onepage&q=CSS&f=false 4. Diseño de páginas Web con XHTML, JavaScript y CSS: https://books.google.com.mx/books?hl=es&lr=&id=aaa6EAAAQBAJ&oi=fnd&pg=PA1&dq=CSS&ots=dpwIxfafm0&sig=r0-3vu4H07PCM795CKL5c9dW538 5. CSS: La Guía Definitiva: La Guía Definitiva: https://books.google.com.mx/books?hl=es&lr=&id=rdtCRLXAL78C&oi=fnd&pg=PR7&dq=CSS&ots=mW_Tli184u&sig=T1RDTMb4nTn_zBvFBNv8sZZ_Tho 6. HTML & CSS: diseño y construcción de sitios web (Vol. 15): https://ghnet.guelphhumber.ca/files/course_outlines/AHSS_3080_Thomas_Borzecki(05).pdf 7. Aprendiendo PHP, MySQL y JavaScript: Con jQuery, CSS y HTML5: https://books.google.com.mx/books?hl=es&lr=&id=uHqrBQAAQBAJ&oi=fnd&pg=PP1&dq=CSS&ots=yYYO_tMYp4&sig=KqnPmeLZsDgrJti2JCbyQs8VB3Y 8. Diseño web con conjunto HTML, CSS, JavaScript y jQuery: https://dl.acm.org/doi/abs/10.5555/2685773 9. Comenzando html, xhtml, css y javascript: https://books.google.com.mx/books?hl=es&lr=&id=vOZLwYJHymQC&oi=fnd&pg=PA308&dq=CSS&ots=WukkG28pV9&sig=rn6QIwn3U9OHaMv1dGCcpfpN8_U 10. HTML, XHTML y CSS: Guía visual de inicio rápido: https://books.google.com.mx/books?hl=es&lr=&id=kLfQQShrTXoC&oi=fnd&pg=PT20&dq=CSS&ots=vIv46KeYQP&sig=hqZQuPhsbLbTE1QawCF0NBtbjVs

SINTAXIS

La sintaxis de las definiciones de CSS consta de dos partes: Un selector y una declaración. [2, Página 11].

CSS es el formato recomendado para las páginas escritas en HTML en base a los estándares de “Cascading Style Sheets” (hojas de estilo en cascada), publicado por el World Wide Web Consortium (W3C). [2, Página 11]

Selectores

Para identificar una etiqueta HTML se usa los selectores “selector” y otra parte llamada “declaración”. El selector indica a que etiqueta HTML se debe aplicar el formato y la declaración indica que cosas se le aplica. [1, Página 15]

• Selector: es la etiqueta (s) o elementos de HTML.
• Propiedad: Atributos que se otorga a las etiquetas de HTML.
• Valor: Es el valor de la propiedad.

[1] Página 16