¿No sería genial poder dar a tus páginas la presentación que se merecen?
Pues claro que sí; pero... ¿cómo?
Para la presentación de tu sitio web usa Cascading Style Sheets (CSS), es decir, hojas de estilo en cascada.. En esta lección te presentaremos una breve introducción a CSS. Sin embargo, más adelante, podrás aprender todo lo relacionado con CSS, desde cero, en nuestroTutorial sobre CSS. Así pues, considera esta lección como un pequeño aperitivo.
CSS se puede considerar la media naranja de HTML. Y a la hora de escribir código, no hay punto de comparación en cuanto a su situación: HTML se encarga del contenido en bruto de la página (la estructura), mientras que CSS le proporciona ese toque elegante (la presentación).
Como vimos en la Lección 7, se pueden añadir estilos con CSS recurriendo al atributo
style. Por ejemplo, por medio de dicho atributo se puede establecer el tamaño y tipo de fuente de un párrafo:
Ejemplo 1:
<p style="font-size:20px;">El tamaño de este párrafo es de 20 píxeles</p>
<p style="font-family:courier;">El tipo de letra usado en este párrafo es Courier</p>
<p style="font-size:20px; font-family:courier;">Este párrafo combina tipo de letra
Courier con un tamaño de 20 píxeles</p>
y se verá así en el navegador:
El tamaño de este párrafo es de 20 píxeles
El tipo de letra usado en este párrafo es Courier
Este párrafo combina tipo de letra Courier con un tamaño de 20 píxeles
En el ejemplo anterior hemos usado el atributo
style para especificar el tipo de fuente que vamos a usar (por medio de la propiedad font-family) y el tamaño de la fuente (por medio de la propiedad font-size). Observa cómo en el último párrafo establecemos tanto el tipo de fuente como el tamaño separando ambas propiedades con un punto y coma.¿Y no parece un trabajo hercúleo?
Una de la características "elegantes" de CSS es la posibilidad de gestionar la presentación de manera centralizada.. En vez de usar el atributo
style en cada etiqueta de inicio, se puede indicar al navegador, de una sola vez, cómo tiene que presentar el texto en la página:
Ejemplo 2:
<html>
<head>
<title>Mi primera página con estilos CSS</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>Mi primera página con estilos CSS</h1>
<h2>Bienvenidos a mi primera página con estilos CSS</h2>
<p>Aquí podéis ver cómo funciona CSS</p>
</body>
</html>
En el ejemplo anterior, el código CSS se ha insertado en la sección de encabezado (
head), aplicándose, por tanto, a toda la página.. Para hacer esto, utiliza la etiqueta style añadiéndole el atributo type y como valor de éste text/css, es decir: <style type="text/css">, con lo que le estamos indicando al navegador que lo que estamos escribiendo es código CSS.
En el ejemplo todos los encabezados de nivel 1 aparecerán con letra de tipo Arial y tamaño de 30 píxeles; todos los encabezados de nivel 2 se mostrarán con tipo de letra Courier y tamaño de 15 píxeles; y el texto de un párrafo normal usará el tipo de letra Times New Roman con tamaño de 8 píxeles.
Otra opción es crear el código CSS en un documento independiente. Con un documento CSS independiente se puede gestionar la presentación de muchas páginas a la misma vez.. Esta opción es muy inteligente si se quiere cambiar el tipo de fuente o el tamaño a un sitio web con cientos o miles de páginas. Ahora no profundizaremos en este aspecto, pero lo puedes aprender más tarde en nuestro tutorial sobre CSS.
¿Qué más puedo hacer con CSS?
CSS se puede usar para muchas más cosas que especificar tipos y tamaños de fuente. Por ejemplo, se puede añadir colores y fondos. Aquí te presentamos algunos ejemplos para que experimentes con ellos:
<p style="color:green;">Texto de color verde</p>
<h1 style="background-color: blue;">Encabezado de nivel 1 con fondo azul</h1>
<body style="background-image: url ('http://www.html.net/logo.png');">
Prueba a insertar los ejemplos anteriores en alguna de tus páginas, tal como aparecen anteriormente y bien como código CSS insertado en la sección
head del documento.¿CSS sólo trata de colores y tipos de fuente?
Aparte de añadir presentación relativa a colores, tipos de fuente, etc., CSS también se puede usar para controlar la configuración de la página y la presentación de la misma (márgenes, elementos flotantes, alineación, anchura, altura, etc.). Al establecer los diferentes elementos con CSS podrás presentar tus páginas de forma elegante y precisa.
Ejemplo 3:
<p style="padding:25px;border:1px solid red;">Me encanta CSS</p>
que se visualizará así en el navegador:
Me encanta CSS
Con la propiedad
float se puede hacer flotar un elemento bien a la derecha o a la izquierda. El siguiente ejemplo muestra este principio:
Ejemplo 4:
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...</p>
que se verá así en el navegador:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
En este ejemplo un elemento (la imagen) flota a la izquierda y el otro elemento (el texto) rellena el hueco.
Con la propiedad
position se puede colocar un elemento en el lugar preciso que se quiera de la página:
Ejemplo 5:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
En el ejemplo anterior la imagen se coloca a 50 píxeles del borde inferior y a 10 píxeles del borde derecho del navegador. Pero se puede colocar exactamente donde se quiera. Pruébalo. Muy fácil y llamativo, ¿verdad?
LLamativo, sí. Pero... ¿fácil?
No se aprende CSS en diez minutos. Y como mencionábamos antes, esta lección sólo prentede ser una breve introducción a CSS. Más adelante aprenderás mucho más en nuestro tutorial sobre CSS.
De momento, concéntrate en HTML, y pasa a la siguiente lección donde aprenderás cómo publicar tu sitio web en Internet para que todo el mundo pueda admirarlo.
fuente: http://es.html.net/tutorials/html/lesson12.php
No hay comentarios:
Publicar un comentario
Hola amigo recuerda , el Spam esta totalmente prohibido , respeta a los demas y pasatelo bien ¡¡
Bienvenido :D