S1-Basico de PHP y HTML PDF

BASICO DE PHP
Historia de PHP
PHP/FI
PHP es el heredero de un producto anterior, llamado PHP/FI. PHP/FI fue creado por Rasmus Lerdorf en
1995, inicialmente como un simple conjunto de scripts de Perl para controlar los accesos a su trabajo
online. Llam a ese conjunto de scripts 'Personal Home Page Tools'. Segn se requera ms
funcionalidad, Rasmus fue escribiendo una implementacin C mucho mayor, que era capaz de
comunicarse con bases de datos, y permita a los usuarios desarrollar sencillas aplicaciones Web
dinmicas. Rasmus eligi liberar el cdigo fuente de PHP/FI para que cualquiera pudiese utilizarlo, as
como arreglar errores y mejorar el cdigo.
PHP/FI, que se mantuvo para pginas personales y como intrprete de formularios, inclua algunas de
las funcionalidades bsicas de PHP tal y como lo conocemos hoy. Tena variables como las de Perl,
interpretacin automtica de variables de formulario y sintaxis embebida HTML. La sintaxis por s
misma era similar a la de Perl, aunque mucho ms limitada, simple y algo inconsistente.
Por 1997, PHP/FI 2.0, la segunda escritura de la implementacin en C, tuvo un seguimiento estimado
de varios miles de usuarios en todo el mundo, con aproximadamente 50.000 dominios informando que
lo tenan instalado, sumando alrededor del 1% de los dominios de Internet. Mientras haba mucha
gente contribuyendo con bits de cdigo a este proyecto, era todava en su mayor parte el proyecto de
una sola persona.
PHP/FI 2.0 no se liber oficialmente hasta Noviembre de 1997, despus de gastar la mayora de su
vida en desarrollos beta. Fue sucedido en breve tiempo por las primeras versiones alfa de PHP 3.0.
PHP 3
PHP 3.0 era la primera versin que se pareca fielmente al PHP tal y como lo conocemos hoy en da.
Fue creado por Andi Gutmans y Zeev Zuraski en 1997 reescribindolo completamente, despus de que
encontraran que PHP/FI 2.0 tena pocas posibilidades para desarrollar una aplicacin comercial que
estaban desarrollando para un projecto universitario. En un esfuerzo para cooperar y empezar a
construir sobre la base de usuarios de PHP/FI existente, Andi, Rasmus y Zeev decidieron cooperar y
anunciar PHP 3.0 como el sucesor oficial de PHP/FI 2.0, interrumpindose en su mayor parte el
desarrollo de PHP/FI 2.0.
Una de las mejores caractersticas de PHP 3.0 era su gran extensibilidad. Adems de proveer a los
usuarios finales de una slida infraestructura para muchsimas bases de datos, protocolos y APIs, las
caractersticas de extensibilidad de PHP 3.0 atrajeron a docenas de desarrolladores a unirse y enviar
nuevos mdulos de extensin. Sin duda, sta fue la clave del enorme xito de PHP 3.0. Otras
caractersticas clave introducidas en PHP 3.0 fueron el soporte de sintxis orientado a objetos y una
sintxis de lenguaje mucho ms potente y consistente.
Todo el nuevo lenguaje fue liberado bajo un nuevo nombre, que borraba la implicacin de uso personal
limitado que tena el nombre PHP/FI 2.0. Se llam 'PHP' a secas, con el significado de ser un acrnimo
recursivo - PHP: Hypertext Preprocessor.
A finales de 1998, PHP creci hasta una base de instalacin de decenas de millares de usuarios
(estimados) y cientos de miles de sitios Web informando de su instalacin. En su apogeo, PHP 3.0
estaba instalado en aproximadamente un 10% de los servidores Web en Internet.
PHP 3.0 se liber oficialmente en Junio de 1998, despus de haber gastado unos 9 meses en pruebas
pblicas.
1
PHP 4
En el invierno de 1998, poco despus del lanzamiento oficial de PHP 3.0, Andi Gutmans y Zeev Suraski
comenzaron a trabajar en la reescritura del ncleo de PHP. Los objetivos de diseo fueron mejorar la
ejecucin de aplicaciones complejas, y mejorar la modularidad del cdigo base de PHP. Estas
aplicaciones se hicieron posibles por las nuevas caractersticas de PHP 3.0 y el apoyo de una gran
variedad de bases de datos y APIs de terceros, pero PHP 3.0 no fue diseado para el mantenimiento
tan complejo de aplicaciones eficientemente.
El nuevo motor, apodado 'Motor Zend' (comprimido de sus apellidos, Zeev y Andi), alcanz estos
objetivos de diseo satisfactoriamente, y se introdujo por primera vez a mediados de 1999. PHP 4.0,
basado en este motor, y acoplado con un gran rango de nuevas caractersticas adicionales, fue
oficialmente liberado en Mayo de 2000, casi dos aos despus que su predecesor, PHP 3.0. Adems de
la mejora de ejecucin de esta versin, PHP 4.0 inclua otras caractersticas clave como el soporte para
la mayora de los servidores Web, sesiones HTTP, buffers de salida, formas ms seguras de controlar
las entradas de usuario y muchas nuevas construcciones de lenguaje.
PHP 4 es actualmente la ltima versin liberada de PHP. Ya se est trabajando en modificar y mejorar
el motor Zend para integrar las caractersticas que se disearan para PHP 5.0.
Hoy, se estima que PHP es usado por cientos de miles de programadores y muchos millones de sitios
informan que lo tienen instalado, sumando ms del 20% de los dominios en Internet.
El equipo de desarrollo de PHP incluye docenas de programadores, as como otras docenas de

personas trabajando en proyectos relacionados con PHP como PEAR y el proyecto de documentacin.
PHP 5
El 13 de julio de 2004, fue lanzado PHP 5, utilizando el motor Zend Engine 2.0 (o Zend Engine 2). La
versin ms reciente de PHP es la 5.3.6 (17 de marzo de 2011), que incluye todas las ventajas que
provee el nuevo Zend Engine 2. Tales como:
Mejor soporte para la programacin orientada a objetos, que en versiones anteriores era
extremadamente rudimentario.
Mejoras de rendimiento.
Mejor soporte para MySQL con extensin completamente reescrita.
Mejor soporte a XML (XPath, DOM, etc.).
Soporte nativo para SQLite.
Soporte integrado para SOAP.
Iteradores de datos.
Manejo de excepciones.
Mejoras con la implementacin con Oracle.
Qu es PHP?
PHP (acrnimo de "PHP: Hypertext Preprocessor") es un lenguaje de "cdigo abierto"

interpretado, de alto nivel, embebido en pginas HTML y ejecutado en el servidor.
Una respuesta corta y concisa, pero, qu significa realmente? Un ejemplo nos aclarar
las cosas:
2
Example #1 Un ejemplo introductorio
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<?php
echo "Hola, Soy un script PHP!";
?>
</body>
</html>
Puede apreciarse que no es lo mismo que un script escrito en otro lenguaje de

programacin como Perl o C -- En vez de escribir un programa con muchos comandos
para crear una salida en HTML, escribimos el cdigo HTML con cierto cdigo PHP
embebido (incluido) en el mismo, que producir cierta salida (en nuestro ejemplo,
producir un texto). El cdigo PHP se incluye entre etiquetas especiales de comienzo y
final que nos permitirn entrar y salir del modo PHP.
Lo que distingue a PHP de la tecnologa Javascript, la cual se ejecuta en la mquina

cliente, es que el cdigo PHP es ejecutado en el servidor. Si tuvisemos un script similar
al de nuestro ejemplo en nuestro servidor, el cliente solamente recibira el resultado de
su ejecucin en el servidor, sin ninguna posibilidad de determinar qu cdigo ha
producido el resultado recibido. El servidor web puede ser incluso configurado para que
procese todos los archivos HTML con PHP.
Lo mejor de usar PHP es que es extremadamente simple para el principiante, pero a su

vez, ofrece muchas caractersticas avanzadas para los programadores profesionales. No
sienta miedo de leer la larga lista de caractersticas de PHP, en poco tiempo podr
empezar a escribir sus primeros scripts.
Aunque el desarrollo de PHP est concentrado en la programacin de scripts en el lado

del servidor, se puede utilizar para muchas otras cosas.
Qu se puede hacer con PHP?
PHP puede hacer cualquier cosa que se pueda hacer con un script CGI, como procesar la
informacin de formularios, generar pginas con contenidos dinmicos, o enviar y
recibir cookies. Y esto no es todo, se puede hacer mucho ms.
Existen tres campos en los que se usan scripts escritos en PHP.
Scripts del lado del servidor: Este es el campo ms tradicional y el principal

foco de trabajo. Se necesitan tres cosas para que esto funcione.
o El intrprete PHP (CGI mdulo),
o un servidor web y
o un navegador. Es necesario correr el servidor web con PHP instalado.
3
El resultado del programa PHP se puede obtener a travs del navegador, conectndose
con el servidor web.
Scripts en la lnea de comandos. Puede crear un script PHP y correrlo sin

ningn servidor web o navegador. Solamente necesita el intrprete PHP para
usarlo de esta manera. Este tipo de uso es ideal para scripts ejecutados
regularmente desde cron (en *nix o Linux) o el Planificador de tareas (en
Windows). Estos scripts tambin pueden ser usados para tareas simples de
procesamiento de texto.
Escribir aplicaciones de interfaz grfica. Probablemente PHP no sea el
lenguaje ms apropiado para escribir aplicaciones grficas, pero si conoce bien
PHP, y quisiera utilizar algunas caractersticas avanzadas en programas clientes,
puede utilizar PHP-GTK para escribir dichos programas. Tambin es posible
escribir aplicaciones independientes de una plataforma. PHP-GTK es una
extensin de PHP, no disponible en la distribucin principal.
PHP puede ser utilizado en cualquiera de los principales sistemas operativos del
mercado, incluyendo Linux, muchas variantes Unix (incluyendo HP-UX, Solaris y
OpenBSD), Microsoft Windows, Mac OS X, RISC OS y probablemente alguno ms. PHP
soporta la mayora de servidores web de hoy en da, incluyendo Apache, Microsoft
Internet Information Server, Personal Web Server, Netscape e iPlanet, Oreilly Website
Pro server, Caudium, Xitami, OmniHTTPd y muchos otros. PHP tiene mdulos
disponibles para la mayora de los servidores, para aquellos otros que soporten el
estndar CGI, PHP puede usarse como procesador CGI.
De modo que, con PHP tiene la libertad de elegir el sistema operativo y el servidor de su
gusto. Tambin tiene la posibilidad de usar programacin procedimental o programacin
orientada a objetos. Aunque no todas las caractersticas estndar de la programacin
orientada a objetos estn implementadas en la versin actual de PHP, muchas
bibliotecas y aplicaciones grandes (incluyendo la biblioteca PEAR) estn escritas
ntegramente usando programacin orientada a objetos.
Con PHP no se encuentra limitado a resultados en HTML. Entre las habilidades de PHP se
incluyen: creacin de imgenes, archivos PDF y pelculas Flash (usando libswf y Ming)
sobre la marcha. Tambi puede presentar otros resultados, como XHTM y archivos XML.
PHP puede autogenerar stos archivos y almacenarlos en el sistema de archivos en vez
de presentarlos en la pantalla.
Quizs la caracterstica ms potente y destacable de PHP es su soporte para una gran

cantidad de bases de datos. Escribir un interfaz va web para una base de datos es una
tarea simple con PHP. Las siguientes bases de datos estn soportadas actualmente:
Adabas D dBase
Empress FilePro (read-only)
Hyperwave IBM DB2
Informix Ingres
InterBase FrontBase
4
mSQL Direct MS-SQL
MySQL ODBC
Oracle (OCI7 and OCI8) Ovrimos
PostgreSQL Solid
Sybase Velocis
Unix dbm Otras
Tambin cuenta con una extensin DBX de abstraccin de base de datos que permite
usar de forma transparente cualquier base de datos soportada por la extensin.
Adicionalmente, PHP soporta ODBC (el Estndar Abierto de Conexin con Bases de
Datos), asi que puede conectarse a cualquier base de datos que soporte tal estndar.
PHP tambin cuenta con soporte para comunicarse con otros servicios usando
protocolos tales como LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (en Windows) y
muchos otros. Tambin se pueden crear sockets puros. PHP soporta WDDX para el
intercambio de datos entre lenguajes de programacin en web. Y hablando de
interconexin, PHP puede utilizar objetos Java de forma transparente como objetos PHP
Y la extensin de CORBA puede ser utilizada para acceder a objetos remotos.
PHP tiene unas caractersticas muy tiles para el procesamiento de texto, desde
expresiones regulares POSIX extendidas o tipo Perl hasta procesadores de documentos
XML. Para procesar y acceder a documentos XML, soportamos los estndares SAX y
DOM. Puede utilizar la extensin XSLT para transformar documentos XML.
Si usa PHP en el campo del comercio electrnico, encontrar muy tiles las funciones
Cybercash, CyberMUT, VeriSign Payflow Pro y CCVS para sus programas de pago.
Para terminar, contamos con muchas otras extensiones muy interesantes, las funciones
del motor de bsquedas mnoGoSearch, funciones para pasarelas de IRC, utilidades de
compresin (gzip, bz2),, conversin de calendarios, traduccin .....
Qu necesito?
En este manual se asume que cuenta con un servidor que soporta PHP y que todos los
archivos con la extensin .php son manejados por PHP. En la mayora de servidores, sta es
la extensin que toman los archivos PHP por defecto, pero pregunte al administrador de su
servidor para estar seguro. Si su servidor soporta PHP, entonces no necesita hacer nada,
solamente crear sus archivos .php y guardarlos en su directorio web, y el servidor, como por
arte de magia, los analizar para . No hay necesidad de compilar nada, tampoco tiene
necesidad de instalar otras herramientas. Mrelo de esta manera, estos archivos de PHP son
tan simples como archivos de HTML con una nueva familia de etiquetas que le permiten una
gran cantidad de cosas. La mayora de las compaas de hospedaje de pginas web ofrecen
el soporte que necesita para usar PHP, pero si por alguna razn ellos no lo hacen, considere
leer la seccin titulada Recursos PHP para mas informacin acerca de compaas de
hospedaje que soportan PHP
Digamos que tiene limitado acceso a internet y se encuentra programando localmente. En

este caso, querr instalar un servidor de web como Apache, y PHP. Lo ms seguro es que
tambin quiera instalar una base de datos como MySQL. Puede instalar estos productos
individualmente o simplemente localizar un paquete pre-configurado que automticamente
5
instale todos estos productos con solamente unos movimientos de su mouse. Es muy fcil
instalar un servidor web con soporte para PHP en cualquier sistema operativo, incluyendo
Linux y Windows. En Linux, rpmfind y PBone le ayudarn a encontrar un RPM.
Como funciona el interpete de PHP con ZEND?
El navegador realiza una llamada al servidor web, que pasa la peticin a travs de la
interfaz PHP del servidor web(1). La interfaz del servidor web llama al intrprete Zend
(2), que accede al disco donde estn las pginas PHP. El servidor web recupera el
cdigo de la pgina PHP y lo enva al compilador (3). El compilador de Zend crea una
versin compilada de la pgina que es pasada al mdulo de ejecucin de Zend (4). Este
mdulo genera el cdigo HTML que ser visto por el navegador. Si existieran llamadas
a otros mdulos, como bases de datos, XML o Java, el intrprete de Zend la enva a
travs del mdulo especfico para procesar la peticin, y devuelve el resultado a la
interfaz del servidor web (5) que enviar el cdigo HTML al navegador (6).
Con Zend Compiler se permitir a los desarrolladores compilar sus propios script de
PHP y distribuirlos. De esta forma se pretende proteger el cdigo fuente y as crear una
especie de copyright, permitiendo a las empresas crear aplicaciones y soluciones
software basado en PHP. Adems tambin se espera la presentacin de productos
como Zend Cach, un mdulo que almacena en una memoria intermedia del servidor
web la aplicacin PHP ya interpretada. Este proceso consigue mejorar el tiempo de
respuesta de cara al usuario siendo ideal para website con gran cantidad de visitas. De
esta forma se trata de evitar las continuas compilaciones de las pginas cada vez que
son solicitadas.
6
Inconvenientes
Como es un lenguaje que se interpreta en ejecucin, para ciertos usos puede

resultar un inconveniente que el cdigo fuente no pueda ser ocultado.
La ofuscacin (se refiere a encubrir el significado de una comunicacin hacindola ms
confusa y complicada de interpretar) es una tcnica que puede dificultar la lectura
del cdigo pero no la impide y, en ciertos casos, representa un costo en tiempos
de ejecucin.
Ejemplos ofuscacin.
Un ejemplo simple de ofuscacin es llamar a las variables o funciones con palabras reservadas
del lenguaje aadiendo algn smbolo
int int_;
Con esta lnea definimos una variable de tipo entero.
long int _int(int int_){return int_-int_};
Con esta lnea definimos una funcin con un parmetro entero que devuelve un valor long int,
que por otra parte siempre ser 0.
_int-_int;
Esto equivale a poner 0.
(_int-_int)!;
(((!(int_-int_)<<!(int_-int_))<<(!(int_-int_)<<!(int_-int_)))|(!(int_-
int_)<<!(int_-int_)));
Como interpreta?
PHP toma cdigo dentro de las pginas, lo ejecuta en el

servidor y enva el resultado al cliente. El cliente no puede
visualizar el cdigo del programa, slo su resultado.
Adems, por ser un lenguaje de scripting, los programas no
se compilan, sino slo se interpretan; esto significa que es
ms lento en ejecutarse que, por ejemplo, un programa en
7
C, pero al mismo tiempo los cambios en el cdigo PHP tienen efecto de inmediato.
No todos los archivos son interpretados por el plug-in de PHP, sino slo aquellos que hayan sido
definidos en la configuracin del servidor como tales, puesto que la interpretacin de cdigo es un
proceso que toma un tiempo mayor al que se emplea en enviar una pgina tal como est. Es comn
utilizar una o varias de las siguientes extensiones para informar al servidor que debe interpretarlas:
.php, .phtml, .php3 y .php4.
Existen mltiples formas de incluir cdigo PHP:
<?php echo("Hello World") ?>
<? echo("Hello World") ?>
<script language="php"> echo("Hello World"); </script>
<% echo("Hello World") %>
Puede ser que no todas estn disponibles en su sistema, esto depende de la instalacin que haya
realizado. Ante la duda, utilice la primera forma
Todas las instrucciones se separan de la instruccin siguiente con un ; (punto y coma), y se asume que
el final de la inclusin de cdigo limita instrucciones:
<% echo( "hola" ) %> <% echo( "chao" ) %>
<% echo( "hola" ); echo( "chao" ); %>
Etiquetas de apertura y de fin de bloque de PHP
1-.
<?php
echo 'si se quiere mostrar documentos XHTML o XML, debe hacerse as';
?>
2-.
<script language="php">
echo 'algunos editores (como FrontPage) no les gusta
las instruciones de proceso';
</script>
3-.
<? echo 'esta es la forma ms simple, una instrucin de procesado SGML'; ?>
<?= expression ?> Esto es una forma corta para "<? echo expression ?>"
8
4-.
<% echo 'Quiz use de forma opcional etiquetas de estilo ASP'; %>
<%= $variable; # Esto es una forma corta para "<% echo . . ." %>
Las etiquetas vistas en los ejemplos uno y dos estn siempre disponibles, el ejemplo uno es el
ms comn y recomendado de los dos.
Las etiquetas cortas (ejemplo tres) estn solo disponibles cuando se activan mediante la directiva
short_open_tag en el fichero de configuracin php.ini o si PHP se configur con la opcin --
enable-short-tags .
Las etiquetas de estilo ASP (ejemplo cuatro) estn solo disponibles cuando se activan mediante la
directiva asp_tags en el fichero de configuracin php.ini.
Nota 1:
El uso de etiquetas cortas debe ser evitado cuando se desarrollan aplicaciones o librerias que estn pensadas para su
redistribucin, o extender en servidores PHP que no estn bajo su control, porque quiz las etiquetas cortas no estn
soportadas en un servidor determinado. Por portabilidad, redistribucin de cdigo, asegrese no usar etiquetas cortas.
Nota 2:
En PHP 5.2 y anteriores, no se permite que un fichero contenga nicamente la etiqueta de inicio de bloque <?php.
En PHP 5.3 si se permite.
Nota 3:
Desde PHP 5.4, la etiqueta abreviada de echo <?= siempre es reconocida y vlida, sin tener en cuenta la
configuracin de short_open_tag.
Comentarios
Los comentarios en PHP se pueden poner en varios formatos, de tipo C, C++ y Shell. Si bien se puede
hacer, no es recomendable mezclar distintos tipos de comentario en un archivo, sino elegir una sintaxis
y quedarse con ella durante todo el documento.
<?
echo( "Hello World" )
/* comentario
de
varias lneas */
// comentario de una lnea

?>
Como en la mayora de los lenguajes, no se pueden poner comentarios dentro de otros comentarios.
Variables y tipos de dato
9
Cuatro tipos escalares:
boolean
integer
float (nmero de punto flotante, tambin conocido como double)
string
Dos tipos compuestos:
array
object
Y finalmente dos tipos especiales:
resource
NULL
Las variables de tipo entero, flotante, string, arreglo y objeto. Todos comienzan con un signo $ya
continuacin un identificador ($a, $linea, etc.) que es sensible a maysculas y minsculas.
Normalmente PHP elegir un tipo apropiado de acuerdo al contexto para cada variable:
$a = 123; # entero
$a = 123.1; # flotante
$a = "abc"; # string
Los arreglos se denominan $arreglo[indice] en que indice puede ser un entero o un string. Esto permite
crear fcilmente arreglos asociativos (tablas de hashing).
$a[0] = "aaa";
$a[1] = 22;
$edad["pedro"] = 30;
$edad["agustin"] = 35;
$direccion["pedro"] = "Las Pataguas 123";
Nota: Para comprobar el tipo y el valor de una expresin, utilice la funcin var_dump().
Para obtener una representacin legible para humanos del tipo para propsitos de depuracin, use
la funcin gettype(). Para comprobar un cierto tipo, no use gettype(), si no las funciones is_tipo.
Algunos ejemplos:
<?php
$un_bool = TRUE; // un valor booleano
$un_str = "foot"; // una cadena
$un_str2 = 'foot'; // una cadena
10
$un_int = 12; // un entero
echo gettype($un_bool); // imprime: boolean

echo gettype($un_str); // imprime: string
// Si este valor es un entero, incrementarlo en cuatro

if (is_int($un_int)) {
$un_int += 4;
}
// Si $a_bool es una cadena, imprimirla

// (no imprime nada)
if (is_string($un_bool)) {
echo "Cadena: $un_bool";
}
?>
Booleanos
Este es el tipo ms simple. Un boolean expresa un valor de verdad. Puede ser TRUE or FALSE.
Sintaxis
Para especificar un literal boolean, use alguna de las palabras clave TRUE o FALSE. Ambas son
insensibles a maysculas y minsculas.
<?php
$foo = True; // asigna el valor TRUE a $foo
?>
Usualmente, el resultado de un operador que devuelve un valor boolean es pasado a una

estructura de control.
<?php
// == es un operador que prueba por
// igualdad y devuelve un booleano
if ($accion == "mostrar_version") {
echo "La versin es 1.23";
}
// esto no es necesario...
if ($mostrar_separadores == TRUE) {
echo "<hr>\n";
}
// ...porque se puede escribir simplemente:

if ($mostrar_separadores) {
echo "<hr>\n";
}
?>
11
Conversin a booleano
Para convertir explcitamente un valor a boolean, use el moldeamiento (bool) o (boolean). Sin
embargo, en la mayora de casos no es necesario usar el moldeamiento, ya que un valor ser
convertido automticamente si un operador, funcin o estructura de control requiere un
argumento tipo boolean.
Cuando se realizan conversiones a boolean, los siguientes valores son considerados FALSE:
el boolean FALSE mismo

el integer 0 (cero)
el float 0.0 (cero)
el valor string vaco, y el string "0"
un array con cero elementos
un object con cero variables miembro (slo en PHP 4)
el tipo especial NULL (incluyendo variables no definidas)
objetos SimpleXML creados desde etiquetas vacas
Cualquier otro valor es considerado TRUE (incluyendo cualquier resource).
Advertencia
-1 es considerado TRUE, como cualquier otro nmero diferente a cero (ya sea negativo o
positivo!)
<?php
var_dump((bool) ""); // bool(false)
var_dump((bool) 1); // bool(true)
var_dump((bool) -2); // bool(true)
var_dump((bool) "foo"); // bool(true)
var_dump((bool) 2.3e5); // bool(true)
var_dump((bool) array(12)); // bool(true)
var_dump((bool) array()); // bool(false)
var_dump((bool) "false"); // bool(true)
?>
Enteros
Un entero o integer es un nmero del conjunto = {..., -2, -1, 0, 1, 2, ...}.
Sintaxis
Los integer pueden ser especificados mediante notacin decimal (base 10), hexadecimal (base
16), octal (base 8) o binaria (base 2), opcionalmente precedidos por un signo (- o +).
Los literales integer binarios estn disponibles desde PHP 5.4.0.
12
Para usar la notacin octal, se antepone al nmero un 0 (cero). Para usar la notacin hexadecimal,
se antepone al nmero un 0x. Para usar la notacin binaria, se antepone al nmero un 0b.
Ejemplo #1 Enteros literales
<?php
$a = 1234; // nmero decimal
$a = -123; // un nmero negativo
$a = 0123; // nmero octal (equivalente a 83 decimal)
$a = 0x1A; // nmero hexadecimal (equivalente a 26 decimal)
?>
Formalmente, la estructura de integer literales es:
decimal : [1-9][0-9]*
| 0
hexadecimal : 0[xX][0-9a-fA-F]+
octal : 0[0-7]+
binario : 0b[01]+
entero : [+-]?decimal
| [+-]?hexadecimal
| [+-]?octal
| [+-]?binary
El tamao de un integer depende de la plataforma, aunque un valor mximo de aproximadamente

dos billones es un valor usual (para 32 bits con signo). Las plataformas de 64-bits normalmente
tienen un valor mximo de aproximadamente 9E18. PHP no admite integers sin signo. El tamao
de los integer puede ser determinado mediante la constante PHP_INT_SIZE y el valor mximo
mediante la constante PHP_INT_MAX desde PHP 4.4.0 y PHP 5.0.5.
Advertencia
Si en un integer octal se da un dgito incorrecto (por ejemplo 8 o 9), el resto del nmero se
ignora.
Ejemplo #2 Octal raros
<?php
var_dump(01090); // 010 octal = 8 decimal
?>
Desbordamiento de enteros
Si PHP encuentra un nmero fuera de los lmites de un integer, se interpretar como un float en
su lugar. Tambien, una operacin cuyo resultado es un nmero fuera de los lmites de un integer
devolver en su lugar un float.
13
Ejemplo #3 Desbordamiento de enteros en sistemas 32-bits
<?php
$large_number = 2147483647;
var_dump($large_number); // int(2147483647)
$large_number = 2147483648;
var_dump($large_number); // float(2147483648)
$million = 1000000;
$large_number = 50000 * $million;
var_dump($large_number); // float(50000000000)
?>
Ejemplo #4 Desbordamiento de enteros en sistemas 64-bits
<?php
$large_number = 9223372036854775807;
var_dump($large_number); // int(9223372036854775807)
$large_number = 9223372036854775808;
var_dump($large_number); // float(9.2233720368548E+18)
$million = 1000000;
$large_number = 50000000000000 * $million;
var_dump($large_number); // float(5.0E+19)
?>
No existe operador de divisin de integer en PHP. 1/2produce el float 0.5. El valor puede ser
forzado a ser un integer redondeando por defecto, o mediante la funcin round() que permite un
mayor control sobre el redondeo.
<?php
var_dump(25/7); // float(3.5714285714286)
var_dump((int) (25/7)); // int(3)
var_dump(round(25/7)); // float(4)
?>
Conversin a enteros
Para convertir explicitamente un valor a integer, se puede emplear tanto (int) como (integer). Sin
embargo, la mayora de las veces la conversin no es necesaria, ya que un valor es convertido de
forma automtica cuando un operador, funcin o estructura de control necesite un argumento del
tipo integer. Un valor tambien puede ser convertido a integer mediante la funcin intval().
Desde booleanos
FALSE produce 0 (cero), y TRUE produce 1 (uno).
14
Desde nmeros de punto flotante
Cuando se convierte de un float a un integer, el nmero ser redondeado hacia cero.
Si el float esta por debajo de los lmites de un integer (normalmente +/- 2.15e+9 = 2^31 en
plataformas de 32 bits y +/- 9.22e+18 = 2^63 en plataformas de 64 bits), el resultado es
indefinido, debido a que float no tiene la precisin suficiente para ofrecer el resultado como un
integer exacto. No se mostrar ninguna advertencia, ni siquiera un aviso cuando esto ocurre!
Advertencia
Nunca se debe convertir una fraccin desconocida a un integer, ya que a veces puede producir
resultados inesperados.
<?php
echo (int) ( (0.1+0.7) * 10 ); // muestra 7!
?>
Nmeros de punto flotante

Los nmeros de punto flotante (tambin conocidos como "flotantes", "dobles" o "nmeros
reales") pueden ser especificados usando cualquiera de las siguientes sintaxis:
<?php
$a = 1.234;
$b = 1.2e3;
$c = 7E-10;
?>
Formalmente:
LNUM [0-9]+
DNUM ([0-9]*[\.]{LNUM}) | ({LNUM}[\.][0-9]*)
EXPONENT_DNUM [+-]?(({LNUM} | {DNUM}) [eE][+-]? {LNUM})
El tamao de un flotante depende de la plataforma, aunque un valor comn consiste en un

mximo de ~1.8e308 con una precisin de aproximadamente 14 dgitos decimales (lo que es un
valor de 64 bits en formato IEEE).
Advertencia
Precisin del punto flotante

Los nmeros de punto flotante tienen una precisin limitada. Aunque depende del sistema, PHP
tpicamente utiliza el formato de doble precisin IEEE 754, el cual dar un error relativo mximo
por aproximacin del orden de 1.11e-16. Las operaciones aritmticas elementales no podrn dar
grandes errores y por supuesto, los errores por propagacin deben ser considerados cuando varias
operaciones son compuestas.
15
Adicionalmente, los numeros racionales que son representables exactamente como nmeros de
punto flotante en base 10, como 0.1 o 0.7, no tienen una representacin exacta como nmeros de
punto flotante en base 2, el cual es usado internamente, sin importar el tamao de la mantisa. Por
lo tanto, no se puede convertir en sus contrapartes binarias internas sin una pequea prdida de
precisin. Esto puede llevar a confundir resultados: Por ejemplo, floor((0.1+0.7)*10) usualmente
retornar 7 en lugar del 8 esperado, ya que la representacin interna ser algo as como
7.9999999999999991118....
As que nunca se confa en resultados de nmeros flotantes hasta el ltimo dgito y no se

comparan nmeros de punto flotante directamente para igualdad. Si es necesaria una mejor
precisin, estn disponibles las funciones matemticas de precisin arbitraria y las funciones
gmp.
Conversin a flotante
Para ms informacin sobre las conversiones de string a float, vea Conversin de cadenas a
nmeros. Para valores de otros tipos, la conversin es la misma que si el valor hubiese sido
convertido a integer y luego a float. Vea Conversin a entero para ms informacin. A partir de
PHP 5, una noticia es generada si intenta convertir un objeto a float.
Comparing floats
Como se indica en la advertencia anterior, comprobar la igualdad de valores de punto flotante es

problemtico, debido a la forma en que se representan internamente. Sin embargo, hay maneras
de hacer comparaciones de los valores de punto flotante que trabajan rodeando a estas
limitaciones.
Para comprobar la igualdad de valores de punto flotante, se utiliza un lmite superior en el error
relativo debido al redondeo. Este valor se conoce como el epsilon de la mquina o unidad de
redondeo y es la menor diferencia aceptable en los clculos.
$a y $b son iguales a 5 dgitos de precisin.
<?php
$a = 1.23456789;
$b = 1.23456780;
$epsilon = 0.00001;
if(abs($a-$b) < $epsilon) {

echo "true";
}
?>
NaN
Algunas operaciones numricas pueden resultar en un valor representado por la constante NAN.
Este resultado representa un valor no definido o no representable mediante clculos de coma
16
flotante. Cualquier comparacin, ya sea poco rgida o estricta, de esta valor con cualquier otro
valor, incluido l mismo tendr un resultado de FALSE.
Ya que NAN representa cualquier nmero de diferentes valores, NAN no debera compararse con
otros valores, incluido l mismo; en su lugar debera comprobarse usando la funcin is_nan().
Cadenas
Un string es una serie de caracteres donde un caracter es lo mismo que un byte. Esto significa que
PHP solo soporta el conjunto de 256 caracteres y por lo tanto no tiene soporte nativo Unicode.
Nota: No existe problema alguno para que un string sea muy grande. PHP no impone ningn
lmite para el tamao de un string; el nico lmite es la memoria disponible en el ordenador donde
se est ejecutando PHP.
Sintaxis
Un string literal puede ser especificado de cuatro formas diferentes:
comillas simples
comillas dobles
sintaxis heredoc
sintaxis nowdoc (desde PHP 5.3.0)
Comillas simples
La manera ms sencilla de especificar un string es encerrarlo entre comillas

simples (el caracter ').
Para especificar una comilla simple literal, se escapa con una barra invertida
(\). Para especificar una barra invertida literal, se duplica (\\). Todas las
otras instancias de barras invertidas sern tratadas como una barra invertida
literal: esto significa que otras secuencias de escape que se puedan utilizar,
tales como \r or \n, sern mostradas literalmente como se especifican en
lugar de tener cualquier significado especial
Nota: A diferencia de las sintaxis de comillas dobles y heredoc, las variables

y las sentencias de escape para caracteres especiales no se expandirn
cuando estn incluidas dentro de un string con comillas simples.
<?php
echo 'Esto es una cadena sencilla';
echo 'Tambien puede incluir nuevas lneas en

cadenas de esta forma ya que es
correcto hacerlo as';
17
// Resultado: Arnold una vez dijo: "I'll be back"
echo 'Arnold una vez dijo: "I\'ll be back"';
// Resultado: Ha borrado C:\*.*?

echo 'Ha borrado C:\\*.*?';
// Resultado: Ha borrado C:\*.*?

echo 'Ha borrado C:\*.*?';
// Resultado: Esto no se expandir: \n una nueva lnea

echo 'Esto no se expandir: \n una nueva lnea';
// Resultado: Las variables $tampoco se $expandiran

echo 'Las variables $tampoco se $expandiran';
?>
Comillas dobles
Si un string est encerrado entre comillas dobles ("), PHP interpretar ms sentencias de escape
como caracteres especiales:
Caracteres escapados
Sentencia Significado
\n avance de lnea (LF o 0x0A (10) en ASCII)
\r retorno de carro (CR o 0x0D (13) en ASCII)
\t tabulador horizontal (HT o 0x09 (9) en ASCII)
\v tabulador vertical (VT o 0x0B (11) en ASCII) (desde PHP 5.2.5)
\e escape (ESC o 0x1B (27) en ASCII) (desde PHP 5.4.0)
\f avance de pgina (FF o 0x0C (12) en ASCII) (desde PHP 5.2.5)
\\ barra invertida
\$ signo del dlar
\" comillas dobles
la secuencia de caracteres que coincida con la expresin regular es un caracter
\[0-7]{1,3}
en notacin octal
\x[0-9A-Fa- la secuencia de caracteres que coincida con la expresin regular es un caracter
f]{1,2} en notacin hexadecimal
Al igual que en la delimitacin de un string mediante comillas simples, escapar cualquier otro
caracter puede dar lugar a que se muestre tambien la barra invertida. Antes de PHP 5.1.1, la barra
invertida en \{$var} no se mostraba.
La caracterstica ms importante de entrecomillar un string mediante comillas dobles es el hecho

que los nombres de las variables son expandidas. Consulte string parsing para ms detalles.
18
Anlisis de variables
Cuando un string es especificado mediante comillas dobles, las variables dentro de dicha cadena
son analizadas.
Existen dos tipos de sintaxis: una simple y otra compleja. La sintaxis simple es la ms empleada
y conveniente. Proporciona una forma de incluir una variable, un valor de un array o una
propiedad de un object dentro de un string con el mnimo esfuerzo.
La sintaxis compleja puede ser reconocida por las llaves que encierran la expresin.
Sintaxis simple
Si se encuentra un signo de dlar ($), el analizador vidamente coger el mayor nmero de
smbolos para formar un nombre de variable vlido. Encerrar el nombre de la variable entre
llaves permite especificar explcitamente el final del nombre.
<?php
$jugo = "manzana";
echo "El tom algo de jugo de $jugo.".PHP_EOL;
// Invlido. "s" es un caracter vlido para un nombre de variable, pero la var

iable es $jugo.
echo "El tom algo de jugo hecho de $jugos.";
?>
El resultado del ejemplo sera:
El tom algo de jugo de manzana.

El tom algo de jugo hecho de .
De forma parecida, el ndice de un array o la propiedad de un object puede ser analizado. Con los
ndices de los arrays, el corchete de cierre (]) marca el final del ndice. La misma regla se puede
aplicar a las propiedades de los objetos y a las variables simples.
Ejemplo de sintaxis simple
<?php
$jugos = array("manzana", "naranja", "koolaid1" => "prpura");
echo "El tom algo de jugo de $jugos[0].".PHP_EOL;

echo "El tom algo de jugo de $jugos[1].".PHP_EOL;
echo "El tom algo de jugo hecho de $jugo[0]s.".PHP_EOL;// No funcionar
echo "El tom algo de jugo $jugos[koolaid1].".PHP_EOL;
class people {
public $john = "John Smith";
public $jane = "Jane Smith";
public $robert = "Robert Paulsen";
public $smith = "Smith";

}
19
$people = new people();
echo "$people->john tom algo de jugo de $jugos[0].".PHP_EOL;

echo "$people->john entonces dijo hola a $people->jane.".PHP_EOL;
echo "La esposa de $people->john's salud a $people->robert.".PHP_EOL;
echo "$people->robert salud a los dos $people->smiths."; // No funcionar
?>
El resultado del ejemplo sera:
El tom algo de jugo de manzana.

El tom algo de jugo de naranja.
El tom algo de jugo hecho de s.
El tom algo de jugo prpura.
John Smith tom algo de jugo de manzana.
John Smith entonces dijo hola a Jane Smith.
La esposa de John Smith's salud a Robert Paulsen.
Robert Paulsen salud a los dos .
Para casos ms complejos se debe emplear la sintaxis compleja que se vea luego.
Acceso a cadenas y modificacin por caracteres
Los caracteres dentro de un string pueden ser accedidos y modificados especificando la posicin
de caracter deseado (en base a la posicin cero del primer caracter del string) empleando los
corchetes de array, como en $str[42]. Piense en este caso que un string se comporta como un
array de caracteres. Las funciones substr() y substr_replace() pueden ser empleados para extraer y
reemplazar ms de un caracter.
Nota: Los String tambin pueden accederse utilizando llaves, como en $str{42}, para el mismo
propsito.
Advertencia
Escribir fuera del rango es compensado rellenando el string con espacios. Los tipos que no sean
integer son convertidos a integer. Las compensaciones fuera de rango emiten E_NOTICE. Las
compensaciones negativas emiten E_NOTICE en la escritura pero en la lectura obtienen una
cadena vaca. Slo se emplea el primer carcter de un string asignado. La asignacin de un string
vaco asigna un byte NULL.
Ejemplo #9 Algunos ejemplos de cadenas
<?php
// Obtencin del primer caracter de una cadena
$str = 'Esto es un test.';
$first = $str[0];
// Obtencin del tercer caracter de una cadena

$third = $str[2];
// Obtencin del ltimo caracter de una cadena

$str = 'Esto sigue siendo un test.';
20
$last = $str[strlen($str)-1];
// Modificacin del ltimo caracter de una cadena

$str = 'Mira el mar';
$str[strlen($str)-1] = 'e';
?>
Nota: El acceso a variables de otros tipos (sin incluir arrays u objetos implementando las interfaces apropiadas)
utilizando [] o {} silenciosamente retorna NULL.
Sobre strings se define la concatenacin $a . $b como operador. Para generar caracteres especiales se
usa :
echo " " # (newline)
echo """ # "
echo "$" # $
echo "\" #
Conversin de cadenas a nmeros
Cuando una string es evaluada en un contexto numrico, el valor resultante y el tipo se determina
como se explica a continuacin.
Si el string no contiene ninguno de los caracteres '.', 'e', o 'E' y el valor numrico est entre los
lmites del tipo entero (como se define en PHP_INT_MAX), la string ser evaluada como un integer.
En todos los demas casos ser evaluado como un float.
El valor es dado por la parte inicial del string. Si el string empieza con un nmero vlido, ste
ser el valor usado. De otra forma, el valor ser 0 (cero). Se considera nmero vlido a un signo
opcional, seguido de uno o ms dgitos (opcionalmente puede contener un punto decimal),
seguido de un exponente opcional. El exponente es una 'e' o 'E' seguida de uno o ms dgitos.
<?php
$foo = 1 + "10.5"; // $foo es float (11.5)
$foo = 1 + "-1.3e3"; // $foo es float (-1299)
$foo = 1 + "bob-1.3e3"; // $foo es integer (1)
$foo = 1 + "bob3"; // $foo es integer (1)
$foo = 1 + "10 Small Pigs"; // $foo es integer (11)
$foo = 4 + "10.2 Little Piggies"; // $foo es float (14.2)
$foo = "10.0 pigs " + 1; // $foo es float (11)
$foo = "10.0 pigs " + 1.0; // $foo es float (11)
?>
Para ms informacin sobre esta conversin, consulte la pgina del manual UNIX
correspondiente a strtod(3).
21
Para probar cualquiera de los ejemplos en esta seccin, copie y pegue los ejemplos e incluya la
siguiente lnea para ver que est ocurriendo:
<?php
echo "\$foo==$foo; tipo es " . gettype ($foo) . "<br />\n";
?>
No espere obtener el cdigo de un caracter convirtiendolo a un entero, como ocurre en C. Emplee

las funciones ord() y chr() para convertir entre cdigo ASCII y caracteres.
Detalles del tipo de dato String
En PHP, los string se implementan como una matriz de bytes y con un entero
que indica la longitud del buffer. No guarda ninguna informacin sobre cmo
traducir esos bytes, relegando esa tarea al programador. No existe ninguna
limitacin sobre el valor que puede contener un string; en concreto, est
permitido colocar un bytes con valor 0 (bytes NUL) en cualquier posicin
del string (existen algunas funciones, marcadas en este manual como que no
utilizan "modo binario seguro", podran rechazar estos strings para aquellas
bibliotecas que ignoren los datos preceden a un byte NUL.)
Este comportamiento de los strings justifica el que no exista un tipo de dato

"byte" en PHP los strings se encargan de esto. Las funciones que no
devuelvan datos de texto por ejemplo, cualquier dato ledo a partir de un
socket de red devolvern strings.
Dado que PHP no obliga a utilizar ninguna condificacin en particular, uno

podra preguntarse cmo se codifican los textos literales. Por ejemplo, es el
string "" equivalente a "\xE1" (ISO-8859-1), "\xC3\xA1" (forma en C UTF-
8), "\x61\xCC\x81" (forma en D UTF-8) o cualquier otra representacin
posible? La resuesta es que un string se codifica en cualesquiera forma en
que estuviera el fichero de cdigo. Por tanto, si un fichero de cdigo
estuviera escrito en ISO-8859-1, el string se codificar en ISO-8859-1, y as.
Sin embargo, esto no es aplicable si Zend Multibyte est habilitado; en ese
caso, el fichero de cdigo podra estar escrito en cualquier codificacin
(declarada explcitamente o bien detectada) para despus convertirse a una
determinada codificacin interna, que ser entonces la codificacin usada
para los textos literales. Tenga presente que existen algunas limitaciones
sobre la codificacin del cdigo fuente (o en la codificacin internal, si Zend
Multibyte estuviera habilitado) esto suele significar que se debe usar uan
codificacin complatible con el conjunto ASCII, como por ejemplo UTF-8 o
ISO-8859-1. Por contra, las codificaciones dependientes de estados, donde
un mismo byte se puede utilizar en estados de desplazamiento iniciales y no
iniciales, podra generar problemas.
22
BASICO HTML
Introduccin
Bajo el nombre de HTML Dinmico se engloba un conjunto de tcnicas con dos

objetivos claros: proporcionar un control absoluto al diseador de pginas HTML y
romper con el carcter esttico de este tipo de documentos. Hasta ahora, una vez
mostrado un documento HTML, nada poda hacerse para modificarlo.
Los tres componentes del HTML Dinmico son:
Hojas de Estilo
Posicionamiento de Contenidos
Fuentes Descargables
Las hojas de estilo permiten especificar atributos para los elementos de su pgina web.
Con el posicionamiento de contenidos se puede asegurar que las diferentes partes
sern mostradas exactamente donde quiera que aparezcan y podr modificar su
aspecto y posicion tras ser mostrada. Con las fuentes descargables podemos asegurar
que siempre se utilizara la fuente correcta, pues podemos enviar la fuente junto con la
pgina.
Introduccin a las Hojas de Estilos

Antes de la introduccin de las hojas de estilo, los creadores de pginas web slo
tenan un control parcial sobre el aspecto final de sus pginas. Por ejemplo, se poda
especificar que cierto texto debia verse como una cabecera, pero no se podan colocar
mrgenes a una pgina ni escoger un borde decorado para un texto.
Las hojas de estilo nos permiten un mayor control sobre el aspecto de nuestros
documentos. Con ellas podemos especificar muchos atributos tales como colores,
mrgenes, alineacin de elementos, tipos y tamaos de letras, y muchos ms. Podemos
utilizar bordes para hacer que ciertos elementos resalten del resto de un documento.
Podemos especificar que se utilicen diferentes fuentes para diferentes elementos tales
como prrafos o cabeceras.
23
Adems podemos emplear hojas de estilo como patrones o pginas maestras de forma
que mltiples pginas puedan tener el mismo aspecto.
Las hojas de estilo pueden crearse empleando dos tipos de sintaxis, CSS (Cascade
Style Sheets) y JavaScript.
Introduccin al Posicionamiento de Contenidos

Ya no se est restringido al posicionamiento secuencial de los elementos sobre la
pgina. Especificando la posicin de los bloques podemos decidir donde se mostrara
cada elemento en vez de dejar esta tarea al arbitrio del navegador. Por ejemplo,
podemos colocar un bloque en la esquina superior izquierda, y otro en la inferior
derecha. Tambin podemos hacer que varios bloques compartan espacio, de forma que
se puedan solapar. Ahora se puede decidir la posicin exacta de los elementos.
Utilizando JavaScript podemos cambiar el aspecto de la pgina dinmicamente.

Podemos hacer que los elementos aparezcan o se desvanezcan, podemos cambiar su
color y su posicin, etc. Podemos aadir animaciones dentro de nuestras pginas
moviendo y modificando ciertas partes de la misma.
El uso conjunto las hojas de estilo y el posicionamiento de contenidos nos permite

crear pginas web que utilicen diferentes estilos en diferentes partes de la pgina.
Para el posicionamiento de contenidos tambin podemos utilizar dos tipos de sintaxis:

CSS y JavaScript.
Introduccin a las Fuentes Descargables

Utilizando fuentes descargables podemos adjuntar fuentes con nuestras pginas web.
De esta forma se garantiza que las pgina siempre sern mostradas con la fuente que
deseemos. Ya no es necesario emplear las fuentes genricas para conseguir que sus
pginas tengan aproximadamente el mismo aspecto en todas las plataformas. Tampoco
estaremos restringidos por las caractersticas propias de las fuentes en cada plataforma.
Para protejer los derechos de autor de los diseadores de fuentes, estas estn
protegidas de forma que es imposible que el usuario las copie y las pueda usar de
24
nuevo. Asi podemos incluir fuentes en nuestras pginas sin tener que preocuparnos de
que los usuarios las puedan copiar.
Hojas de Estilo
En esta seccin se introduce el uso de las hojas de estilo. Se da un breve resumen de

los diferentes tipos de sintaxis que se pueden emplear para definir estilos, se muestran
algunos ejemplos y se explica la herencia de propiedades.
Definicin de Estilos mediante Hojas de Estilo en Cascada

Una hoja de estilo consiste en una o ms definiciones de estilo. En sintaxis CSS, los
nombres de las propiedades y los valores se encierran entre llaves {}.
El criterio de seleccin determina a que elementos se aplica, o es aplicable, el estilo. Si

el criterio de seleccin es un elemento HTML, el estilo es aplicado a todos las
instancias de dicho elemento. El criterio de seleccin tambin puede ser una clase, un
ID o contextual. Cada una de estos criterios de seleccin se vern a continuacin.
En una definicion de estilo cada propiedad es seguida por dos puntos y el valor de
dicha propiedad. Cada par propiedad/valor est separado del siguiente por un punto y
coma (;).
Por ejemplo, la siguente hoja de estilo en cascada contiene dos definiciones de estilos.
El primero especifica que todos los prrafos, <p>, se veran en negrita y en color
blanco. El segundo har que todas las cabeceras, <h1>, aparezcan centradas.
<style type="text/css">

</style>
La definicin de estilos se puede encerrar entre commentarios (), de esta
forma los navegadores que no reconozcan la etiqueta <style>la ignorarn.
25
Es importante no incluir dobles comillas en la especificacion de valores de atributos en
sintaxis CSS.
CSS exige un estricto cumplimiento de sus normas de sintaxis. Asegurese de no omitir

ningun punto y coma entre los pares nombre/valor. Si lo hace se ignorara por completo
la definicin de estilo. De igual forma, si accidentalmente se aade un simbolo extrao
la definicin ser ignorada.
Definicin de Estilos mediante el Modelo de Objetos

Documento de JavaScript
Mediante JavaScript tambin es posible definir hojas de estilo utilizando el modelo de
objetos documento. Este modelo ve una pgina web como un objeto con propiedades
que pueden ser consultadas y modificadas. En el siguiente ejemplo se cambia el valor
de color de la etiqueta h1 de la propiedad tags del objeto document:
document.tags.h1.color = "red"
La propiedad tags siempre se aplica al objeto document del documento actual, por
eso algunos navegadores permiten omitir document en la
expresion document.tags.
El siguiente ejemplo usa JavaScript para crear una hoja de estilo que contiene dos
definiciones de estilo. El primero especifica que todos los prrafos<p> se veran en
negrita y en color blanco. El segundo har que todas las cabeceras <h1> aparezcan
centradas.
<style type="text/javascript">
tags.p.weight = "bold";
tags.p.color = "white";
tags.h1.textAlign = "center";
</style>
No se pueden encerrar entre comentarios () los contenidos de una hoja de
estilo creada mediante JavaScript.
26
Tambin se puede utilizar with para abreviar la definicin de estilos para elementos
sobre los que hay que modificar varias propiedades. Este ejemplo especifica que todas
las etiquetas <p> sern verdes, negritas, cursivas y usaran la fuente helvtica.
with (tags.p)
{
color = "green";
fontWeight = "bold";
fontStyle = "italic";
fontFamily = "helvetica";
}
Ejemplos
Usando hojas de estilo se pueden especificar muchos atributos de estilo. Algunas de
estas caractersticas son el alineacin, indentacin y color del texto, la familia, peso y
estilo de las fuentes,... Podemos seleccionar una imagen o un color de fondo para
cualquier elemento. Tambin podemos escoger el color y estilo de las marcas de lista.
Se pueden poner mrgenes y especificar bordes para elementos de bloque, escoger el

relleno de los elementos que tienen bordes, indicar la distancia entre el borde y el
contenido del elemento.
El siguiente ejemplo muestra una hoja de estilo sencilla descrita mediante sintaxis CSS
y JavaScript. En ella se especifica que todos los elementos <p>tendran mrgenes
derecho e izquierdo y que su texto estar centrado. Todos los elementos <h4> estarn
subrayados y en verde. Todos los elementos<h5> se mostraran en maysculas,
tendran un borde con aspecto 3D sobresaliente de 4 puntos de ancho y color rojo. Su
texto ser rojo y el fondo amarillo. Finalmente, los <blockquote> sern azules y en
cursiva, su altura de lnea (interlnea) ser un 150% mayor que por defecto y su
primera lnea estar indentado un 10%.
Sintaxis CSS
p {text-align: center; margin-left: 20%;
margin-right: 20%;}
h4 {text-decoration: underline; color: green;}
27
h5
{
text-transform: uppercase;color:red;
border-width: 4pt; border-style: outset;
background-color: yellow; padding: 4pt;
border-color: red;}
}
blockquote
{
color: blue; font-style: italic;
line-height: 1.5; text-indent: 10%
}
</style>
Sintaxis JavaScript
with (tags.p)
{
textAlign = "center"; marginLeft = "20%";
marginRight = "20%";
}
with (tags.h4) {textDecoration = "underline";
color = "green";}
with (tags.h5)
{
textTransform = "uppercase"; color =
"red";
borderWidth = "4pt"; borderStyle =
"outset";
backgroundColor = "yellow";
paddings("4pt");
borderColor = "red";
}
with (tags.blockquote)
{
color = "blue"; fontStyle = "italic";
lineHeight = "1.5"; textIndent = "20pt";
}
</style>
28
Uso de la hoja de estilo
<h4>Titulo subrayado</h4>
<blockquote>
Esto es un bloque. Normalmente los bloques
estn indentados,
pero en este, adems, la primera lnea tiene
una indentacin
extra. Tambin la interlnea es mayor de lo
habitual.
</blockquote>
<h5>Titulo h5 en mayusculas y con borde</h5>
<p>Este prrafo est centrado. Tambin tiene unos
amplios
mrgenes derecho e izquierdo.</p>
Resultado del ejemplo
Titulo subrayado
Esto es un bloque. Normalmente los bloques estn indentados, pero en
este, adems, la primera lnea tiene una indentacin extra. Tambin la interlnea es
mayor de lo habitual.
TITULO EN MAYUSCULAS Y CON BORDE
Este prrafo est centrado. Tambin tiene

unos amplios mrgenes derecho e
izquierdo.
Herencia de Estilos
Un elemento HTML que contenga a otro se considera como el padre del elemento que
contiene, y el elemento contenido se considera el elemento hijo.
Por ejemplo, en el siguiente texto HTML, el elemento <body> es el padre del

elemento <h1>, que a su vez es padre del elemento <em>.
29
<body>
<h1>El titulo <em>es</em> importante!</h1>
</body>
En muchos casos, los hijos adquieren o heredan el estilo de los elementos de sus
padres. Por ejemplo, supongamos que asignamos a <h1> el estilo color azul:
h1 {color: blue;}
</style>
<body>
<h1>El titulo <em>es</em> importante!</h1>
</body>
En este caso el elemento hijo <em> hereda el estilo de su padre, que es el

elemento <h1>. Asi la palabra "es" apareceria en color azul. Supongamos ahora que
previamente se habia especificado para <em> el color rojo. En este caso la palabra
"es" apareceria en rojo porque las propiedades del hijo tienen preferencia sobre las que
hereda del padre.
La herencia comienza desde el elemento de ms alto nivel. En HTML, este elemento

es <html>, que es seguido de <body>.
Para establecer las propiedades de estilo por defecto para todos los elementos de un
documento lo normal es asignrselas al elemento <body>. Por ejemplo, el siguiente
cdigo fija el color por defecto del texto a verde:
Sintaxis CSS
body {color: green;}
</style>
Sintaxis JavaScript
tags.body.color = "green"
</style>
30
Muy pocas propiedades no son heredadas de padres a hijos, pero en la mayora de los
casos el resultado final es el mismo que si lo hiciesen. Por ejemplo, la propiedad color
de fondo no se hereda. Si un hijo no especifica un color de fondo propio, se vera el
color de fondo del padre a travs suyo, tal como ocurriria si heredase la propiedad.
Para ms informacin sobre las propiedades que se heredan y cuales no, dirigirse al
manual de referencia del final de este tutorial.
Creacin y uso de Hojas de Estilo
En esta seccin se vern las diferentes formas de definir estilos y como aplicar esos
estilos a los elementos HTML.
Una hoja de estilo es una serie de una o ms definiciones de estilo. Podemos definir
una hoja de estilos en el interior del documento que la utiliza, pero tambin podemos
utilizar hojas de estilo desde un documento externo. Por ejemplo, podemos emplear
una nica hoja de estilo para definir el estilo empleado por un grupo de personas en
sus pginas.
Si la hoja de estilos no va a ser aplicada a otros documentos, es ms conveniente

definirla en el interior de dicho documento para asi tener la hoja de estilo y el
contenido de la pgina todo en un mismo sitio.
Definicin de Hojas de Estilo con la etiqueta <STYLE>

Para definir una hoja de estilo directamente dentro de un documento se utiliza la
etiqueta <style> dentro de la seccin <head> ... </head>. La
etiqueta <style> abre la hoja de estilo, y la etiqueta </style> la cierra. Asegurese
de utilizar <style> antes de <body>.
Cuando use <style> podr especificar el atributo type para indicar que tipo de
sintaxis se va a emplear. Los dos valores posibles
son"text/css" y "text/javascrip". EL valor por defecto es "text/css".
El siguiente ejemplo define una hoja de estilo que especifica que todos los titulos de
nivel 4 sern en maysculas y azules, y todos los bloques en cursiva y rojos:
Sintaxis CSS
31
<head>
h4 {text-transform: uppercase; color:
blue;}
blockquote {font-style: italic; color:
red;}
</style>
</head>
<body>
...
</body>
Sintaxis JavaScript
<head>
tags.h4.textTransform = "uppercase"
tags.h4.color = "blue"
tags.blockquote.fontStyle = "italic"
tags.blockquote.color = "red"
</style>
</head>
<body>
...
</body>
<h4>Este titulo es azul y esta en mayusculas.</h4>

<blockquote>Este bloque en cursiva es
rojo.<blockquote>
ESTE TITULO ES AZUL Y ESTA EN MAYUSCULAS.

Este bloque en cursiva es rojo.
Definicin de Hojas de Estilo en Ficheros Externos
32
Se puede definir una hoja de estilo en un fichero distinto del que contiene la pgina y
despues enlazarlos. Las ventajas de este mtodo son que podremos utilizar la hoja de
estilo desde cualquier documento HTML. Se podra pensar en una hoja de estilo asi
definida como en un patrn que pudiera aplicarse a cualquier documento. De esta
forma, se puede aplicar un estilo a todas las pginas servidas desde un sitio web sin
ms que incluir un enlace al fichero con la hoja de estilo en cada pgina.
La sintaxis para definir estilos en ficheros es identica a la que se usa para definirlos en
el propio documento, excepto que no es necesario incluir la etiqueta <style>. He aqu
un ejemplo:
Sintaxis CSS
/* hoja de estilo externa estilo.html */

.BOLDBLUE {color: blue; font-weight: bold;}
h1 {line-height: 18pt;}
p {color: yellow;}
/* fin de fichero */
Sintaxis JavaScript
/* hoja de estilo externa estilo.html */

tags.BOLDBLUE.all.color = "blue";
tags.BOLDBLUE.all.fontWeight = "bold";
tags.h1.lineHeight = "18pt";
tags.p.color = "yellow";
/* fin de fichero */
Para utilizar esta hoja de estilo, se usa la etiqueta <link> como se muestra en el
siguiente ejemplo:
Sintaxis CSS
<head>
<title>El titulo</title>
<link rel = stylesheet type = "text/css" href
= "estilo.css">
</head>
Sintaxis JavaScript
33
<head>
<title>El titulo</title>
<link rel = stylesheet type =
"text/javascript" href = "estilo.js">
</head>
Definicin de Clases de Estilo

Si un documento incluye o se enlaza con una hoja de estilo, todos los estilos definidos
en dicha hoja podrn utilizarse en cualquier punto del documento. Si la hoja de estilo
especifica el estilo de una etiqueta HTML, entonces todos las etiquetas de ese tipo en
el documento utilizarn dicho estilo.
Puede haber casos en que interese aplicar un estilo selectivamente. Por ejemplo, se
puede querer que los prrafos de un documento sean unas veces rojos y otras veces
azules. En este caso definir un estilo que se aplique a todos los prrafos no ser la
solucion correcta. Podemos obtener el efecto deseado definiendo una clase de estilo y
especificando cuando queremos que sea utilizada.
Para aplicar una clase de estilo a un elemento HTML, primero se debe definir la clase
en la hoja de estilo, y despus se utilizar empleando el atributoclass en cualquier
elemento.
Sintaxis CSS
.GREENBOLD {color: green; font-weight: bold;}
</style>
Sintaxis JavaScript
classes.GREENBOLD.all.color = "green";
classes.GREENBOLD.all.fontWeigth = "bold";
</style>
<h3 class=GREENBOLD>Este titulo es muy verde</h3>
34
<p class=GREENBOLD>
Este prrafo usa la clase de estilo GREENBOLD.
Se puede
utilizar el atributo class para especificar
una clase de estilo
para cualquier elemento HTML.
</p>
<blockquote class=GREENBOLD>
Este bloque usa la clase de estilo GREENBOLD.
En consecuencia, es
verde y est en negrita. Puede ser til para
hacer que los bloques
resalten del resto de la pgina.
</blockquote>
Este titulo es muy verde
Este prrafo usa la clase de estilo GREENBOLD. Se puede utilizar el atributo

class para especificar una clase de estilo para cualquier elemento HTML.
Este bloque usa la clase de estilo GREENBOLD. En consecuencia, es verde y est

en negrita. Puede ser til para hacer que los bloques resalten del resto de la
pgina.
Con sintaxis JavaScript no se pueden utilizar guiones "-". La razn es que el guin es
un operador de JavaScript. Los nombres de clases no pueden contener tampoco
operadores como: -, +, *, /, %, ...
Cuando se definen clases de estilo se puede especificar a que elementos se podrn

aplicar dicha clase, o usaremos la palabra clave all para indicar que todos los
elementos podrn utilizarla.
En el siguiente ejemplo se crea una clase de estilo naranja que podr utilizar cualquier
elemento HTML. Tambin se crea una clase rojo que slo podrn utilizar prrafos y
bloques.
Sintaxis CSS
35
.naranja {color: orange; font-weight: bold;}
p.rojo {color: red; font-weight: bold;}
blockquote.rojo {color: red; font-weight:
bold;}
</style>
Sintaxis JavaScript
classes.naranja.all.color = "orange";
classes.naranja.all.fontWeight = "bold";
classes.rojo.p.color = "red";
classes.rojo.p.fontWeight = "bold";
classes.rojo.blockquote.color = "red";
classes.rojo.blockquote.fontWeight = "bold";
</style>
<p class="rojo">Este prrafo es rojo.</p>

<p>Este prrafo es del color por defecto,
porque no utiliza la clase rojo</p>
<blockquote class="rojo">Este bloque usa la clase
rojo.
</blockquote>
<h4 class="rojo">
Este titulo intenta usar la clase rojo, pero
no le est permitido
</h4>
<p class="naranja">Este prrafo es amarilo</p>
<h4 class="naranja">
Este titulo es naranja porque usa la clase
naranja
</h4>
Este prrafo es rojo.
Este prrafo es del color por defecto, porque no utiliza la clase rojo
36
Este bloque usa la clase rojo.
Este titulo intenta usar la clase rojo, pero no le est permitido
Este prrafo es amarilo
Este titulo es naranja porque usa la clase naranja
Un elemento HTML slo puede utilizar una clase de estilo. Si se especifican dos o ms
clases, se utilizaran la primera. Por ejemplo, en el siguiente cdigo un prrafo intenta
usar las clases rojo y naranja. Como resultado final se acaba empleando la clase rojo
que es la primera que se especifica.
Ejemplo:
<p class="rojo" class="naranja">Otro prrafo
rojo.</p>
Resultado:
Otro prrafo rojo.
Definicin de Estilos Individuales con Nombre

Se pueden crear estilos individuales con nombre. Los elementos HTML pueden
utilizar un clase de estilo y un estilo individual con nombre. Normalmente estos se
utilizan para expresar excepciones de estilo. Por ejemplo, si un prrafo utiliza la clase
de estilo PRINCIPAL, podemos usar el estilo con nombre AZUL1 para expresar
alguna diferencia respecto a la clase PRINCIPAL.
Tambin son tiles para definir capas de contenidos HTML posicionadas de forma
precisa.
Parar definir estilos con nombre, en sintaxis CSS, se precede el nombre con el signo #.
En JavaScript se utiliza la propiedad ids.
Para aplicar el estilo a un elemento, se utiliza el nombre de estilo individual como

valor del atributo ID.
37
En el siguiente cdigo se define una clase de estilo PRINCIPAL. Esta clase especifica
una fuente de 15 puntos, negrita y de color rojo, y una interlnea de 20 puntos.
Tambin se define un estilo con nombre llamado AZUL1 cuyo color es azul.
Sintaxis CSS
.PRINCIPAL
{
line-height: 20pt;
font-size:15pt;
font-weight: bold;
color: red;
}
#AZUL1 {color: blue;}
</style>
Sintaxis JavaScript
with(classes.PRINCIPAL.all)
{
lineHeight = "20pt";
fontSize = "15pt";
fontWeight = "bold";
color = "red";
}
ids.AZUL1.color = "blue";
</style>
<p class="PRINCIPAL">
Aqu se puede ver un texto rojo y en
negrita. En este
prrafo la interlnea y el tamao de la
fuente
son mayores de lo habitual.
</p>
<p class="PRINCIPAL" id="AZUL1">
38
Este prrafo es casi igual al anterior.
Est en
negrita y su fuente es mayor de lo
habitual. Aunque usa la clase
PRINCIPAL es azul porque se utiliza el
estilo con nombre AZUL1.
</p>
Aqu se puede ver un texto rojo y en negrita. En este prrafo la interlnea

y el tamao de la fuente son mayores de lo habitual.
Este prrafo es casi igual al anterior. Esta en negrita y su fuente es

mayor de lo habitual. Aunque usa la clase PRINCIPAL es azul porque se
utiliza el estilo con nombre AZUL1.
Uso de Criterios de Seleccin Contextual

Se pueden definir estilos para utilizarse con todos los elementos HTML de una clase
particular. Si se necesita un mayor control sobre el uso de estilos podemos hacer que
estos se apliquen selectivamente. Podriamos, por ejemplo, querer que el texto
enfatizado sea de color verde, pero slo si este est en el interior de un ttulo de
tamao 4.
Se puede conseguir este nivel control sobre la aplicacion de estilos usando los criterios
de seleccin contextual. Estos, en general, permiten especificar que un estilo se
aplicara slo si un elemento se encuentra anidado dentro de un elemento de otro cierto
tipo.
Mediante la sintaxis, CSS esto se consigue listando ordenadamente los elementos

HTML antes de las llaves. Con sintaxis JavaScript es necesario utilizar el
mtodo contextual().
Sintaxis CSS
39
h4 em {color: green;}
</style>
Sintaxis JavaScript
contextual(tags.h4, tags.em).color
="green";
</style>
<h4>El <em>texto enfatizado</em> de este

titulo es verde.</h4>
<p>En cambio este <em>texto enfatizado</em>
no es verde.</p>
El texto enfatizado de este titulo es verde.
En cambio este texto enfatizado no es verde.
Ahora veremos otro ejemplo que hace que las marcas los elementos de lista que
hereden de al menos dos listas desordenadas sean de color azul.
Sintaxis CSS
ul ul li {color: blue;}
Sintaxis JavaScript
contextual(tags.ul, tags.ul, tags.li).color =

"blue";
Se pueden utilizar los criterios de seleccin contextual para buscar etiquetas, clases,
ids o combinaciones de estos. En el siguiente ejemplo se crea la clase MAGENTA que
lo colorea todo de magenta. Todos los prrafos MAGENTA que estn dentro de
40
un <div> estarn en cursiva. Adems los textos dentro de <b> anidados dentro de
prrafos dentro de un <div> en MAGENTA usaran una fuente grande.
Sintaxis CSS
.MAGENTA {color: magenta;}
div p.MAGENTA {font-style: italic;}
div p.MAGENTA b {font-size: large;}
</style>
Sintaxis JavaScript
classes.MAGENTA.all.color = "magenta";
contextual(tags.div,
classes.MAGENTA.p).fontStyle = "italic";
contextual(tags.div, classes.MAGENTA.p,
tags.b).fontSize = "large";
</style>
<div class=MAGENTA>
<h4> Titulo h4 en MAGENTA</h4>
<p>Este prrafo deberia ser magenta y
cursivo. Ahora
viene un <b>texto grande</b>. Conseguimos
este efecto con
seleccin contextual</p>
</div>
<p class="MAGENTA">Este prrafo todavia es
MAGENTA, pero
como no esta dentro de un bloque <div>, no
es cursivo.</p>
41
Titulo h4 en MAGENTA
Este prrafo deberia ser magenta y cursivo. Ahora viene un texto grande.
Conseguimos este efecto con seleccin contextual
Este prrafo todavia es MAGENTA, pero como no esta dentro de un bloque <div>, no
es cursivo.
Especificacion de Estilos para Elementos Individuales

De igual forma que se puden definir hojas de estilo, podemos utilizar el
atributo style de cualquier etiqueta HTML para definir un estilo que le ser aplicado
solamente a ella. Esta aproximacin puede ser til en situaciones en que necesitemos
utilizar un estilo en un sitio y no sea necesario volver a utilizarlo.
Sin embargo, en general, es mejor definir todos los estilo usados en un documento en
un nico lugar. Asi es ms fcil realizar modificaciones en su estilo sin tener que
recorrerlo. Si se necesita hacer algun cambio slo es necesario hacerlos una vez y el
cambio automticamente se aplica a todo el documento.
A veces, sin embargo, se necesita especificar el estilo de un elemento y la forma ms

fcil de hacerlo es mediante el atributo style. En el ejemplo se especifica un estilo
para el elemento <p>. Tambin se muestra el uso de <span> para aplicar un estilo a
varios elementos.
Sintaxis CSS
<p style="color: green; font-weight: bold;

margin-right: 20%; margin-left:
20%">
Este prrafo, y slo este prrafo, es
verde,
esta en negrita y tiene unos grandes
margenes.
</p>
<p>
Este prrafo es del color habitual, pero
esta <span
42
style="color: red; font-style:
italic;">palabra</span> es
diferente al resto.
<p>
Sintaxis JavaScript
<p style="color = 'green'; fontWeight =

'bold';
marginRight = '20%'; marginLeft
= '20%'">
verde,
esta en negrita tiene unos grandes
mrgenes.
</p>
<p>
Este prrafo es del color habitual, pero
esta <span
style="color = "red"; fontStyle =
"italic";">palabra</span>
es diferente al resto.
<p>

verde, esta en negrita y tiene unos
grandes mrgenes.
Este prrafo es del color habitual, pero esta palabra es diferente al resto.
Combinando Hojas de Estilo

Se puede utilizar ms de una hoja de estilo para fijar las caractersticas de un
documento. Esto es deseable si se tienen varias hojas de estilos parciales, de forma que
cada una de ellas define diferentes estilos.
43
Supongamos, por ejemplo, que estamos escribiendo un informe sobre los beneficios de
un producto de red de una compaia llamada AlpargataNet. Puede que se necesite usar
tres hojas de estilo: una definiendo el estilo habitual de los informes, otra que defina el
estilo de los productos de red, y otra que defina el estilo de la compaia SneakerNet.
El siguiente ejemplo muestra el uso de varias hojas de estilo en un mismo documento.
@import
"http://www.alpargatanet.com/estilo/empresa";
@import "estilos/informe";
@import "estilos/redes";
h1 { color: red; }
</style>
<link rel=stylesheet type="text/css"
href=url(http://www.alpargatanet.com/estilo/empres
a)>
href=url(estilos/informe)>
href=url(estilos/redes)>
h1 {color: red;} /* tiene preferencia sobre
las hojas externas */
Entre las hojas de estilo externas, la ltima tiene precedencia sobre las dems. Asi, en
caso de conflicto, se escoge el estilo de la ltima hoja de estilo especificada.
Los estilos definidos para elementos individuales tienen precedencia sobre los
definidos en el elemento <style> y sobre los definidos en las hojas externas. En
general, los estilos locales se sobreponen a los generales, como se muestra en el
siguiente ejemplo.
Sintaxis CSS
p {color: blue;}
b {color: green;}
</style>
Sintaxis JavaScript
44
tags.p.color = "blue";
tags.b.color = "green";
</style>
<p>Tal y como debera ser este prrafo es de color

azul, <b>y esta parte en negrita es de color
verde</b></p>
<p style="color: orange;">Este otro prrafo no es
de color
azul, <b style="color: red;">ni esta parte en
negrita es de color
verde</b>, porque se ha usado style para
cambiarles el color.</p>
Tal y como debera ser este prrafo es de color azul, y esta parte en negrita es de
color verde
Este otro prrafo no es de color azul, ni esta parte en negrita es de color

verde, porque se ha usado style para cambiarles el color.
Propiedades de Formato de Elementos de Bloque
En esta seccin se exponen las opciones de formato de los elementos de bloque. Los
elementos de bloque comienzan en una nueva lnea. Por ejemplo,<h1> y <p> son
elementos de bloque, pero <em> no lo es.
Comenzaremos presentando unos ejemplos que muestren las posibilidades de formato

de los elementos de bloque. Despues se discutir cada opcin de formato en detalle.
Para finalizar se echar un vistazo a su comportamiento respecto a la herencia de
propiedades.
45
Formato de Bloques: Introduccin y Ejemplos
Las hojas de estilo tratan a cada elemento de bloque como si estuviera rodeado de una
caja. Cada caja puede tener caractersticas de estilo propias tales como mrgenes,
bordes, relleno y una imagen o color de fondo.
Los mrgenes indican la separacin entre el borde de la caja y el borde del documento.
Estos bordes pueden tener apariencia plana o tridimensional. El relleno ("padding")
indican la separacin entre el borde de los elementos y el contenido de los mismos.
Tambin se puede fijar la anchura de los elementos de bloque, bien mediante un valor
especifico, o bien mediante un porcentaje de la anchura total del documento. En este
caso es redundante fijar los mrgenes derecho o izquierdo y la anchura.
Si se especifican la anchura y los dos mrgenes, el valor de del margen izquierdo tiene
prioridad sobre los dems valores en caso de conflicto. En este caso el valor del
margen derecho especifica la distancia mxima desde el borde derecho de elemento
que lo contiene. El valor del anchura es utilizado slo si no sobrepasa los limites de
anchura del elemento que lo contiene.
El alineacin horizontal puede a izquierda, derecha o centrado. Esto se consige usando

la propiedad float en CSS o la propiedad align en JavaScript.
En los siguientes ejemplos se muestra el uso de mrgenes, relleno, bordes, fondos y

alineacin.
46
Sintaxis CSS
p {
color: #ffffff; /* blanco */
/* mrgenes */
margin-left: 20%; margin-right: 20%;
/* anchura del borde */
border-top-width: 10pt; border-
bottom-width: 10pt;
border-right-width: 5pt; border-left-
width: 5pt;
/* estilo y color del borde */
border-style: outset; border-color:
blue;
/* relleno */
padding-top: 10pt; padding-bottom:
10pt;
padding-right: 20pt; padding-left:
20pt;
}
h3 {
/* alineacin al centro*/
text-align: center;
/* tamao y peso de la fuente*/
font-size: 14pt; font-weight: bold;
background-image: url("papel.jpg");
/* anchura del 80% */
width: 80%;
border-color: green; border-style:
solid;
/* todas las partes del borde tienen
la misma anchura */
border-width: 10pt;
/* relleno uniforme */
padding: 5%;
}
</style>
Sintaxis JavaScript
47
with (tags.p) {
/* mrgenes */
marginLeft="20%"; marginRight="20%";
/* anchura del borde */
borderTopWidth="10pt";
borderBottomWidth="10pt";
borderRightWidth="5pt";
borderLeftWidth="5pt";
/* estilo y color del borde */
borderStyle="outset";
borderColor="blue";
/* relleno */
paddingTop="10pt";
paddingBottom="10pt";
paddingRight="20pt";
paddingLeft="20pt";
}
with(tags.h3) {
/* alineacin al centro*/
textAlign="center";
/* tamao y peso de la fuente*/
fontSize="14pt"; fontWeight="bold";
backgroundImage="papel.jpg";
/* anchura del 80% */
width="80%";
borderColor="green";
borderStyle="solid";
/* todas las partes del borde tienen
la misma anchura */
borderWidths("10pt");
/* relleno uniforme */
paddings("5%");
}
</style>
<h3>Titulo h3 con borde slido y fondo</h3>

<p>Los bordes se usan muy a menudo. Por ejemplo,
si un bloque
48
tiene borde resalta mucho ms que si no lo
tiene.</p>
<p>Este es otro prrafo con borde. Ten cuidado con
los
bordes, no los hagas demasiado anchos, pues de lo
contrario ocuparan
demasido espacio.</p>
Titulo h3 con borde slido y fondo
Los bordes se usan muy a menudo. Por

ejemplo, si un bloque tiene borde resalta
mucho ms que si no lo tiene.
Este es otro prrafo con borde. Ten

cuidado con los bordes, no los hagas
demasiado anchos, pues de lo contrario
ocuparan demasido espacio.
Mrgenes
Los mrgenes indican la separacin entre el borde del bloque y el borde del
documento, o elemento padre. Se pueden fijar los mrgenes derecho, izquierdo,
superior e inferior. Para ello se deben utilizar las siguientes nombres de propiedad:
Sintaxis CSS
margin-top
margin-bottom
margin-left
49
margin-right
margin
Sintaxis JavaScript
marginTop
marginBottom
marginLeft
marginRight
margins()
En vez de especificar los dos mrgenes se puede utilizar la propiedad width. Se

pueden utilizar valores especficos, como 200 puntos, o valores relativos, como el 50%
de la anchura del elemento padre. Es redundante fijar los dos mrgenes y la anchura,
pues dos de estos tres valores implican el tercero.
Para especificar los mrgenes por defecto para un documento se deben especificar para
la etiqueta <body>. En el siguiente ejemplo se fijan dichos mrgenes en 20 puntos a
derecha e izquierda.
Sintaxis CSS
body {margin-left: 20pt; margin-right: 20pt;}
</style>
Sintaxis JavaScript
with (tags.body) { marginLeft="20pt";
maginRight="20pt"; }
</style>
Ejercicio: intente replicar el modelo de mrgenes que puede objservar en la siguiente

imagen:
50
Bordes
Los bordes se pueden utilizar para muchas cosas, como por ejemplo, separar
elementos o destacar ciertas partes de un documento. Para que un borde se muestre es
necesario darle anchura y color. A continuacin describimos como hacerlo. Se puede
fijar la anchura del borde que rodea un elemento de bloque usando las siguientes
propiedades:
Sintaxis CSS
border-top-width
border-bottom-width
border-left-width
border-right-width
border-width
Sintaxis JavaScript
borderTopWidth
borderBottomWidth
borderLeftWidth
51
borderRightWidth
borderWidths()
Los valores que pueden tomar son tanto numricos como palabras reservadas como
thin, medium y thick. Vea una muestra:
Se puede fijar el estilo del borde usando la propiedad border-style de CSS o la

propiedad borderStyle de JavaScript. Los valores que pueden tomar
son dotted, dashed, solid, double, groove, ridge,
inset y outset.
dotted dashed solid double
groove ridge inset outset
Las propiedades de borde se puede expresar de dos formas, por separado como hasta
ahora, o combinadas como se muestra en el siguiente ejemplo:
Por separado:
p
{
border-width: 1px;
border-style: solid;
border-color: blue;
}
Combinadas:
52
p { border: 1px solid blue; }
Relleno
El relleno indican la distancia entre el borde de un elemento y su contenido. El relleno
se muestra incluso si el borde del elemento no lo hace.
Se puede fijar el tamao del relleno de un elemento de bloque utilizando las siguientes
propiedades.
Sintaxis CSS
padding-top
padding-bottom
padding-left
padding-right
Sintaxis JavaScript
paddingTop
paddingBottom
paddingLeft
paddingRight
Ejercicio: cree un estilo que aplicado a una tabla consiga que los elementos en el
interior de las celdas tengan un relleno de 16 pixels a izquierda y derecha y 8 pixels
arriba y abajo.
Herencia de Propiedades de Formato de Bloque

La caractersticas de anchura, mrgenes, bordes y relleno de los elementos padre no
son heredadas por sus hijos. Sin embargo, a primera vista, a veces puede parecer que si
son heredados, pues los valores los elementos padre afectan a sus elementos hijos.
Supongamos que a un elemento <div> le fijamos un margen izquierdo de valor 10

puntos. De esta forma la caja que le rodea se encuentra desplazada 10 puntos hacia la
derecha. Adems supondremos que no tiene bordes ni relleno. Todos sus elementos
hijo estarn pegados a su margen izquierdo, que como esta 10 puntos desplazado hacia
53
la derecha, causara un efecto parecido a si ellos mismos tambin tuviesen borde
izquierdo.
Pensemos en que ocurriria si los hijos heredasen estas caractersticas de sus padres. El
bloque <div> esta indentado 10 puntos. Sus hijos a su vez estarn indentados otros 10
puntos con respecto a el, con lo cual el aspecto global es que los hijos estarian
indentados 20 puntos.
Algo parecido ocurrira con una imagen de fondo. Si se heredase esta propiedad en vez
de ver una sola copia de la imagen de fondo, normalmente apliacada a body, veriamos
muchas copias de la esquina superior izquierda si no se cambia la alineacin por
defecto de la imagen.
Fuentes Descargables
Las fuentes cargables consisten en la posibilidad de incluir en el documento HTML la

definicin de las fuentes empleadas por si stas no se encontraran disponibles en el
sistema de destino. Dicha definicin consiste en un fichero que se debe colocar en la
mquina servidora, al igual que el documento o las imgenes.
Los ficheros de fuentes, como otros muchos recursos, se pueden conseguir en Internet,
pero el usuario no las puede grabar en disco (como puede hacer con el documento o
las imgenes). Por otro lado, hay que tener en cuenta que las fuentes estn sujetas a las
"leyes de derechos de autor", por lo que, antes de utilizarlas dentro de nuestras pginas
deberemos asegurarnos de tener permiso para hacerlo.
Para que todo funcione correctamente, al servidor habr que aadirle un nuevo tipo
MIME para que reconozca este tipo de archivos. El nuevo tipo
esapplication/font-tdpfr, asociado a la extensin .pfr.
Cmo Usar Fuentes Descargables.

Una vez se dispone del fichero de definicin de fuentes, por ejemplo, fuente.pfr, se
pueden asociar al documento a travs de un estilo, por medio de la palabra fontdef,
por ejemplo:
54
@fontdef
"http://www.gutemberg.org/fuente.pfr";
</style>
o tambin con la etiqueta <link>:
<link rel=fontdef
src="http://www.gutemberg.org/fuente.pfr">
Una vez que el fichero ha sido cargado desde el servidor donde estn las pginas,
imgenes, fuentes, etc., para utilizar estas fuentes, modificaremos el valor del
atributo face de la etiqueta <font>, por ejemplo:
<font face = "Gutemberg">

Vamos a probar el tipo de letra Gutemberg
</font>
o bien definiendo un estilo CSS, utilizando la propiedad font-family:
clasico { font-family: Gutemberg, sans-serif }
</style>
...
...
<div class="clasico">Este tipo de letra es la
Gutemberg</div>
Este prrafo utilizar el tipo de fuente Gutemberg si est disponible, sino utilizar la
sans-serif.
Podemos ver algunos ejemplos de fuentes descargables en la pgina

de http://www.myfonts.com/bestsellers.html. En tenemos otros ejemplos de fuentes
descargables en la pgina de TrueDoc. Esta es la fuente EyeBall. He aqu una muestra
de la fuente Amelia tomada directamente desde su
servidor:ABCDEFGHIJKLMNOPQRSTUVWXYZ
Herramientas de Diseo
55
Dos programas que sirven para crear este tipo de ficheros son:
Font Creator de High Logic

Font Editorde SibCode
FontLab Studio de Font Lab
Al crear el fichero de definicin de fuente, podemos especificar el dominio de la red

en el que permitimos que se use dicha fuente.
Manual de Referencia de Hojas de Estilo
Comentarios en las Hojas de estilo

En las hojas de estilo en cascada y en las hojas de estilo en JavaScript se pueden usar
comentarios al estilo C. Por ejemplo:
em {color:red;} /* el texto enfatizado ser rojo

*/
tags.em.color="red"; /* el texto enfatizado ser
rojo */
JavaScript adems permite usar comentarios al estilo de C++. Por ejemplo:
tags.em.color="red"; // el texto enfatizado ser

rojo
Los comentarios no pueden anidarse.
Nuevas etiquetas HTML

En esta seccin se veran las nuevas etiquetas que han sido aadidas para trabajar con
estilos.
56
<DIV>
Las etiquetas <DIV> y </DIV> se usan para agrupar elementos de bloque y poder
aplicarles un cierto estilo que nos interese. Esta etiueta de por s no produce ningn
cambio en el contenido de un documento. Es equivalente a <DIV>, slo que esta se
utiliza con elementos en lnea.
Ejemplos:
<p>Un prrafo normal...</p>

<div class="especial">
<p>Un prrafo especial...</p>
<p>Otro prrafo especial...</p>
</div>
<p>Un prrafo normal...</p>
<p>Otro prrafo normal...</p>
<STYLE>
Las etiquetas <STYLE> y </STYLE> se usan para crear una hoja de estilo. En su
interior podemos especificar estilos para elementos, deficir clases e identificadores y
en general establecer los estilos que se utilizaran en todo el documento.
Para especificar que tipo de sintaxis se empleara utilizaremos el atributo TYPE. Su

valor por defecto es "text/css" y selecciona la sintaxis CSS. Mediante el valor
"text/javascript" podemos seleccionar la sintaxis JavaScript.
Ejemplos:
Sintaxis CSS
body {margin-left: 10%; margin-right: 10%;}
.limon {color: yellow;}
<style>
Sintaxis JavaScript
57
tags.body.marginLeft="10%";
tags.body.marginRight="10%";
classes.limon.all.color="yellow";
<style>
<LINK>
La etiqueta <LINK> sirve para poder utilizar en un documento una hoja de estilo que
esta en otro fichero.
Sintaxis CSS
<html>
<head>
<title>Titulo</title>
href="http://estilos/mi_estilo.html">
</head>
<body> ... </body>
</html>
Sintaxis JavaScript
<html>
<head>
<title>Titulo</title>
<link rel=stylesheet
type="text/javascript"
href="http://estilos/mi_estilo.html">
</head>
<body> ... </body>
</html>
58
<SPAN>
Las etiquetas <SPAN> y </SPAN> se utilizan para agrupar una porcin de cdigo a la
que se le va aplicar un estilo. A diferencia de <DIV>, se utiliza con elementos en lnea
en lugar de con elementos de bloque.
En el siguiente ejemplo se aplica un estilo a una parte del texto:
Este texto es normal. <span style="font-weight:

bold; color: green;">Este texto es diferente
gracias
a <span>.</span> De nuevo el texto es normal.
El resultado del ejemplo es:
Este texto es normal. Este texto es diferente gracias a <span>. De nuevo el texto es
normal.
Veamos otro ejemplo. Este hace diferentes las letras iniciales:
.letron {font-family: times; font-size: 200%;
font-weight: bold;}
</style>
<p><span class="letron">E</span>n un lugar de la

Mancha...</p>
Resultado:
En un lugar de la Mancha...
Nuevos atributos para las etiquetas HTML

En esta seccin se enumeran los nuevos atributos que podemos utilizar con las
etiquetas HTML y que son utiles para trabajar con estilos. Estos atributos pueden ser
usados con cualquier etiqueta para especificar su estilo.
59
STYLE
El atributo STYLE determina el estilo del elemento al que se aplique. Por ejemplo:
Sintaxis CSS
<h4 style="font-weight: bold; color:

red;">Cabecera h4 en rojo</h4>
Sintaxis JavaScript
<h4 style="fontWeight='bold';
color='red'">Cabecera h4 en rojo</h4>
Resultado del ejemplo:
Cabecera h4 en rojo
CLASS
El atributo CLASS permite aplicar una clase de estilo a un elemento. Aunque CSS y
JavaScript usen sintaxis ligeramente diferentes para la definicin de clases de estilos,
la forma de usar dichas clases es comn. Ejemplo:
Sintaxis CSS
h3.cursiva {font-style: italic;}
<style>
Sintaxis JavaScript
classes.cursiva.h3.fontStyle="italic";
<style>
Uso de la hoja de estilo:
60
<h3 class="cursiva">Cabecera h3 cursiva</h3>
Se debe tener en cuenta que para los nombres de clase se distingue entre maysculas y
minsculas .
Cada elemento HTML slo puede utilizar una clase de estilo.
Para especificar que una clase puede aplicarse a todos los elementos se utiliza el
selector "all", "*" o simplemente no se especifica ninguna etiqueta cuando se definen
las propiedades de la clase. En el siguiente ejemplo todos los elemento de clase limon
sern amarillos.
Sintaxis CSS
.limon {background-color: grey; color:
yellow;}
<style>
Sintaxis JavaScript
classes.limon.all.color="yellow";
<style>
<h4 class="limon">Una cabecera amarilla</h4>

<p class="limon">Un prrafo naranja</p>
Una cabecera amarilla
Un prrafo amarillo
61
ID
Cuando se definen hojas de estilo, se pueden crear estilos individuales con nombre.
Un elemento puede usar clases de estilos y adems usar estos estilos individuales con
nombre. Con ellos podemos crear excepciones a las clases de estilos
Para definir un estilo individual con nombre, en sintaxis CSS se utiliza el signo #,
mientras que en JavaScript se utiliza el selector ID.
En ambos casos se utiliza el atributo ID para especificar el estilo de un elemento

HTML.
En los nombres de los ID's se distingue entre maysculas y minsculas
En el siguiente ejemplo se define la clase calor, que hace a los prrafos ser de color
rojo y en estar en negrita. Tambin se crea un nombre de estilo, frio, que es de color
azul. Se muestra como utilizar frio para crear una excepcion a calor.
Sintaxis CSS
p.calor {color: red; font-weight: bold;}
#frio {color: blue;}
<style>
Sintaxis JavaScript
classes.calor.p.color="red";
classes.calor.p.fontWeight="bold";
ids.frio.color="blue";
<style>
<p class="calor">Un prrafo caliente...</p>

<p class="calor" id="frio">Un prrafo frio...</p>
Resultado del ejemplo:
62
Un prrafo caliente...
Un prrafo frio...
Nuevas propiedades de objetos JavaScript

En esta seccin se exponen las nuevas propiedades de los objetos JavaScript que son
utilies para definir hojas de estilos usando la sintaxis de JavaScript.
TAGS
Cuando se usa sintaxis JavaScript dentro del elemento <style>, podemos seleccionar
estilos usando la propiedad tag del objeto document.
El siguiente ejemplo utiliza la sintaxis JavaScript para especificar que todos los
prrafos sean de color verde.
tags.p.color="green";
<style>
En sintaxis CSS este ejemplo seria:
p {color: green;}
<style>
La propiedad tags siempre se refiere al objeto document del documeto actual, por esto
se puede omitir document de la expresion document.tags. Asi, las dos siguentes lneas
expresan lo mismo:
document.tags.p.color="green";
tags.p.color=green";
Para definir estilos por defecto a todos los elementos de un documento se debe hacer a
traves del elemento <body>, porque todos los dems elementos heredan de este.
63
tags.body.marginLeft="10%"; /* sintaxis
JavaScript */
body {margin-left: 10%;} /* sintaxis CSS */
CLASSES
Ver la seccin CLASS de los nuevos atributos para las etiquetas HTML.
IDS
Ver la seccin ID de los nuevos atributos para las etiquetas HTML.
Propiedades de las Hojas de Estilo
Fuentes
Tipo de Fuente
La propiedad font-family se utiliza para establecer una lista ordenada de fuentes

que se utilizarn para mostrar el texto de la pgina. Si la primera fuente no est
disponible intentar utilizar la siguiente, y as sucesivamente.
64
Sintaxis CSS: font-family
Sintaxis JavaScript: fontFamily
Posibles valores un nombre de fuente

Valor inicial la fuente por defecto
Se aplica a todos los elementos
Heredable si
Valores porcentuales no aplicable
Tipo de fuente: serif, sans-serif, cursive, monospace, fantasy,

...
Tamao de Fuente
Sintaxis CSS: font-size
Sintaxis JavaScript: fontSize
Posibles valores tamao absoluto, tamao relativo, longitud, porcentage
65
Valor inicial medium
Heredable si
Valores porcentuales relativos al tamao del padre
Tamao absoluto: xx-small, s-small, small, medium, large, x-

large, xx-large
Tamao relativo: larger, smaller
Longitud: numero + unidad
Porcentaje: tamao de fuente relativo al tamao de fuente del padre.
Peso de Fuente
Sintaxis CSS: font-weight
Sintaxis JavaScript: fontWeight
Posibles valores normal, bold, bolder, lighter, 100 - 900

Valor inicial normal
Heredable si
Estilo de Fuente
Sintaxis CSS: font-style
Sintaxis JavaScript: fontStyle
Posibles valores normal, italic

Valor inicial normal
66
Heredable si
Las propiedades de las fuentes se pueden combinar para permitirnos una escritura ms
sencilla. Vea el siguinte ejemplo:
Por separado:
p
{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans.serif;
}
Combinadas:
p { font: italic bold 30px arial, sans-serif; }
Propiedades del Texto
Dar formato y estilo al texto es un elemento clave en el diseo de la mayora de las

pginas web. A continuacin veremos que CSS permite una gran flexibilidad a la hora
de hacerlo.
Interlnea
La interlnea es la separacin con que el navegador muestra varias lneas de texto.
Sintaxis CSS: line-height
Sintaxis JavaScript: lineHeight
Posibles valores numero, longitud, porcentage, normal

Valor inicial tamao por defecto para la fuente
67
Se aplica a elementos de bloque
Heredable si
Valores porcentuales relativos al tamao de la fuente
Decoracion del Texto
La decoracin de texto agrupa varias modificaciones de estilo que en HTML se

realizaban mediante varias etiquetas por separado.
Sintaxis CSS: text-decoration
Sintaxis JavaScript: textDecoration
Posibles valores none, underline, line-through, blink

Valor inicial none
Heredable si
Transformaciones del Texto
Las transformaciones de texto permite alterar si el texto se muestra en maysculas,

minsculas u otras combinaciones.
Sintaxis CSS: text-transform
Sintaxis JavaScript: textTransform
Posibles valores capitalize, uppercase, lowercase, none

Valor inicial none
Heredable si
68
Alineacin del Texto
La alineacin es equivalente al atributo align de HTML. Nos permite hacer que las
lneas de texto se alineen a derecha, izquierda, centro o ambos lados a la vez. Esto
ltimo es comn en prensa, pero hay que usarlo con cuidado en lneas de poca anchura
porque puede producir un espaciado entre palabras excesivo.
Sintaxis CSS: text-align
Sintaxis JavaScript: textAlign
Posibles valores left, right, center, justify

Valor inicial left
Heredable si
Indentacin de Texto
Esta propiedad permite aadir un toque de indentacin extra a la primera linea de un

prrafo.
Sintaxis CSS: text-indent
Sintaxis JavaScript: textIndent
Posibles valores longitud, porcentaje

Valor inicial 0
Heredable si
Valores porcentuales relativos a la anchura del padre
Longitud: numero + unidad
Porcentaje: longitud de indentacin relativo a la anchura del padre.
69
Ejercicio: aplique una indentacin extra slo al primer prrafo tras un ttulo de tamao
1 (h1). Pista: tendr que seleccionar con h1 + p, que quiere decir cada p
inmediatamente precedido por un h1.
Propiedades de Formato de Elementos de Bloque
Mrgenes
Sintaxis CSS: margin-left, margin-right, margin-top, margin-

bottom, margin
Sintaxis JavaScript: marginLeft, marginRight, marginTop,

marginBottom, margins()
Posibles valores longitud, porcentaje,auto

Valor inicial 0
Heredable no
Relleno
Sintaxis CSS: padding-left, padding-right, padding-top,

padding-bottom, padding
Sintaxis JavaScript: paddingLeft, paddingRight, paddingTop,

paddingBottom, paddings()
Posibles valores longitud, porcentaje

Valor inicial 0
Heredable no
70
Anchura del los Bordes
Sintaxis CSS: border-left-width, border-right-width, border-

top-width, border-bottom-width, border-width
Sintaxis JavaScript: borderLeftWidth, borderRightWidth,

borderTopWidth, borderBottomWidth, borderWidths()
Posibles valores longitud

Valor inicial none
Heredable no
Estilo del Borde
Sintaxis CSS: border-style
Sintaxis JavaScript: borderStyle
none, solid, double, inset, outset, groove,

Posibles valores
ridge
Valor inicial none
Heredable no
Valores
no aplicable
porcentuales
Color del Borde
Sintaxis CSS: border-color
Sintaxis JavaScript: borderColor
Posibles valores color, none
71
Valor inicial none
Heredable no
Color: nombre de un color o 6 digitos hexadecimales indicando su valor rgb.
Anchura
Esta propiedad permite especificar la anchura de un elemento. El navegador intenta

respetar la solucitud del programador siempre que sea posible y no entre en conflicto
con otras propiedades como los mrgenes.
Sintaxis CSS: width
Sintaxis JavaScript: width
Posibles valores longitud, porcentaje, auto

Valor inicial auto
Heredable no
Alineacin
Todo elemento se puede hacer flotar a derecha o izquierda mediante la

propiedad float. La caja que contiene el elemento se puede hacer flotar a derecha o
izquierda como se intenta explicar con la siguiente imagen:
72
Sintaxis CSS: float
Sintaxis JavaScript: align
Posibles valores left, right, none

Valor inicial none
Heredable no
A continuacin veremos el resultado de utilizar float con sus distintos valores. El

cdigo al que se le aplicar es el siguiente:
<img src="pause.png" />

<p>bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla,
bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla,
bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla,
bla, bla, bla, bla, bla, bla, bla, bla, bla,
...</p>
Sin float:
73
bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, ...
Con float: left:
...
Con float: right:
...
74
Clear
La propiedad clear sirve para controlar cmo se comportarn los elementos que
siguen a otros elementos flotantes. Por defecto los elementos que suguen a los que
flotan se mueven hacia arriba para rellenar el espacio disponible. Esta propiedad
permite especificar donde no habr elementos flotantes. Las opciones
son left, right y both.
Sintaxis CSS: clear
Sintaxis JavaScript: clear
Posibles valores none, left, right, both

Valor inicial none
Heredable no
Ejercico: Modifique los ejemplos anteriores en los que se usa float para descubrir su
efecto "limpiador".
Propiedades de Color y Fondo
Color
Sintaxis CSS: color
Sintaxis JavaScript: color
Posibles valores color

Valor inicial black
Heredable si
75
Esta propiedad especifica el color del texto.
Color: especificacion de un color (nombre, valor rgb).
Imagen de Fondo
Sintaxis CSS: background-image
Sintaxis JavaScript: backgroundImage
Posibles valores url

Valor inicial vacio
Heredable no
Posicin del Fondo
Sintaxis CSS: background-position
Sintaxis JavaScript: backgroundPosition
absoluto o relativo, conjunto de coordenadas x y, palabras reservadas left,

Posibles valores
right, top, bottom, center
Valor inicial esquina superior izquierda
Heredable no
Valores
no aplicable
porcentuales
76
Color de Fondo
Sintaxis CSS: background-color
Sintaxis JavaScript: backgroundColor
Posibles valores color

Valor inicial vacio
Heredable no
Propiedades de Clasificacion
Display
Sintaxis CSS: display
Sintaxis JavaScript: display
77
Posibles valores ninguno, block, inline, list-item
Valor inicial segun HTML
Heredable no
Esta propiedad indica cuando un elemento es en lnea, como <em>, de bloque, como
<h1> o de lista, como <li>.
Estilo de Lista
Sintaxis CSS: list-style-type
Sintaxis JavaScript: listStyleType
ninguno, disk, circle, square, decimal, lower-

Posibles valores
roman, upper-roman, lower-alpha, upper-alpha
Valor inicial disk
Se aplica a elementos cuya propiedad display es list-item
Heredable si
Valores
no aplicable
porcentuales
Espacios en Blanco
Sintaxis CSS: white-space
Sintaxis JavaScript: whiteSpace
Posibles valores normal, pre

Valor inicial segun HTML
Heredable si
78
Unidades
Unidades de Longitud
El formato de un valor de longitud es un signo opcional ('+' o '-', '+' por defecto), un
numero y una unidad de medida. Ejemplos: 12pt, 2em, 3mm.
Hay tres tipos de unidades: absolutas, relativas y pixel.
Tipos de unidades absolutas:
pt: puntos
pc: picas
px: pixels
in: pulgadas
mm: milimetros
cm: centimetros
Tipos de unidades relativas:
em: la altura de la fuente, normalmente la anchura o altura de la M mayuscula

ex: la mitad de la altura la fuente, normalmente la altura de la letra'x'
px: pixels, relativos a la superficie de dibujo
Los elementos hijo heredan los valores calculados y no los valores relativos. Por
ejemplo:
body {font-size: 12; text-indent: 3em}

h1 {font-size: 15pt;}
En este ejempo la indentacin del texto en <h1> ser 36pt y no 45pt.
Unidades de Color
Un valor de color es o un nombre de color o una descripcion RGB.
79
La lista de colores sugerida es: aqua, black, blue, fuchsia, gray,
green, maroon, navy, olive, purple, red, silver, teal,
white, yellow. Estos 16 colores se han tomado de la paleta VGA de Windows.
body {color: black;}

tags.body.backgroundColor = "white"
Un color RGB puede especificarse mediante 6 digitos hexadecimales. Los dos

primeros indican rojo, los dos segundos verde y los dos ultimos azul. Ejemplos:
body {color: #ff0000;} /* rojo */

tags.p.backgroundColor = "#606060"; /* gris
*/
Tambin podemos utilizar la funcion rgb(). Usa tres argumentos: rojo, verde y azul.
Cada color puede ser un entero entre 0 y 255, o un porcentaje. Ejemplo:
p {color: rgb(200, 20, 240);} /* purpura

brillante */
blockquote {background-color: rgb(100%,
100%, 20%);} /* amarillo brillante */
Un vistazo a la Guia de referencia rpida de hojas de estilo, lo encuentra en Espaol

resultado de traduccin del HTML-4.01 http://www.sidar.org/recur/desdi/traduc/es/html401-
es/cover.html
Validadores de cdigo: HTML y CSS
Otros tutoriales de HTML y CSS
Manual de referencia de CSS
80

S1-Basico de PHP y HTML PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

S1-Basico de PHP y HTML PDF

Enviado por

Direitos autorais:

Formatos disponíveis

BASICO DE PHP

El equipo de desarrollo de PHP incluye docenas de programadores, as como otras docenas de

PHP (acrnimo de "PHP: Hypertext Preprocessor") es un lenguaje de "cdigo abierto"

Puede apreciarse que no es lo mismo que un script escrito en otro lenguaje de

Lo que distingue a PHP de la tecnologa Javascript, la cual se ejecuta en la mquina

Lo mejor de usar PHP es que es extremadamente simple para el principiante, pero a su

Aunque el desarrollo de PHP est concentrado en la programacin de scripts en el lado

Qu se puede hacer con PHP?

Existen tres campos en los que se usan scripts escritos en PHP.

Scripts del lado del servidor: Este es el campo ms tradicional y el principal

Scripts en la lnea de comandos. Puede crear un script PHP y correrlo sin

Quizs la caracterstica ms potente y destacable de PHP es su soporte para una gran

Digamos que tiene limitado acceso a internet y se encuentra programando localmente. En

Como funciona el interpete de PHP con ZEND?

Como es un lenguaje que se interpreta en ejecucin, para ciertos usos puede

Con esta lnea definimos una variable de tipo entero.

long int _int(int int_){return int_-int_};

Esto equivale a poner 0.

Esto equivale a poner 1.

Esto equivale a poner 10.

PHP toma cdigo dentro de las pginas, lo ejecuta en el

Existen mltiples formas de incluir cdigo PHP:

<?php echo("Hello World") ?>

<? echo("Hello World") ?>

<script language="php"> echo("Hello World"); </script>

<% echo("Hello World") %>

<% echo( "hola" ) %> <% echo( "chao" ) %>

<% echo( "hola" ); echo( "chao" ); %>

Etiquetas de apertura y de fin de bloque de PHP

// comentario de una lnea

Variables y tipos de dato

Dos tipos compuestos:

Y finalmente dos tipos especiales:

$direccion["pedro"] = "Las Pataguas 123";

echo gettype($un_bool); // imprime: boolean

// Si este valor es un entero, incrementarlo en cuatro

// Si $a_bool es una cadena, imprimirla

Usualmente, el resultado de un operador que devuelve un valor boolean es pasado a una

// ...porque se puede escribir simplemente:

el boolean FALSE mismo

Cualquier otro valor es considerado TRUE (incluyendo cualquier resource).

Los literales integer binarios estn disponibles desde PHP 5.4.0.

Ejemplo #1 Enteros literales

Formalmente, la estructura de integer literales es:

El tamao de un integer depende de la plataforma, aunque un valor mximo de aproximadamente

Ejemplo #2 Octal raros

Ejemplo #4 Desbordamiento de enteros en sistemas 64-bits

FALSE produce 0 (cero), y TRUE produce 1 (uno).

Cuando se convierte de un float a un integer, el nmero ser redondeado hacia cero.

Nmeros de punto flotante

El tamao de un flotante depende de la plataforma, aunque un valor comn consiste en un

Precisin del punto flotante

As que nunca se confa en resultados de nmeros flotantes hasta el ltimo dgito y no se

Como se indica en la advertencia anterior, comprobar la igualdad de valores de punto flotante es

$a y $b son iguales a 5 dgitos de precisin.

if(abs($a-$b) < $epsilon) {

Un string literal puede ser especificado de cuatro formas diferentes:

La manera ms sencilla de especificar un string es encerrarlo entre comillas

Nota: A diferencia de las sintaxis de comillas dobles y heredoc, las variables

echo 'Tambien puede incluir nuevas lneas en

// Resultado: Ha borrado C:\*.*?

// Resultado: Ha borrado C:\*.*?

// Resultado: Esto no se expandir: \n una nueva lnea

// Resultado: Ha borrado C:\.?

// Resultado: Ha borrado C:\.?