Entradas
Qué es CSS: "Comentamos brevemente que son las hojas de estilo en cascada y explicamos una serie de efectos rápidos e interesantes que se pueden hacer con ellas.
Por Juliana Monteiro Lazaro
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores...
CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada. En este reportaje vamos a ver algunos de los efectos que se pueden crear con las CSS sin necesidad de conocer la tecnología entera.
Para empezar
Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web, solo en casos avanzados se pueden escribir en un archivo a parte y enlazar la página con ese archivo. En un principio vamos a utilizar la manera más directa de aplicar estilos a los elementos de la página, mas adelante veremos la declaración en archivos externos. Para ello, y esto es la primera lección de este artículo, vamos a conocer un nuevo atributo que se puede utilizar en casi todas las etiquetas HTML: style.
Ejemplo:
El párrafo saldrá con color verde y en negrita
Dentro del atributo style se deben indicar los atributos de estilos CSS separados por punto y coma (;). Durante este artículo vamos a conocer muchos atributos de CSS, los dos primeros que hemos visto aquí son:
Color: indica el color del contenido la etiqueta donde estemos utilizándolo, generalmente indica el color del texto.
Font-weight: indica el grosor del texto. Bold sirve para poner en negrita.
Color en los enlaces
Con HTML definimos el color de los enlaces en la etiqueta , con lo atributos link, vlink y alink. Esto nos permite cambiar el color de los enlaces para todo el documento, pero ¿Y si queremos cambiar el color de un enlace en concreto, para que tenga otro color que el definido en la etiqueta ?
Para hacer esto utilizaremos el atributo style dentro del enlace:
Así saldrá el enlace en color rojo, independientemente de lo definido para todo el documento.
Espaciado entre líneas
Con CSS podemos definir el espacio que hay entre cada línea del documento, utilizando el atributo line-height. Por ejemplo, podemos definir que para todo un párrafo el espacio entre cada una de sus líneas sea 25 pixels:
Un párrafo normal en el que cada una de las líneas está separada 25 pixels de la otra. Hay que poner suficiente texto como para que se vean 2 líneas, así saldrán separadas
Espaciado entre caracteres
Se puede definir también el espacio entre cada carácter. Esto se hace con el atributo de CSS letter-spacing. Veamos un ejemplo:
Este párrafo tiene las letras espaciadas por 1 centímetro.
Este atributo, al igual que ocurre con muchos otros de CSS, no está soportado por todos los navegadores. En concreto Netscape, en su versión 4 todavía no lo incluye.
Enlaces sin subrayado
Uno de los efectos más significativos y fáciles de realizar con CSS es eliminar el subrayado de los enlaces de una página web. Existe un atributo que sirve para definir la decoración de un texto, si está subrayado, tachado, o si no tiene ninguna de estas 'decoraciones'. Es el atributo text-decoration, en este caso indicaremos en un enlace que no queremos decoración:
Incluir estilos para todo un sitio web
Una de las características más potentes de la programación con hojas de estilo consiste en definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas.
Veamos ahora todo el proceso para incluir estilos con un fichero externo.
1- Creamos el fichero con la declaración de estilos
Es un fichero de texto normal, que puede tener cualquier extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es un poco distinta que la sintaxis que utilizamos dentro del atributo style. Sería erróneo incluir código HTML en este archivo: etiquetas y demás. Podemos ver un ejemplo a continuación.
P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}
2- Enlazamos la página web con la hoja de estilos
Para ello vamos a colocar la etiqueta con los atributos
* rel='STYLESHEET' indicando que el enlace es con una hoja de estilo.
* type='text/css' porque el archivo es de texto, en sintaxis CSS.
* href='estilos.css' indica el nombre del fichero fuente de los estilos.
Veamos una página web entera que enlaza con la declaración de estilos anterior:
Página que lee estilos
Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil.
Las CSS tienen mucho más jugo
Las Hojas de Estilo en Cascada son un estándar muy amplio, con unas especificaciones y posibilidades muy grandes. En este artículo hemos visto unos cuantos efectos interesantes que realizar aunque no tengamos ningún conocimiento previo. Sin embargo, lo mejor para trabajar con esta tecnología es conocerla bien, gracias a ello, los resultados serán mucho más sorprendentes.
Para ampliar esta información y conocer más sobre CSS se puede encontrar un manual en desarrolloweb.com www.desarrolloweb.com/manuales/2
Enviar un comentario al artículo
MANUAL: Qué es cada tecnología
Qué es DHTML o HTML Dinámico Qué es Javascript
MANUAL: Introducción a los lenguajes del web
DHTML (HTML Dinámico) Qué son los Applets de Java
Comentarios
Enviar un comentario al artículo
Fue enviado 1 comentario al artículo
1 comentario no revisado
0 comentarios revisados
Acceso usuarios
E-mail:
Clave:
Recordar este usuario
¿Olvidaste tu clave?
Registrarse
Manuales relacionados
Qué es cada tecnología
(44 artículos)
Ver el índice del manual
Descargar el manual
Introducción a los lenguajes del web
(19 artículos)
Ver el índice del manual
Descargar el manual
Categorias relacionadas
* CSS
El autor
Juliana Monteiro Lazaro
Directora de CriarWeb.com
http://www.criarweb.com
Lectura recomendada
DISEñO WEB. EDICIóN 2003
Compra este libro en Agapea, la librería urgente a domicilio.
Últimas noticias
Panoramio dispone su propio Google AnalyticsEl servicio web propiedad de Google y dedicado a la situación geográfica de imágenes...
Lotus Symphony 3: alternativa libre de IBM a OfficeDisponible una nueva versión final de la suite de productividad gratuita de IBM.
Wi-Fi Direct, aprobado el nuevo rival del BluetoothEl nuevo sistema de comunicación inalámbrica es aprobado por la Wi-Fi Alliance.
FeedBurner se acerca a Google AnalyticsLa nueva versión del sistema de gestión de feeds de Google incluye interesantes novedades...
Nuevo Messenger 8 para MacDisponible para la descarga la versión final de Messenger 8 para sistemas operativos Mac...
Adobe Air 2.5, con novedades para desarrolladoresLas nuevas características de Adobe Air pretenden convertirla en más útil y accesible, en...
Más problemas para FlashLa compañía Apple anuncia que no incluirá una preinstalación de Flash en su sistema...
Ranking de Servidores Septiembre 2010La nueva clasificación mensual con los datos de los servidores mas importantes, apunta el...
SmartFTP, interesante cliente FTPEsta herramienta nos permite transferir archivos entre nuestro ordenador y un servidor de...
El próximo navegador web más rápidoDescubre cuál de las nuevas versiones en desarrollo de algunos de los navegadores más...
Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...
Alojados en el grupo
Secciones principales
Manuales
FAQs
Programas
Directorio
Scripts
Vídeos
Monotemáticos
Desde cero
HTML, CSS, Diseño
Javascript, Ajax
ASP, PHP
Promocion, Ganar dinero
Bloging
Actualidad
Recursos interesantes
Agenda
Comunidad
Perfiles públicos
Desarrolladores
Vuestras páginas
Registro
Encuestas
Copyright | Publicidad | Acerca de | Datos legales | Contacta
Ir a portada Desarrollo Web
- Enviado mediante la barra Google"