XHTML y CSS

Programación para Internet
PROGRAMACIÓN PARA INTERNET

Módulo 1. Construcción de páginas Web

Objetivo: El estudiante conocerá y explotará el lenguaje de
marcado XHTML como medio fundamental de creación de
páginas Web.

1.1. Fundamentos de XHTML
1.2. Uso de herramientas de diseño XHTML
1.3. Consideraciones sobre diseño de sitios Web
1.4. Introducción a las Hojas de estilo en cascada (CSS)
1.5. Uso de herramientas de diseño de hojas de estilo (CSS)

Lic. Nancy Michelle Torres Villanueva

Requisitos

● Lo único que necesitas es:
● Un editor de texto plano
● Un navegador que funcione bien y cumpla los
estándares: el Mozilla Firefox, por ejemplo
● Un navegador que funcione mal, tenga todo el
mundo y pase de los estándares: ¿Ya sabes cuál?


XHTML

● XHTML significa eXtensible HyperText Markup
Language y es la versión modernizada del tradicional
HTML4 , pero compatible con XML.
● Es un lenguaje semántico, lo que quiere decir que no
definimos el aspecto de las cosas, sino lo que
significan. Por ejemplo, si tenemos nuestro título de la
página, en lugar de decir “Lo quiero grande en letras
rojas”, le indicamos al navegador que “Este es el título
principal de la página. Haz algo para que destaque”.


CSS

● CSS son las siglas de Cascading Style
Sheets y son un regalo del cielo. Si el
documento XHTML está bien estructurado,
podemos cambiar totalmente su apariencia sin
tocar una sola línea de código en el archivo
.html.
● Esto nos permite separar el contenido del
aspecto, y es de gran importancia.


Etiquetas en XHTML

XHTML está basado en etiquetas. Una etiqueta
tiene la siguiente forma:

<etiqueta> Algo aqui dentro </etiqueta>


... Etiquetas en XHTML

● Volviendo al ejemplo anterior de nuestro título:
la etiqueta para poner el título principal en la
página es <h1>. Entonces nos quedará:

<h1>What is the Matrix?</h1>

● Como ves, <h1> marca el inicio de la etiqueta,
mientras que </h1> se encarga de cerrarla.


... Etiquetas en XHTML

Hay etiquetas que pueden modificarse mediante
atributos. Su estructura es la siguiente:

<etiqueta atributo="valor">

● Por ultimo, comentar un par de reglas que
siguen las etiquetas: siempre en minúsculas y
los atributos entre comillas.


Estructura de un documento
XHTML

● El DOCTYPE y la codificación
● El elemento raíz (HTML)
● La cabecera (HEAD)
● El cuerpo (BODY)


DOCTYPE y codificación

● La primera línea que debemos tener en nuestro
documento XHTML es la que marca la
codificación, es decir, el formato en el que
guardamos nuestro archivo. La codificación
estándar es la Unicode (UTF-8) y soporta
caracteres de todas las lenguas (occidentales,
griegos, chinos, árabes, japoneses,
coreanos...). Asegúrate de que el editor de
textos que uses te guarda el archivo en formato
Unicode.


... DOCTYPE y codificación

● Tenemos que escribir esto:
<?xml version="1.0" encoding="UTF-8"?>
● A continuación tenemos que indicar el
DOCTYPE. Se encarga de decirle al navegador
qué contiene el archivo que está abriendo.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-strict.dtd">


Notas

● Estas dos etiquetas no llevan la barra / de
cierre
● El doctype aparece en dos líneas. No hay
problema porque el navegador interpreta los
saltos de línea en el código como espacios en
blanco. En realidad podríamos escribir todo el
archivo XHTML en una sola línea. O cada
palabra en una línea diferente.


El elemento raíz (HTML)

● El resto de nuestro documento tiene que ir
encerrado por la etiqueta <html>.
● Pero en esa etiqueta tenemos que indicar una
serie de cosas, como que nuestro documento
es XHTML y la lengua que utilizamos. Si
escribimos en español, nos quedaría:
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="es" lang="es">


La cabecera (HEAD)

● La cabecera contiene información que no forma
parte del contenido de la página, como el título,
vínculos a hojas de estilo CSS, información
para robots de búsqueda, scripts, etc.
● La cabecera va encerrada entre <head> y
</head> y el título entre <title> y
</title>


... La cabecera (HEAD)

<head>
<title>Titulo de la web</title>
</head>

● La sangría no es necesaria, pero se
recomienda


El cuerpo (BODY)

● Por ultimo, nos encontramos con el cuerpo,
encerrado entre <body> y </body>, y que
contiene todo el código. Quedaría así:
<body>
Aqui va el cuerpo de la web
</body>


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="es" lang="es">
<head>
<title>Titulo de la web</title>
</head>
<body>
Aqui va el cuerpo de la web
</body>
</html>


Guardar el archivo

● La extensión del archivo XHTML es .htm o
.html. No hay tal cosa como una extensión de
archivo xhtml. La forma en que se especifica al
navegador que un archivo es un archivo
XHTML es en la declaración DOCTYPE, no en
la extensión de archivo.


Texto en XHTML

● HTML fue creado en principio para el alfabeto
en inglés, sin embargo se buscaron modos
para mostrar también caracteres o símbolos
denominados especiales.

● Para utilizar caracteres especiales usaremos
los símbolos & y ; para denotar el inicio y final
respectivamente de un símbolo especial.

Lic. Nancy Michelle Torres Villanueva 18

Texto: Descripción:

Pantalla:
´ Acento ´
ñ eñe ñ
" Comillas Dobles "
&deg: Grados °
á a con acento á
é e con acento é
  espacio en blanco


Párrafos

● Los párrafos sirven para estructurar el
contenido. En la web funcionan igual que en la
vida real: contienen una o más frases con
relación entre sí. Para crear un párrafo,
metemos texto entre las etiquetas <p> y </p>.


Saltos de línea

● A veces, dentro de un mismo párrafo
necesitamos cambiar de línea. Esto lo
conseguimos con la etiqueta <br />
● <p>
● Esta es una linea <br />
● Esta es otra linea
● </p>


Títulos

● Los títulos nos sirven para agrupar información.
● Para conseguir esto, tenemos las etiquetas
<hx> y </hx>, donde x es un número del 1 al
6. <h1> corresponde al título más importante y
debería haber solo uno por página.
●


Los Blockquotes

● Los blockquotes sirven para mostrar un bloque que
indica que lo que hay en el interior es una cita. Los
navegadores normalmente los muestran con un
indentado, aunque esto se puede cambiar con CSS.
<blockquote>
<p>
Aqui va la cita
</p>
</blockquote>


Separadores horizontales

● Los separadores horizontales (horizontal rules)
han caído en desuso, ya que podemos
conseguir bordes delimitadores mediante CSS.
Pero como el saber no afecta: la etiqueta es
<hr />
● Algunas de sus propiedades son:
● Align: Establece que la regla se alinee a la
izquierda, centro o derecha LEFT,CENTER o
RIGHT
● NOSHADE: Quita el sombreado predeterminado de
la regla.

... Separadores horizontales

● WIDTH: Permite especificar el ancho de la regla
(en pixeles o porcentaje)
● SIZE: Permite especificar el alto de la regla (en
pixeles)


Comentarios

● Existen dos etiquetas distintas para ingresar
comentarios en nuestro código.



<comment>Otro tipo</comment>

Etiquetas de formato

● Ahora veremos cómo destacar ciertas partes
del contenido de nuestra página para hacer
más clara la lectura.
● Hay que tener en cuenta que el aspecto de
todos estos formatos son totalmente
configurables con CSS.


Enfásis

● Para dar énfasis a un texto disponemos de la
etiqueta <em> . Si queremos dar un énfasis
más fuerte, utilizaremos <strong>.
<p>
<em>Remarcado</em> sin remarcar
y continua <strong>otro</strong>.
</p>
● Los navegadores suelen representar <em> con
cursiva y <strong> con negrita.


Texto preformateado

● Recordemos que XHTML ignora espacios en
blanco consecutivos, tabuladores, saltos de
línea etc. Pero muchas veces nos interesa que
estas cosas se tengan en cuenta (por ejemplo
queremos mostrar código). Para esto tenemos
la etiqueta <pre>


Citas

● Si queremos marcar un texto como una cita,
utilizaremos <cite> . La diferencia con
<blockquote> es que <cite> no crea la cita en
un bloque, sino que la integra en el mismo
texto. Los navegadores normalmente muestran
el texto citado con cursivas.


Acrónimos y abreviaturas

● Para explicar el significado de los acrónimos y
abreviaturas usaremos <acronym> y <abbr> ,
respectivamente. El efecto es el mismo: al
pasar el ratón por encima de la palabra, nos
aparece un rectángulo de ayuda con lo que
significan.
● Estas etiquetas necesitan un atributo para
funcionar, y es title.


... Acrónimos y abreviaturas

<p>
Mi ordenador tiene 512 <abbr
title="Megabytes">Mb</abbr> de
memoria <acronym title="Random Access
Memory">RAM</acronym>.
</p>


PROHIBIDO USAR

● Si ya sabías HTML ya no uses <b>, <i>, <font>
y ningún otro tipo de etiqueta que antes solías
usar para dar formato


Enlace a una página externa

● Si queremos un link a una página que está en
otro servidor, usamos <a> de esta forma:
<a href="http://www.loquesea.com"
title="Descripcion">Texto del enlace
</a>


Enlace a una página local

● Para enlazar a una página que está en nuestro
servidor, necesitamos saber la ruta.

<a href="profile.html"
title="Informacion sobre mi">
Ficha personal
</a>


Enlace a una dirección de e-mail

● Podemos hacer un enlace que al pulsar sobre
él, se abra automáticamente una ventana del
cliente de correo electrónico que tenga el
usuario para que escriba un mensaje a esa
dirección.

<a href="mailto:correo@servidor.com"
title="E-mail de
contacto">Contactame</a>


Anclas

● Las anclas nos permiten enlazar a una posición
concreta de la página.
● En el punto al que queremos saltar, insertamos
un ancla (usamos el atributo id):
<a id="nuestra_ancla" />
● Ahora debemos crear un link que nos lleve a
ese ancla:
<a href="#nuestra_ancla"
title="descripcion">Texto del
enlace</a>

Listas

● Cuando necesitamos presentar en un texto una
serie de conceptos o ideas utilizamos listas.

● Las listas pueden ser ordenadas o no serlo.
Las que no son ordenadas, a cada término se
le antepone un círculo negro. Las ordenadas
tienen un número en cada término.


Etiqueta <ul> </ul>

● Indica al navegador que cree una lista con
viñetas no ordenada.
● No solamente usada para fines de
numeraciones y viñetas, sino también para
fines de sangría o tabulaciones.
<ul>
<li>Esto es un tipo de punto.</li>
<li>Este es otro.</li>
<li>Y este es otro diferente.</li>
</ul>


Etiqueta <ol> </ol>

●
Listas ordenadas, esta etiqueta predeterminada
indica al navegador que numera la lista de
elementos comprendidos dentro de las
etiquetas <ol>.
<ol>
<li value="20">Este sera el numero 20. </li>
<li>Este sera el 21. </li>
<li>Este sera el 22. Y asi sucesivamente. </li>
</ol>


Etiqueta <li> </li>

● Se usa para indicar al navegador que exhiba el
texto que le sigue como un elemento de línea
en una lista.
● Utiliza los siguientes atributos:

<li value="20">Este sera el numero
20. </li>


Listas de definición

● Las listas de definición se diferencian de las
anteriores en que cada “ítem” está compuesto
por un par de elementos: un término y su
definición. Se usan estas etiquetas: <dl> para
marcar la lista, <dt> para un término y <dd>
para su definición.
<dl>
<dt>:)</dt>
<dd>Sonrisa</dd>
</dl>

Imágenes

● Podemos usar tres formatos de imagen: GIF, JPEG y
PNG.
● El JPEG es el más adecuado para imágenes con
muchos colores, como fotografías, y que no tengan
grandes áreas de colores planos.
● Las imágenes GIF son de sólo 8 bits (256 colores),
pero podemos usar un color transparente.
● El formato PNG es el estándar y podemos elegir
varias profundidades de paleta (número de colores).
Además, podemos utilizar un canal alpha para crear
transparencias.


Insertar una imágen

● Para poner una imagen hacemos uso de la
etiqueta <img> con unos cuantos atributos:

<img src="image.gif" width="ancho"
height="alto" alt="descripcion" />


Atributo Widht y Height

● Los atributos width y height nos permiten
establecer el ancho y el alto de la imagen.
Podemos indicar un valor en píxeles o en tanto
por ciento. width="200" muestra la imagen con
200 píxeles de ancho, mientras que
width="200%" hace que se vea al doble de su
anchura original.
● Es conveniente que pongamos las dimensiones
en píxeles reales, ya que ahorramos tiempo al
navegador a la hora de maquetar la página.


Atributo Alt

● El atributo alt contiene una descripción de la
imagen, que veremos cuando pasemos el ratón
por encima y mientras se carga el fichero.
También se muestra esta descripción cuando
no se ha podido cargar la imagen. Es un
atributo obligatorio, por cuestiones de
accesibilidad.
<img src="banner.gif" width="200"
height="40"
alt="BenKo’s Art" />


Imágenes como links

<a href="http://pagina.com"
title="Portafolio online">
<img src="banner.gif" width="200"
height="40"
alt="Imagen banner" />
</a>


Thumbnails

● Thumbnail es una imagen más pequeña que la
original, de modo que al hacer clic sobre ella,
cargamos la imagen a tamaño completo.

<a href="matrix.jpg" title="Wallpaper
de Trinity">
<img src="matrix.jpg" width="100"
height="50" alt="Trinity" />
</a>


... Thumbnails

● Si nuestro wallpaper de Trinity ocupa 100Kb (o más),
tendremos esos 100Kb ¡como thumbnail! (justo lo que
queremos evitar). El escalar una imagen con width y
height no hace que ocupe menos espacio.
● Tenemos que escalar la imagen y guardar esta copia
más pequeña (de 5Kb, por ejemplo):
<a href="matrix.jpg" title="Wallpaper de
Trinity">
<img src="matrix_thumb.jpg" width="100"
height="50"
alt="Trinity" />
</a>

Tablas

● En HTML también podemos incluir arreglos de
tablas.

● Se deben utilizar varias etiquetas que se
describen a continuación:


... Tablas

● <table>: Crea la tabla
● <caption>: Pone título a la tabla
● <tr>: Crea una fila
● <td>: Crea una celda
● <th>: Crea una celda de encabezamiento


Atributos de table

● Align: Establece la alineación de la tabla o texto
mediante ALIGN=LEFT o ALIGN=RIGHT
● Border: Determina el ancho del borde en pixeles
● Cellpadding: Establece la cantidad de espacio libre
junto al contenido de una celda
● Cellspacing: Asigna la cantidad de espacio entre las
celdas de una tabla
● Width: Determina el ancho de la tabla en pixeles o en
un porcentaje


Fusionar celdas

● Colspan: Expandir una celda varias columnas.
● Rowspan: Expandir una celda varias filas.


<table width=”80%” align=”center”>
<caption>Directorio telefonico</caption>
<tr>

<th colspan=”3”>Directorio telefonico</th>
</tr>
<tr align=”center”>
<td width=”40%”>
Nombre
</td>
Teléfono
</td>
E-Mail
</td>
</tr>
<tr>
<td>
José Rodríguez
</td>
<td>
223454
</td>

<td>jose@prueba.com.bo</td>
</tr>

<tr>
<td>
Carolina Nuñez
</td>
<td>
453444
</td>
<td>carolina@prueba.com.bo</td>
</tr>
</table>


Formularios

● Los formularios están delimitados con la
etiqueta <FORM>...</FORM>, que permite
reunir varios elementos de un formulario, como
botones y casillas de texto.


¿Cuáles son sus atributos?

● METHOD: indica cómo se enviarán las
respuestas.

"POST": Es el valor que envía los datos al
agente de procesamiento almacenándolos en el
cuerpo del formulario.
"GET": Envía los datos agregándolos a la
dirección URL y separándolos de la dirección con
un signo de interrogación.



● ACTION: indica la dirección a la que se enviará
la información (un script o dirección de correo
electrónico (e_mail@hotmail.com))


Ejemplo

● <FORM ACTION="procesa2.html"
METHOD="GET">

● <FORM ACTION="procesa2.html"
METHOD="POST">



● La diferencia entre estos dos métodos radica
en la forma de enviar los datos a la página,
mientras que el método GET envía los datos
usando la URL, el método POST los envía por
la entrada estándar STDIO.



● La etiqueta FORM actúa como una especie de
contenedor para almacenar elementos que
permiten al usuario seleccionar o introducir
datos.

● Todos los datos se enviarán a la dirección URL
indicada en el atributo ACTION de la etiqueta
FORM, por el método indicado en el atributo
METHOD.



● Se puede insertar cualquier elemento HTML en
una etiqueta FORM (como texto, botones,
tablas y enlaces), pero los elementos
interactivos son los más interesantes.


Elementos interactivos

● La etiqueta INPUT: Todos los botones y
casillas de texto.
● La etiqueta TEXTAREA: una casilla de texto.
● La etiqueta SELECT: una lista de opciones
múltiples.


INPUT

● <INPUT type="tipo de campo" value="Valor
predeterminado" name="Nombre de
elemento">


Atributo name

● Permite a algunos scripts reconocer qué campo
está asociado con un par nombre/valor, lo que
significa que el nombre del campo estará
seguido de un signo igual ("=") seguido de un
valor que el usuario introdujo, o si el usuario no
introdujo ningún valor, por el valor
predeterminado de la etiqueta value.


Atributo type

● Se usa para especificar qué tipo de elemento
se representa con la etiqueta INPUT.
● Estos son los valores posibles:
● checkbox: Las casillas de elección pueden
adoptar uno de dos estados: checked
(seleccionado) o unchecked (no
seleccionado). Cuando la casilla es
seleccionada, el par nombre/valor se envía.


Ejemplo de checkbox

<input type="checkbox"
name="transporte" value="1">Coche
<br>
name="transporte" value="2"
checked>Avión
<br>
name="transporte" value="3">Tren


... Atributo type

● hidden: Este campo, que el navegador no
muestra, es para definir una configuración
única que se enviará como par nombre/valor.
<INPUT TYPE=HIDDEN NAME="para"
VALUE="bufoland@entelchile.net">
● image: Un botón de envío personalizado que
aparece cuando se ubica una imagen en la
ubicación definida por el atributo SRC
<INPUT TYPE=IMAGE NAME="mono"
SRC="botoncito.gif" >


... Atributo type

● file: Este tipo de control permite a los usuarios
elegir un archivo para enviar. Este archivo es
enviado con el formulario. Nota que para carga
de archivos, el atributo "enctype" del formulario
debe tomar le valor "multipart/form-data".
<input name="imagen" type="file"
accept="image/gif" value="-" />
● password: Una casilla de texto donde los
caracteres escritos aparecen como asteriscos.


... Atributo type

● radio: Un botón que permite al usuario elegir
entre varias opciones. Cada uno de estos
botones debe tener el mismo atributo name. El
par nombre/valor del botón radio seleccionado
se enviará. Al aplicar el atributo checked para
uno de estos botones se definirá como
seleccionado de forma predeterminada.


Ejemplo radio

<input type="radio" name="transporte"
value="1">Coche
<br>
value="2" checked>Avión
<br>
value="3">Tren


... Atributo type

● reset: Un botón de restauración para quitar
todos los elementos en el formulario y
restablecer sus valores predeterminados.

● submit: Un botón de envío para enviar el
formulario. El texto en el botón puede definirse
usando el atributo value.


... Atributo type

● text: Una casilla de texto para escribir una
línea de texto. El tamaño de la casilla puede
definirse usando el atributo size y la extensión
máxima del texto con el atributo maxlength.


Textarea

● Se usa para definir un cuadro de texto más
grande que la línea simple propuesta por la
etiqueta INPUT.


Atributos del Textarea

● cols: representa el número de caracteres que
puede contener un línea.
● rows: representa el número de líneas
● name: representa el nombre asociado con el
cuadro de texto, que permite su identificación
en el par nombre/valor.


... Atributos del Textarea

● readonly: impide que el usuario modifique el
texto predeterminado en el campo.

● value: representa el valor predeterminado que
se enviará al script si el usuario no ha escrito
nada en el cuadro de texto


Ejemplo Textarea

<TEXTAREA COLS=20 ROWS=10
NAME="Texto">
</TEXTAREA>


Select

● Sirve para crear una lista desplegable de
elementos (especificados por las etiquetas
OPTION dentro de ella).


Atributos de Select

● name: representa el nombre asociado con la
casilla de texto, que permite su identificación
en el par nombre/valor.
● disabled: crea un lista desactivada, que
aparece atenuada


... Atributos de Select

● size: representa el número de líneas de la lista
(este valor puede ser más grande que el
número de elementos reales de la lista).
● multiple: Permite al usuario seleccionar varios
campos de la lista


Ejemplo de Select

<select name="transporte">
<option>Coche</option>
<option>Avión</option>
<option selected>Tren</option>
</select>

<select name="transporte">
<option value="1">Coche</option>
<option value="2">Avión</option>
<option value="3">Tren</option>
</select>


<form action="ejemplo.php" enctype="multipart/form-data">
<fieldset><legend>Información personal</legend>

Nombre: <input name="nombre" type="text" maxlength="20"
size="20" /><br />
Apellido: <input name="apellido" type="text" /><br />
Contraseña: <input name="contrasena" type="password"
/><br /><br />
Género:<br />
<input name="genero" type="radio" checked="checked"
value="masculino" />Masculino<br />
<input name="genero" type="radio" value="femenino"
/>Femenino<br /><br />
Imagen: <input name="imagen" type="file" accept="image/gif"
/>
</fieldset>


<fieldset> <legend>Intereses</legend>
<input name="intereses" type="checkbox"

checked="checked" />Deportes<br />
<input name="intereses" type="checkbox"
checked="checked" />Películas<br />
<input name="intereses" type="checkbox" />Viajes<br />
<input name="intereses" type="checkbox" />Arte<br />
<input name="intereses" type="checkbox" />Autos
</fieldset>
<input name="borrarform" type="reset" value="Borrar
formulario" />
<input name="enviarform" type="button" value="Enviar
formulario" />
<input name="email" type="hidden"
value="usuario@servidor.com" />
</form>



Demuestra lo que aprendiste!!


Herramientas de diseño

● Editores de texto plano y navegador
● Editores de texto especializados en HTML y
CSS
● Editores de texto especializados con ventana
de vista previa
● Editores WYSIWIG


Software

● Notepad++
● Gedit
● Bluefish
● Dreamweaver
● NVU


Extras

● Firebug: Plugin para visualizar el código fuente de las páginas
● Web Developer: Plugin con varias herramientas para
desarrolladores
● Color Scheme Designer: Útil para selección de colores
● W3C Markup Validation Service: Revisa el código
● Grid Designer: Genera el código de los grids que necesites
● Kotatsu: Genera el código de tablas
● CSS Redundancy Checker. Encuentra los selectores CSS que
no son utilizados por los archivos HTML y que puede ser
redundante


... Extras

● CSS Menu Maker. Crear y personalizar tus
menús CSS
● CSS Text Wrapper. De una manera muy
sencilla logramos que el texto HTML adquiera
una forma que no sean sólo un rectángulos
● PSDtoCSS online. Convierte tus archivos PSD
en un diseño XHTML-CSS


Donde poner CSS

● Hay dos opciones para insertar estilos en un
documento XHTML. Lo más normal es hacerlo
en un archivo externo (que se llama hoja de
estilos) y enlazarlo desde nuestro documento
XHTML.
● Podemos enlazar una o más hojas poniendo
esto dentro de la cabecera (head):
<link href="nuestra_hoja.css"
rel="stylesheet" type="text/css" />


... Donde poner CSS

● La otra opción es escribir la información
referente a los estilos en el mismo archivo
XHTML. Lo podemos hacer escribiendo entre
las etiquetas <style> y </style>, que también
deben ir en la cabecera.
● Si hacemos las dos cosas a la vez, siempre
tienen prioridad las reglas que estén dentro de
<style>.


Funcionalidad de CSS

● En una hoja de estilos utilizamos reglas que
consisten en elegir selectores a los que
asignamos una serie de propiedades.
● Los selectores los utilizamos para elegir a qué
elementos se aplican las propiedades que
escribimos. Hay diferentes tipos de selectores


Selectores

● Si queremos elegir una etiqueta, simplemente
escribimos su nombre. Por ejemplo, si
queremos establecer propiedades para los
enlaces:
a {
...
}


... Selectores

● También podemos elegir un elemento único
utilizando su atributo id. Para ello, empleamos
numeral (#) almohadilla:
#menu {
...
}


Clases

● Otra cosa que podemos hacer es definir una
clase y hacer que muchos elementos la
utilicen, escribiendo un punto antes del
nombre. Por ejemplo, si queremos destacar
algo:
.importante {
...
}


... Clases

● Luego podríamos usar esa clase en los
párrafos que queramos (o cualquier otro
elemento), usando el atributo class. De este
modo:
<p class="importante">Bla bla bla</p>


Cascading

● Cascading significa cascada, y tiene que ver
con la herencia. En CSS los elementos hijos
heredan todas las propiedades de sus padres.
Por ejemplo, si establecemos una regla para el
elemento table, sus hijos (td entre otros)
también tendrán esas mismas reglas.


Comentarios

/* Esto es un comentario */


Colores

● Se especifica el color deseado mediante números
hexadecimales mediante la siguiente estructura:
#RRVVAA
● El color tiene un signo de numeral # antecediendo a
los 6 números.
● Existen dos números para cada color principal: rojo,
verde y azul.
● Cada uno de los números varía hexadecimal mente
{0,1,2....,9,A,B,...F}.


... Colores

● Podemos hacerlo en inglés, por ejemplo. En
lugar de #fff escribimos white y lo
solucionamos.
● El inconveniente es que no todos los colores
tienen nombre.


Modelo de cajas


Color del texto

body { color:#666; }


Fondo

● Podemos modificar el fondo de un elemento
con la propiedad background, que tiene la
siguiente sintaxis:
● background: [color] [image] [repeat]
[attachment] [position]


... Fondo

● image: indicamos qué imagen usaremos de fondo.
Por ejemplo, url("fondo.gif")
● repeat: con esto establecemos si queremos que la
imagen se repita o no, tanto horizontal como
verticalmente. Con repeat se repite siempre en
ambos sentidos (valor por defecto), mientras que
con no-repeat no se repite nunca. Con repeat-x se
repite sólo horizontalmente y con repeat-y lo hace
sólo en vertical.


... Fondo

● attachment: sirve para indicar si el fondo se queda
fijo en el sitio o se desplaza con el scroll. Con scroll
(valor por defecto) el fondo se desplaza y con fixed
se queda siempre en el mismo sitio.
● position: indica la posición del fondo. Indicamos
tanto la posición desde la izquierda como desde
arriba (ya sea en píxeles o porcentaje). Los valores
por defecto son 0% 0% que sitúan al fondo en la
esquina superior izquierda. Si lo quisiéramos en las
coordenadas 20,30, escribiríamos 20px 30px. Si
queremos el fondo centrado, pues 50% 50%.


... Fondo

/* solo color de fondo */
body { background-color: #fff; }
/* color de fondo e imagen en mosaico */
body { background: #fff url("fondo.gif");}
/* imagen fija, centrada y sin repetir, */
/* a modo de "marca de agua" */
body {
background: #fff url("fondo.gif") no-repeat
fixed 50% 50%;
}


Fuente

● Usar sólo fuentes “estándar”, que tengan la
mayoría de ordenadores. Además, podemos
especificar varias, de forma que si no se tiene
la primera, se muestra la segunda, si no se
tiene la segunda, pues la tercera, etc.
● La propiedad que sirve para cambiar la fuente
es font-family.
● El tamaño de la fuente lo controlamos con font-
size. Podemos indicar medidas en píxeles (px)
o en puntos (pt).

... Fuente

● El tema de la negrita se controla con font-
weight asignándole bold o normal. La cursiva
con font-style, poniendo italic o normal. Si
queremos versales, pues font-variant con
small-caps o normal.


... Fuente

/* fuente para todo el documento */
body {
font: 11px Arial, Verdana, sans-serif;
color: #666;
}
/* para el enfasis fuerte */
strong {
font-variant: small-caps;
color: #000;
}


Tarea

● Preparar una presentación de los temas del archivo:
Introducción CSS
1. Modelo de cajas
2. Posicionamiento y visualización
3. Texto
Entregar el archivo en PDF
4. Enlaces Utilizar muchos ejemplos

5. Imágenes
6. Listas
7. Tablas
8. Formularios
9. Layout

XHTML y CSS

Más contenido relacionado

La actualidad más candente (9)

Similar a XHTML y CSS (20)

Más de Michelle Torres (16)

Último (20)

XHTML y CSS