Tutorial Rapido de CSS 2015

7/23/2019 Tutorial Rapido de CSS 2015

1/16

El contenido de este libro as como tambin los que componen el curso de Curso de Formacin enAdministracin de la Plataforma de edicin Electrnica OJS para revistas cientficas y tcnicas, se encuentran bajo

una Licencia Creative Commons. ltima actualizacin: 20/05/2015

Centro Argentino de Informacin Cientfica y Tecnolgica (CAICYT-CONICET)Profesores: Mariana Vallejos y Matas Vlahusic

PARTE V.

TUTORIAL RPIDO DE CSS


2/16



1

Este breve tutorial est pensado para aquellas personas que quieren comenzar autilizar CSS y nunca han escrito una hoja de estilos CSS.

No explica mucho sobre CSS. Se centra en cmo crear un archivo HTML, un archivoCSS y cmo hacer que los dos funcionen juntos.

Al final del tutorial podrs hacer un archivo HTML:El resultado ser una pgina HTML, con colores y formato, todo desarrollado conCSS.

Para este tutorial, se sugiere que utilices las herramientas ms sencillas. Por ejemplo,Notepad (Windows), TextEdit (Mac) o HTML Kit, sern suficiente. Una vez comprendidolo bsico, probablemente se quieran utilizar herramientas ms complicadas, o inclusoprogramas comerciales como Style Master, Dreamweaver o GoLive. Pero para eldesarrollo 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 se generan archivos que los navegadores no pueden interpretar. ParaHTML y CSS, lo nico que necesitamos son archivos en texto plano.

El paso 1 consiste en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el quedesees), comenzar con una ventana vaca y escribir lo siguiente:

Las secciones como sta son opcionales. Contienen explicaciones adicionales delcdigo HTML y CSS del ejemplo. El smbolo de peligro, situado al principio, indica que setrata de un material ms avanzado que el resto.


3/16



2

Mi primera pgina con estilo

Pgina principalMeditacionesMi ciudadEnlaces


Bienvenido a mi primera pgina con estilo!

No tiene imgenes, pero tiene estilo.Tambin tiene enlaces, aunque no te lleven aningn sitio

Debera haber ms cosas aqu, pero todava no squ poner.

Creada el 5 de abril de 2015

por m mismo.

En realidad, no es necesario escribir el cdigo: puedes copiarlo y pegarlo directamenteen un editor.

La primera lnea que aparece en el archivo HTML, le dice al navegador el tipo de HTML(DOCTYPE significa DOCument TYPE - en espaol: TIPO de DOCumento). En este caso, se trata dela versin 4.01 de HTML.


4/16



3

Las palabras que se encuentran entre < y > se llaman etiquetas(tags) y, como puedesver, el documento est entre las etiquetas y . Entre y hay espacio para diferentes tipos de informacin que no aparecern en la pantalla.Hasta ahora, el documento slo contiene el ttulo pero posteriormente tambin seaadir la hoja de estilos de CSS.

El es dnde se sita el texto del documento. En un principio, cualquier cosaque se coloque ah ser mostrado, excepto el texto que est dentro de las siguientesetiquetas , las cuales muestran el contenido situado en ese lugar como uncomentario de referencia para nosotros mismos. El navegador la ignorar.

De las etiquetas del ejemplo, crea una lista desordenada, es decir, una lista en lacual los elementos no estn numerados. La etiqueta indica el comienzo de unelemento lista.

es un prrafo. Y es un enlace, que es lo que crea un

hipervnculo.

Editor mostrando el cdigo HTML.

.


5/16



4

ul representa una lista con un hipervnculo por cada elemento. Esto mostrar

nuestro men de navegacin del sitio con enlaces a otras pginas (ficticias) delsitio Web. Supuestamente, todas las pginas de nuestro sitio Web tienen unmen similar.Los elementos h1 y p componen el nico contenido de esta pgina, mientras

que la firma al final (address) ser la misma para todas las pginas del sitio.

Observa que no cerramos los elementos "li" y "p". En HTML (pero no en XHTML), sepueden omitir las etiquetas y
, que fue lo que hicimos aqu, precisamente parahacer el texto ms sencillo de leer. Pero si se prefiere pueden ser aadidas.Vamos a suponer que va a ser una pgina de un sitio Web que tendrn varias pginassimilares. Como es frecuente en pginas Web, sta tiene un men con enlaces a otraspginas en el sitio ficticio, un contenido nico y una firma.
Ahora, selecciona Guardar comodel men Archivo, ve hasta un directorio/carpetadonde quieras guardar el documento (el escritorio puede ser una opcin) y guarda elarchivo como mipagina.html. No cierres todava el editor, lo necesitars otra vez.

Despus, abre el archivo en un navegador de la siguiente forma: encuentra el archivocon tu administrador de archivos (Windows Explorer, Finder o Firefox) y haz clic, odoble clic, sobre el archivo mipagina.html. El archivo HTML debera abrirse en tunavegador predeterminado. (Si no se abre el documento, abre el navegador y arrastrael archivo sobre l).

Como puedes ver, la pgina tiene un aspecto bastante aburrido...

Probablemente ests viendo texto negro sobre un fondo blando, pero esto depende decmo est tu navegador configurado. Para que la pgina tenga algo ms de encantopodemos aadir algunos colores. (Deja el navegador abierto, lo utilizaremos mstarde).

Si quieres saber lo que significan los nombres que estn entre , un buen sitio para

empezar esComenzando con HTML. Realizaremos algunos comentarios sobre la estructura de la

pgina HTML que estamos utilizando de ejemplo
http://www.w3.org/MarkUp/Guide/http://www.w3.org/MarkUp/Guide/http://www.w3.org/MarkUp/Guide/http://www.w3.org/MarkUp/Guide/http://www.w3.org/MarkUp/Guide/


6/16



5

Comenzaremos con una hoja de estilo interna en el archivo HTML. Ms adelante,pondremos el HTML y el CSS en archivos diferentes. La separacin de estos archivoses recomendable ya que facilita la utilizacin de la misma hoja de estilo para diferentesarchivos 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 estaren el interior de ese elemento. Volvamos entonces a la ventana del editor y aadamoslas siguientes cinco lneas en la parte de la cabecera del archivo:


body {color: purple;background-color: #d8da3d }

[etc.]

Las lneas que tienes que aadir estn marcadas en rojo. La primera lnea dice que esoes una hoja de estilo y que est escrita en CSS ("text/css"). La segunda lnea indica

que hemos aadido estilo al elemento "body". La tercera lnea establece el color deltexto como morado y la siguiente lnea lo que hace es darle al fondo una especie deamarillo 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 por la regla;

2. lapropiedad(en el ejemplo, 'color' y 'background-color' son ambas propiedades), lascuales especifican qu aspecto del diseo va a cambiarse;

3. y el valor('purple' y '#d8da3d'), el cual da el valor para la propiedad.


7/16



6

El ejemplo muestra que es posible combinar las reglas. Hemos establecido dospropiedades, por lo que podemos tener dos reglas separadas:body { color: purple }body { background-color: #d8da3d }

Ya que las dos reglas van a afectar al elemento body, slo tenemos que escribir "body"una vez, y poner juntas las propiedades y valores. Para obtener ms informacin sobreselectores, revisa el http://www.w3.org/Style/LieBos2e/enter/.

El fondo del elemento body ser el fondo para todo el documento. A los otroselementos (p, li, address) nose les ha dado ningn fondo en concreto, por lo que deforma predeterminada no tendrn ninguno (o sern transparentes). La propiedad 'color'establece el color del texto que se encuentra en el elemento body, pero los otroselementos 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 Guardardel men Archivo) y vuelve a la ventana delnavegador. Si haces clic en "Actualizar", la pgina "aburrida" que se mostraba alprincipio, pasar a ser una pgina con colores (pero an sigue siendo muy aburrida).

Aparte de la lista de enlaces que se encuentra al principio, el texto debera tener ahorael color morado sobre un fondo de color amarillo verdoso.

Presentacin de la pgina en el navegador tras aadirle colores.
http://www.w3.org/Style/LieBos2e/enter/http://www.w3.org/Style/LieBos2e/enter/http://www.w3.org/Style/LieBos2e/enter/http://www.w3.org/Style/LieBos2e/enter/


8/16



7

Otra cosa que es muy fcil de hacer es aadir diferentes tipos de letra para los diversoselementos de la pgina. Veamos el texto con el tipo de letra Georgia, excepto lacabecera h1, que ir con Helvetica.

En la Web, nunca puedes estar seguro de los tipos de letra que los usuarios tienen ensus ordenadores, por lo que aadiremos algunas alternativas: si Georgia no estdisponible, Times New Roman o Times tambin pueden valer, y si ninguna de esasest presente, el navegador puede utilizar cualquier otro tipo de letra conserifs. SiHelvetica no est, Geneva, Arial y SunSans-Regular son bastante similares, y sininguna de estas funciona, el navegador puede escoger cualquier otro tipo de letra queno sea serif.

Aade en el editor de texto las siguientes lneas:

Mi primera pgina con estilobody {font-family: Georgia, "Times New Roman",

Times, serif;color: purple;background-color: #d8da3d }

h1 {

font-family: Helvetica, Geneva, Arial,SunSans-Regular, sans-serif }

[etc.]

Los colores pueden especificarse en la CSS de formas diferentes. El siguienteejemplo muestra dos de ellas: por el nombre (purple) y por el cdigo hexadecimal (#d8da3d). Hay

aproximadamente 140 nombres de colores y ms de 16 millones de colores disponibles en cdigohexadecimal.Agregar un toque de estilo,ofrece ms informacin sobre esos cdigos.
http://www.m-w.com/cgi-bin/dictionary?book=Dictionary&va=serifhttp://www.m-w.com/cgi-bin/dictionary?book=Dictionary&va=serifhttp://www.m-w.com/cgi-bin/dictionary?book=Dictionary&va=serifhttp://www.w3.org/MarkUp/Guide/Stylehttp://www.w3.org/MarkUp/Guide/Stylehttp://www.w3.org/MarkUp/Guide/Stylehttp://www.w3.org/MarkUp/Guide/Stylehttp://www.w3.org/MarkUp/Guide/Stylehttp://www.m-w.com/cgi-bin/dictionary?book=Dictionary&va=serif


9/16



8

Si guardas otra vez el archivo y haces clic en "Actualizar" en el navegador, deberanaparecer tipos de letra diferentes para el encabezado y para el otro texto.

Ahora el texto tiene un tipo de letra diferente al del encabezado.

La lista que aparece al principio de la pgina HTML ser ms adelante un men denavegacin. Algunos sitios Web tienen un men al principio o en un lado de la pgina, yste debera tenerlo tambin. Pondremos uno a la izquierda, ya que es ms interesanteponerlo ah que arriba

El men ya est en la pgina HTML. Es la lista que se encuentra al principio. Losenlaces que tiene no funcionan ya que nuestro "sitio Web", hasta el momento, slo

tiene una pgina, pero eso no es importante ahora. Por supuesto, en un sitio Web realno debera haber ningn enlace roto.

Tenemos que mover la lista a la izquierda y colocar el resto del texto un poco mshacia la derecha, para dejar espacio para el men. Las propiedades de CSS que


10/16



9

vamos a utilizar son 'padding-left' (para mover el texto del elemento body) y 'position'(para mover el men).

Hay otras formas de hacerlo. Si buscas column y layout en la pgina Aprender CSS,encontrars algunas plantillas listas para ser utilizadas. Pero, por el momento, sta est

bien.

En la ventana del editor, aade las siguientes lneas al archivo HTML:

Mi primera pgina con estilobody {

padding-left: 11em;font-family: Georgia, "Times New Roman",Times, serif;

color: purple;background-color: #d8da3d }

ul.navbar {position: absolute;top: 2em;left: 1em;width: 9em }

h1 {font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif }

[etc.]

Si guardas otra vez el archivo y lo actualizas en el navegador, deberas tener la lista deenlaces a la izquierda del texto principal. Ahora el resultado parece mucho msinteresante.
http://www.w3.org/Style/CSS/learninghttp://www.w3.org/Style/CSS/learninghttp://www.w3.org/Style/CSS/learninghttp://www.w3.org/Style/CSS/learning


11/16



10

El texto principal se ha movido hacia la derecha y la lista de enlaces est ahora a laizquierda en lugar de estar arriba.

La mayora de los navegadores tienen un men para aumentar o disminuir el tamao

de letra: puedes probarlo y ver la forma en la que el men aumenta de tamao a la vezque lo hace el tipo de letra, lo que no ocurrira si hubiramos utilizado un tamao enpxeles.

'position: absolute' indica que el elemento ul est situado independientemente decualquier texto que est antes o despus en el documento. 'left' y 'top' indican cul es la posicin. Eneste caso, est a 2em de la parte de arriba de la ventana 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 untipo de letra de 12 puntos, entonces '2em' es 24 puntos. 'em' es una unidad muy til en CSS ya quese puede adaptar automticamente al tipo de letra que el usuario est utilizando.


12/16



11

El men de navegacin todava parece una lista en lugar de un men. Vamos acambiar su aspecto. Quitaremos los puntos que indican los diferentes elementos de lalista y moveremos los elementos a la izquierda, donde estaban antes los puntos.Tambin le daremos a cada elemento un fondo blanco y un cuadrado negro.

No hemos especificado el color de los enlaces, vamos a aadirlo tambin: utilizaremosel azul para aquellos enlaces que el usuario no ha visitado todava, y morado para losenlaces que ya ha visitado:

Mi primera pgina con estilobody {padding-left: 11em;font-family: Georgia, "Times New Roman",


ul.navbar {list-style-type: none;padding: 0;margin: 0;position: absolute;top: 2em;left: 1em;width: 9em }


SunSans-Regular, sans-serif }ul.navbar li {background: white;margin: 0.5em 0;padding: 0.3em;border-right: 1em solid black }

ul.navbar a {text-decoration: none }

a:link {color: blue }

a:visited {color: purple }

[etc.]


13/16



12

En HTML, los hipervnculos se crean con elementos , por lo que para especificar elcolor, necesitamos aadir una regla de estilo para "a". Para diferenciar los enlacesvisitados de los no visitados, CSS proporciona dos "pseudo-classes"(:link y :visited).Se llaman pseudo-classes para distinguirlas de losatributosde clase, que aparecendirectamente en HTML, por ejemplo, class="navbar".

El ltimo elemento a aadir en la hoja de estilo es una regla horizontal para separar eltexto de la firma que se encuentra al final. Utilizaremos 'border-top'para aadir unalnea punteada encima del elemento :

Mi primera pgina con estilobody {padding-left: 11em;

font-family: Georgia, "Times New Roman",Times, serif;

color: purple;background-color: #d8da3d }



SunSans-Regular, sans-serif }ul.navbar li {background: white;margin: 0.5em 0;padding: 0.3em;

Normalmente, los navegadores muestran los hipervnculos subrayados y con color. Loscolores son parecidos a los que especificamos aqu: azul para enlaces a pginas que no has visitado

todava (o visitaste hace mucho tiempo), morado para pginas que ya has visitado.


14/16



13

border-right: 1em solid black }ul.navbar a {text-decoration: none }



address {margin-top: 1em;padding-top: 1em;border-top: thin dotted }

[etc.]

Ahora, ya hemos terminado de darle estilo a la pgina. Lo siguiente es ver cmo sepone la hoja de estilo en un archivo diferente para que de esta forma otras pginaspuedan utilizar el mismo estilo.

Ahora tenemos un archivo HTML con una hoja de estilo en su interior. Pero si nuestrositio crece desearemos aadir ms pginas que compartan el mismo estilo. Hay unmtodo ms adecuado que copiar la hoja de estilo dentro de cada pgina y que es:

colocar la hoja de estilo en un archivo separado, haciendo que todas las pginas estnenlazadas a esa hoja.

Para separar la hoja de estilo del archivo HTML, necesitamos crear otro archivo detexto, que est vaco. Puedes escoger "Nuevo"del men Archivo del editor para crearuna 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 pertenecena HTML, no a CSS.

En la nueva ventana del editor, deberas tener la hoja de estilo completa:

body {


15/16



14

padding-left: 11em;font-family: Georgia, "Times New Roman",




SunSans-Regular, sans-serif }ul.navbar li {

background: white;margin: 0.5em 0;padding: 0.3em;border-right: 1em solid black }

ul.navbar a {text-decoration: none }



address {margin-top: 1em;

padding-top: 1em;border-top: thin dotted }

Elige Guardar como del men Archivo, comprueba que est en el mismodirectorio/carpeta que el archivo mipagina.html, y guarda la hoja de estilo comomiestilo.css.

Vuelve a la ventana que muestra el cdigo HTML. Borra todo lo que hay desde laetiqueta hasta , ambas inclusive, y reemplzalo por un elemento de la siguiente forma:



16/16



15

[etc.]

De esta forma, se le indicar al navegador que la hoja de estilo se encuentra en elarchivo llamado "miestilo.css". Al no especificarse ningn directorio, el navegador

mirar en el mismo directorio en el que se encuentra el archivo HTML.

Si has guardado el archivo HTML y lo has actualizado en el navegador, no deberasapreciar ningn cambio en el aspecto de la pgina. sta sigue guardando el mismoestilo, pero ahora viene establecido por el archivo externo.

Resultado final

El siguiente paso es poner ambos archivos, mipagina.html y miestilo.css, en vuestrositio Web., pero la forma de realizar esto depende de vuestro proveedor de Internet.

Para ver una introduccin de CSS, consulta elcaptulo 2de Lie & Bos, o laIntroduccin a CSS

de Dave Raggett.. Se puede obtener ms informacin, incluido ms tutoriales, en lapginaAprender CSS.

Bos, Bert.http://www.w3.org/Style/Examples/011/firstcss.es.html(Consultado 16/06/2015).
http://www.w3.org/Style/LieBos2e/enter/http://www.w3.org/Style/LieBos2e/enter/http://www.w3.org/Style/LieBos2e/enter/http://www.w3.org/MarkUp/Guide/Stylehttp://www.w3.org/MarkUp/Guide/Stylehttp://www.w3.org/MarkUp/Guide/Stylehttp://www.w3.org/MarkUp/Guide/Stylehttp://www.w3.org/Style/CSS/learninghttp://www.w3.org/Style/CSS/learninghttp://www.w3.org/Style/CSS/learninghttp://www.w3.org/Style/Examples/011/firstcss.es.htmlhttp://www.w3.org/Style/Examples/011/firstcss.es.htmlhttp://www.w3.org/Style/Examples/011/firstcss.es.htmlhttp://www.w3.org/Style/Examples/011/firstcss.es.htmlhttp://www.w3.org/Style/CSS/learninghttp://www.w3.org/MarkUp/Guide/Stylehttp://www.w3.org/MarkUp/Guide/Stylehttp://www.w3.org/Style/LieBos2e/enter/

Tutorial Rapido de CSS 2015

Documents

Transcript of Tutorial Rapido de CSS 2015