En este tutorial les mostrare el atributo HTML Style (Estilo) que se utiliza para implementar propiedades y valores CSS dentro del documento HTML, en el tutorial pasado vimos los formatos que se le pueden dar al texto, ahora veremos como darle otros estilos con el atributo Style.
El Atibuto Style
El atributo style se utiliza para implementar estilos CSS dentro del documento HTML, como ya hemos visto anteriormente, los estilos CSS se pueden implementar de tres formas, en un archivo externo, dentro de la etiqueta head y en linea, esta ultima forma es la que veremos en este tutorial.
Los etilos CSS no es recomendable implementarlos dentro del documento HTML, porque lo hace mas pesado y tarda mas la carga de la pagina al ser mostrada por los navegadores y otros inconvenientes mas, es mejor usar una hoja de estilos por separado del documento HTML, pero se puede hacer de forma moderada.
Los atributos se implementan dentro de la etiqueta de apertura en todos los elementos HTML, todos los atributos constan de tres partes,el nombre del atributo, la Propiedad y su Valor, y la sintaxis es de la siguiente manera.
<nombre de etiqueta atributo="propiedad:valor;">
Después del nombre del atributo lleva el signo de ( = ) igual, la propiedad y el valor van dentro de comillas dobles o simples, las mas usada y recomendadas son las comillas dobles ( " " ) y siempre se deben poner dos puntos ( : ) al final de propiedad, y un punto y coma ( ; ) al final del Valor.
Bien ahora vamos a implementar el atributo Style dentro de la etiqueta <p> para darle algunos estilos CSS al texto de los párrafos y cambiar la vista que por defecto muestran los navegadores.
La Propiedad background-color
Como vimos en el tutorial pasado la etiquetá <mark> le daba un color de fondo amarillo por defecto al texto de los párrafos, para cambiar el color de fondo, por el color que nosotros deseemos, tenemos que usar la propiedad background-color de la siguiente manera.
<p style="background-color:#4ce600;">El fondo del texto de este parrafo es de color verde.</p>
Ejemplo visto en el navegador
El color esta en un formato Hexadecimal, que es una mezcla de los colores Red (Rojo), Green (Verde) y Blue (Azul), y es agregado por el valor (#4ce600) que esta escrito en hexadecimal, los tipos de código que hay son, Nombres (Solo se aceptan nombres de colores en Ingles) RGB, Hexadecimal, HSL, RGBA y HSLA, mas adelante veremos un tutorial sobre los colores.
Es imposible memorizar todos los códigos de los colores, por eso existe una herramienta llamada Color Picker, en la cual pueden generar el código de cualquier tipo, esta herramienta la pueden encontrar en cualquier editor de imágenes, como Photoshop, Gimp, o ingresen el nombre Color Picker en cualquier buscador y les aparecerán varios links a paginas con esta herramienta.
En la mayoría de los editores de texto, puedes integrarla descargando un paquete o plugin desde el mismo editor, y activarla con clic derecho o con un comando de teclas, en Atom ya descargado el plugin se activa presionando las teclas Ctrl+Alt+V
La Propiedad Color
Para cambiar solo el color del texto, se usa la propiedad color, si le hemos puesto un color de fondo oscuro al párrafo para poder ver el texto le tenemos que dar un color claro o al revés, la sintaxis para cambiar solo el color del texto es la siguiente.
<p style="color:red;">Este párrafo tiene el texto color rojo</p>
Ejemplo como se ve en el navegador
Pero si queremos poner un color de fondo obscuro al párrafo, debemos cambiar el color del texto al párrafo para poder leerlo, se tienen que implementar las dos propiedades y los dos valores juntos en el atributo style de la siguiente manera.
<p style="color:withe; background-color:black;">Este párrafo tiene el texto blanco y el fondo negro</p>
Ejemplo como se ve en el navegador
Como ven en los ejemplos anteriores he puesto el nombre de los colores en Ingles, si tienes conocimiento básico del Ingles te sera mas fácil recordar los nombres de los colores que mas uses, existen alrededor de 140 nombres de colores en ingles permitidos, entre nombres normales y compuestos, como lightblue (Azul Claro), darkblue (Azul Obscuro), etc, etc.
La Propiedad Font Family
La propiedad font-family (Familia de fuente o texto) se utiliza para cambiar el tipo de texto que muestran por defecto los navegadores, hay tres tipos de familias de fuentes, Sans Serif, Serif y Monospace.
La fuente Sans Serif es un tipo de fuente normal como la de este blog, la fuente Serif es un tipo de fuente que tiene una especie de alargamiento o cola en el final de las lineas del texto, la fuente Monospace es un tipo de fuente que admite los dos tipos de fuente anterior, pero todas las letras contienen el mismo espacio entra si.
Existen infinidad de fuentes pero todas pertenecen a alguna de las tres familias mencionadas, todos los sistemas operativos como Windows, Mac, Linux, etc,
utilizan fuentes diferentes entre si pero todos utilizan fuentes de las tres familias, es por eso que se utiliza la propiedad font-family, por si no pueden mostrar la fuente que se desea, muestren una similar o de la misma familia.
En la propiedad font-family se debe ingresar por lo menos dos tipos de fuente y la familia a la que pertenece, cuando el nombre de una fuente contenga dos palabras o mas, se debe colocar entre comillas por ejemplo "Cuorier New" les muestro un ejemplo de las tres familias con las fuentes mas utilizadas.
Ejemplo de Sans Serif
<p style="font-family: Arial, Helvetica, sans-serif;">Este párrafo contiene texto de la familia Sans Serif</p>
Ejemplo de Serif
<p style="font-family: " Times New Roman", Times, serif;">Este Texto contiene Texto de la familia Serif</p>
Ejemplo de Monospace Similar a Serif
<p style="font-family: "Courier New", Courier, monospace;">Este Texto contiene Texto de la familia Monospace similar a Serif</p>
Ejemplo de Monospace Similar a Sans Serif
<p style="font-family: "Lucida Console", Monaco, monospace;">Este texto contiene texto de la familia Monospace similar a Sans Serif</p>
Ejemplo como se ven en el navegador las familias de fuente
La propiedad Font Size
La propiedad font-size (Tamaño de Fuente o Texto) se utiliza para cambiar el taño del texto, es importante saber cambiar el tamaño del texto en una pagina web, sin embargo no se debe utilizar para cambiar el tamaño de los encabezados, para mostrarlos como párrafos o los párrafos para que se vean como encabezados, siempre se debe de usar sus respectivas etiquetas <h1> a <h6> y <p>
Los valores del tamaño del texto, se pueden implementar en px (pixeles), em (El tamaño de la "M" eme mayúscula) o % (Porcentaje), por defecto todos los navegadores muestran el tamaño de letra normal de 16px, o 1em, o 100%, para saber como coincidir el mismo tamaño en las tres medidas les muestro esta comparativa.
Ejemplos:
(8px = 0.5em = 50%)
(16px = 1em = 100%)
(24px = 1.5em = 150%)
(32px = 2em = 200%)
(16px = 1em = 100%)
(24px = 1.5em = 150%)
(32px = 2em = 200%)
La sintaxis para escribir la propiedad font-size es de la siguiente forma.
<p style="font-size:24px;">Este texto tiene el tamaño de 24px</p>
<p style="font-size:1.5em;">Este texto tiene el tamaño de 1.5emx</p>
<p style="font-size:200%;">Este texto tiene el tamaño de 200%</p>
La forma mas recomendada es utilizar el valor con em, en la siguiente imagen les muestro una imagen, con varios ejemplos de como se mostrarían los tamaños en el navegador.
La Propiedad Text Aling
La propiedad text-aling (Alineamiento del Texto o Texto Alineado) se utiliza para alinear el texto de forma horizontal, existen cuatro formas de alineamiento del texto, left (Izquierda), right (Derecha), center (Centro o Centrada) y justify (Justificada), la forma justificada ajusta las lineas como en una revista , un libro o un periódico, su sintaxis es de la siguiente forma.
<p style="text-aling:left;">Este texto esta alineado a la Izquierda</p>
<p style="text-aling:right;">Este texto esta alineado a la Derecha</p>
<p style="text-aling:center;">Este texto esta alineado al Centro</p>
<p style="text-aling:justify;">Este texto esta Justificado</p>
En la siguiente imagen les muestro como se ven en el navegador los cuatro ejemplos de arriba, con un encabezado y un párrafo mas largo dentro de un elemnto div, para ver mejor los ejemplos del alineamiento del texto.
Resumen
El atributo Style se utiliza para ingresar estilos CSS dentro del documento HTMLLa propiedad background-color se utiliza para poner color de fondo a los elementos HTML
La propiedad Color se utiliza para darle color al Texto
La propiedad font-family se utiliza para cambiar la fuente del texto
La propiedad font-size se utiliza para cambiar el tamaño del texto
La propiedad text-aling se utiliza para alinear el testo horizontalmente
En el siguiente tutorial veremos los links o hipervínculos, como se construyen, su sintaxis, como usarlos y mas.
Saludos y que estén bien, nos leemos en el siguiente tutorial, hasta la próxima Amigos.
No hay comentarios.:
Publicar un comentario