Vega Contenido

A)identificacion del lenguaje css
DEFINICION DE CSS
CSS, es una tecnologa que nos permite crear pginas web de una manera ms exacta. Gracias a las CSS somos
mucho ms dueos de los resultados finales de la pgina, pudiendo hacer muchas cosas que no se poda hacer
utilizando solamente HTML, como incluir mrgenes, tipos de letra, fondos, colores... Incluso podemos definir
nuestros propios estilos en un archivo externo a nuestras pginas; as, si en algn momento queremos cambiar
alguno de ellos, automticamente se nos actualizarn todas las pginas vinculadas de nuestro sitio.
ESPECIFICACION OFICIAL DE CSS
CSS es una especificacin desarrollada por el W3C (World Wide Web Consortium) para permitir la separacin de
los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentacin del documento
con las hojas de estilo, incluyendo elementos tales como los colores, fondos, mrgenes, bordes, tipos de letra...,
modificando as la apariencia de una pgina web de una forma ms sencilla, permitiendo a los desarrolladores
controlar el estilo y formato de sus documentos.
Cmo funciona?
El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos
estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una
declaracin, esta ltima va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos
puntos.
FUNSIONAMIENTO BASICO DE CSS
Antes de que se generalizara el uso de CSS, los diseadores de pginas web utilizaban etiquetas HTML
especiales para modificar el aspecto de los elementos de la pgina. El siguiente ejemplo muestra una pgina
HTML con estilos definidos sin utilizar CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Titular de la pgina</font></h1>
<p><font color="gray" face="Verdana" size="2">Un prrafo de texto no muy largo.</font></p>
</body>
</html>
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, el tipo y el
tamao de letra de cada elemento de la pgina.
El problema de utilizar este mtodo para definir el aspecto de los elementos se puede ver claramente con el
siguiente ejemplo: si la pgina tuviera 50 elementos diferentes, habra que insertar 50 etiquetas <font>. Si el sitio
web entero se compone de 10.000 pginas diferentes, habra que definir 500.000 etiquetas <font>. Como cada
etiqueta <font> tiene tres atributos, habra que definir 1.5 millones de atributos.
Como el diseo de los sitios web est en constante evolucin, es habitual modificar cada cierto tiempo el
aspecto de las pginas del sitio. Siguiendo con el ejemplo anterior, cambiar el aspecto del sitio requerira
modificar 500.000 etiquetas y 1.5 millones de atributos
La solucin que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:

<head>
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la pgina</h1>
<p>Un prrafo de texto no muy largo.</p>
</body>
</html>
CSS permite separar los contenidos de la pgina y la informacin sobre su aspecto. En el ejemplo anterior,
dentro de la propia pgina HTML se crea una zona especial en la que se incluye toda la informacin relacionada
con los estilos de la pgina.
Utilizando CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin ensuciar el cdigo HTML de
los contenidos con etiquetas <font>. Como se ver ms adelante, la etiqueta <style> crea una zona especial
donde se incluyen todas las reglas CSS que se aplican en la pgina.
En el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas <h1> de la pgina se deben
ver de color rojo, con un tipo de letra Arial y con un tamao de letra grande. Adems, las etiquetas <p> de la
pgina se deben ver de color gris, con un tipo de letra Verdana y con un tamao de letra medio.
Definir los estilos de esta forma ahorra miles de etiquetas y millones de atributos respecto a la solucin anterior,
pero sigue sin ser una solucin ideal. Como los estilos CSS slo se aplican en la pgina que los incluye, si
queremos que las 10.000 pginas diferentes del sitio tengan el mismo aspecto, se deberan copiar 10.000 veces
esas mismas reglas CSS. Ms adelante se explica la solucin que propone CSS para evitar este problema.
FORMAS DE INCLUSION CSS EN HTML
Una de las principales caractersticas de CSS es su flexibilidad y las diferentes opciones que ofrece para realizar
una misma tarea. De hecho, existen tres opciones para incluir CSS en un documento HTML.
Incluir CSS en el mismo documento HTML
Los estilos se definen en una zona especfica del propio documento HTML. Se emplea la etiqueta <style> de
HTML y solamente se pueden incluir en la cabecera del documento (slo dentro de la seccin <head>).
Ejemplo:
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Un prrafo de texto.</p>
</body>
</html>
Este mtodo se emplea cuando se define un nmero pequeo de estilos o cuando se quieren incluir estilos
especficos en una determinada pgina HTML que completen los estilos que se incluyen por defecto en todas las
pginas del sitio web.
El principal inconveniente es que si se quiere hacer una modificacin en los estilos definidos, es necesario
modificar todas las pginas que incluyen el estilo que se va a modificar.

Los ejemplos mostrados en este libro utilizan este mtodo para aplicar CSS al contenido HTML de las pginas.
De esta forma el cdigo de los ejemplos es ms conciso y se aprovecha mejor el espacio.
Incluir CSS en los elementos HTML
El ltimo mtodo para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya que tiene los
mismos problemas que la utilizacin de las etiquetas <font>.
Ejemplo:
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
</head>
<body>
<p style="color: black; font-family: Verdana;">Un prrafo de texto.</p>
</body>
</html>
Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones
en las que se debe incluir un estilo muy especfico para un solo elemento concreto.
GLOSARIO BASICO
CSS define una serie de trminos que permiten describir cada una de las partes que componen los estilos CSS.
El siguiente esquema muestra las partes que forman un estilo CSS muy bsico:
Figura 1.1 Componentes de un estilo CSS bsico
Los diferentes trminos se definen a continuacin:
Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla est compuesta de una
parte de "selectores", un smbolo de "llave de apertura" ({), otra parte denominada "declaracin" y por ltimo, un
smbolo de "llave de cierre" (}).
Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
Declaracin: especifica los estilos que se aplican a los elementos. Est compuesta por una o ms
propiedades CSS.
Propiedad: caracterstica que se modifica en el elemento seleccionado, como por ejemplo su tamao de
letra, su color de fondo, etc.
Valor: establece el nuevo valor de la caracterstica modificada en el elemento.

Un archivo CSS puede contener un nmero ilimitado de reglas CSS, cada regla se puede aplicar a varios
selectores diferentes y cada declaracin puede incluir tantos pares propiedad/valor como se desee.
El estndar CSS 2.1 define 115 propiedades, cada una con su propia lista de valores permitidos. Por su parte, los
ltimos borradores del estndar CSS 3 ya incluyen 239 propiedades.
USO DE LOS COMENTARIOS
CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que el
diseador incluye en el archivo CSS para su propia informacin y utilidad. Los navegadores ignoran por
completo cualquier comentario de los archivos CSS, por lo que es comn utilizarlos para estructurar de forma
clara los archivos CSS complejos.
El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */,
tal y como se muestra en el siguiente ejemplo:
/* Este es un comentario en CSS */
Los comentarios pueden ocupar tantas lneas como sea necesario, pero no se puede incluir un comentario
dentro de otro comentario:
/* Este es un
comentario CSS de varias
lineas */
Aunque los navegadores ignoran los comentarios, su contenido se enva junto con el resto de estilos, por lo que
no se debe incluir en ellos ninguna informacin sensible o confidencial.
La sintaxis de los comentarios CSS es muy diferente a la de los comentarios HTML, por lo que no deben
confundirse:
< !-- Este es un comentario en HTML -->
< !-- Este es un
comentario HTML de varias
lineas -->
SINTAXIS DE LA DEFINICION DE CADA PROPIEDAD DE CSS
A lo largo de los prximos captulos, se incluyen las definiciones formales de la mayora de propiedades de CSS.
La definicin formal se basa en la informacin recogida en el estndar oficial y se muestra en forma de tabla.
Una de las principales informaciones de cada definicin es la lista de posibles valores que admite la propiedad.
Para definir la lista de valores permitidos se sigue un formato que es necesario detallar.
Si el valor permitido se indica como una sucesin de palabras sin ningn carcter que las separe (parntesis,
comas, barras, etc.) el valor de la propiedad se debe indicar tal y como se muestra y con esas palabras en el
mismo orden.
Si el valor permitido se indica como una sucesin de valores separados por una barra simple (carcter |) el valor
de la propiedad debe tomar uno y slo uno de los valores indicados. Por ejemplo, la notacin <porcentaje> |
<medida> | inherit indica que la propiedad solamente puede tomar como valor la palabra reservada inherit o un
porcentaje o una medida.
Si el valor permitido se indica como una sucesin de valores separados por una barra doble (smbolo ||) el valor
de la propiedad puede tomar uno o ms valores de los indicados y en cualquier orden.
Por ejemplo, la notacin <color> || <estilo> || <medida> indica que la propiedad puede tomar como valor
cualquier combinacin de los valores indicados y en cualquier orden. Se podra establecer un color y un estilo,
solamente una medida o una medida y un estilo. Adems, el orden en el que se indican los valores es
indiferente. Opcionalmente, se pueden utilizar parntesis para agrupar diferentes valores.
Por ltimo, en cada valor o agrupacin de valores se puede indicar el tipo de valor: opcional, obligatorio,
mltiple o restringido.
El carcter * indica que el valor ocurre cero o ms veces; el carcter + indica que el valor ocurre una o ms
veces; el carcter ? indica que el valor es opcional y por ltimo, el carcter {nmero_1, nmero_2} indica que el
valor ocurre al menos tantas veces como el valor indicado en nmero_1 y como mximo tantas veces como el
valor indicado en nmero_2.
Por ejemplo, el valor [<family-name> , ]* indica que el valor de tipo <family_name> seguido por una coma se
puede incluir cero o ms veces. El valor <url>? <color> significa que la URL es opcional y el color obligatorio y
en el orden indicado. Por ltimo, el valor [<medida> | thick | thin] {1,4} indica que se pueden escribir entre 1 y 4
veces un valor que sea o una medida o la palabra thick o la palabra thin.
No obstante, la mejor forma de entender la notacin formal para las propiedades de CSS es observar la
definicin de cada propiedad y volver a esta seccin siempre que sea necesario
SELECTORES
Para crear diseos web profesionales, es imprescindible conocer y dominar los selectores de CSS. Como se vio
en el captulo anterior, una regla de CSS est formada por una parte llamada "selector" y otra parte llamada
"declaracin" ejemplo:
< !--[if !supportLineBreakNewLine]-->
< !--[endif]-->
Selector universal
Se utiliza para seleccionar todos los elementos de la pgina. El siguiente ejemplo elimina el margen y el relleno
de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaracin de la regla CSS):
*{
margin: 0;
padding: 0;
}
Selector descendente
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro
cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de la pgina que se encuentren dentro
de un elemento
<p>:
p span { color: red; }
Si el cdigo HTML de la pgina es el siguiente:
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
AGRUACION DE REGLAS
Cuando se crean archivos CSS complejos con decenas o cientos de reglas, es habitual que los estilos que se
aplican a un mismo selector se definan en diferentes reglas:
h1 { color: red; }
...
h1 { font-size: 2em; }
...
h1 { font-family: Verdana; }
Las tres reglas anteriores establecen el valor de tres propiedades diferentes de los elementos <h1>. Antes de
que el navegador muestre la pgina, procesa todas las reglas CSS de la pgina para tener en cuenta todos los
estilos definidos para cada elemento.
Cuando el selector de dos o ms reglas CSS es idntico, se pueden agrupar las declaraciones de las reglas para
hacer las hojas de estilos ms eficientes:
h1 {
color: red;
font-size: 2em;
font-family: Verdana;
}
El ejemplo anterior tiene el mismo efecto que las tres reglas anteriores, pero es ms eficiente y es ms fcil de
modificar y mantener por parte de los diseadores. Como CSS ignora los espacios en blanco y las nuevas
lneas, tambin se pueden agrupar las reglas de la siguiente forma:
h1 { color: red; font-size: 2em; font-family: Verdana; }
Si se quiere reducir al mximo el tamao del archivo CSS para mejorar ligeramente el tiempo de carga de la
pgina web, tambin es posible indicar la regla anterior de la siguiente forma:
h1 {color:red;font-size:2em;font-family:Verdana;}
HERENCIA
Una de las caractersticas principales de CSS es la herencia de los estilos definidos para los elementos. Cuando
se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma
automtica el valor de esa propiedad. Si se considera el siguiente ejemplo:

<head>
<title>Ejemplo de herencia de estilos</title>
body { color: blue; }
</style>
</head>
<body>
</body>
</html>
En el ejemplo anterior, el selector body solamente establece el color de la letra para el elemento <body>. No
obstante, la propiedad color es una de las que se heredan de forma automtica, por lo que todos los elementos
descendientes de <body> muestran ese mismo color de letra. Por tanto, establecer el color de la letra en el
elemento <body> de la pgina implica cambiar el color de letra de todos los elementos de la pgina.
Aunque la herencia de estilos se aplica automticamente, se puede anular su efecto estableciendo de forma
explcita otro valor para la propiedad que se hereda, como se muestra en el siguiente ejemplo:
<head>
<title>Ejemplo de herencia de estilos</title>
body { font-family: Arial; color: black; }
h1 { font-family: Verdana; }
p { color: red; }
</style>
</head>
<body>
</body>
</html>
En el ejemplo anterior, se establece en primer lugar el color y tipo de letra del elemento <body>, por lo que todos
los elementos de la pgina se mostraran con ese mismo color y tipo de letra. No obstante, las otras reglas CSS
modifican alguno de los estilos heredados.
De esta forma, los elementos <h1> de la pgina se muestran con el tipo de letra Verdana establecido por el
selector h1 y se muestran de color negro que es el valor heredado del elemento <body>. Igualmente, los
elementos <p> de la pgina se muestran del color rojo establecido por el selector p y con un tipo de letra Arial
heredado del elemento <body>.
La mayora de propiedades CSS aplican la herencia de estilos de forma automtica. Adems, para aquellas
propiedades que no se heredan automticamente, CSS incluye un mecanismo para forzar a que se hereden sus
valores, tal y como se ver ms adelante.
Por ltimo, aunque la herencia automtica de estilos puede parecer complicada, simplifica en gran medida la
creacin de hojas de estilos complejas. Como se ha visto en los ejemplos anteriores, si se quiere establecer por
ejemplo la tipografa base de la pgina, simplemente se debe establecer en el elemento <body> de la pgina y el
resto de elementos la heredarn de forma automtica.
COLISIONES DE ESTILO
En las hojas de estilos complejas, es habitual que varias reglas CSS se apliquen a un mismo elemento HTML. El
problema de estas reglas mltiples es que se pueden dar colisiones como la del siguiente ejemplo:
p { color: red; }
p { color: blue; }
<p>...</p>
De qu color se muestra el prrafo anterior? CSS tiene un mecanismo de resolucin de colisiones muy
complejo y que tiene en cuenta el tipo de hoja de estilo que se trate (de navegador, de usuario o de diseador), la
importancia de cada regla y lo especfico que sea el selector.
El mtodo seguido por CSS para resolver las colisiones de estilos se muestra a continuacin:
1. Determinar todas las declaraciones que se aplican al elemento para el medio CSS seleccionado.
2. Ordenar las declaraciones segn su origen (CSS de navegador, de usuario o de diseador) y su prioridad
(palabra clave !important).
3. Ordenar las declaraciones segn lo especfico que sea el selector. Cuanto ms genrico es un selector,
menos importancia tienen sus declaraciones.
4. Si despus de aplicar las normas anteriores existen dos o ms reglas con la misma prioridad, se aplica la
que se indic en ltimo lugar.
Hasta que no se expliquen ms adelante los conceptos de tipo de hoja de estilo y la prioridad, el mecanismo
simplificado que se puede aplicar es el siguiente:
1. Cuanto ms especfico sea un selector, ms importancia tiene su regla asociada.
2. A igual especificidad, se considera la ltima regla indicada.
Como en el ejemplo anterior los dos selectores son idnticos, las dos reglas tienen la misma prioridad y
prevalece la que se indic en ltimo lugar, por lo que el prrafo se muestra de color azul.
En el siguiente ejemplo, la regla CSS que prevalece se decide por lo especfico que es cada selector:
p { color: red; }
p#especial { color: green; }
* { color: blue; }
<p id="especial">...</p>
Al elemento <p> se le aplican las tres declaraciones. Como su origen y su importancia es la misma, decide la
especificidad del selector. El selector * es el menos especfico, ya que se refiere a "todos los elementos de la
pgina". El selector p es poco especfico porque se refiere a "todos los prrafos de la pgina". Por ltimo, el
selector p#especial slo hace referencia a "el prrafo de la pgina cuyo atributo id sea igual a especial". Como el
selector p#especial es el ms especfico, su declaracin es la que se tiene en cuenta y por tanto el prrafo se
muestra de color verde.
UNIDADES DE MEDIDA Y COLORES
Muchas de las propiedades de CSS que se ven en los prximos captulos permiten indicar medidas y colores en
sus valores. Adems, CSS es tan flexible que permite indicar las medidas y colores de muchas formas
diferentes.
Por este motivo, se presentan a continuacin todas las alternativas disponibles en CSS para indicar las medidas
y los colores. En los siguientes captulos, cuando una propiedad pueda tomar como valor una medida o un
color, no se volvern a explicar todas estas alternativas
COLORES
Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB
hexadecimal, RGB numrico y RGB porcentual. Aunque el mtodo ms habitual es el del RGB hexadecimal, a
continuacin se muestran todas las alternativas que ofrece CSS.
B)implementacion de los elementos cssen la definicion de la aparencia de los elementos que integran las
paginas web
BOXMODEL
Bordes
The border width properties specify the width of the . Las propiedades ancho del borde especifican el ancho de
la zona fronteriza. The properties defined in this section refer to the value type, which may take one of the
following values: Las propiedades definidas en esta seccin se refieren a la <border-width> tipo de valor, que
puede tomar uno de los siguientes valores:
delgado
A thin border. Un borde fino.
medio
A medium border. Un borde medio.
de espesor
A thick border. Un borde grueso.
< medidas>
The border's thickness has an explicit value. El espesor de borde tiene un valor explcito. Explicit border widths
cannot be negative. anchos explcita frontera no puede ser negativo.
The interpretation of the first three values depends on the user agent. La interpretacin de los primeros tres
valores depende de la aplicacin del usuario. The following relationships must hold, however: Las siguientes
relaciones deben tener, sin embargo:
'thin' <='medium' <= 'thick'. "Delgada" <<= 'medio' = 'de espesor.
Furthermore, these widths must be constant throughout a document. Adems, estos anchos debe ser constante
en todo el documento.
Border-top-width , 'border-right-width' , 'border-bottom-width' , 'border-left-width'
This property is a shorthand property for setting , , , and at the same place in the style sheet. Esta propiedad es
una propiedad resumida para definir border-top-width, border-right-width , Border-bottom-widthy border-leftwidth en el mismo lugar en la hoja de estilos.
If there is only one component value, it applies to all sides. Si slo hay un valor del componente, se aplica a
todas las partes. If there are two values, the top and bottom borders are set to the first value and the right and
left are set to the second. Si hay dos valores, los bordes superior e inferior son determinados por el primer valor
y el derecho e izquierdo son determinados por el segundo. If there are three values, the top is set to the first
value, the left and right are set to the second, and the bottom is set to the third. Si hay tres valores, el superior se
establece en el primer valor, la izquierda y la derecha se establecen en el segundo, y la parte inferior se
establece en el tercero. If there are four values, they apply to the top, right, bottom, and left, respectively. Si hay
cuatro valores, se aplican a la parte superior derecha, inferior e izquierdo, respectivamente.
Example(s):
In the examples below, the comments indicate the resulting widths of the top, right, bottom, and left borders: En
los ejemplos siguientes, los comentarios que indican el ancho resultante de la parte superior, derecha, abajo,
izquierda y las fronteras:
h1 { border-width: thin } /* thin thin thin thin */ h1 {border-width: delgada} / * * fina fina fina fina /
h1 { border-width: thin thick } /* thin thick thin thick */ h1 {border-width: fina gruesa} / * * delgada de espesor
grueso delgado /
h1 { border-width: thin thick medium } /* thin thick medium thick */ h1 {border-width: medio de espesor delgado} /
* * espesor delgado espesor medio /
Margen, relleno, bordes y boxmdel
Las propiedades de color del borde de especificar el color del borde de una caja.
, , , 'Border-top-color' , 'border-right-color' , 'border-bottom-color' , 'border-left-color'
The property sets the color of the four borders. El"border-color" propiedad establece el color de los cuatro
bordes. Values have the following meanings: Los valores tienen los siguientes significados: <color>
Specifies a color value. Especifica un valor de color.
transparente
The border is transparent (though it may have width). El borde es transparente (aunque puede tener ancho).
The property can have from one to four component values, and the values are set on the different sides as for .
El "border-color" propiedad puede tener de uno a cuatro valores de los componentes, y los valores se
establecen en las diferentes partes en cuanto a "border-width".
If an element's border color is not specified with a border property, user agents must use the value of the
element's property as the for the border color. Si el elemento de un borde de color no se especifica con una
propiedad de la frontera, los agentes de usuario debe utilizar el valor del elemento de "color" de propiedad como
el valor calculado para el color del borde.
Example(s):
In this example, the border will be a solid black line. En este ejemplo, la frontera ser una lnea de color negro
slido.
p{p{
color: black; color: negro;
background: white; de fondo: blanco;
border: solid; frontera: slido;

}}
8.5.3 Border style : , , , , and 8.5.3 Estilo del borde : border-top-style, border-right-style, border-bottom-style,
border-left-style ' y border-style.
The border style properties specify the line style of a box's border (solid, double, dashed, etc.). Las propiedades
de estilo del borde especifican el estilo de lnea de borde de una caja (slido, doble, discontinua, etc.) The
properties defined in this section refer to the value type, which may take one of the following values: Las
propiedades definidas en esta seccin se refieren a la <border-style> tipo de valor, que puede tomar uno de los
siguientes valores:
ninguno
No border; the computed border width is zero. No hay fronteras, el ancho del borde calculada es cero.
ocultos
Same as 'none', except in terms of for . Igual que la palabra nada, excepto en trminos de la revolucion de
conflictos fronterizos de elementos de la tabla.
puntos
The border is a series of dots. La frontera es una serie de puntos.
discontinua
The border is a series of short line segments. La frontera es una serie de segmentos de lnea.
slidos
The border is a single line segment. La frontera es un segmento de lnea nica.
doble
The border is two solid lines. La frontera es de dos lneas continuas. The sum of the two lines and the space
between them equals the value of . La suma de las dos lneas y el espacio entre ellas es igual al valor de borderwidth.
surco
The border looks as though it were carved into the canvas. La frontera se ve como si fuera tallado en el lienzo.
cresta
The opposite of 'groove': the border looks as though it were coming out of the canvas. Lo opuesto a 'groove': la
frontera se ve como si estuviera saliendo de la tela.
recuadro
The border makes the box look as though it were embedded in the canvas. La frontera hace que el cuadro parece
como si se tratara incrustado en el lienzo.
principio
The opposite of 'inset': the border makes the box look as though it were coming out of the canvas. Lo opuesto a
'inset': el borde hace que el cuadro como si se tratara de salir de la tela.
All borders are drawn on top of the box's background. Todas las fronteras se dibujan en la parte superior del
fondo de la caja. The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' depends on the
element's , but UAs may choose their own algorithm to calculate the actual colors used. El color de fronteras
trazadas por los valores de 'groove', 'canto', 'inset', y 'principio' depende del elemento de las propiedades de
color de border, pero AU puede elegir su propio algoritmo para calcular los colores utilizados. For instance, if the
'border-color' has the value 'silver', then a UA could use a gradient of colors from white to dark gray to indicate a
sloping border. Por ejemplo, si el 'border-color' ha 'plata' es el valor, a continuacin, un UA podra utilizar un
degradado de colores del blanco al gris oscuro para indicar un borde inclinado.
, , , 'Border-top-style' , 'border-right-style' , 'border-bottom-style' , 'border-left-style'
The property sets the style of the four borders. El border-stylepropiedad establece el estilo de los cuatro bordes.
It can have from one to four component values, and the values are set on the different sides as for above. Puede
tener de uno a cuatro valores de los componentes, y los valores se establecen en los distintos lados como en
border-width arriba.
Example(s):
#xy34 { border-style: solid dotted } # Xy34 {border-style: puntos slidos}
In the above example, the horizontal borders will be 'solid' and the vertical borders will be 'dotted'. En el ejemplo
anterior, las fronteras horizontal ser "slido" y los bordes verticales sern "puntos".
Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set. Dado
que el valor inicial de los estilos de borde es 'none', sin fronteras ser visible a menos que el estilo de borde se
establece.
POSICIONAMIENTO Y VISUALIZACION
Tipos de elementos
El estndar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en lnea y elementos de
bloque.
Los elementos de bloque ("block elements" en ingls) siempre empiezan en una nueva lnea y ocupan todo el
espacio disponible hasta el final de la lnea. Por su parte, los elementos en lnea ("inline elements" en ingls) no
empiezan necesariamente en nueva lnea y slo ocupan el espacio necesario para mostrar sus contenidos.
Debido a este comportamiento, el tipo de un elemento influye de forma decisiva en la caja que el navegador crea
para mostrarlo. La siguiente imagen muestra las cajas que crea el navegador para representar los diferentes
elementos que forman una pgina HTML:
Posicionamiento normal
El posicionamiento normal o esttico es el modelo que utilizan por defecto los navegadores para mostrar los
elementos de las pginas. En este modelo, ninguna caja se desplaza respecto de su posicin original, por lo que
slo se tiene en cuenta si el elemento es de bloque o en lnea.
Los elementos de bloque forman lo que CSS denomina "contextos de formato de bloque". En este tipo de
contextos, las cajas se muestran una debajo de otra comenzando desde el principio del elemento contenedor. La
distancia entre las cajas se controla mediante los mrgenes verticales.
Si un elemento se encuentra dentro de otro, el elemento padre se llama "elemento contenedor" y determina tanto
la posicin como el tamao de todas sus cajas interiores.
Si un elemento no se encuentra dentro de un elemento contenedor, entonces su elemento contenedor es el
elemento <body> de la pgina. Normalmente, la anchura de los elementos de bloque est limitada a la anchura
de su elemento contenedor, aunque en algunos casos sus contenidos pueden desbordar el espacio disponible.
Los elementos en lnea forman los "contextos de formato en lnea". En este tipo de contextos, las cajas se
muestran una detrs de otra de forma horizontal comenzando desde la posicin ms a la izquierda de su
elemento contenedor. La distancia entre las cajas se controla mediante los mrgenes laterales.
Si las cajas en lnea ocupan ms espacio del disponible en su propia lnea, el resto de cajas se muestran en las
lneas inferiores. Si las cajas en lnea ocupan un espacio menor que su propia lnea, se puede controlar la
distribucin de las cajas mediante la propiedad text-align para centrarlas, alinearlas a la derecha o justificarlas.
Posicionamiento float
El posicionamiento float es uno de los ms utilizados, sobre todo al definir la estructura de las pginas, como se
ver ms adelante. Una caja posicionada mediante la propiedad float, se desplaza hasta la zona ms a la
izquierda o ms a la derecha de la lnea en la que se debera mostrar si no se desplazara.
Una caja desplazada mediante float no pertenece al posicionamiento normal de un documento, por lo que los
elementos de bloque anteriores y posteriores se visualizan como si la caja desplazada no existiera.
Si en el anterior ejemplo la "Caja 1" se posiciona mediante un float: left
En las imgenes anteriores, el resto de cajas ocupan la posicin libre dejada por la "Caja 1" original. Como la
"Caja 1" est desplazada a la izquierda, se coloca por encima de la nueva posicin que ocupa la "Caja 2", a la
que cubre por completo.
Si existen otras cajas desplazadas hacia la izquierda o derecha, la nueva caja desplazada se coloca al lado de las
dems cajas. El siguiente ejemplo desplaza las tres cajas:
Si no existe sitio en la lnea actual, la caja pasa a la siguiente lnea hasta que encuentra el sitio necesario para
mostrarse a la izquierda o derecha de la lnea.
imagen............
Una caja posicionada mediante float influye en la disposicin de todas las dems cajas. CSS permite definir si el
resto de los elementos fluyen alrededor de la caja desplazada o no lo hacen.
Los elementos en lnea que se encuentran al lado de las cajas desplazadas mediante float adaptan su anchura al
espacio libre dejado por la caja desplazada. Si en la lnea donde se encuentra la caja desplazada no existe sitio
necesario para los contenidos de los elementos en lnea, estos se visualizan en la lnea inmediatamente inferior.
Los posibles valores de la propiedad determinan el posicionamiento del elemento y el comportamiento de los
elementos adyacentes. Si se indica un valor left, el elemento se desplaza hasta el punto ms a la izquierda
posible en esa misma lnea (si no existe sitio en esa lnea, el elemento baja una lnea y se muestra lo ms a la
izquierda posible en esa nueva lnea). El resto de elementos adyacentes se adaptan y fluyen alrededor del
elemento desplazado.
El valor right tiene un funcionamiento idntico, salvo que en este caso el elemento se desplaza hacia la derecha.
El valor none permite eliminar el posicionamiento y que el elemento se muestre en su posicin original.
Posicionamiento absoluto
La propiedad position establece el esquema de posicionamiento absoluto de un elemento. Existen cuatro tipos
en el esquema de posicionamiento absoluto:
static: posicionamiento absoluto esttico
relative: posicionamiento absoluto relativo
fixed: posicionamiento absoluto fijo
absolute: posicionamiento absoluto absoluto
IMAGENES Y ELACES
Una de las caractersticas fundamentales de HTML es el hecho de
que se pueden vincular entre s diferentes documentos y tipos de
documentos. Las imgenes vinculadas al texto, designadas tambin
como imgenes in-line, son ya un ejemplo de este tipo de vnculo. La
vinculacin se realizar mediante el tag <IMG> de HTML. En el tag
< IMG> debe estar asignado el atributo SRC (Source, fuente) del URL del
archivo de imgenes. As un tag <IMG> tpico podra ser el siguiente:
< IMG SRC="http://www.nombrepagina.es/imgenes/imagen1.jpg">
Los hiperenlaces se realizan con el tag ancla <A>. El elemento
HTML correspondiente es un continer, es decir, debe cerrarse con el
tag final de forma </A>. En el tag <A> se debe asignar al atributo HREF
la direccin (que se activar pulsando el hiperenlace) en forma de un
URL. En la siguiente lnea HTML, la frase "Universidad de Murcia"
representa un hiperenlace al ordenador de nuestra Universidad:
El laboratorio de redes se encuentra en el stano de la Facultad de
Informtica de la <A HREF=" http://www.um.es">Universidad de
Murcia</A>.
Tambin podemos colocar varios enlaces en una sola frase,
constituyendo lo que se ha dado en llamar con uno de esos trminos
tan extraos que elegimos en este mundo de la informtica, hipertexto.
El <A HREF=" http://aries.dif.um.es">laboratorio de redes</A> se
encuentra en el stano de la <A HREF="
http://www.um.es/~fac_info">Facultad de Informtica</A> de la <A
HREF=" http://www.um.es">Universidad de Murcia</A>.
A menudo se utilizan imgenes como hiperenlaces. Para ello es
necesario anidar los tags <IMG> y <A> descritos anteriormente.
Falta mencionar que el URL de un documento que se encuentra
en el mismo ordenador y el mismo directorio que el documento que se
quiere activar, se puede indicar en forma abreviada. En este caso es
suficiente con indicar el nombre del archivo. El siguiente ejemplo ofrece
la sintaxis de un hiperenlace con forma de imagen:
< A HREF="http://www.um.es">
< IMG SRC="logounimurcia.jpg">
< /A>
Podramos utilizar la opcin de <IMG> BORDER para hacer que el
borde que aparece alrededor de una imagen con hiperenlace,
desaparezca, dando una imagen mucho ms adecuada a la calidad que
requiere una buena web.
< A HREF="http://www.um.es">
< IMG SRC="logounimurcia.jpg">
< /A>
LISTAS
Listas desordenadas
La etiqueta <UL>significa unordered list, lista desordenada, y se corresponde con las vietas en los
procesadores de texto: son listas donde cada elemento est precedido de un smbolo como un putno o un disco.
EL formato es el qeu sigue:

< UL>
< LI>Juan Pedro
< LI>Luisa
< /UL>
se ver como
Juan Pedro
Luisa
A partir del HTML 3.2 la etiqueta <UL> admite estos parmetros:
Listas ordenadas
La etiqueta <OL> responde a Ordered List, lista ordenada, y nos permite presentar listas como esquemas
numerados de un solo nivel, o sea, que cada elemento de la lsita lleva un nmero de orden. Por ejemplo,
< OL>
< LI>Primer elemento
< LI>Segundo elemento
< /OL>
se ver como
1. Primer elemento
2. Segundo elemento
El HTML 3.2 admite estos parmetros para la etiqueta <OL> :
Listas de definiciones
Este tipo de lista utiliza las etiquetas <DT>y <DD> en lugar de <LI>. En estas lista cada elemento tiene una
entrada de texto indentada respecto a dicho elemento. Es como si tuvieramos una lista de conceptos y sus
definiciones (el texto indentado). Para entenderlo lo mejor es verlas en marcha:
< DL>
< DT>HTML<DD>Es un lenguaje de definicin de pginas web.
< DT>Java<DD>Es un lenguaje de programacin.
< /DL>
se ver como
HTML
Es un lenguaje de definicin de pginas web.
Java
Es un lenguaje de programacin.
La etiqueta <DL> slo admite como parmetro el ya conocido COMPACT, que tiene el mismo comportamiento
que con los otros dos tipos de lista anteriores. Un elemento <DT> puede contener varios elementos <DD>.
TABLAS
La sintaxis de las tablas ampliadas, comparativamente compleja, es

compatible hacia delante con las tablas HTML usuales, definidas por
primera vez en la versin HTML 3.0 y que presentan la misma forma
que las de la versin HTML 3.2. En la tabla siguiente ofrecemos
resumida la estructura de esta sintaxis de tablas tan extendida:
Elemento Significado Elementos que
contiene
TABLE La tabla completa CAPTION (opcional);
TR (una o ms veces)
CAPTION Ttulo TR Fila de tabla TH y TD (en el orden y
la frecuencia que se
desee)
TH Campo de ttulo TD Campo de datos El resumen siguiente permite apreciar la estructura ms compleja de
la nueva sintaxis ampliada:

Elemento Significado Elementos que
contiene
TABLE La tabla completa CAPTION (opcional)
COL o COLGROUP
(tantas veces como se
desee)
THEAD (opcional)
TFOOT (opcional)
TBODY (una o ms
veces)
CAPTION Ttulo THEAD rea de cabecera de la
tabla
TR (una o ms veces)
TFOOT rea de pie de la tabla. TR (una o ms veces)
TBODY Cuerpo de la tabla. TR (una o ms veces)
COLGROUP Grupo de definicin de
columnas
COL (las veces que se
desee)
COL Definicin de
columnas
TR Fila de tabla TH y TD (en el orden y
frecuencia que se
desee)
TH Campo de ttulo TD Campo de datos Hay que sealar que la compatibilidad hacia delante entre ambas
estructuras de tabla no es evidente. Sin embargo, se desprende del
hecho de que el elemento de tabla TBODY no tiene que ir marcado
explcitamente con los tags <TBODY> y </TBODY>. Si faltan los
elementos THEAD y TFOOT, los elementos TR que se encuentran
directamente en el elemento TABLE son considerados implcitamente
como elementos del cuerpo de la tabla. Y eso se corresponde con la
Diseo de pginas web
Fco. Jos Hurtado Mayn 1999 - www.francisco.hurtado.com
Pgina 25 de 213
www.francisco.hurtado.com
evaluacin de las tablas HTML 3.0. Los tags finales de las tres reas de
la tabla pueden omitirse. En el documento HTML del ejemplo siguiente
se ha utilizado la nueva sintaxis:
< HTML>
< HEAD>
< TITLE>Tablas</TITLE>
< /HEAD>
< BODY>
< H2>Una tabla</H2>
< TABLE BORDER WIDTH="100%">
< CAPTION>Tabla con sintaxis HTML
ampliada</CAPTION>
< COL SPAN="4" ALIGN="left">
< THEAD>
< TR>
< TH>lnea de encabezado 1
< TD>columna 1<TD>columna 2<TD>
< TR>
< TH>lnea de encabezado 2
< TD><TD><TD>columna3
< TFOOT>
< TR>
< TH>lnea de pie 1
< TD><TD>pie 2<TD>
< TR>
< TH>linea de pie 2
< TD>pie 1<TD><TD>pie 3
< TBODY>
< TR>
< TH>linea principal 1
< TD>1-1<TD>1-2<TD>1-3
< TR>
< TH>lnea principal 2
< TD>2-1<TD>2-2<TD>2-3
< TR>
< TH>lnea principal 3
< TD>3-1<TD>3-2<TD>3-3
< /TABLE>
< /BODY> </HTML>
Sin embargo, la presentacin que hacen los browsers en versiones
inferiores a las 4.0 no son satisfactorias, pues el rea de pie de la tabla
queda sobrepuesta al cuerpo de la tabla.
FORMULARIOS
Los formularios interactivos permiten a los autores de pginas Web poner elementos interactivos en sus
pginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar a las cartas de respuestas que se
encuentra en algunas revistas.
El lector escribe la informacin rellenando campos o haciendo clic sobre botones, y luego presiona un botn de
envo para enviarla a una direccin URL que se suele dirigir a una direccin de correo electrnico o a un script
dinmico Web como PHP, ASP o CGI.
La etiqueta FORM
Los formularios estn delimitados con la etiqueta <FORM> ...</FORM>, que permite reunir varios elementos de
formulario, como botones y casillas de texto y que debe poseer los siguientes atributos:
METHOD indica cmo se enviarn las respuestas
"POST" es el valor que enva los datos al agente de procesamiento almacenndolos en el cuerpo del formulario,
en tanto que "GET" enva los datos agregndolos a la direccin URL y separndolos de la direccin con un
signo de interrogacin (para aprender ms sobre los mtodos POST y GET, consulte el artculo sobre protocolo
HTTP)
ACTION indica la direccin a la que se enviar la informacin (un script CGI o direccin de correo electrnico
(mailto:direccin_de_correo_e@equipo))
Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cmo se codifican los datos del
formulario. De cualquier forma, esto no necesita especificarse, ya que el valor predeterminado (application/xwww-form-urlencoded) es el nico valor vlido. El atributo opcional ACCEPT se usa para establecer tipos MIME
para los datos que el formulario puede enviar.
Esta es la sintaxis para la etiqueta FORM:
< FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"> ... </FORM>
Aqu hay algunos ejemplos de las etiquetas FORM:
< FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net">
< FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-bin/script.cgi">
Dentro de la etiqueta FORM
La etiqueta FORM acta como una especie de contenedor para almacenar elementos que permiten al usuario
seleccionar o introducir datos. Todos los datos se enviarn a la direccin URL indicada en el atributo ACTION de
la etiqueta FORM, por el mtodo indicado en el atributo METHOD.
Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), pero
los elementos interactivos son los ms interesantes. Estos elementos interactivos son:
La etiqueta INPUT: Todos los botones y casillas de texto
La etiqueta TEXTAREA: una casilla de texto
La etiqueta SELECT: una lista de opciones mltiples

Envo de datos
Cuando se enva un formulario (haciendo clic en el botn de envo), los datos del formulario se envan a un
script CGI bajo la forma de pares nombre/valor, es decir conjuntos de datos representados por el nombre del
elemento formulario, un signo igual ("=") y luego el valor asociado. Estos pares nombre/valor se separan unos
de otros mediante el smbolo de unin ("&"). Por lo tanto, los datos que se envan al script se vern as:
campo1=valor1&field2;=valor2&field3;=valor3
Con el mtodo GET (enviar los datos mediante una direccin URL), la URL ser una cadena como la siguiente:
http://es.kioskea.net/cgi-bin/script.cgi?campo1=valor1&field2;=valor2
La etiqueta INPUT
La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear muchos elementos
interactivos. La sintaxis de esta etiqueta es la siguiente:
< INPUT type="Nombre de campo" value="Valor predeterminado" name="Nombre de elemento">
El atributo name es esencial, ya que permite al script CGI reconocer qu campo est asociado con un par
nombre/valor, lo que significa que el nombre del campo estar seguido de un signo igual ("=") seguido de un
valor que el usuario introdujo, o si el usuario no introdujo ningn valor, por el valor predeterminado de la
etiqueta value.
El atributo type se usa para especificar qu tipo de elemento se representa con la etiqueta INPUT. Estos son los
valores posibles:
checkbox: Las casillas de eleccin pueden adoptar uno de dos estados: checked (seleccionado) o unchecked
(no seleccionado). Cuando la casilla es seleccionada, el par nombre/valor se enva al CGI.
hidden: Este campo, que el navegador no muestra, es para definir una configuracin nica que se enviar al
CGI como par nombre/valor.
file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo que se enviar con el
formulario. Los tipos de archivo que pueden ser enviados deben especificarse utilizando el atributo ACCEPT de
la etiqueta FORM.
image: Un botn de envo personalizado que aparece cuando se ubica una imagen en la ubicacin definida por
el atributo SRC.
password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos para camuflar el texto
de entrada.
radio: Un botn que permite al usuario elegir entre varias opciones. Cada uno de estos botones debe tener el
mismo atributo name. El par nombre/valor del botn radio seleccionado se enviar al CGI. Al aplicar el atributo
checked para uno de estos botones se definir como seleccionado de forma predeterminada.
reset: Un botn de restauracin para quitar todos los elementos en el formulario y restablecer sus valores
predeterminados.
submit: Un botn de envo para enviar el formulario. El texto en el botn puede definirse usando el atributo
value.
text: Una casilla de texto para escribir una lnea de texto. El tamao de la casilla puede definirse usando el
atributo size y la extensin mxima del texto con el atributo maxlength.
La etiqueta TEXTAREA
La etiqueta TEXTAREA se usa para definir un cuadro de texto ms grande que la lnea simple propuesta por la
etiqueta INPUT. Esta etiqueta tiene los siguientes atributos:
cols: representa el nmero de caracteres que puede contener un lnea
rows: representa el nmero de lneas
name: representa el nombre asociado con el cuadro de texto, que permite su identificacin en el par
nombre/valor.
readonly: impide que el usuario modifique el texto predeterminado en el campo
value: representa el valor predeterminado que se enviar al script si el usuario no ha escrito nada en el cuadro
de texto
La etiqueta SELECT
La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados por las etiquetas OPTION
dentro de ella). Los atributos de esta etiqueta son:
name: name: representa el nombre asociado con la casilla de texto, que permite su identificacin en el par
nombre/valor.
disabled: crea un lista desactivada, que aparece atenuada
size: representa el nmero de lneas de la lista (este valor puede ser ms grande que el nmero de elementos
reales de la lista).
multiple: Permite al usuario seleccionar varios campos de la lista

Vega Contenido

Enviado por

Dados do documento

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

Vega Contenido

Enviado por

Direitos autorais:

Formatos disponíveis

A)identificacion del lenguaje css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

modificar todas las pginas que incluyen el estilo que se va a modificar.

Los diferentes trminos se definen a continuacin:

Valor: establece el nuevo valor de la caracterstica modificada en el elemento.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

border: solid; frontera: slido;

EL formato es el qeu sigue:

La sintaxis de las tablas ampliadas, comparativamente compleja, es

la nueva sintaxis ampliada:

La etiqueta SELECT: una lista de opciones mltiples

Você também pode gostar