Documente Academic
Documente Profesional
Documente Cultură
El consorcio que regula los estandars para la web recomienda separar el contenido de
una página de su diseño. El contenido se genera con html (tienes un curso de html
aquí), y el diseño toma forma mediante código css. Estas siglas significan hojas de
estilo en cascada, y su misión es la de proporcionar un diseño uniforme para todo
nuestro sitio web.
Esto proporciona una ventaja muy importante: a la hora de realizar cambios en el diseño
de nuestra web, no necesitamos cambiar el código de cada una de las páginas que
tengamos; sinó que bastará con cambiar solo el código css para que haga efecto en
todos los documentos de nuestro sitio web.
Lo primero que se verá en este curso será la sintaxis de este lenguaje; después veremos
las diferentes formas de implementar esta tecnología en nuestra web y, por último,
nos centraremos en asimilar los diferentes elementos para controlar nuestro diseño.
Para escribir correctamente hojas de estilo en cascada necesitamos saber sus reglas
ortográficas. La consecuencia inmediata es la de poder identificar las partes que
componen este lenguaje.
p {
color:blue;
font-size:14pt;
}
No cabe duda de las ventajas de preformatear nuestras hojas de estilo; esto nos ayuda a
identificar las propiedades y valores rápidamente, así cómo las distintas
declaraciones.
Hay tres formas de implementar el código css en nuestros documentos html. Las
primera es estableciendo un atributo en la propia etiqueta html que deseemos darle
un estilo. La segunda es en la cabecera de nuestra página web, a través de la
etiqueta <style>. La tercera forma es la más flexible, se trata de un documento
independiente en donde definir el diseño.
Como ves, el valor que debe de tomar el atributo style son las declaraciones de la
sintaxis css necesarias para dar el diseño deseado.
Con la segunda forma de utilizar código css, que hemos mencionado antes, podemos
darle diseño a todo un documento html de forma integral. Para ello, escribiremos el
código css en la cabecera de nuestra página web; dentro de la etiqueta <style>
<html>
<!-- cabecera de la página -->
<head>
color:red;
}
p {
color:blue;
text-align:center;
}
-->
</style>
</head>
<!-- cuerpo de la página -->
<body>
</body>
</html>
Observa también que hemos metido el contenido de la etiqueta <style> dentro de los
símbolos de comentario html. La razón de esto es porque hay navegadores antiguos
que no soportan esta etiqueta; entonces, al encontrarse con este código lo tomará
como comentarios html y así no lo mostrará en nuestra página web.
Para la tercera forma de implementar css, vamos a utilizar una nueva etiqueta html: la
etiqueta <link>. Se trata de una etiqueta abierta, que sirve para establecer una
conexión o enlace entre la hoja de estilo en cascada y el documento html.
<html>
<head>
4
</head>
<body>
</body>
</html>
El enlace que establece la conexión entre los dos archivos; el html y el css, se realiza a
través del atributo html href="midiseño.css" que se encuentra en la etiqueta <link>.
El valor que toma el atributo href es el destino de la hoja de estilo. En la figura 2
podemos apreciarlo más gráficamente.
No cabe duda que la forma más ventajosa es la última que hemos visto; en un solo
documento definimos todo el diseño de nuestra web, de manera que para cambiar el
aspecto de todo un web tan solo tenemos que acudir al documento css. Queda pro
ver otra forma de implementación css, pero no lo veremos por ahora porque es para
trabajar de forma más avanzada.
Para comenzar, abre esta página html con la que vamos a trabajar en una
ventana/pestaña nueva, copia el código, pégalo en tu blog de notas y guárdalo en tu
disco duro con el formato html. Vamos a introducirnos en el diseño modificando las
propiedades de los párrafos Si abres el archivo que has guardado con tu navegador
verás que la página consta de un título y dos párrafos.
En primer lugar, nos centraremos en los párrafos; por ello, escribiremos el selector
css para párrafos y sus llaves. En el siguiente código puedes ver como se escribe.
<style type="text/css">
p {
</style>
La primera declaración que escribamos será para cambiar el color del texto de los
párrafos. Esta declaración se escribe dentro de las llaves. Su escritura es:
color:blue;
<style type="text/css">
p {
color:blue; /* color del texto */
}
</style>
La figura 3 muestra como el texto de la página ha cambiado a color azul, tal y como
hemos puesto como valor en la propiedad color para el selector p
6
Con tan solo cambiar el valor de la propiedad del color al selector de párrafos, podemos
cambiar el color de los párrafos de nuestra página web. Experimenta con otros valores
como green, orange, yellow o purple.
En la lección anterior hemos visto como darle color al texto. Por supuesto, el diseño no
se limita solo alto, en vez de eso, podemos controlar hasta el más mínimo detalle en
cuanto a la presentación del texto se refiere.
Por ejemplo, el siguiente código nos permite diseñar una página en la que tenemos un
título y un párrafo. En concreto, presenta el texto en color rojo para el título, y
naranja para el párrafo. Además, el párrafo tiene el texto justificado y un
interlineado grueso. También, le daremos al título un tipo de letra arial y le
cambiaremos el tamaño.
h1 {
color:red; /* color rojo del texto */
font-family:arial; /* tipo de letra arial */
font-size:20px; /* tamaño de letra 24 pixels */
}
7
p {
color:orange; /* color rojo del texto */
text-align:justify; /* texto justificado */
line-height:18px; /* interlineado grueso */
font-size:12px; /* tamaño de letra 24 pixels */
}
Hay propiedades cuyo valor es un tamaño, como el tamaño del texto (font-size) o el
tamaño del interlineado (line-height). Para estas magnitudes utilizaremos una
cantidad en pixeles. El atributo text-align tiene cuatro valores: left para
alinear a la izquierda, right para alinear a la derecha, center para centrar el texto y
justify para ajustarlo al ancho de la ventama.
Con las hojas de estilo podemos diseñar nuestras listas de forma muy flexible. Por
ejemplo, no estaremos limitados a listas verticales; sino que podemos transformarlas en
listas horizontales.
Esto es útil para hacer barras de navegación que respeten los estándares web. Así, se
pueden meter una serie de enlaces de navegación en una lista y transformar ésta en una
lista horizontal.
Antes de nada, y como es costumbre, veamos las propiedades para diseñar listas:
Por defecto, en las listas ordenadas cada elemento viene identificado por un número por
defecto. Con la propiedad list-style-type podemos cambiar esto y hacer que la
ordenación sea alfabética o mediante numeración romana. Los valores que puede
adoptar esta propiedad son: decimal (por defecto), lower-alpha, upper-alpha,
lower-roman y upper-roman.
8
En cuanto a los valores que pueden tener los elementos de una lista desordinada para la
propiedad list-style-type son: disc (por defecto), circle y square. Existe
otro valor que poseen las dos clases de listas, se trata de none, y sirve para que no
aparezca símbolo alguno en cada elemento.
También tenemos la posibilileco usar ninguno de los marcadores vistos, sino el que
nosotros queramos por medio de una imagen. Así, es posible establecer como
marcador una imagen. Para ello tenemos que utilizar la propiedad list-style-
image. Solo sirve para listas desordenadas como es lógico.
ul {
list-style-image:url("imagenes/rombo.gif");
}
El código anterior nos habilitaría una imagen como marcador en todas las listas
desordenadas de nuestras páginas. El valor que toma la propiedad indica que se use la
imagen rombo.gif situada en la carpeta imagenes. Para poner un valor, siempre hay que
poner "url" y, entre paréntesis, el destino del archivo a enlazar.
Por último decir que podemos mostrar listas en las que los elementos se dispongan
de forma horizontal. para ello nos valdremos de la propiedad display, dándole un
valor de inline. Existen muchas más propiedades para dar diseño a las listas, pero
aún no las veremos para no complicar el aprendizaje.
9
Estos elementos tienen un denominador común: albergan dentro de ellos texto, el color
del texto de los diversos elementos se puede manipular por medio de las hojas de estilo
en cascada.
Existen muchas formas de implementar color al texto; cada una tiene sus ventajas y
sus incovenientes. La razón por la que se puede aplicar color al texto de diversas
formas, es porque hay circunstancias a la hora de diseñar que requieren una forma
de implementación u otra.
Por ejemplo, hay desarrollos de diseños que no son muy complejos, entonces bastaría
para implementar color dándole valores a la propiedad color mediante el nombre del
color en cuestión. Trabajando en diseños complejos no podríamos aplicar esta clase de
valores.
La forma más simple de aplicar color al texto de un elemento; como puede ser un
párrafo o una lista, es estableciendo como valor el nombre (en inglés) del color que
deseemos aplicar a la propiedad color. Por ejemplo, en la declaración color:blue;
estableceríamos el color azul para el texto.
La sintaxsis del valor de la propiedad empieza por unas siglas, las iniciales de cada
color que se representa: red, green y blue. Entre paréntesis ponemos los parámetros de
cada color separados por comas; el rango va de 0 a 255.
Existe una variante que consiste en poner los parámetros en tanto por ciento, en
vez de utilizar el rango de 0 a 255. Por ejemplo, podemos escribir la siguiente
declaración para poner un color rojo:rgb(100%,0%,0%);.
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.
Esta propiedad tiene dos valores: collapse y separate. El primer valor es el que
establece 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.
Figura 9. Podemos hacer colapsar los bordes para que las celdas
se adosen unas con otras.
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.
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:
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.
Por otro lado se ha puesto un espacio entre el borde de la tabla y las celdas mediante
la declaración border-spacing:12px; ubicada en el selector table. Esta
declaración la heredarán las celdas también. Por último hemos utilizado la declaración
padding:4px; en el selector td para dejar un margen entre el borde de las celdas
y su contenido.