CSS
Hojas de Estilo
Enlazándose a una hoja de estilo externa
Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento LINK de HTML:
La etiqueta <LINK> se coloca en la cabecera HEAD del documento. El atributo opcional TYPE se usa para especificar un tipo de medio --text/css para una hoja de estilo en cascada-- permitiéndole a los navegadores omitir los tipos de hoja de estilo que no soportan. También es una buena idea configurar el servidor para enviar text/css como Content-type para archivos CSS.
Las hoja de estilo externas no debrían contener ninguna etiqueta HTML como <HEAD> o <STYLE>. La hoja de estilo solo debería consistir simplemente de reglas de estilo o sentencias. Un archivo que solo consista de
podría usarse como una hoja de estilo externa.
P { margin: 2em }
La etiqueta <LINK> también toma un atributo opcional MEDIA, que especifica el medio o medios en que debería aplicarse la hoja de estilo. Los valores posibles son
- screen (valor por defecto), para presentación en pantallas de computadoras no-paginadas;
- print, para salida a una impresora;
- projection, para presentaciones en proyectores;
- aural, para sintetizadores de voz;
- braille, para presentación en dispositivos braille;
- tty, para pantalla en celda de caracteres (usando una fuente de inclinación fija);
- tv, para televisores;
- all, para todos los dispositivos de salida.
Medios múltiples se especifican mediante una lista separada por comas, o por el valor all.
Netscape Navigator 4.x ignora incorrectamente cualquier hoja de estilo enlazada o incrustada declarada con valores MEDIA diferentes de screen. Por ejemplo, MEDIA="screen, projection" provocará que la hoja de estilo sea ignorada por Navigator 4.x, aun si el dispositivo de presentación es una pantalla de computadora. Navigator 4.x también ignora hojas de estilo declaradas con MEDIA=all.
El atributo REL se usa para definir la relación entre el archivo enlazado y el documento HTML. REL=StyleSheet especifica un estilo persistente o preferido mientras queREL="Alternate StyleSheet" define un estilo alterno. Un estilo persistente es aquel que siempre se aplica si están activas las hojas de estilo. La ausencia del atributo TITLE, como en la primera etiqueta <LINK> en el ejemplo, define un estilo persistente.
Un estilo preferido es uno que se aplica automáticamente, como en la segunda etiqueta <LINK> en el ejemplo. La combinación de REL=StyleSheet y un atributo TITLEespecifica un estilo preferido. Los autores no pueden especificar más de un estilo preferido.
Un estilo alterno se indica por REL="Alternate StyleSheet". La tercera etiqueta <LINK> en el ejemplo define un estilo alterno, que el usuario podría elegir para reemplazar la hoja de estilo preferido.
Note que los navegadores actuales generalmente carecen de la capacidad de elegir estilos alternos.
<LINK REL=StyleSheet HREF="basico.css" TITLE="Contemporaneo">
<LINK REL=StyleSheet HREF="tablas.css" TITLE="Contemporaneo">
<LINK REL=StyleSheet HREF="formas.css" TITLE="Contemporaneo">
En este ejemplo, tres hojas de esilo son combinadas en un estilo "Contemporaneo" que se aplica como una hoja de estilo preferido. Para combinar múltiples hojas de estilo en un estilo único, se debe usar el mismo TITLE con cada hoja de estilo.
Una hoja de estilo externa es ideal cuando el estilo se aplica a muchas páginas. Con una hoja de estilo externo, un autor podría cambiar la apariencia de un sitio completo mediante el cambio de un solo archivo. Además, la mayoría de navegadores guardan en caché las hojas de estilo externas, evitando así una demora en la presentación una vez que la hoja de estilo se ha guardado en caché.
Aplicando hojas de estilo a las tablas
Con las hojas de estilo podemos proporcionarle un aire nuevo a nuestras tablas, que son los objetos que albergan a los datos tabulados. En esta misma web se utiliza código CSS para diseñar las tablas de este curso.
Como ves, por las tablas de este curso, podemos diseñar éstas de forma muy flexible; personalizándolas hasta límites insospechados. Por ejemplo, dándole un color a cada fila.
A continuación se te presentan las propiedades que podemos usar para diseñar nuestras tablas:
| Propiedades para diseñar tablas | |
|---|---|
border-collapse | Fuerza a que los bordes contiguos de las celdas se solapen |
border-spacing | Para establecer la distancia entre los bordes de las celdas |
border-style | Para habilitar un borde, con un estilo determinado |
background-color | Para aplicar un color de fondo a la tabla |
padding | Pone un margen entre el borde de las celdas y su contenido |
Por lo general, en algunos navegadores, las celdas no se solapan, quedando un poco separadas las unas de las otras. Con la propiedad
border-collapsepodemos conseguir controlar este aspecto.
Esta propiedad tiene dos valores:
collapse y separate. El primer valor es el queestablece el que se adosen las celdas contiguas. El segundo valor es el que se establece por defecto, y deja una separación entre las celdas.
En la imagen 9 puedes ver este concepto más gráficamente:
Si lo que deseamos es que las celdas de una tabla guarden una separación entre ellas, podemos controlar la distancia de la separación de las celdas. Para ello nos valdremos de la propiedad
border-spacing. Los valores que tomará esta propiedad serán cantidades en píxeles.
Aunque existen otras magnitudes para medir la cantidad de distancia, como por ejemplo porcentajes, por ahora nos vamos a centrar en la unidad de pixel. En una próxima lección nos centraremos en las distintas unidades que podemos manejar con las hojas de estilo en cascada.
También tenemos la posibilidad de ponerle un color de fondo a las celdas. Mediante la propiedad
background-color estableceremos los valores en las modalidades que analizamos en la lección 7 de este mismo curso.
Cuando creamos una tabla, ésta no aparece como tal, sino que lo que vemos son solo los datos tabulados contenidos en la tabla. Esto es porque los bordes no aparecen. Con la propiedad
border-style podemos hacer que se muestren los bordes, pudiendo elegir entre varios tipos. A continuación los tipos y sus características:solid- la línea del borde se muestra con un solo trazo y lisa.double- la línea del borde aparece con doble trazo.groove- la línea aparece con bajo relieve.ridge- la línea del borde se muestra con alto relieve.
Figura 10. Podemos elegir entre distintos tipos de bordes
para las tablas o las celdas.
Vamos a implementar un código para que asimiles mejor el funcionamiento de todas estas propiedades que hemos visto para las tablas y sus celdas (también pondrémos la imagen de la tabla que genera el código):
table { border-style:double; background-color:aliceblue; border-spacing:12px; } th { border-style:solid; background-color:aquamarine; } td { border-style:groove; background-color:orange; padding:4px; }
Tenemos una tabla con celdas normales y de encabezados. Hemos escrito en el código diferentes valores para el estilo del borde; en concreto, tenemos doble trazo para el borde de la tabla, uno sólido para los encabezados y otro de bajo relieve para las celdas normales. Obversa también que le hemos dado un color de fondo diferente para cada elemento: los encabezados con un azul verdoso, las celdas con naranja y la tabla con gris.
Como dar estilo de listas (ordenadas/numeradas) con CSS
Las listas
ol, las listas numeradas, tienen un estilo por defecto en el que puedes elegir
entre unas cuantas opciones a través de las hojas de estilo css como decimal
(por defecto), lower-alpha (letras minúsculas en lugar de números),
upper-alpha, lower-roman (números romanos), upper-roman, none y algunos más:
Ejemplo:
ol {list-style-type: upper-roman;}
Por defecto, la
mayoría de los navegadores muestran las listas numeradas con la misma fuente y
estilo que el texto especificado en body. En este artículo mostramos como
cambiar el estilo de los números de las listas numeradas usando el tag de
listas ordenadas <g;ol> y párrafos <p> anidados en cada item <li> de la lista de modo que
puedas tener practicamente un control total en el diseño de una lista numerada.
Básicamente, todo
lo que necesitamos hacer es dar estilo al elemento < ol> estableciendo
una fuente determinada y una imagen de fondo y resetear el elemento <p>
(anidado en <li>) a otro tipo de fuente. Debemos recordar que, en las
listas ordenadas, cada elemento de la lista viene especificado por el elemento
<li> y que, por defecto, los números de la lista aparecen posicionados
fuera de <li> y por ello será necesario poner un margen a los elementos
<li> para posicionar el texto y el número del elemento correctamente
según nuestro diseño.
1.
Empezemos por el principio, el HTML:
<ol>
<li>
<p>Primer elemento de la lista
ordenada</p>
</li>
<li>
<p>Segundo elemento de la lista ordenada
</p>:
</li>
<li>
<p>Tercer items de la lista
ordenada</p>
</li>
</ol>
Con este código el
resultado es:
1.
Primer elemento de
la lista ordenada
2.
Segundo elemento
de la lista ordenada
3.
Tercer elemento de
la lista ordenada
2.
Damos estilo al elemento ol
ol {
font: normal 1em Impact,Georgia,serif;
color: #999999:
}
1.
Primer elemento de la lista
ordenada
2.
Segundo elemento de la lista
ordenada
3.
Tercer elemento de la lista
ordenada
3.
Reseteamos el estilo del elemento p que tenemos dentro de cada elemento li de
la lista
ol p {
font: normal
.7em Arial,Helvetiva,sans-serif;
color:#333333;
}
Ahora la lista
quedará con los números cambiados y el texto de cada item de acorde con la
fuente especificada:
1.
Primer elemento de la
lista ordenada
2.
Segundo elemento de la
lista ordenada
3.
Tercer elemento de la
lista ordenada
4.
Damos estilo al fondo de los números
Ahora que tenemos
los números en un formato diferente al resto del texto y con la fuente que
queremos podemos darle, por ejemplo, un color de fondo. Al hacer esto no hay
que olvidar eliminar el margen de los elementos <ol> y < p> y poner
el adecuado al elemento <li> para conseguir la alineación del texto,
fondo y números. Todo junto quedaría:
ol {
background:
#333333;
margin:
0px;
padding:
0px;
font: bold
1em Impact,Georgia,serif;
color:
#999999;
}
ol p {
margin: 0px;
padding: 3px
0px;
font: normal
.7em Arial,Helvetiva,sans-serif;
color:#333333;
}
li {
background:
#ffffff;
margin: 0 0
0 30px;
padding-left: 5px;
}
Este será el
resultado:
1.
Primer elemento de la lista ordenada
2.
Segundo elemento de la lista ordenada
3.
Tercer elemento de la lista ordenada
Ahora podemos seguir haciendo cambios, por ejemplo,
añadir una imagen de fondo para los números y cambiar la numeración a
alfabética en minúscula:
ol {
list-style-type: lower-alpha;
background:
url("images/imagen.png") repeat-y scroll left top transparent;
margin:
0px;
padding:
10px 0;
font:
normal 1em Impact,Georgia,serif;
color:
#999999;
}
ol p {
margin: 0px;
padding: 3px
0px;
font: normal
.7em Arial,Helvetiva,sans-serif;
color:#333333;
}
li {
background:
transparent;
margin-left:
50px;
padding-lef: 20px;
}
Con la imagen de
fondo la lista ordenada queda de este modo:
a.
Primer elemento de la lista ordenada
b.
Segundo elemento de la lista ordenada
c.
Tercer elemento de la lista ordenada
Como ves, las
posibilidades que nos brindan las hojas de estilo css son practicamente
infinitas. Estos son solo algunos ejemplos de lo que se puede hacer para
cambiar el estilo de los números de las listas numeradas (ol - listas
ordenadas).
Eliminar
el punto después del número
Me han hecho una
pregunta en los comentarios sobre cómo quitar el punto que aparece después de
los números o letras de una lista ordenada. He investigado un poco y
directamente no se puede, o al menos no he encontrado cómo hacerlo. Lo que se
puede hacer es dar algunos rodeos, por ejemplo, quitar todos los números y
luego ponerlos en cada item de la lista. Esto se puede hacer por ejemplo con el
siguiente código css (no probado en todos los navegadores, pero debería
funcionar):
ol {
counter-reset: item;
list-style-type: none;
}
li { display: block; }
li:before {
content:
counter(item) " ";
counter-increment: item
}
Si en lugar del
punto quieres poner otro elemento, por ejemplo un paréntesis ), se cambiaría:
li:before {
content:
counter(item) ") ";
counter-increment: item
}
* estilos para cajas de texto.
Las cajas de texto presentan varias limitaciones en cuanto a su diseño clasico. Para empezar, el tamaño de las mismas viene definido mediante el atributo size="n", y mediante diferentes valores de n podemos aumentar o disminuir la anchura de la caja. Pero estas unidades de medida no son todo lo exactas que a veces podemos necesitar, ya que el aumento de una unidad en el valor de n se traduce en un aumento de anchura de 6 - 7 píxeles, que puede ser excesivo margen para nustro gusto, por ejemplo si trabajamos en una pagina en que estamos condicionados a diseñar "al píxel".
Existen otras muchas limitaciones a la hora de trabajar con cajas de texto: color de fondo de la caja, que siempre por defecto es blanco, color del texto (negro), tamaño y familia de fuente, altura de la caja, alineación del texto dentro de ella (a la izquierda), etc. Todas ellas podemos adaptarlas a nuestras necesidades mediante hojas de estilo, pero sólo se veran así en I. Explorer, ya que en Nestcape apareceran con el formato clasico ( y esto nos vale para todo lo que digamos en adelante de hojas de estilo en formularios).
Las cajas de texto presentan varias limitaciones en cuanto a su diseño clasico. Para empezar, el tamaño de las mismas viene definido mediante el atributo size="n", y mediante diferentes valores de n podemos aumentar o disminuir la anchura de la caja. Pero estas unidades de medida no son todo lo exactas que a veces podemos necesitar, ya que el aumento de una unidad en el valor de n se traduce en un aumento de anchura de 6 - 7 píxeles, que puede ser excesivo margen para nustro gusto, por ejemplo si trabajamos en una pagina en que estamos condicionados a diseñar "al píxel".
Existen otras muchas limitaciones a la hora de trabajar con cajas de texto: color de fondo de la caja, que siempre por defecto es blanco, color del texto (negro), tamaño y familia de fuente, altura de la caja, alineación del texto dentro de ella (a la izquierda), etc. Todas ellas podemos adaptarlas a nuestras necesidades mediante hojas de estilo, pero sólo se veran así en I. Explorer, ya que en Nestcape apareceran con el formato clasico ( y esto nos vale para todo lo que digamos en adelante de hojas de estilo en formularios).
Ejemplos.-
<form>
<input type="Text" style="width:100px;height:20px;background-color:red;color:yellow;font-size:10pt; font-family:Verdana;text-align:center;">
</form>
<form>
<input type="Text" style="width:100px;height:20px;background-color:red;color:yellow;font-size:10pt; font-family:Verdana;text-align:center;">
</form>
que nos da:
<form>
<input type="Text" style="width:200px;height:50px;background-color:yellow;color:blue;font-size:14pt;font-family:
Comic Sans MS;text-align:right;padding-right:10px;">
</form>
</form>
|
<form>
<input type="text"
style="width:70px;height:30px;font-size:12pt;font-family:Helvetica;font-weight:bold;
color:green;border-width:thin;border-style:solid;border-color:green;background-image:url(images/1.jpg);">
</form>
color:green;border-width:thin;border-style:solid;border-color:green;background-image:url(images/1.jpg);">
</form>
que nos da:
Los atributos de CSS que se
manejan son:
- width, que fija la anchura de la
caja.
- height, que fija la altura de la
caja.
- background, que determina el color de
fondo, y cuyo valor puede venir dado en su nombre web en inglés o como
formato hexadecimal.
- color, que define el color de la
fuente, y cuyo valor puede venir dado en su nombre web en inglés o como
formato hexadecimal.
- font-family, que fija el tipo de la
fuente.
- text-align, que define la alineación
del texto en la caja.
- padding-right (left / top/
bottom),
que fija el margen entre el extremo derecho (izquierdo / superior
/inferior) de la caja y el texto que contiene.
- border-width (thin / medium
/ thick / none),
que define el ancho del borde.
- border-style (none / solid /
double / groove / ridge / inset / outset), que fija el estilo del
borde.
- border-color, que define el color del
borde.
- background-image, que establece una imagen
de fondo para la caja de texto.. Este atributo no es soportado por
Nestcape 4x en ninguno de los elementos de formulario, y simplemente lo
ignora.
Y de igual forma se pueden usar
todos aquellos atributos CSS que consideremos necesarios. En estos ejemplos
Nestcape 4x sólo aceptaría el tamaño de la fuente y el tipo de esta, adaptando
la altura de la caja a la fuente, y los bordes los pintara aparte de la caja,
como un elemento independiente, con lo que el resultado no es el deseado.
¿Cómo incrustar una imagen en una hoja de estilo?
Si se fijan en el código
anterior, hay cuatro partes fundamentales: en primer lugar, la referencia a la
imagen parte como todas: url(, pero después de eso viene lo importante:
1.
El tipo de URL no es http://,
sino data:
2.
En segundo lugar, debemos
indicar el tipo de contenido o mime type, en este caso, image/png para
una imagen en formato PNG
3.
Tercero: cómo está codificada
la información… claro, no se trata de abrir la imagen con el bloc de notas y
pegar en binario… no, no, no. En este caso, se ha utilizado base64… la verdad
es que no tengo ni idea si habrán otras codificaciones compatibles
4.
Finalmente, la información de
la imagen, codificada; para codificar un archivo en base64 pueden hacerlo a
través de este codificador/decodificador
Base64 Online. Como resultado, tendrán el mismo archivo que
subieron pero representado de otra forma, pero codificado en base64
Parrafos de CSS
CSS define numerosas propiedades
para establecer la apariencia del texto y de la letra
utilizada en el texto. A pesar de
que no dispone de tantas posibilidades como los lenguajes
y programas específicos para
crear documentos impresos, CSS permite aplicar estilos
complejos y muy variados al texto
de las páginas.
La propiedad básica que define
CSS relacionada con la tipografía se denomina fontfamily
y se utiliza para indicar el tipo
de letra con el que se muestra el texto.
Propiedades de
Fuentes de Estilo
|
font-family
|
Tipo de letra
|
|
Valores
|
((
<nombre_familia> | <familia_generica> ) (,<nombre_familia>
|<familia_generica>)* ) | inherit
|
|
Se aplica a
|
Todos los
elementos
|
|
Valor inicial
|
Depende del
navegador
|
|
Descripción
|
Establece el
tipo de letra utilizado para el texto
|
El tipo de letra del texto se
puede indicar de dos formas diferentes:
▪ Mediante el nombre de una familia
tipográfica: en otras palabras, mediante el
nombre del tipo de letra, como
por ejemplo “Arial”, “Verdana”, “Garamond”, etc.
▪ Mediante el nombre genérico de
una familia tipográfica: los nombres genéricos
no se refieren a ninguna fuente
en concreto, sino que hacen referencia al estilo
del tipo de letra. Las familias
genéricas definidas son serif (tipo de letra similar a
Times New Roman), sans-serif
(tipo Arial), cursive (tipo Comic Sans), fantasy
(tipo Impa ct) y monospace (tipo Courier New).
Los navegadores muestran el texto
de las páginas web utilizando los tipos de letra instaladosen el ordenador del
propio usuario.
No hay comentarios:
Publicar un comentario