-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 1/14
Idiomea Esto es una traduccin. Puede contener errores o estar
desfasada respecto a la versin inglesa. Traductor: Encarnacin
Quesada Ruiz (OficinaEspaola del W3C)
TUTORIAL DECSSCOMENZANDOCON HTML +CSS
Este breve tutorial est pensado para aquellas personas que
quieren comenzar a utilizar CSS y nunca han
-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 2/14
escrito una hoja de estilos CSS.No explica mucho sobre CSS. Se
centra en cmo crear un archivo HTML, un archivo CSS y cmo hacer
que los dos funcionen juntos. Una vez finalizado este tutorial,
podris leer cualquiera de los otros tutorialespara darle ms estilo
a los archivos HTML y CSS. Tambin podris utilizar un editor de HTML
o CSS, paradesarrollar sitios Web ms avanzados.
Al final del tutorial habrs hecho un archivo HTML como ste:
MiprimerapginaconestiloBienvenidoamiprimerapginaconestilo!
Notieneimgenes,perotieneestilo.Tambintieneenlaces,aunquenotellevenaningnsitio.
Deberahabermscosasaqu,perotodavanosquponer.
Creadael5deabrilde2004pormmismo.
Pginaprincipal
Meditaciones
Miciudad
Enlaces
El resultado ser una pgina HTML, con colores y formato, todo
desarrollado con CSS.
Ten en cuenta que no quiero decir que sea bonita
Las secciones como sta son opcionales. Contienen explicaciones
adicionales del cdigo HTML y CSS del ejemplo. Elsmbolo de peligro,
situado al principio, indica que se trata de un material ms
avanzado que el resto.
PASO 1: ESCRIBIR EL CDIGO HTML
Para este tutorial, te sugiero que utilices las herramientas ms
sencillas. Por ejemplo, Notepad (Windows),TextEdit (Mac) o HTML
Kit, sern suficiente. Una vez comprendido lo bsico, probablemente
se quieranutilizar herramientas ms complicadas, o incluso programas
comerciales como Style Master, Dreamweaver oGoLive. Pero para el
desarrollo de una primera hoja de estilos, es mejor no distraerse
con caractersticasavanzadas de otras herramientas.
No utilices procesadores de texto como Microsoft Word u
OpenOffice. Con ellos, normalmente segeneran archivos que los
navegadores no pueden interpretar. Para HTML y CSS, lo nico que
necesitamosson archivos en texto plano.
-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 3/14
El paso 1 consiste en abrir tu editor de texto (Notepad,
TextEdit, HTML Kit o el que desees), comenzarcon una ventana vaca y
escribir lo siguiente:
Miprimerapginaconestilo
PginaprincipalMeditacionesMiciudadEnlaces
Miprimerapginaconestilo
Bienvenidoamiprimerapginaconestilo!
Notieneimgenes,perotieneestilo.Tambintieneenlaces,aunquenotellevenaningnsitio
Deberahabermscosasaqu,perotodavanosquponer.
Creadael5deabrilde2004pormmismo.
En realidad, no es necesario escribir el cdigo: puedes copiarlo
y pegarlo directamente en un editor.
La primera lnea que aparece en el archivo HTML, le dice al
navegador el tipo de HTML (DOCTYPE significaDOCument TYPE - en
espaol: TIPO de DOCumento). En este caso, se trata de la versin
4.01 de HTML.
Las palabras que se encuentran entre < y > se llaman
etiquetas (tags) y, como puedes ver, el documento est entrelas
etiquetas y . Entre y hay espacio para diferentes tipos de
informacin que noaparecern en la pantalla. Hasta ahora, el
documento slo contiene el ttulo pero posteriormente tambin se aadir
lahoja de estilos de CSS.
El es dnde se sita el texto del documento. En un principio,
cualquier cosa que se coloque ah sermostrado, excepto el texto que
est dentro de las siguientes etiquetas , las cuales muestran el
contenidosituado en ese lugar como un comentario de referencia para
nosotros mismos. El navegador la ignorar.
De las etiquetas del ejemplo, crea una lista desordenada, es
decir, una lista en la cual los elementos no estnnumerados. La
etiqueta indica el comienzo de un elemento lista. es un prrafo. Y
es un enlace, quees lo que crea un hipervnculo.
-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 4/14
Editor mostrando el cdigo HTML.
Si quieres saber lo que significan los nombres que estn entre ,
un buen sitio para empezar es Comenzando conHTML. Realizar algunos
comentarios sobre la estructura de la pgina HTML que estamos
utilizando de ejemplo.
ul representa una lista con un hipervnculo por cada elemento.
Esto mostrar nuestro men de navegacin delsitio con enlaces a otras
pginas (ficticias) del sitio Web. Supuestamente, todas las pginas
de nuestro sitio Webtienen un men similar.
Los elementos h1 y p componen el nico contenido de esta pgina,
mientras que la firma al final (address) serla misma para todas las
pginas del sitio.
Observa que no he cerrado los elementos "li" y "p". En HTML
(pero no en XHTML), se pueden omitir las etiquetas y , que fue lo
que hice aqu, precisamente para hacer el texto ms sencillo de leer.
Pero si se prefiere puedenser aadidas.
Vamos a suponer que va a ser una pgina de un sitio Web que
tendrn varias pginas similares. Como esfrecuente en pginas Web, sta
tiene un men con enlaces a otras pginas en el sitio ficticio, un
contenidonico y una firma.
Ahora, selecciona Guardar como del men Archivo, ve hasta un
directorio/carpeta donde quierasguardar el documento (el escritorio
puede ser una opcin) y guarda el archivo como mipagina.html.
Nocierres todava el editor, lo necesitars otra vez.
Despus, abre el archivo en un navegador de la siguiente forma:
encuentra el archivo con tuadministrador de archivos (Windows
Explorer, Finder o Firefox) y haz clic, o doble clic, sobre el
archivomipagina.html. El archivo HTML debera abrirse en tu
navegador predeterminado. (Si no se abre eldocumento, abre el
navegador y arrastra el archivo sobre l).
Como puedes ver, la pgina tiene un aspecto bastante
aburrido...
-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 5/14
PASO 2: AADIR ALGUNOS COLORES
Probablemente ests viendo texto negro sobre un fondo blando,
pero esto depende de cmo est tunavegador configurado. Para que la
pgina tenga algo ms de encanto podemos aadir algunos colores.
(Dejael navegador abierto, lo utilizaremos ms tarde).
Comenzaremos con una hoja de estilo interna en el archivo HTML.
Ms adelante, pondremos el HTML yel CSS en archivos diferentes. La
separacin de estos archivos es recomendable ya que facilita la
utilizacinde la misma hoja de estilo para diferentes archivos HTML:
slo tienes que escribir la hoja de estilo una vez.Pero en este
paso, vamos a dejarlo todo en el mismo archivo.
Necesitamos aadir un elemento en el archivo HTML. La hoja de
estilo estar en el interior deese elemento. Volvamos entonces a la
ventana del editor y aadamos las siguientes cinco lneas en la
partede la cabecera del archivo:
Miprimerapginaconestilobody{color:purple;backgroundcolor:#d8da3d}
[etc.]
Las lneas que tienes que aadir estn marcadas en rojo. La primera
lnea dice que eso es una hoja de estilo yque est escrita en CSS
("text/css"). La segunda lnea indica que hemos aadido estilo al
elemento "body". Latercera lnea establece el color del texto como
morado y la siguiente lnea lo que hace es darle al fondo unaespecie
de amarillo verdoso.
Las hojas de estilo en CSS estn compuestas de reglas. Cada regla
tiene tres partes:
1. el selector (en el ejemplo sera: body), el cual le dice al
navegador la parte del documento que se ver afectada porla
regla;
2. la propiedad (en el ejemplo, 'color' y 'background-color' son
ambas propiedades), las cuales especifican qu aspectodel diseo va a
cambiarse;
3. y el valor ('purple' y '#d8da3d'), el cual da el valor para
la propiedad.
El ejemplo muestra que es posible combinar las reglas. Hemos
establecido dos propiedades, por lo que podemos tenerdos reglas
separadas:
body{color:purple}body{backgroundcolor:#d8da3d}
ya que las dos reglas van a afectar al elemento body, slo
tenemos que escribir "body" una vez, y poner juntas laspropiedades
y valores. Para obtener ms informacin sobre selectores, revisa el
captulo 2 de Lie & Bos.
El fondo del elemento body ser el fondo para todo el documento.
A los otros elementos (p, li, address)
-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 6/14
no se les ha dado ningn fondo en concreto, por lo que de forma
predeterminada no tendrn ninguno (osern transparentes). La
propiedad 'color' establece el color del texto que se encuentra en
el elementobody, pero los otros elementos que se encuentran dentro
de body heredarn ese color, a no ser que seespecifique lo
contrario. (Ms adelante aadiremos ms colores).
Ahora guarda el archivo (utiliza Guardar del men Archivo) y
vuelve a la ventana del navegador. Sihaces clic en "Actualizar", la
pgina "aburrida" que se mostraba al principio, pasar a ser una
pgina concolores (pero an sigue siendo muy aburrida). Aparte de la
lista de enlaces que se encuentra al principio, eltexto debera
tener ahora el color morado sobre un fondo de color amarillo
verdoso.
Presentacin de la pgina en el navegador tras aadirle
colores.
Los colores pueden especificarse en la CSS de formas diferentes.
El siguiente ejemplo muestra dos de ellas:por el nombre (purple) y
por el cdigo hexadecimal (#d8da3d). Hay aproximadamente 140 nombres
decolores y ms de 16 millones de colores disponibles en cdigo
hexadecimal. Agregar un toque de estilo, ofrecems informacin sobre
esos cdigos.
PASO 3: AADIR TIPO DE LETRA
Otra cosa que es muy fcil de hacer es aadir diferentes tipos de
letra para los diversos elementos de lapgina. Veamos el texto con
el tipo de letra Georgia, excepto la cabecera h1, que ir con
Helvetica.
En la Web, nunca puedes estar seguro de los tipos de letra que
los usuarios tienen en sus ordenadores,por lo que aadiremos algunas
alternativas: si Georgia no est disponible, Times New Roman o
Timestambin pueden valer, y si ninguna de esas est presente, el
navegador puede utilizar cualquier otro tipo deletra con serifs. Si
Helvetica no est, Geneva, Arial y SunSans-Regular son bastante
similares, y si ninguna deestas funciona, el navegador puede escoge
cualquier otro tipo de letra que no sea serif.
-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 7/14
Aade en el editor de texto las siguientes lneas:
Miprimerapginaconestilobody{fontfamily:Georgia,"TimesNewRoman",Times,serif;color:purple;backgroundcolor:#d8da3d}h1{fontfamily:Helvetica,Geneva,Arial,SunSansRegular,sansserif}
[etc.]
Si guardas otra vez el archivo y haces clic en "Actualizar" en
el navegador, deberan aparecer tipos de letradiferentes para el
encabezado y para el otro texto.
Ahora el texto tiene un tipo de letra diferente al del
encabezado.
PASO 4: AADIR UNA BARRA DE NAVEGACIN
-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 8/14
La lista que aparece al principio de la pgina HTML ser ms
adelante un men de navegacin. Algunos sitiosWeb tienen un men al
principio o en un lado de la pgina, y ste debera tenerlo tambin.
Pondremos uno ala izquierda, ya que es ms interesante ponerlo ah
que arriba
El men ya est en la pgina HTML. Es la lista que se encuentra al
principio. Los enlaces que tieneno funcionan ya que nuestro "sitio
Web", hasta el momento, slo tiene una pgina, pero eso no
esimportante ahora. Por supuesto, en un sitio Web real no debera
haber ningn enlace roto.
Tenemos que mover la lista a la izquierda y colocar el resto del
texto un poco ms hacia la derecha, paradejar espacio para el men.
Las propiedades de CSS que vamos a utilizar son 'padding-left'
(para mover eltexto del elemento body) y 'position' (para mover el
men).
Hay otras formas de hacerlo. Si buscas column y layout en la
pgina Aprender CSS, encontrarsalgunas plantillas listas para ser
utilizadas. Pero, por el momento, sta est bien.
En la ventana del editor, aade las siguientes lneas al archivo
HTML:
Miprimerapginaconestilobody{paddingleft:11em;fontfamily:Georgia,"TimesNewRoman",Times,serif;color:purple;backgroundcolor:#d8da3d}ul.navbar{position:absolute;top:2em;left:1em;width:9em}h1{fontfamily:Helvetica,Geneva,Arial,SunSansRegular,sansserif}
[etc.]
Si guardas otra vez el archivo y lo actualizas en el navegador,
deberas tener la lista de enlaces a la izquierdadel texto
principal. Ahora el resultado parece mucho ms interesante
verdad?
-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 9/14
El texto principal se ha movido hacia la derecha y la lista de
enlaces est ahora a la izquierda en lugar de estar arriba.
'position: absolute' indica que el elemento ul est situado
independientemente de cualquier texto que est antes odespus en el
documento. 'left' y 'top' indican cul es la posicin. En este caso,
est a 2em de la parte de arriba de laventana y a 1em del lado
izquierdo.
'2em' significa 2 veces el tamao del tipo de letra actual. Por
ejemplo, si el men se muestra con un tipo de letra de12 puntos,
entonces '2em' es 24 puntos. 'em' es una unidad muy til en CSS ya
que se puede adaptar automticamenteal tipo de letra que el usuario
est utilizando. La mayora de los navegadores tienen un men para
aumentar o disminuirel tamao de letra: puedes probarlo y ver la
forma en la que el men aumenta de tamao a la vez que lo hace el
tipo deletra, lo que no ocurrira si hubiramos utilizado un tamao en
pxeles.
PASO 5: DAR ESTILO A LOS ENLACES
El men de navegacin todava parece una lista en lugar de un men.
Vamos a cambiar su aspecto.Quitaremos los puntos que indican los
diferentes elementos de la lista y moveremos los elementos a
laizquierda, donde estaban antes los puntos. Tambin le daremos a
cada elemento un fondo blanco y uncuadrado negro. (Por qu? Por nada
en particular, slo porque podemos hacerlo).
No hemos especificado el color de los enlaces, vamos a aadirlo
tambin: utilizaremos el azul paraaquellos enlaces que el usuario no
ha visitado todava, y morado para los enlaces que ya ha
visitado:
Miprimerapginaconestilobody{paddingleft:11em;
-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 10/14
fontfamily:Georgia,"TimesNewRoman",Times,serif;color:purple;backgroundcolor:#d8da3d}ul.navbar{liststyletype:none;padding:0;margin:0;position:absolute;top:2em;left:1em;width:9em}h1{fontfamily:Helvetica,Geneva,Arial,SunSansRegular,sansserif}ul.navbarli{background:white;margin:0.5em0;padding:0.3em;borderright:1emsolidblack}ul.navbara{textdecoration:none}a:link{color:blue}a:visited{color:purple}
[etc.]
Normalmente, los navegadores muestran los hipervnculos
subrayados y con color. Los colores son parecidos a los
queespecificamos aqu: azul para enlaces a pginas que no has
visitado todava (o visitaste hace mucho tiempo), morado parapginas
que ya has visitado.
En HTML, los hipervnculos se crean con elementos , por lo que
para especificar el color, necesitamos aadiruna regla de estilo
para "a". Para diferenciar los enlaces visitados de los no
visitados, CSS proporciona dos "pseudo-classes" (:link y :visited).
Se llaman pseudo-classes para distinguirlas de los atributos de
clase, que aparecendirectamente en HTML, por ejemplo,
class="navbar".
PASO 6: AADIR UNA LNEA HORIZONTAL
El ltimo elemento a aadir en la hoja de estilo es una regla
horizontal para separar el texto de la firma quese encuentra al
final. Utilizaremos 'border-top' para aadir una lnea punteada
encima del elemento:
Miprimerapginaconestilo
-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 11/14
body{paddingleft:11em;fontfamily:Georgia,"TimesNewRoman",Times,serif;color:purple;backgroundcolor:#d8da3d}ul.navbar{liststyletype:none;padding:0;margin:0;position:absolute;top:2em;left:1em;width:9em}h1{fontfamily:Helvetica,Geneva,Arial,SunSansRegular,sansserif}ul.navbarli{background:white;margin:0.5em0;padding:0.3em;borderright:1emsolidblack}ul.navbara{textdecoration:none}a:link{color:blue}a:visited{color:purple}address{margintop:1em;paddingtop:1em;bordertop:thindotted}
[etc.]
Ahora, ya hemos terminado de darle estilo a la pgina. Lo
siguiente es ver cmo se pone la hoja de estilo enun archivo
diferente para que de esta forma otras pginas puedan utilizar el
mismo estilo.
PASO 7: PONER LA HOJA DE ESTILO EN UN ARCHIVOSEPARADO
Ahora tenemos un archivo HTML con una hoja de estilo en su
interior. Pero si nuestro sitio crecedesearemos aadir ms pginas que
compartan el mismo estilo. Hay un mtodo ms adecuado que copiar
lahoja de estilo dentro de cada pgina y que es: colocar la hoja de
estilo en un archivo separado, haciendo quetodas las pginas estn
enlazadas a esa hoja.
Para separar la hoja de estilo del archivo HTML, necesitamos
crear otro archivo de texto, que est vaco.
-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 12/14
Puedes escoger "Nuevo" del men Archivo del editor para crear una
ventana vaca.Despus, corta y pega en la nueva ventana todo lo que
hay dentro del elemento del archivo
HTML. No copies las etiquetas y . stas pertenecen a HTML, no a
CSS. En la nueva ventanadel editor, deberas tener la hoja de estilo
completa:
body{paddingleft:11em;fontfamily:Georgia,"TimesNewRoman",Times,serif;color:purple;backgroundcolor:#d8da3d}ul.navbar{liststyletype:none;padding:0;margin:0;position:absolute;top:2em;left:1em;width:9em}h1{fontfamily:Helvetica,Geneva,Arial,SunSansRegular,sansserif}ul.navbarli{background:white;margin:0.5em0;padding:0.3em;borderright:1emsolidblack}ul.navbara{textdecoration:none}a:link{color:blue}a:visited{color:purple}address{margintop:1em;paddingtop:1em;bordertop:thindotted}
Elige Guardar como del men Archivo, comprueba que est en el
mismo directorio/carpeta que elarchivo mipagina.html, y guarda la
hoja de estilo como miestilo.css.
Vuelve a la ventana que muestra el cdigo HTML. Borra todo lo que
hay desde la etiqueta hasta, ambas inclusive, y reemplzalo por un
elemento de la siguiente forma:
Miprimerapginaconestilo
[etc.]
-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 13/14
De esta forma, se le indicar al navegador que la hoja de estilo
se encuentra en el archivo llamado"miestilo.css". Al no
especificarse ningn directorio, el navegador mirar en el mismo
directorio en el que seencuentra el archivo HTML.
Si has guardado el archivo HTML y lo has actualizado en el
navegador, no deberas apreciar ningncambio en el aspecto de la
pgina. sta sigue guardando el mismo estilo, pero ahora viene
establecido por elarchivo externo.
Resultado final
El siguiente paso es poner ambos archivos, mipagina.html y
miestilo.css, en vuestro sitio Web. (Quiz querisprimero cambiarlos
un poco), pero la forma de realizar esto depende de vuestro
proveedor de Internet.
MS INFORMACIN
Para ver una introduccin de CSS, consulta el captulo 2 de Lie
& Bos, o la Introduccin a CSS de Dave Raggett.Se puede obtener
ms informacin, incluido ms tutoriales, en la pgina Aprender
CSS.
IDIOMEA
Deutsch English Espaol Franais Bahasa Indonesia Italiano
Nederlands Polski Portugus (Brasileiro) Slovenina
Acerca de las traducciones
-
13/4/2015 ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html 14/14
ltima actualizacin vie 10 oct 2014 14:58:26 CEST
Bert Bos, liderazgo de actividad de estiloCopyright 19942014
W3C