Stilos CSS

Stilos CSS
Qu es?
Es una tecnologa que nos permite crear pginas web de una manera ms
precisa y homognea. Gracias a las CSS controlamos ms an los resultados
finales de la pgina, pudiendo hacer muchas cosas que no se podan hacer
utilizando solamente HTML, como incluir mrgenes, tipos de letra, fondos,
colores, etc. Hojas de Estilo en Cascada (Cascading Style Sheets), es un
mecanismo simple que describe cmo se va a mostrar un documento en la
pantalla, o cmo se va a imprimir, o incluso cmo va a ser pronunciada la
informacin presente en ese documento a travs de un dispositivo de lectura.
Esta forma de descripcin de estilos ofrece a los desarrolladores el control
total sobre estilo y formato de sus documentos.
Para que funciona?

Se utiliza para dar estilo a documentos HTML y XML, separando el contenido
de la presentacin. Los Estilos definen la forma de mostrar los elementos
HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el
formato de mltiples pginas Web al mismo tiempo. Cualquier cambio en el
estilo marcado para un elemento en la CSS afectar a todas las pginas
vinculadas a esa CSS en las que aparezca ese elemento.
Hojas de Stilos XML

En cuando a la utilizacin de las hojas de estilo en relacin al lenguaje XML,
la aparicin del lenguaje de Hojas de Estilo Extensible o Extensible Stylesheet
Language (XSL)(http://www.w3.org/TR/xsl/) ha creado cierta confusin, ya
que es posible utilizar este lenguaje para dar estilo, adems de poder seguir
utilizando las CSS u hojas de estilo en cascada con documentos XML.
CSS
XSL
Puede usarse con HTML?
SI
NO
Puede usarse con XML?
SI
SI
Lenguaje de transformacin?
NO
SI
Sintaxis
CSS
XML
Ejemplos de CSS
Un listado completo de los ejemplos ms relevantes.
Fondo
Propiedades
backgroundcolor
Aplicar color de fondo a

diferentes elementos.
backgroundimage
Utilizar una imagen como

fondo.
backgroundrepeat
La imagen de fondo se
repite.
backgroundattachment
Ubicar una imagen en un

lugar determinado.
backgroundposition
Dejar fija la imagen de

fondo.
AADIR ALGUNOS COLORES

Probablemente ests viendo texto negro sobre un fondo blando, pero esto depende de cmo
est tu navegador configurado. Para que la pgina tenga algo ms de encanto podemos
aadir algunos colores. (Deja el navegador abierto, lo utilizaremos ms tarde).
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 archivos es
recomendable ya que facilita la utilizacin de la misma hoja de estilo para diferentes
archivos 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 <style> en el archivo HTML. La hoja de estilo estar en el
interior de ese elemento. Volvamos entonces a la ventana del editor y aadamos las
siguientes cinco lneas en la parte de la cabecera del archivo: Principio del formulario
<!DOCTYPE html PUBLIC "-/ / W3C/ / DTD HTML 4.01/ / EN">
<html>
<head>
<title>Mi primera pgina con estilo</ title>
<style type="text/ css">
body {
color: purple;
background-color: #d8da3d }
</ style>
</ head>
<body>
AADIR TIPO DE LETRA

Otra cosa que es muy fcil de hacer es aadir diferentes tipos de letra para los diversos
elementos de la pgina. Veamos el texto con el tipo de letra Georgia, excepto la cabecera
h1, que ir con Helvetica.
En la Web, nunca puedes estar seguro de los tipos de letra que los usuarios tienen en sus
ordenadores, por lo que aadiremos algunas alternativas: si Georgia no est disponible,
Times New Roman o Times tambin pueden valer, y si ninguna de esas est presente, el
navegador puede utilizar cualquier otro tipo de letra con serifs. Si Helvetica no est,
Geneva, Arial y SunSans-Regular son bastante similares, y si ninguna de estas funciona, el
navegador puede escoge cualquier otro tipo de letra que no sea serif.
Aade en el editor de texto las siguientes lneas:
<html>
<head>
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</ style>
</ head>
<body>
AADIR UNA BARRA DE NAVEGACIN

La lista que aparece al principio de la pgina HTML ser ms adelante un men de
navegacin. Algunos sitios Web tienen un men al principio o en un lado de la pgina, y
ste debera tenerlo tambin. Pondremos uno a la izquierda, ya que es ms interesante
ponerlo ah que arriba
El men ya est en la pgina HTML. Es la lista <ul> que se encuentra al principio. Los
enlaces 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 real no debera
haber ningn enlace roto.
Tenemos que mover la lista a la izquierda y colocar el resto del texto un poco ms hacia la
derecha, para dejar espacio para el men. Las propiedades de CSS que 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:
<head>
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em}
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</ style>
</ head>
[etc.]

Stilos CSS

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Stilos CSS

Caricato da

Copyright:

Formati disponibili

Stilos CSS

Para que funciona?

Hojas de Stilos XML

Puede usarse con HTML?

Puede usarse con XML?

Aplicar color de fondo a

Utilizar una imagen como

Ubicar una imagen en un

Dejar fija la imagen de

AADIR ALGUNOS COLORES

AADIR TIPO DE LETRA

AADIR UNA BARRA DE NAVEGACIN

Potrebbero piacerti anche