Etiqueta de estilo Css
En este tutorial, tomará un formulario de inicio de sesión que utiliza estilos predeterminados para las etiquetas, los botones y el color de fondo y, con unas simples modificaciones de CSS, lo convertirá en una aplicación estilizada, como se muestra en la Figura 3-1.
La herramienta utilizada en este tutorial de introducción es NetBeans IDE. Antes de comenzar, asegúrese de que la versión de NetBeans IDE que está utilizando soporta JavaFX 2. Consulte los requisitos del sistema para obtener más detalles.
Si ha seguido la guía de introducción desde el principio, entonces ya ha creado el proyecto de inicio de sesión necesario para este tutorial. Si no es así, descargue el proyecto de inicio de sesión haciendo clic con el botón derecho en Login.zip y guardándolo en su sistema de archivos. Extraiga los archivos del archivo zip, y luego abra el proyecto en NetBeans IDE.
Su primera tarea es crear un nuevo archivo CSS y guardarlo en el mismo directorio que la clase principal de su aplicación. A continuación, debe hacer que la aplicación JavaFX conozca la hoja de estilo en cascada recién añadida.
Ahora, añada el código de la propiedad background-image al archivo CSS. Recuerde que la ruta es relativa a la hoja de estilo. Así, en el código del Ejemplo 3-2, la imagen background.jpg está en el mismo directorio que el archivo Login.css.
Generador de código Css
Cuando empieces a trabajar en hojas de estilo más grandes y en proyectos de gran envergadura, descubrirás que mantener un archivo CSS enorme puede ser un reto. En este artículo echaremos un breve vistazo a algunas de las mejores prácticas para escribir tu CSS de manera que sea fácilmente mantenible, y algunas de las soluciones que encontrarás en uso por otros para ayudar a mejorar la mantenibilidad.
Consejos para mantener tu CSS ordenadoAquí tienes algunas sugerencias generales para mantener tus hojas de estilo organizadas y ordenadas.¿Tiene tu proyecto una guía de estilo de codificación? Si estás trabajando con un equipo en un proyecto existente, lo primero que debes comprobar es si el proyecto tiene una guía de estilo existente para CSS. La guía de estilo del equipo debería imponerse siempre a tus preferencias personales. A menudo no hay una forma correcta o incorrecta de hacer las cosas, pero la coherencia es importante.
Por ejemplo, echa un vistazo a las directrices CSS de los ejemplos de código de MDN.Mantén la coherenciaSi consigues establecer las reglas del proyecto o estás trabajando solo, lo más importante es mantener la coherencia. La coherencia puede aplicarse de todo tipo de formas, como utilizar las mismas convenciones de nomenclatura para las clases, elegir un método para describir el color o mantener un formato coherente. (Por ejemplo, ¿utilizarás tabulaciones o espacios para sangrar tu código? Si son espacios, ¿cuántos espacios?)
Style css einbinden
La extensión NetBeans Connector para el navegador Chrome puede ayudarte a ver las aplicaciones tal y como aparecerían en varios dispositivos. La extensión permite que el navegador Chrome y el IDE se comuniquen entre sí. El modo Inspect in NetBeans puede ayudarte a localizar elementos en tu código fuente seleccionándolos en el navegador. Después de seleccionar un elemento en el navegador puedes usar el IDE para ver las reglas y propiedades CSS que se aplican a ese elemento.
En este tutorial se utiliza una plantilla de sitio para crear el proyecto HTML5. La plantilla de sitio que se utiliza en este tutorial es la misma plantilla que se guardó como plantilla de sitio en el tutorial Introducción a las aplicaciones HTML5. Si ha realizado los pasos del tutorial de Introducción, puede utilizar la plantilla de sitio que guardó en la última sección. También puede descargar la plantilla de sitio HTML5DemoSiteTemplate.zip.
En este tutorial ejecutarás la aplicación en el navegador Chrome con la extensión NetBeans Connector instalada. Cuando la extensión está instalada, puedes utilizar el menú de NetBeans en el navegador para cambiar fácilmente el tamaño de la ventana del navegador para ver la aplicación como aparecería en algunos dispositivos comunes.
Ejemplos de css
Guarda tu HTML con el mismo nombre que elegiste antes y haz clic en Aceptar si te pide que sobrescribas el actual.Abre tu navegador haz clic en Archivo -> Abrir -> Examinar-> y busca tu archivo HTML y haz clic en él, haz clic en Aceptar y tu página debería aparecer. Debería ser similar a la imagen de abajo.Sólo cambiar el nombre del color en su archivo .css cambiará la salida y lo mismo ocurre con la fuente y el tamaño de la fuente.Documento HTML con hoja de estilo del Bloc de notas enlazadoJmillar¡Atajo para el desarrollo de sitios web!Como has aprendido, escribir HTML es meticuloso. Cada punto y coma, cada corchete, cada cierre / debe estar en su lugar o el navegador no lo mostrará correctamente, o en absoluto. Esto puede ser MUY frustrante cuando tu página no se muestra, o se muestra mal, y tienes que ir línea tras línea de tu código buscando lo que te has saltado (Sí, lo que te has saltado. Los navegadores no leen mal.)Si vas a escribir más de una página de HTML, o simplemente no quieres olvidarte de cómo escribirlo, puedes simplificar el proceso guardando una plantilla, o comúnmente llamado un marco del HTML que sabes que funciona. Entonces, cuando necesites escribir una página HTML todo lo que tienes que hacer es abrir tu marco y rellenar los detalles. Vea un ejemplo de marco a continuación (puede copiar el siguiente marco si lo desea).Marco HTML<!DOCTYPE html>