Sunteți pe pagina 1din 8
Apuntes de Informática A todos quienes desarrollamos sistemas Web nos gusta que las páginas de
Apuntes de Informática A todos quienes desarrollamos sistemas Web nos gusta que las páginas de
Apuntes de Informática A todos quienes desarrollamos sistemas Web nos gusta que las páginas de

Apuntes de Informática

A todos quienes desarrollamos sistemas Web nos gusta que las páginas de los mismos luzcan uniformes, elegantes y atractivas. Si bien HTML proporciona algunas facilidades a tal fin, la potencia necesaria se encuentra en los estilos CSS 1 .

Tres modos de uso

Los estilos CSS se pueden usar de tres modos diferentes:

1) En línea: el estilo CSS se inserta directamente en la marca HTML que se quiere modificar. Es simple y directo, pero tiene el inconveniente que sólo afecta a la marca intervenida.

2)

Hoja interna: el estilo CSS se define en una hoja dentro de la página HTML. Todas las marcas de la página son afectadas por los estilos definidos. Tiene la ventaja que no hay que definir los estilos marca a marca, pero su alcance se limita a la página dentro de la cual la hoja está definida.

3)

Hoja externa: la hoja de estilos se define en un archivo independiente, de extensión css, y se importa a las páginas que la van a usar. Es el ideal para definir estilos generales para un sistema Web.

Prioridad

Cada modo de uso tiene prioridad sobre el otro: el modo en línea prevalece sobre la hoja interna, y ésta prevalece sobre la hoja externa.

En línea Hoja Interna Hoja Externa
En línea
Hoja Interna
Hoja Externa

Un ejemplo puede ayudarnos a entender los tres modos y como cada uno prevalece sobre el otro.

1 CSS es la sigla de Cascading Style Sheets, en español Hojas de Estilo en Cascada

Style Sheets, en español Hojas de Estilo en Cascada Profesor Carlos Cuesta Anton – profecuesta@gmail.com
Style Sheets, en español Hojas de Estilo en Cascada Profesor Carlos Cuesta Anton – profecuesta@gmail.com
Apuntes de Informática En una hoja externa, botones.css , definimos que los botones son azules
Apuntes de Informática En una hoja externa, botones.css , definimos que los botones son azules
Apuntes de Informática En una hoja externa, botones.css , definimos que los botones son azules

Apuntes de Informática

En una hoja externa, botones.css, definimos que los botones son azules 2 :

button { background-color: blue;

}

En nuestra página Web importamos esta definición y creamos tres botones:

<link rel="stylesheet" type="text/css" href="botones.css">

<button>Botón 1</button><br/> <button>Botón 2</button><br/> <button>Botón 3</button>

<button>Botón 3</button> Como esperábamos los tres botones son azules: En la misma

Como esperábamos los tres botones son azules:

En la misma página Web agregamos una hoja de estilo interna definiendo que los botones son verdes, sin quitar la importación de la hoja de estilo externa:

<link rel="stylesheet" type="text/css" href="botones.css">

<style type="text/css"> button { background-color: green;

}

</style>

<button>Botón 1</button><br/> <button>Botón 2</button><br/> <button>Botón 3</button>

<button>Botón 3</button> Veremos que los botones son verdes porque la definición de

Veremos que los botones son verdes porque la definición de la hoja interna prevalece sobre la de la hoja externa.

2 Los colores se definen en RGB mediante códigos hexadecimales, lo que genera más de 16 millones de colores diferentes. Unos pocos de esos colores tienen definidos sus nombres en inglés. Para simplificar el apunte se usan precisamente esos colores

Para simplificar el apunte se usan precisamente esos colores Profesor Carlos Cuesta Anton – profecuesta@gmail.com
Para simplificar el apunte se usan precisamente esos colores Profesor Carlos Cuesta Anton – profecuesta@gmail.com
Apuntes de Informática Finalmente agregaremos un estilo en línea al segundo botón para que sea
Apuntes de Informática Finalmente agregaremos un estilo en línea al segundo botón para que sea
Apuntes de Informática Finalmente agregaremos un estilo en línea al segundo botón para que sea

Apuntes de Informática

Finalmente agregaremos un estilo en línea al segundo botón para que sea rojo.

<link rel="stylesheet" type="text/css" href="botones.css">

<style type="text/css"> button { background-color: green;

}

</style>

button { background-color: green; } </style> <button>Botón 1</button><br/>

<button>Botón 1</button><br/> <button style=”background:color:red;”>Botón 2</button><br/> <button>Botón 3</button>

Y el segundo botón es rojo ya que la definición en línea prevalece sobre las otras dos:

JavaScript

Los estilos CSS de cualquier objeto HTML pueden ser modificados desde JavaScript. Veámoslo mediante un ejemplo. Creamos una página Web con un botón alto y rojo:

<button style="height:100px; background-color:red;">Botón</button>

background-color:red; ">Botón</button> Agregamos código JavaScript para cambiar el alto del botón

Agregamos código JavaScript para cambiar el alto del botón 3 a 50 pixeles:

<button style="height:100px; background-color:red;">Botón</button>

<script type="text/javascript"> botones = document.getElementsByTagName("button"); boton = botones[0];

boton.style.height="50px";

</script>

boton.style.height="50px"; </script> Y el botón queda efectivamente reducido en su altura. 3

Y el botón queda efectivamente reducido en su altura.

3 Este apunte supone cierto dominio de JavaScript

altura. 3 Este apunte supone cierto dominio de JavaScript Profesor Carlos Cuesta Anton – profecuesta@gmail.com
altura. 3 Este apunte supone cierto dominio de JavaScript Profesor Carlos Cuesta Anton – profecuesta@gmail.com
Apuntes de Informática En vez de recorrer el arreglo de botones reescribimos poniéndole un nombre
Apuntes de Informática En vez de recorrer el arreglo de botones reescribimos poniéndole un nombre
Apuntes de Informática En vez de recorrer el arreglo de botones reescribimos poniéndole un nombre

Apuntes de Informática

En vez de recorrer el arreglo de botones reescribimos poniéndole un nombre al botón y simplificando el código JavaScript:

<button style="height:100px; background-color:red;" name=”boton”> Botón </button>

<script type="text/javascript">

boton.style.height="50px";

</script>

Entonces la sintaxis básica para modificar algún estilo de un objeto es:

Objeto.style.estilo = valor;

Modificamos el color a verde:

<button style="height:100px; background-color:red;" name=”boton”> Botón </button>

<script type="text/javascript">

boton.style.height="50px";

boton.style.backgroundColor=”green”;

</script>

boton.style. backgroundColor =”green”; </script> En este ejemplo podemos notar que el estilo se escribe

En este ejemplo podemos notar que el estilo se escribe diferente 4 en JavaScript:

CSS

 

JavaScript

background-color

backgroundColor

Por lo tanto conviene siempre consultar una referencia 5 para estar seguros de cómo se escribe el atributo en cuestión en JavaScript:

Los valores de los estilos son siempre texto. En algunos casos es posible asignar valores numéricos, aprovechando el casting automático que JavaScript realiza para cambiar ese valor a texto. Por ejemplo:

boton.style.height = 50;

JavaScript convierte el valor numérico 50 a su equivalente en texto “50”. En cualquier caso es mejor no confiarse en que tan bien JavaScript hará esas conversiones.

4 CSS no es sensible a mayúsculas y minúsculas, mientras que JavaScript sí

5 Se recomienda la referencia oficial de la W3C en su sitio de la W3Schools

la referencia oficial de la W3C en su sitio de la W3Schools Profesor Carlos Cuesta Anton
la referencia oficial de la W3C en su sitio de la W3Schools Profesor Carlos Cuesta Anton
Apuntes de Informática Si queremos reducir el tamaño del botón a un tercio del tamaño
Apuntes de Informática Si queremos reducir el tamaño del botón a un tercio del tamaño
Apuntes de Informática Si queremos reducir el tamaño del botón a un tercio del tamaño

Apuntes de Informática

Si queremos reducir el tamaño del botón a un tercio del tamaño actual:

boton.style.height = parseInt(boton.style.height)/3;

Esto no siempre va a resultar bien debido a que CSS acepta varias unidades de medida, lo que se verá a continuación.

Unidades de Medida

CSS admite varias 6 unidades de medida. Las más usadas son:

px: pixel, la que se asume si no se especifica ninguna unidad

in: pulgadas

cm: centímetros

%: porcentaje

Por ejemplo:

<button style=”height:100%”>Botón</button>

Se trata de un botón que usa el 100% del alto del elemento que lo contiene, en este ejemplo la ventana del explorador:

El botón se redimensiona junto con la ventana, por lo que la medida % es apropiada para conservar las proporciones independiente de cual sea el tamaño de la ventana donde se muestre.

de cual sea el tamaño de la ventana donde se muestre. 6 A saber em ,

6 A saber em, ex , px, in , cm , mm , pt y pc

A saber em , ex , px , in , cm , mm , pt y
A saber em , ex , px , in , cm , mm , pt y
Apuntes de Informática El cuidado que hay que tener es en JavaScript, ya que al
Apuntes de Informática El cuidado que hay que tener es en JavaScript, ya que al
Apuntes de Informática El cuidado que hay que tener es en JavaScript, ya que al

Apuntes de Informática

El cuidado que hay que tener es en JavaScript, ya que al asignarse valores numéricos se asume son px:

boton.style.height = 100;

En este ejemplo la medida asumida son 100px, no 100%.

Si el botón tiene un alto definido de 100%, entonces la siguiente asignación:

boton.style.height = parseInt(boton.style.height)/2;

No reduce a la mitad, 50%, su alto, sino a 50px. Esto debido a que parseInt ignora el % y convierte sólo el número, vale decir 100.

Hojas de Estilo Externas e Internas

Las hojas de estilo externas e internas tienen el mismo formato. Primero el nombre de la marca HTML, y luego entre llaves los atributos CSS y sus valores. Por ejemplo:

button { background-color: blue; height: 40px;

}

select { background-color: green; height: 50px;

}

40px; } select { background-color: green; height: 50px; } En este ejemplo definimos la hoja con

En este ejemplo definimos la hoja con estilos para los botones y los selectores 7 .

Si la hoja es externa entonces va tal cual en un archivo de extensión css:

entonces va tal cual en un archivo de extensión css : 7 Nótese que el estilo

7 Nótese que el estilo para la altura no tuvo efectos sobre el selector. Algunos estilos CSS no tienen efecto sobre ciertos elementos de HTML

estilos CSS no tienen efecto sobre ciertos elementos de HTML Profesor Carlos Cuesta Anton – profecuesta@gmail.com
estilos CSS no tienen efecto sobre ciertos elementos de HTML Profesor Carlos Cuesta Anton – profecuesta@gmail.com
Apuntes de Informática Si es interna va dentro del archivo HTML entre marcas style :
Apuntes de Informática Si es interna va dentro del archivo HTML entre marcas style :
Apuntes de Informática Si es interna va dentro del archivo HTML entre marcas style :

Apuntes de Informática

Si es interna va dentro del archivo HTML entre marcas style:

es interna va dentro del archivo HTML entre marcas style : La hoja de estilo externa

La hoja de estilo externa debe ser importada mediante la marca link 8 :

<link href="estilos.css" rel="stylesheet" type="text/css"/>

Estilos con Nombre

Al definir estilos se hace referencia a la marca HTML a la cual esos estilos se aplican. Por ejemplo, si los estilos se aplican a la marca button:

button { background-color: blue; height: 40px;

}

Todas las marcas button tendrán el color y altura definidos. Si se precisa que algunos botones tengan un color y otros botones uno diferente, entonces se pueden crear estilos con nombre:

button.azul { background-color: blue; height: 40px;

}

button.rojo { background-color: red;

height: 40px;

}

8 El atributo rel permite establecer estilos alternativos. No se explica aquí por ser este un apunte introductorio

No se explica aquí por ser este un apunte introductorio Profesor Carlos Cuesta Anton – profecuesta@gmail.com
No se explica aquí por ser este un apunte introductorio Profesor Carlos Cuesta Anton – profecuesta@gmail.com
Apuntes de Informática Ahora tenemos dos estilos con nombre para botones. La forma de aplicar
Apuntes de Informática Ahora tenemos dos estilos con nombre para botones. La forma de aplicar
Apuntes de Informática Ahora tenemos dos estilos con nombre para botones. La forma de aplicar

Apuntes de Informática

Ahora tenemos dos estilos con nombre para botones. La forma de aplicar estos estilos con nombre es mediante el atributo class:

<button>Botón 1</button><br/><br/> <button class="azul">Botón 2</button><br/><br/> <button class="rojo">Botón 3</button>

El primer botón es estándar porque no se definió un estilo sin nombre para la marca button. Si así se hubiese hecho entonces el estilo sin nombre se aplica a todas las marcas correspondientes que no especifiquen el atributo class.

correspondientes que no especifiquen el atributo class . Conclusión CSS es la paleta de pintor para

Conclusión

CSS es la paleta de pintor para decorar nuestras páginas Web, así que ya no tenemos excusas para no sacar ese Picasso que llevamos dentro y hacer de HTML una obra de arte. Para una referencia completa de todos los estilos CSS se recomienda consultar la página Web de la W3C: http://www.w3schools.com/

la página Web de la W3C: http://www.w3schools.com/ Profesor Carlos Cuesta Anton – profecuesta@gmail.com
la página Web de la W3C: http://www.w3schools.com/ Profesor Carlos Cuesta Anton – profecuesta@gmail.com