XHTML + CSS eXtended HyperText Markup Language Cascading
Anuncio
XHTML + CSS
eXtended HyperText Markup Language
Cascading StyleSheets
© 1996-2004 Antonio González
Impreso el 7 de mayo de 2008, a las 15:06 horas
Índice
Estructura básica documento XHTML........................................................................................ 1
Diferencias de XHTML con HTML.............................................................................................. 2
La cabecera................................................................................................................................. 2
CSS............................................................................................................................................. 2
Medidas....................................................................................................................................... 4
16 colores básicos....................................................................................................................... 4
Caracteres especiales................................................................................................................. 4
Etiquetas en general................................................................................................................... 5
Tablas.......................................................................................................................................... 6
Marcos........................................................................................................................................ 6
Estructura básica documento XHTML
<?xml version="1.0" encoding="windows-1252"?>
<?xml-stylesheet href="estilo1.css" type="text/css"?>
<?xml-stylesheet href="#interna" type="text/css"?>
<?xml-stylesheet href="./estilos/estilo3.css" type="text/css"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="en">
<head>
<title>Título texto</title>
<link rel="stylesheet" href="una.css" type="text/css" title="nombrecssscreen"
media="screen" charset="windows-1252">
<link rel="stylesheet" href="unab.css" type="text/css" title="nombrecssprint"
media="print">
<style type="text/css" media="all" id="interna">
/*<!--[CDATA[*/
@import "otra.css"; /* comentario en css */
@import url(http://lo.que.sea/es.css);
...
el resto del estilo
...
//]]-->
</style>
<meta ... />
<script type="text/javascript" src="codigo.js"/>
</head>
<body>
Texto del documento
</body>
</html>
Página 1 de 7
Diferencias de XHTML con HTML
En XML los nombres de atributos y elementos en minúsculas. XML distingue mayúsculas y
minúsculas. XML exige que los elementos no vacíos tenga etiquetas de finalización. Los
valores de los atributos deben ir entrecomillados (""). Elementos vacíos deben tener una
etiqueta de finalización o la de inicialización debe terminar con " />" (un espacio delante de la
barra). Se deja de utilizar <a name=""> en favor de <a id="">.
La cabecera
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml/" xml:lang="en" lang="es">
Comentario
<!-- texto -->
En CSS: /* comentario CSS */
<!-- N.B.: Las etiquetas link y meta se deben situar dentro de <head> -->
<link rev="made" href="mailto:correo@por.defecto.es" />
<link rel="Home" href="http://www.ucm.es/info/" />
<link rel="stylesheet" type="text/css" href="estilos.css" />
<link rel="previous" href="pagina_anterior.html" />
<link rel="next" href="pagina_siguiente.html" />
<link rel="contents" href="pagina_contenidos.html" />
<meta http-equiv="Content-type" content="text/html; charset=windows-1252" />
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv= "pragma" content="no-cache" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="resource-type" content="document" />
<meta name="author" lang="es" content="Fulanito Menganítez" />
<meta name="owner" content="Fulanito Menganítez" />
<meta name="organization" content="Organización XYX" />
<meta name="date" content="05/30/99" />
<meta name="description" content="Descripción de la página" />
<meta name="keywords" content="palabra1, palabra2, palabra3" />
<meta name="distribution" content="global" />
<meta name="copyright" content="Copyright 1999 saas" />
<meta name="disclaimer" content="aquí te lavas las manos como quieras" />
CSS
Orden de importancia:
1º inline
2º embedded
3º linked
4º imported
5º default browser
En caso de conflicto:
1º regla declarada específicamente
2º regla heredada
3º regla en el orden en que aparecen (más importante la última)
En fichero estilo.css
div.nota {
color: green;
margin-left: 1em;
Página 2 de 7
}
luego en documento (en body):
<div class="nota">Texto de la nota</div>
<span style class="nota">Texto</span>
<span style="font-weight: bold; color: green">texto en negrita y verde</span>
<p style="text-indent: 10pt; text-align: justify">párrafo indentado y justificado</p>
<strong style="background: yellow; color: black">texto a resaltar</strong>
{font-family: serif|sans-serif|cursive|fantasy|monospace|arial|helvetica}
{font-size: 16pt|1.5em|20px|1in|2.56cm|256mm|12pc|14ex}
{font-size: xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger}
{font-size: 200%}
(por error en IE 3, font-size debe ser el último elemento en una declaración)
{font-style: italic|oblique|normal}
{font-weight: normal|bold}
{font-weight: 400|900}
{font-weight: lighter|bolder}
{font-variant: small-caps}
{text-transform: uppercase|lowercase|capitalize|none}
{text-decoration: underline|overline|line-through|blink|none}
{word-spacing: 1em|1in|1cm|1mm|1pt|pc|1ex|1px}
{letter-spacing: 1em|1in|1cm|1mm|1pt|pc|1ex|1px}
{line-height: por número | por unidad | por porcentaje}
{text-align: center|left|right|justify}
{vertical-align: top|bottom|text-top|text-bottom|baseline|middle|sub|super}
{text-indent: 2em|2%|-10px}
{margin-top(|bottom|left|right): por número | por unidad | por porcentaje} (acepta cantidades
negativas)
{padding-top(|bottom|left|right): por número | por unidad | por porcentaje} (no acepta
cantidades negativas)
{border-top-width(|bottom-width|left-width|right-width): por número | por unidad | por
porcentaje}
{border-top-width(|bottom-width|left-width|right-width): thin|medium|thick}
{border-width: } (todos a la vez)
{boder-color: #666669 #FF0033 #000000 #FFFF99} (arriba-derecha-abajo-izquierda)
{border-style: solid|double|dotted|dashed|groove|ridge|inset|outset}
{float: left|right}
{clear: left|right|both} (anula el float)
{color: por nombres color | por números hexadecimales | por valores RGB }
aqua | #336699 | rgb(51,204,0)
{background-color: color|transparent}
{background-image: url(/imagen.gif)|none}
{background-repeat: no-repeat|repeat-x|repeat-y|repeat}
{background-attachment: fixed|scroll} (en body)
{background-position: center|left|right bottom|top || 70px 10px || 75% 50%}
{background: url(laquesea.gif) #CCFFC repeat-y top right}
{position: absolute; left: 100px; top: 43px; width: 150 px; height: 15px; z-index: 1}
{position: relative; left: 40px; top: 10px}
{position: static }
{overflow: scroll|visible|hidden|auto} overflow controla {width} y {height}
{visibility: hidden|visible|inherit}
{clip: rect(10px 200px 100 px 40px)} (sólo con elementos absolutamente posicionados)
{z-index: 10 }
body
body
body
body
text
link
alink
vlink
color texto
enlaces no visitados
enlaces seleccionados
enlaces visitados
Página 3 de 7
a:link
a:active
a:hover
a:visited
enlaces
enlaces
enlaces
enlaces
sin visitar
cuando se hace clic
sobre los que se pone el ratón
ya visitados
Medidas
in
cm
mm
pt
pc
em
ex
px
pulgadas
centímetros
milímetros
puntos
picas
ems
x-height
píxels
16 colores básicos
negro
(black)
plata
(silver)
gris
(gray)
blanco
(white)
marrón
(maroon)
rojo
(red)
morado
(purple)
fucsia
(fuchsia)
verde
(green)
lima
(lime)
verde oliva
(olive)
amarillo
(yellow)
azúl marino (navy)
azúl
(blue)
azul verdoso no claro(teal)
agua
(aqua)
#000000
#C0C0C0
#808080
#FFFFFF
#800000
#FF0000
#800080
#FF00FF
#008000
#00FF00
#808000
#FFFF00
#000080
#0000FF
#008080
#00FFFF
Caracteres especiales
Á
È
Ü
<
>
&
"
®
©
)
(
'
€
&Aacute;
&Egrave;
&Uuml;
&lt;
&gt;
&amp;
&quot;
&#174; registrado
&#169; copyright
&#168;
&#173;
&#021;
&#8364; ( también como &euro; )
&nbsp; ( espacio no rompible, también &#160; y &#xA0; )
espacio
&#x0020;
tabulador
&#x0009;
carácter
&#número_ascii;
Página 4 de 7
Etiquetas en general
referencia para enviar un correo (a mailto)
<a href="mailto:yo@filol.ucm.es?subject=Asunto">texto-que-remite</a>
referencia para enviar a otra página
<a href="pagina.html">texto-que-remite</a>
referencia para enviar a otra página desde un gráfico
<a href="pagina.html"><img src="imagen.png">texto-que-remite</a>
referencia a cadena de texto en la misma página
<a href="#clave">texto que remite</a>
<a id="clave">cadena de texto</a>
referencia a cadena de texto en otra página
<a href="otrapág.html#clave>texto que remite</a>
<a id="clave">cadena de texto</a>
<a href="laquesea.html" target="_blank">envia a nueva página</a>
puede ser _blank (nueva ventana), _self (en el mismo marco), _parent (frameset superior),
_top (ventana original)
correo
<address>yo@filol.ucm.es</adress>
Abreviatura y acrónimo
<abbr title="HyperText Markup Language">HTML</abbr>
<acronym title="SAAS" lang="en">SAAS</acronym>
texto preformateado (espaciado fijo, valen espacios, nuevas línea, tabs)
<pre>texto</pre>
inserta línea
<hr>
inserta línea con determinadas especificaciones
<hr size=6 width=70% align=center noshade>
Imágenes
<img src="imagen.gif" alt="[texto_alternativo]" width=235 height=124>
alt="[--&gt;]" representa la flecha
alt="[- (NUEVO! -]"
'width' y 'height' son importantes para acelerar la descarga
línea nueva
<br />
párrafo
<p>
<p lang="fr">
Párrafo numerado (ordered lists)
<ol>
<li>texto</li>
<li>texto</li>
<li>texto</li>
</ol>
Página 5 de 7
Opciones de listas (en <ol> para toda la lista o en <li> para ítem)
type=A|a|I|i
<ol start=2>
<li value=2>
Donde <li> marca un parágrafo con una bola (!) por delante (unnumbered lists)
<ul>
<li>texto</li>
<li>texto</li>
<li>texto</li>
</ul>
sonido
<bgsound src=fichero.wav loop=5>
Sonido tras cargar página
<meta HTTP-EQUIV="Refresh" content="60; URL=http://www.ucm.es/loquesea.wav">
Tras 60 segundos suena loquesea.wav
Cargar una páginaautomáticamente
<meta HTTP-EQUIV="Refresh" content="10; URL=http://www.ucm.es/loquesea.html">
Tras 10 segundos se carga loquesea.html
Tablas
Donde bgcolor es el color de fondo, border es el filete de una tabla, y 360 su ancho en
columnas
<table bgcolor="#FFFF66" border=6 width=50%>
<caption>título de la tabla</caption>
<th>texto centrado fil1 col 1</th>
<th>texto centrado fil1 col 2</th>
<tr>
<td width=50%>fila 1 columna 1</td>
<td>fila 1 columna 2</td>
</tr>
<tr>
<td>fila 2 columna 1</td>
<td>fila 2 columna 2</td>
</tr>
</table>
Celda en tabla con un ancho de 4 columnas
<td COLspan=4>
Celda en tabla con una altura de 2 filas
<td ROWspan=2>
Marcos
En <head> ponemos para 2 columnas
<frameset cols="10%,90%">
Para 3 frames verticales
<frameset rows="20%,60%,20%">
Se pueden poner anidadas
<frameset rows="10%,90%">
<frame src="fichero.html">
<frameset cols="35%,65%">
<frame src="fichero2.html">
Página 6 de 7
<frame src="fichero3.html">
</frameset>
</frameset>
Opciones
scrolling
name [para asignar identificador para poder ser invocado por otros frames como una ventana
destino]
Página 7 de 7
