Tutorial: Introducción al CSS
Nota: Es recomendable haber leido o entender lo publicado en el artículo Tutorial: ¿Que es XHTML? para leer este otro.
En el capítulo pasado pudimos aprender a utilizar XHTML y algunas de sus etiquetas. Hoy vamos aprender la base de las hojas de estilo. Una de las cosas pendientes que teníamos era poner información en la etiqueta asi que retomaremos por ese lado.
Como habíamos dicho en la etiqueta ponemos información extra que no es parte del cuerpo de la página. Por ejemplo para que la barra del navegador muestre el título de nuestra página debemos poner un tag <title>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n </head>^n <body>^n <p>Bienvenido a mi <b>primera pagina web</b></p>^n </body>^n</html>
Haz la prueba en un archivo html en tu propia pc y prueba abrirlo con el navegador, tal como vimos la clase pasada.
Ahora vamos a identificar elementos dentro del html. Podemos hacerlo de dos maneras, poniendo un identificador o una clase. Lo correcto seria que no hubiera dos elementos con el mismo identificador en la misma página, para no confundir, pero si pueden haber varios elementos de la misma clase. Podemos poner identificadores y clases de la siguiente forma:
<p id="nombre_del_parrafo" class="bonito oscuro">Un párrafo identificado</p>
Aquí estamos diciendo que el parrafo tiene identificado "nombre del parrafo" y es de la clase "bonito" y de la clase "oscuro". Podemos separar varias clases con espacios.
Para poner estilos debemos dentro del usar una etiqueta o tag llamado <style>.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style>^n #nombre_del_parrafo{ font-family:Arial }^n .bonito{ color:red ; text-decoration:underline }^n .oscuro{ font-weight:bold; }^n </style>^n </head>^n <body>^n <p id="nombre_del_parrafo" class="bonito oscuro">Un parrafo identificado</p>^n </body>^n</html>
Si pruebas este código en el área de pruebas, verás los resultados.
Que estamos diciendo en el <style>? pues las instrucciones de estilo CSS tienen el siguiente formato:
elemento { propiedad:valor ; propiedad:valor ..... }
el elemento es una forma de identificar a lo que queremos poner propiedades y utilizamos el numeral (#) para identificadores, el punto (.) para las clases y simplemente la palabra para el tipo de etiqueta.
Por ejemplo: p#cabecera identificaria a <p id="cabecera"> a mi me identifica </p>
o también: b.rojo en <b class="rojo">a mi me identifica</b> <b>a mi no</b>
Dentro de la identificación del CSS definiremos las propiedades del elemento, si sabes inglés son muy intuitivas:
font-family: La fuente del texto, puede ser Arial, Verdana. Si lleva espacios debe ir entre comillas, por ejemplo "Times new Roman".
text-decoration: Decoraciones del texto, por ejemplo underline (subrayado), line-through (tachado), none (nada).
color: El color de la fuente, puede ser red (rojo), blue, (azul), etc. También puede ser un código hexadecimal como #ff0000; ya veremos mas adelante como generar esos códigos.
font-weight: El "peso" de la letra, por ejemplo bold (negrita) o normal.
Una lista completa de las propiedades CSS puedes encontrarla aqui: http://www.w3schools.com/Css/css_reference.asp (en inglés).
Veamos un ejemplo mas complejo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style> ^n body { font-family: arial ; font-size:12px }^n #cabecera { font-size:14px ; font-weight:bold }^n .comentario { color:darkblue }^n p#pie_de_pagina { font-size:10px ; color:gray }^n </style>^n </head>^n <body>^n <p id="cabecera">Bienvenido a mi sitio Web</p>^n <p class="comentario">Espero que disfrutes mucho tu visita en mi <b>sitio web</b>. Lo hemos hecho con mucha dedicacion.<br /> que tengas una buena estadia</p>^n <p id="pie_de_pagina">(C) mi sitio web, todos los derechos reservados</p>^n </body>^n</html>
Ahora lo mismo con otros estilos:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style> ^n body { font-family: arial ; font-size:10px }^n #cabecera { text-align: center; text-transform:uppercase; color:darkred; border:1px red solid;}^n .comentario { background-color: lightgray ; font-weight:bold }^n p#pie_de_pagina { color:darkgreen ; font-size:14px }^n </style>^n </head>^n <body>^n <p id="cabecera">Bienvenido a mi sitio Web</p>^n <p class="comentario">Espero que disfrutes mucho tu visita en mi <b>sitio web</b>. Lo hemos hecho con mucha dedicacion.<br /> que tengas una buena estadia</p>^n <p id="pie_de_pagina">(C) mi sitio web, todos los derechos reservados</p>^n </body>^n</html>
Ahora sería una buena idea practicar un poco los estilos y experimentar con la lista completa de estilos de W3Schools
Espacio de pruebas
Trackback URI: http://www.siteup.com.ar/index.php/trackback/8
Fuentes XML de comentario: RSS | Atom
Dejar un comentario