Documentos de Académico
Documentos de Profesional
Documentos de Cultura
p {
color:blue;
text-align:center;
}
-->
</style>
</head>
<!-- cuerpo de la pgina -->
<body>
<!-- ttulo de la pgina -->
<h2>Hojas de estilo en cascada</h2>
<!-- primer prrafo -->
<p>Con la etiqueta style podemos
disear nuestras pginas webs.</p>
<!-- segundo prrafo -->
<p>Esta tcnica de diseo web es
muy flexible y potente para el
webmaster.</p>
</body>
</html>
En el cdigo anterior tenemos un documento html con un ttulo y dos prrafos en el cuerpo de
la pgina. En su cabecera hemos definido un diseo para el documento, que hemos escrito en
cdigo css dentro de la etiqueta cerrada <style>. El atributo type="text/css" es opcional
ponerlo para que el navegador sepa de que tipo de cdigo se trata.
Observa tambin que hemos metido el contenido de la etiqueta <style> dentro de los
smbolos de comentario html. La razn de esto es porque hay navegadores antiguos que
no soportan esta etiqueta; entonces, al encontrarse con este cdigo lo tomar como
comentarios html y as no lo mostrar en nuestra pgina web.
Es recomendable que escribas el cdigo anterior en tu blog de notas. Empieza escribiendo
primero la estructura html; despus sigue por el cuerpo de la pgina y, finalmente, por el ttulo
de la pgina y la etiqueta <style>.
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 conexin o enlace
entre la hoja de estilo en cascada y el documento html.
<html>
<head>
<title>Mi pgina web con diseo</title>
<!-- hacemos la conexin al documento css -->
<link href="midiseo.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<h2>Hojas de estilo independientes</h2>
Es hora de empezar a conocer el lenguaje css; o tambin llamado lenguaje de hojas de estilo
en cascada. Para ello vamos a hacerlo de forma prctica. Se propondr cdigos de trabajo
para practicar, y asimilar as todos los conceptos. A partir de los cdigos de trabajo, irs
cambiando valores, aadiendo declaraciones, etc...
Para comenzar, abre esta pgina html con la que vamos a trabajar en una ventana/pestaa
nueva, copia el cdigo, pgalo en tu blog de notas y gurdalo en tu disco duro con el formato
html. Vamos a introducirnos en el diseo modificando las propiedades de los prrafos Si abres
el archivo que has guardado con tu navegador vers que la pgina consta de un ttulo y dos
prrafos.
En primer lugar, nos centraremos en los prrafos; por ello, escribiremos el selector css para
prrafos y sus llaves. En el siguiente cdigo puedes ver como se escribe.
<style type="text/css">
p {
}
</style>
La primera declaracin que escribamos ser para cambiar el color del texto de los prrafos.
Esta declaracin 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 pgina ha cambiado a color azul, tal y como hemos
puesto como valor en la propiedad color para el selector p
font-family
font-size
font-weight
text-align
line-height
Por ejemplo, el siguiente cdigo nos permite disear una pgina en la que tenemos un ttulo y
un prrafo. En concreto, presenta el texto en color rojo para el ttulo, y naranja para el
prrafo. Adems, el prrafo tiene el texto justificado y un interlineado grueso. Tambin, le
daremos al ttulo un tipo de letra arial y le cambiaremos el tamao.
h1 {
color:red;
font-family:arial;
font-size:20px;
}
p {
color:orange;
text-align:justify;
line-height:18px;
font-size:12px;
}
/*
/*
/*
/*
Hay propiedades cuyo valor es un tamao, como el tamao del texto (font-size) o el tamao
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.
El cdigo presentara as el texto en una pgina:
list-style-image
list-style-position
display
Por defecto, en las listas ordenadas cada elemento viene identificado por un nmero por
defecto. Con la propiedad list-style-type podemos cambiar esto y hacer que la
ordenacin sea alfabtica o mediante numeracin romana. Los valores que puede adoptar
esta propiedad son: decimal (por defecto), lower-alpha, upper-alpha, lower-roman y
upper-roman.
imagen. Para ello tenemos que utilizar la propiedad list-style-image. Solo sirve para
listas desordenadas como es lgico.
ul {
list-style-image:url("imagenes/rombo.gif");
}
El cdigo anterior nos habilitara una imagen como marcador en todas las listas desordenadas
de nuestras pginas. 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
parntesis, el destino del archivo a enlazar.
Por ejemplo, hay desarrollos de diseos que no son muy complejos, entonces bastara para
implementar color dndole valores a la propiedad color mediante el nombre del color en
cuestin. Trabajando en diseos complejos no podramos aplicar esta clase de valores.
La forma ms simple de aplicar color al texto de un elemento; como puede ser un prrafo o
una lista, es estableciendo como valor el nombre (en ingls) del color que deseemos
aplicar a la propiedad color. Por ejemplo, en la declaracin color:blue; estableceramos el
color azul para el texto.
La segunda forma de controlar el color del texto es aplicando valores hexadecimales al
color. Esta nueva forma de implementar valores es ms precisa que la primera, y est
destinada a conseguir mayor precisin en el color que deseamos establecer. Como ejemplo,
para introducirnos, tenemos la siguiente declaracin que establece el color verde para el texto:
color:#00FF00;.
Su funcionamiento es el siguiente: se trata de tres pares de nmeros; que miden la catidad
de color primario que se aplicar. El primer par de nmeros corresponde al color rojo, el
pr de nmeros del medio corresponde al color verde, y el ltimo par de nmeros al
color azul. Mezclando estos tres, en mayor o menor grado, podemos crear cualquier color.
paramtrica
rojo
red
#FF0000
rgb(255,0,0)
rgb(100%,0%,0%)
lima
lime
#00FF00
rgb(0,255,0)
rgb(0%,100%,0%)
azul
blue
#0000FF
rgb(0,0,255)
rgb(0%,0%,100%)
negro
black
#000000
rgb(0,0,0)
rgb(0%,0%,0%)
blanco
white
#FFFFFF
rgb(255,255,255) rgb(100%,100%,100%)
amarillo
yellow
#FFFF00
rgb(255,255,0)
rgb(100%,100%,0%)
celeste
aqua
#00FFFF
rgb(0,255,255)
rgb(0%,100%,100%)
rosa
pink
#FFC0CB
rgb(255,192,203) rgb(100%,75%,80%)
morado
purple
#800080
rgb(128,0,128)
rgb(50%,0%,50%)
Estos son solo algunos ejemplos, puedes acceder a una completa paleta de colores a travs de
este enlace.
border-spacing
border-style
background-color
padding
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 separacin entre ellas,
podemos controlar la distancia de la separacin de las celdas. Para ello nos valdremos de
la propiedad border-spacing. Los valores que tomar esta propiedad sern cantidades en
pxeles.
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 prxima leccin nos
centraremos en las distintas unidades que podemos manejar con las hojas de estilo en
cascada.
Tambin 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 leccin 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 continuacin los tipos y sus caractersticas:
td {
border-style:groove;
background-color:orange;
padding:4px;
}
Tenemos una tabla con celdas normales y de encabezados. Hemos escrito en el cdigo
diferentes valores para el estilo del borde; en concreto, tenemos doble trazo para el borde
de la tabla, uno slido para los encabezados y otro de bajo relieve para las celdas normales.
Obversa tambin 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
declaracin border-spacing:12px; ubicada en el selector table. Esta declaracin la
heredarn las celdas tambin. Por ltimo hemos utilizado la declaracin padding:4px; en el
selector td para dejar un margen entre el borde de las celdas y su contenido.
En la figura 11 se muestra el resultado del diseo que implementara el cdigo anterior:
Los identificadores
Con los identificadores podemos aplicar un diseo exclusivo para una determinada
etiqueta dentro de las que haya en nuestro cdigo html. Por ejemplo, si queremos poner en
negrita el primer prrafo, bastara con identificar con un nombre a la etiqueta <p> del primer
prrafo y aadir un identificador al selector del cdigo css.
Para identificar un determinado elemento en el cdigo html, necesitamos darle un nombre
por medio del atributo id. Posteriormente, necesitamos acceder a este elemento desde el
cdigo css para aplicarle el diseo. Esto se hace a travs del selector: tenemos que escribir
el nombre de la etiqueta seguido del smbolo # y del nombre que pusimos en el atributo
id.
Veamos un cdigo de ejemplo:
Cdigo html:
<p id="EnNegrita">
Prrafo 1</p>
<p>Prrafo 2</p>
<p>Prrafo 3</p>
Cdigo css:
p#EnNegrita {
font-weight:bold;
}
Observa como hemos includo el atributo id en el cdigo html; y como hemos pasado su valor
al cdigo css, incluyndolo en el selector. Al ser un identificador tenemos que anteponerle
la almohadilla para indicarlo a la hoja de estilos. El cdigo anterior nos habilitara lo
siguiente en el navegador:
Las clases
Aunque los selectores nos ofrecen ms flexibilidad a la hora de disear, probablemente te
habrs dado cuenta que, por s solos, no son suficientes: qu pasa si necesito agrupar
distintos grupos de prrafos con estilos diferentes? Para ello tenemos las clases.
Las clases son similares a los identificadores, aunque en vez de identificar a un solo elemento
html, nos identifica a un grupo de elementos. Esto nos permite dar estilo a varios elementos
de la nisma etiqueta dentro de una pgina.
color:fuchsia;
}
Para implementar clases, existen algunas diferencias respecto a la implementacin de
identificadores. En primer lugar se utiliza, en el cdigo html, el atributo class para
identificar un elemento. En el selector del cdigo css, para pasar el valor del atributo
class, ponemos un punto en vez de una almohadilla.
Otra cosa aparte es cuando tenemos el desarrollo de la pgina web muy avanzado. En este
caso suele ocurrir que se genera mucho cdigo css; quedando una hoja de estilos
largsima. El problema surge cuando tenemos que localizar un determinado selector para
editar los valores de sus propiedades.
Una solucin muy til es usar la funcin de bsqueda de tu editor de texto (notepad en
caso de windows). Si, por ejemplo, queremos localizar el selector table.miembros, solo
tenemos que acudir a la funcin bsqueda y poner el valor del atributo class para ese
elemento table.