Ahora haré la modificación de la página del login para darle un aspecto más estético usando CSS.
CSS (Cascading Style Sheet ) en español Hoja de Estilo en Cascada es el lenguaje de hojas de estilo utilizado para describir el aspecto y el formato de un documento escrito en un lenguaje de HTML. La forma en que se ejecuta el código lo haré en una hoja de estilo.css osea en forma externa al código HTML. Para eso utilizaré el IDE netbeans. El primer paso es crear una hoja de estilo es dar clic derecho en la carpeta source files como se muestra en la imagen:
Y en la siguiente pantalla escribimos nuestro nombre yo lo llamaré logincss y damos clic en finish
Nota: La hoja de estilos se debe guardar en la carpeta de tu proyecto.
Ahora le indicaremos a HTML dónde buscará la hoja de estilos mediente el siguiente código:
La etiqueta <link> permite definir un enlace entre el documento y algún recurso externo; y se debe ubicar dentro de la etiqueta <head></head>
El atributo rel Describe la relación entre el documento y el destino del enlace.
Los navegadores soportan de forma completa, solo el valor "stylesheet", el resto de los valores de forma parcial.
El atributo href especifica la localización del documento enlazado. En este caso logincss ubicado en la carpeta del proyecto.
Y la etiqueta type especifica el tipo de documento a enlazar. El más común es type="text/css".
La siguiente imagen muestra el código de CSS y su correspondiente explicación.
Ahora nos ubicamos en la hoja de estilos en netbeans y comenzamos a programar.
La sintaxis de css es la siguiente ejemplo:
body
{
background-color:black;
}
Donde:
body es el selector o etiqueta donde deseamos añadir propiedades y estilos.
{} Dentro de las llaves se escriben las propiedades del la etiqueta.
background-color: es la propiedad de la etiqueta
black es el valor de la propiedad, todas las instrucciones terminan con un punto y coma(;).
Si hay etiquetas iguales, lo conveniente sería asignar un id en la etiqueta para diferenciarla de las demás de esta forma:
Con esto podemos especificar en el código css la etiqueta que queremos editar mediente el símbolo #
#titulo
{
}
Así se llama a la etiqueta que tiene este id.
Ó también si desea aplicar el mismo estilo a varios elementos se puede crear una clase, sólo los elementos ligados a esa clase, en css una clase de se crear del a siguiente manera:
.nombre_clase
{
propiedad:valor;
}
que las etiquetas sufran los cambios se le debe asignar una clase con la clase que acabamos de crear. Por ejemplo creamos una clase llamada color_rojo con una propiedad color:red;
.color_rojo
{
color:red;
}
ya hemos creado la clase ahora sólo queda asignar la clase a las etiquetas que queramos por ejemplo queremos que el texto de la etiqueta <h1>HOLA</h1> y la etiqueta <p>Estamos programando en css </p> sólo basta con asignarles una clase de la siguiente manera
<h1 class="color_rojo">HOLA</h1>
<p class="color_rojo">Estamos programando en css </p>
Ahora estás etiquetas cambiaran el color de texto contenido en ellas, por que ya están dentro de la clase clor_rojo.
A continuación se mostrará la imagen del código elaborado para la página de login, con sus respectivas funciones del código.
Ejecutando este código la página queda de la siguiente forma:
