DEFINCION DE LENGUAJE DE CSS
Enviado por Internetlooney • 7 de Abril de 2013 • 2.212 Palabras (9 Páginas) • 486 Visitas
CSS es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene siendo coloquialmente “una página web”. Entonces podemos decir que el lenguaje CSS sirve para organizar la presentación y aspecto de una página web. Este lenguaje es principalmente utilizado por parte de los navegadores web de internet y por los programadores web informáticos para elegir multitud de opciones de presentación como colores, tipos y tamaños de letra, etc.
La filosofía de CSS se basa en intentar separar lo que es la estructura del documento HTML de su presentación. Por decirlo de alguna manera: la página web sería lo que hay debajo (el contenido) y CSS sería un cristal de color que hace que el contenido se vea de una forma u otra. Usando esta filosofía, resulta muy fácil cambiarle el aspecto a una página web: basta con cambiar “el cristal” que tiene delante. Piensa por ejemplo qué ocurre si tienes un libro de papel y lo miras a través de un cristal de color azul: que ves el libro azul. En cambio, si lo miras a través de un cristal amarillo, verás el libro amarillo. El libro (el contenido) es el mismo, pero lo puedes ver de distintas maneras.
Algunas opciones básicas del lenguaje CSS por ejemplo pueden ser el poder cambiar el color de algunas típicas etiquetas HTML como <H1> (h1 es una etiqueta en el lenguaje HTML destinada a mostrar un texto como encabezado, en tamaño grande). Pero también hay funciones algo más complejas, como introducir espaciado entre elementos <DIV> (div es una etiqueta HTML para identificar una determinada región o división de contenido dentro de una página web) o establecer imágenes de fondo.
CSS es muy intuitivo y sencillo una vez se llega a aprender, ya que para su definición siempre se hace uso de un identificador de etiqueta HTML (como por ejemplo <H1>), y luego indicamos con qué aspecto queremos que se muestren todas las etiquetas <H1> que aparezcan en un documento. Al igual que con <H1> podemos definir cómo queremos que se muestren las distintas partes del documento HTML, pudiendo en cada caso definir sus propiedades (color, tipo de fuente, tamaño, espacio, imagen) con algún determinado valor deseado.
Vamos a partir de un ejemplo muy sencillo, que tratará de una página web o archivo HTML donde tan solo tendremos una párrafo de texto y sobre cuya etiqueta <p> iremos realizando cambios e iremos aplicando los conocimientos que vamos a ir adquiriendo y posteriormente veremos los resultados que obtenemos.
Nuestro documento html contendrá el siguiente texto de partida (en este caso se ha llamado ejemplo.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aplicación CSS - aprenderaprogramar.com </title>
</head>
<body>
<p>Texto de ejemplo para visualizar resultados </p>
</body>
</html>
Una vez creado el documento ejemplo.html en nuestro ordenador, lo abriremos con un navegador web, cuyo resultado será similar a éste dependiendo del navegador que utilicemos:
Una vez hemos visualizado este ejemplo tenemos una página web que tan solo tiene un párrafo (“Texto de ejemplo para visualizar resultados”). Este aparece en color negro por defecto y nosotros, para ver la utilidad de CSS deseamos mostrar el texto en rojo. En realidad con CSS podemos hacer cosas mucho más complejas, pero solo queremos poner un ejemplo para mostrar la utilidad de CSS.
Para ello vamos a crear nuestro archivo de hojas de estilo CSS que llamaremos estilos.css, que crearemos en el mismo directorio donde tengamos el archivo ejemplo.html y que contendrá lo siguiente:
/* Comentario en nuestro primer archivo css estilos.css – www.aprenderaprogramar.com*/
p {color:red;}
Para crear el archivo basta abrir un editor de texto como el bloc de notas como Notepad++ o el simple bloc de notas de Windows, escribir el texto y guardar el archivo con el nombre adecuado.
En la primera línea hemos insertado un comentario CSS. Para insertar un comentario usamos la cadena de caracteres “/*” seguido del comentario que queremos y cerramos la cadena con “*/”.
La segunda línea es propiamente donde definimos el estilo que queremos mostrar. En este caso, p{color:red;} que indica que queremos un estilo para la etiqueta <p> cuya propiedad color sea igual a red (rojo en inglés).
El patrón será el siguiente: nombre etiqueta HTML (en este caso p para la etiqueta <p> de HTML) seguido de “{“, seguido de una lista de propiedades-valores separadas por “;” y finalizamos con “}”. A su vez la lista de propiedades-valores será un conjunto de palabras que indicará la propiedad que queremos cambiar, en nuestro caso color, seguido de “:” y el valor que queremos asignar para esa propiedad, en este caso red ya que queremos mostrar el texto en rojo. Además de color podríamos establecer tipo de fuente, tamaño de fuente, y distintas propiedades.
Pues bien una vez tenemos nuestro archivo de estilos, estilos.css, debemos de importarlo para su uso a nuestra página web o documento html, ejemplo.html. Para ello ponemos lo siguiente entre las etiquetas <head> y </head> de nuestro ejemplo.html.
<link rel="stylesheet" type="text/css" href="estilos.css">
Este código lo que hace es indicar que existe un archivo con una definición de estilos u hoja de estilos (stylesheet) que contiene código css (text/css) y que se encuentra en la ruta estilos.css. Si el fichero se encontrara en otro directorio habría que especificar la ruta, por ejemplo : templates/estilos.css.
Así tendremos nuestro archivo ejemplo.html con el siguiente
...