CSS

Ξ Comenta

Cómo dominar CSS sin salir del escritorio – Parte 2

por Xabadu
Cómo dominar CSS sin salir del escritorio – Parte 2

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.

Cómo dominar CSS sin salir del escritorio

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:

Contenidos:

  1. Propiedades de fuente.
  2. Propiedades de texto.
  3. Definición de un estilo para varias marcas y de varios estilos para una marca.
  4. Definición de un estilo dentro de un estilo.

Sin más que aclarar, vamos, manos a la obra:

1.- Propiedades de fuente:

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.

2.- Propiedades 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.

3.- Definición de un estilo para varias marcas y de varios estilos para una marca.

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.

4.- Definición de un estilo dentro de un estilo:

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:

  1. Definición de estilos de acuerdo a condiciones.
  2. Definiendo estilos en un archivo externo.
  3. Uso de clases.

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.

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gente linda que nos quiere

Donde mas estamos