Hojas de estilo en cascada (CSS) – Lenguaje Python
Los archivos de hojas de estilo en cascada (CSS) contienen reglas sobre cómo mostrar y diseñar el contenido HTML cuando lo representa un navegador web.
Contrata a un experto en Python para iniciar tu proyecto hoy mismo:
CSS separa el contenido de los archivos HTML de cómo se debe mostrar el contenido. Es importante separar el contenido de las reglas sobre cómo se debe representar principalmente porque es más fácil reutilizar esas reglas en muchas páginas. Los archivos CSS también son mucho más fáciles de mantener en proyectos grandes que los estilos incrustados en los archivos HTML.
El archivo HTML enviado por el servidor web contiene una referencia a los archivos CSS necesarios para representar el contenido. El navegador web solicita el archivo CSS después del archivo HTML como se muestra a continuación en una captura de pantalla capturada del tráfico de red de Chrome Web Developer Tools.
Esa solicitud del archivo fsp.css se realiza porque el archivo HTML para Mundo Python Python contiene una referencia a theme/css/fsp.css que se muestra en la captura de pantalla de la fuente de vista a continuación.
Un preprocesador de CSS compila un lenguaje procesado en código CSS sin formato. Los lenguajes de preprocesamiento CSS agregan sintaxis como variables, mixins y funciones para reducir la duplicación de código. La sintaxis adicional también hace posible que los diseñadores utilicen estas construcciones de programación básicas para escribir código de front-end mantenible.
Los marcos CSS proporcionan una estructura y una base estándar para crear el diseño de una aplicación web.
- Los lenguajes que eran casi CSS
contiene la historia de lo que podría haber sido si se adoptaran otras propuestas de estilo en lugar de CSS, como RRP, PWP, FOSI, DSSSL, PSL96 y CHSS. Muchas de esas propuestas llegaron antes de que CSS se publicara por primera vez como especificación en 1996, por lo que el artículo es una vista maravillosa de la Web en su infancia. - Marcadores de desarrollo de frontend es una de las colecciones más grandes de recursos valiosos para el aprendizaje frontend tanto en CSS como en JavaScript.
- Esta serie sobre cómo funciona CSS incluye Cómo funciona CSS: analizar y pintar CSS en la ruta de renderización crítica y Cómo funciona CSS: comprensión de la cascada examina los métodos de representación que utilizan los navegadores para mostrar páginas web junto con detalles de los algoritmos que utilizan para establecer reglas de estilo en cascada.
- Referencia CSS proporciona ejemplos visuales muy necesarios para cada propiedad de CSS para mostrarle cómo se verán realmente en su página cuando las use.
- Técnicas de codificación CSS brinda consejos sobre cómo escribir código CSS más simple y fácil de mantener para reducir su necesidad de depender de preprocesadores CSS y construir pipelines.
- Notas de actualización de CSS es increíblemente útil si ha aprendido CSS en partes y piezas a lo largo del camino y ahora desea llenar los vacíos en su conocimiento.
- Página CSS de Mozilla Developer Network contiene un amplio conjunto de recursos, tutoriales y demostraciones para aprender CSS.
- Posicionamiento CSS 101 es una guía detallada para aprender a posicionar elementos correctamente con CSS.
- ¿CSS se volvió más complicado desde finales de los noventa? es una mirada sólida a cómo evolucionó CSS y dónde ha terminado hoy en comparación con sus orígenes.
- Usar consultas de características en CSS cubre el
@supportsregla y cómo usarla en sus hojas de estilo. - Aprenda el diseño CSS es una guía sencilla que divide los temas de diseño CSS en capítulos para que pueda aprender cada parte de una en una.
- ¿Qué tan bien conoce la visualización de CSS? hace zoom en una sola propiedad CSS,
display, para enseñarle al lector en profundidad. - Clase de conceptos básicos de la Web de Google muestra cómo crear diseños receptivos y sitios web de alto rendimiento.
- Adaptación de CSS para el rendimiento es una lectura interesante ya que muchos desarrolladores no consideran las implicaciones de la complejidad de CSS en el tiempo de renderización del navegador.
- Puedo usar… es una tabla de compatibilidad que muestra qué versiones de navegadores implementan características CSS específicas.
- ¿Cómo se elimina el CSS no utilizado de un sitio? cubre herramientas para identificar CSS innecesario y el proceso para eliminar reglas que son sobrescritas por otras reglas y por lo tanto no necesitan ser enviadas al cliente.
- los Museo de Diseño Web es una mirada asombrosa a cómo ha evolucionado el diseño web en los últimos 25 años. Algunos de los diseños aún se pueden ver en la presentación de su sitio actual, como la navegación superior del sitio 2001 de Apple.
- Las partes invisibles de CSS hace la pregunta «¿puede describir qué
display:blockla propiedad y el valor hacen? La mayoría de los desarrolladores tendrían una idea de para qué sirve, pero no podrían explicárselo a nadie más. El artículo ayuda a solucionar esta situación condisplayasí como otras propiedades menos visibles como flotadores yautoanchura. - Una breve historia de CSS hasta 2016 explica cómo CSS se originó en el CERN en 1994 como una solución al problema de HTML que no tiene características de estilo razonables (en línea
stylelos atributos de los elementos no cuentan). - CSS antiguo, CSS nuevo cuenta la maravillosa y dolorosa historia del diseño web en los primeros días de la Web, cuando se requería el estilo en línea, las mayúsculas HTML eran obligatorias y la mayoría de los sitios web deseaban tener estilos de diseño como el sorprendente Space Jam páginas. Oh, también, mucho, mucho hablar sobre las mesas, porque esa era la única forma de posicionar algo en el pasado.
- 30 segundos de CSS proporciona breves y útiles fragmentos de código para que pueda aprender y utilizarlos para crear sus propias aplicaciones web.
- CSS: los bits malos examina el alcance global, las reglas de estilo de porcentaje implícitas y el índice z que pueden ser difíciles de usar y requieren cierta moderación para garantizar que no causen problemas para el resto de las reglas de la hoja de estilo a medida que crea y mantiene su interfaz.
- Mejorando su CSS con Parker muestra cómo utilizar la herramienta de análisis CSS estático Parker para mejorar sus hojas de estilo.
- CSS y rendimiento de la red analiza cómo dividir su CSS puede afectar los tiempos de renderización del navegador y cómo puede mejorar el rendimiento de carga de su sitio cambiando la forma en que estructura sus archivos CSS. Mi recomendación: hay mucho que puede hacer con estas técnicas, pero probablemente sea una mejor idea simplificar su CSS y reducir la hinchazón masiva que se puede acumular a medida que crea su sitio como primer paso para mejorar su rendimiento.
- Una guía para la compatibilidad con CSS en navegadores analiza funciones frente a errores en diferentes versiones del navegador y cómo probar la compatibilidad para que sea menos probable que los problemas afecten a su aplicación web.
- Esa vez que intenté navegar por la Web sin CSS es una mirada esclarecedora de lo crucial que es CSS para la web moderna. Puede ver ejemplos de cómo es usar Amazon, DuckDuckGo, GitHub y varios otros sitios.
- CSS de terceros no es seguro Es un buen recordatorio de que cualquier código que no haya escrito usted mismo, especialmente el código servido a través de fuentes de terceros que no están bajo su control, puede contener aplicaciones potencialmente maliciosas, como el hack experimental del keylogger CSS que se difundió a principios de 2018.
- Comprender la especificidad en CSS proporciona algunos detalles maravillosos sobre las diversas formas de seleccionar elementos a través de selectores CSS, incluidos los selectores de tipo, pseudoelementos, selectores de clases, selectores de atributos y selectores de ID.
- Efecto de agua realista sin JavaScript: solo HTML / CSS es uno de los mejores tutoriales que he visto que usa CSS para crear un efecto de agua sobre una imagen. Este video proporciona un ejemplo de cómo hay tantas formas increíbles de usar CSS y el desarrollo web.
tecnologías.
¿Necesitas ayuda para revisar el código de tu proyecto?
También te puede interesar:
Esta entrada tiene 0 comentarios