CSS Diseño Web
Dicen que las segundas partes nunca son buenas, y está no será la excepción, ya que no será ni mejor ni peor que la primera, solo diferente.
Traemos una nueva edición de esta guía para aprender a dominar CSS y estilizar de la mejor forma posible nuestros sitios o aplicaciones Web. Retomaremos donde dejamos en el tutorial anterior y cubriremos algunos tópicos interesantes.
Como siempre, todo el detalle, después del salto.
Nota: Si no han tenido la oportunidad de leer el primer número de esta guía, les recomendamos revisarlo en el siguiente enlace.
De acuerdo a donde quedamos en el número anterior, hoy veremos:
Sin más que aclarar, vamos, manos a la obra:
Probablemente cuando se lee ‘propiedades de estilo’ y ‘propiedades de texto’ se tiende a pensar que es lo mismo. No lo es. Cuando nos referimos a las propiedades de fuente, hablamos de todas las características relacionadas a la tipografía que utilizaremos en cierta parte de nuestra Web, mientras que las propiedades de texto se refieren a la visualización que se expondrá de esa fuente. Todo quedará mucho más claro al ver los ejemplos correspondientes.
Las propiedades de fuente más utilizadas son:
font-family: Se refiere a que fuente se utilizará. Ej: Arial, Verdana, Times New Roman, etc.
font-size: Se refiere al tamaño de la fuente. Puede fijarse de acuerdo a distintas medidas, siendo la más común los pixeles.
font-style: Se refiere al estilo de la fuente. Puede tomar tres valores: normal, italic, oblique.
font-weight: Se refiere al grueso de la fuente. Puede tomar valores como: normal, bold, bolder, lighter y del 100 al 900.
Veamos un ejemplo para aclarar este concepto:
Ejemplo: Definir un estilo para la marca h1 que utilice una fuente Arial, de 20 pixeles y un estilo en cursiva.
<html>
<head>
<title> Ejemplo 2-1</title>
<style type=”text/css”>
h1{
font-family: Arial;
font-style: italic;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Ejemplo de estilo</h1>
</body>
</html>
A continuación veremos la diferencia con los estilos de texto.
Cuando nos referimos a propiedades de texto, hablamos de como la fuente seleccionada y estilizada se visualizará en nuestros sitios Web, o sea, lo relacionado a colores, decoraciones y alineación.
Las propiedades más utilizadas son:
color: Se refiere al color del texto, puede tomar valores hexadecimales desde el #000000 (negro) al #ffffff (blanco) o en modo rgb desde el (0,0,0) correspondiente a negro al (255,255,255) correspondiente a blanco.
text-decoration: Se refiere a la decoración del texto. Puede tomar los valores none (ninguno), underline (subrayado), overline (sobrerayado) y line-through (rayado por encima).
text-align: Se refiere a la alineación del texto. Puede tomar los valores left, right, center y justify.
letter-spacing: Define el espacio entre cada letra, medido en pixeles.
word-spacing: Define el espacio entre cada palabra, medido en pixeles.
text-indent: Aplica sangría al texto, medido en pixeles.
text-transform: Transforma el texto. Se pueden utilizar los valores none (ninguno), capitalize (coloca mayúscula al inicio de cada palabra), uppercase (todo en mayúscula), lowercase (todo en minúscula).
Veremos un ejemplo para dejar todo claro.
Ejemplo: Definir una marca h1 estilizando el texto, dejándolo de color rojo, alineado al centro y subrayado:
<html>
<head>
<title> Ejemplo 2-2 </title>
<style type=”text/css”>
h1{
color: #ff0000;
text-align: center;
text-decoration: underline;
}
</head>
<body>
<h1>Texto ejemplo</h1>
</body>
</html>
Creo que hemos podido apreciar de buena forma la diferencia entre fuentes y textos.
El título es algo enredado, pero veremos que no es realmente complejo y que es algo que hemos estado utilizando hasta ahora.
Normalmente en nuestros ejemplos hemos definido uno o varios estilos para una marca en particular, a eso nos referimos cuando hablamos de varios estilos para una marca. Cuando definimos las propiedades de una marca, podemos establecer una serie de estilos sin limitarnos solo a propiedades de texto o de fuente, si no que podemos combinar e incluso usar otras variantes como color de fondo. Por ejemplo, si quisieramos crear una marca h1 con una serie de estilos, hablaríamos de:
h1{
font-family: Arial;
color: #ff0000;
font-weight: bold;
font-style: italic;
font-size: 20px;
text-decoration: overline;
}
Todo eso, y muchos más definibles se aplicarían a la misma marca, sin limites. Los estilos a definir para una etiqueta HTML pueden ir desde 1 a n, siendo n el número máximo existente de estilos distintos.
Por otro lado, hablamos de definir varias marcas para un solo estilo cuando asignamos a varias etiquetas HTML el mismo estilo creado, por ejemplo, si quisieramos usar un mismo estilo para marcas h1,h2,h3 y h4, diríamos:
h1,h2,h3,h4{
font-family: Verdana;
color: #00ff00;
font-size: 10px;
}
Al definir eso (junto con el resto del código HTML), estaríamos definiendo un estilo unitario para cada una de esas etiquetas y cada vez que se utilicen asumirán por defecto lo recién definido.
Cuando hablamos de definición de estilo dentro de un estilo, tocamos un tema también conocido como “herencia de estilos”, lo cual se refiere a el paso de un estilo entre marcas HTML de distinta jerarquía.
Por ejemplo, cuando nosotros tenemos una marca de tipo <BODY>, todas las marcas que utilicemos entre su apertura y final, estan jerarquicamente más abajo, por lo que si definiéramos un estilo para BODY, todas las marcas siguientes lo heredarían. Por ejemplo, si definieramos:
<html>
<head>
<title> Ejemplo 2-4 </title>
<style type=”text/css”>
body{
color: #ff0000;
font-family: Arial;
}
</style>
</head>
<body>
<h1> Ejemplo 1</h1>
<h2> Ejemplo 2</h2>
<h3> Ejemplo 3</h3>
</body>
</html>
Todas las marcas contenidas entre la apertura y cierre de body, o sea, h1, h2 y h3 heredarían el estilo definido, texto de color rojo y tipo de letra Arial. Este estilo se diría que es el definido por defecto para la página Web.
Pero, ¿qué pasa si queremos que una parte del sitio tenga otro estilo?, para eso definimos el estilo de una marca en particular, la cual, a pesar de estar contenida en otra jerarquicamente superior, cumplirá con su propio estilo definido. Por ejemplo, de acuerdo a lo anterior, si nosotros luego de la definición de estilo de body, definiéramos:
h1{
color: #0000ff;
font-family: Verdana;
}
De esta forma, la etiqueta h1 dentro de body utilizaría el estilo recién definido y no el estilo por defecto de la etiqueta body.
Esto es posible de hacer a todo nivel de jerarquía sin problemas.
Y con eso hemos terminado nuestra lección de CSS de hoy, en lo cual hemos cubierto una serie de contenidos que nos permitirán seguir dominando este tema poco a poco.
En la próxima edición:
Recuerden que como siempre, este tutorial ha sido:
Cualquier duda o consulta, pueden dejarnos unas líneas en el área habilitada a continuación.
Esperamos que este tutorial haya sido de utilidad para Uds.
Muchas gracias por leer y será hasta una próxima oportunidad.
Deja un comentario