...
13. 7 Selectores contextuales
Para explicar mejor este tema, ¿que mejor que un ejemplo?
[...]
[...]
¿Que sucederá con este código? Todo el texto en cursivas será rojo sin importar si esta entre P o no.
Si nosotros quisiéramos que solo el texto en cursivas dentro de P sea rojo debemos utilizar la
siguiente sintaxis:
P I { color: #FF0000 }
Esto indicara al navegador que solo el texto en cursivas dentro de P será de color rojo.
Así en el siguiente código:
Tutorial
Bienvenido
Este es el tutorial de CSS
El encabezado de nivel uno aparecerá en cursivas y de color negro; por otra parte, CSS aparecerá en
color rojo y en cursivas.
Nota: es común caer en el error de separar los selectores por medio de comas, sintaxis que sirve
para agrupar distintos selectores, tema que se vio anteriormente.
13. 8 Comentarios
Por ultimo, para indicar un comentario existe la siguiente sintaxis similar a la de C :
P { color: #FF0000 } /*este es un comentario */
13. 9 Ejemplo
A continuación se muestra el contenido del archivo estilos.css utilizado en las distintas secciones
del tutorial:
.normal { font-family: Arial, Helvetica, sans-serif; font-size: 10pt}
.definicion { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: italic}
.etiqueta { font-family: "Courier New", Courier, mono; font-size: 10pt; font-weight: bold}
.titulos1 { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; text-decoration:
underline; text-align: center}
.titulos2 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; color: #006699; font-weight:
bold}
.titulos3 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; text-decoration: underline}
La forma en que es agregada esta hoja de estilos, asi como el resultado, puede ser observada en el
código de las distintas secciones del tutorial.
Fin de la sección 13
Sección 14 Agregando Estilos II
14. 1 Árbol de documento
14. 2 Herencia
14. 3 Cascada
14. 4 Reglas de orden de cascada
14. 5 Selectores hijos
14. 6 Selectores por atributos
14. 7 Selectores por ID
14. 8 Seudo clases
14. 9 Medidas
14. 10 Colores
14. 11 Problemas y navegadores
14. 1 Árbol de documento
Hasta ahora, hemos trabajado con la parte de fácil entendimiento de CSS. Es ahora, en esta sección,
que ahondaremos mas en los principios que necesitan una explicación un poco mas detallada.
Para empezar, regresaremos un poco al tema de HTML con el siguiente ejemplo:
Mi página
Bienvenidos todos a mi página
Un párrafo cualquiera .
Otro párrafo cualquiera.
- Elemento 1 de la lista 1
- Elemento 2 de la lista 1
- Elemento 3 de la lista 1
- Elemento 1 de la lista 2
- Elemento 2 de la lista 2
- Elemento 3 de la lista 2
Por supuesto que este código no representa ningún problema pues con solo mirarlo una vez
podemos describir el comportamiento que obtendremos en el navegador. Sin embargo de lo que se
trata aquí no es sobre dicho comportamiento si no mas bien sobre la estructura del documento. Un
documento HTML puede describirse como un árbol.
Árbol: Grafo no orientado conexo sin ciclo. Esta compuestos por nodos o módulos conectados por
líneas llamadas ramas.
En un árbol se tiene un nodo denominado raíz u origen y que carece de un antecesor. Cualquier otro
nodo tiene un antecesor único en el nivel anterior y un sucesor o mas, incluso ninguno en el nivel
siguiente. Ejemplo de árbol: un sistema de archivos.
Ahora veamos otras definiciones, derivadas de la anterior, que nos serán utiles mas adelante:
Hijo: Un elemento A se considera hijo de B si y solo si B es el padre de A (el nodo en el nivel
inmediatamente anterior a A).
Descendiente: Un elemento A se considera descendiente de B si
a) A es hijo de B
b) A es hijo de C que es descendiente de B.
Antecesor: Un elemento A se considera ancestro de B si y solo si B es un descendiente de A.
Y para los que no entendieron nada, aquí esta el árbol del documento HTML del ejemplo.
En este caso, la raíz es HTML y sus hijos son HEAD y BODY. HEAD tiene un hijo que es TITLE y
BODY tiene a H1, HR, P, P, UL y OL como hijos que a su vez son descendientes de HTML.
14.2 Herencia
¿Recuerdan el uso de selectores contextuales? Si no, aquí esta el mismo ejemplo de ese tema:
Tutorial
Bienvenido
Este es el tutorial de CSS
Nosotros habíamos dicho que "CSS" aparecería en cursivas y de color rojo si y solo si en nuestro
código la etiqueta aparecía dentro de
. Ahora podemos decir sin equivocarnos que I es un
hijo de P. Es por eso que a los selectores contextuales también se les conoce como selectores
descendientes. Debido a que pueden existir varios descendientes, declaraciones del tipo:
P*I
BODY * I *
son validas.
¿Qué pasa con el siguiente código?
Tutorial
Este es el tutorial de CSS
El texto se mostrara en color rojo y "CSS" aparecerá del mismo color pero subrayado. ¿Cómo sabe
el navegador que "CSS" debe ser de color rojo?
La respuesta es sencilla: Herencia. A través de la herencia, cada antecesor transmite sus propiedades
a todos sus descendientes; en el ejemplo, U es hijo de P por lo cual U lleva implícita la propiedad
color:#FF0000. Si tenemos:
BODY { color: #FF0000 }
Entonces todos los descendientes de BODY tendrán implícita la propiedad color:#FF0000.
14. 3 Cascada
Existen distintas fuentes de donde pueden provenir las hojas de estilo:
Autor: El creador de la pagina. Sabemos que el autor puede utilizar hojas de estilo, ya sea
vinculándolas, importándolas o incluyéndolas dentro del código HTML.
Usuario: Nosotros, como simples usuarios también podemos especificar un estilo para un
documento en particular.
Agente de Usuario (Agent User): En pocas palabras, se refiere al programa con el que estemos
visualizando (por ejemplo el navegador). Los navegadores toman en cuenta las especificaciones de
CSS para poder representar el código fuente de forma visual, es decir, especifican el significado de
los selectores y propiedades.
Esto es a lo que conocemos como cascada. Estas fuentes trabajan conjuntamente para la aplicación
de estilos. Sin embargo una fuente de autor tiene mas peso que una fuente de usuario y esta a su vez
tiene mas peso que una fuente de agente de usuario.
14. 4 Reglas de orden de cascada
Observemos el siguiente código
Alguna Página
[...]
Como vemos, se esta importando el archivo "estilos.css" con el siguiente código:
H1 { color: #0000FF }
Sabiendo esto ¿De que color serán los encabezados de nivel uno?
Debido a que los tres métodos usados aplican un estilo distinto a H1, no sabríamos cual seria el
resultado final a menos de que existiera una jerarquía para los distintos métodos de aplicar los
estilos. Dicha jerarquía existe.
La jerarquía, en orden de importancia, es la siguiente
1. Estilos de línea en HTML.
2. Estilos Agregados en HTML.
3. Links a hojas de estilo externas.
4. Hojas de estilo importadas.
5. Estilos de usuario.
6. Estilos predeterminados del agente de usuario.
Ahora sabemos que el encabezado de nivel uno será color verde.
Por ultimo si tenemos algo similar a esto:
H1 { color: #FF0000 }
H1 { color: #00FF00 }
el encabezado de nivel 1 será de color verde pues la ultima declaración será la que se tomara en
cuenta.
14. 5 Selectores hijos
Un selector hijo se escribe de la forma:
S1 > S2 {...}
donde S2 es hijo de S1. Esto permite aplicar estilos solo a aquellos elementos hijos de S1.
Veamos un ejemplo:
UL > LI { font-size: 1cm }
En este ejemplo se aplicara el estilo a todos los elementos LI que sean hijos de UL. Así, en el
siguiente ejemplo:
Mi página
Bienvenidos todos a mi página
Un párrafo cualquiera .
Otro párrafo cualquiera.
- Elemento 1 de la lista 1
- Elemento 2 de la lista 1
- Elemento 3 de la lista 1
- Elemento 1 de la lista 2
- Elemento 2 de la lista 2
- Elemento 3 de la lista 2
Solo los elementos LI en una lista sin orden mostraran el estilo.
14. 6 Selectores por atributos
Supongamos que nosotros queremos aplicar un estilo a P pero solo si tiene el atributo ALIGN. Para
esto nos sirven los selectores por atributos.
Existen 4 formas de utilizar este tipo de selectores de las cuales solo veremos las 2 primeras.
1. [ATRIBUTO]
Aplica el estilo solo si el elemento contiene el atributo especificado:
P[ALIGN] { font-size: 1cm }: Aplica el estilo a P pero solo si tiene el atributo ALIGN.
*[ALIGN] { font-size: 1cm }: Aplica el estilo a cualquier elemento que contenga el atributo
ALIGN.
P[ALIGN][SIZE]: Aplica el estilo a P pero solo si tiene los atributos ALIGN y SIZE.
2. [ATRIBUTO = VALOR]
Aplica el estilo solo si el elemento contiene el atributo y el valor especificados:
P[ALIGN=CENTER] { font-size: 1cm }: Aplica el estilo a P pero solo si tiene el atributo ALIGN y
el valor CENTER.
*[ALIGN=CENTER] { font-size: 1cm }: Aplica el estilo a cualquier elemento que contenga el
atributo ALIGN y el valor CENTER.
P[ALIGN=CENTER][SIZE]: Aplica el estilo a P pero solo si tiene los atributos SIZE y ALIGN y el
valor CENTER para ALIGN.
Hasta ahora hemos utilizado los atributos vistos en este tutorial, sin embargo el siguiente código
también es valido:
Mi página
Ana
Pepe
Jorge
Juan
14. 7 Selectores por ID
En el ejemplo anterior se utilizo un atributo creado por nosotros llamado NOMBRE. Sin embargo, a
todos los atributos pudimos darle el valor ANA o JORGE. Esto no nos puede servir para identificar
distintos elementos... pero el atributo ID si pues, ningún atributo puede tener el mismo valor para ID
que otro. Ejemplo
Mi pagina
Nombre.
Edad.
Otro uso que podemos dar a los identificadores es, como todos imaginan de seguro, la aplicación de
estilos, esto se hace de la forma:
SELECTOR#ID { ... }
El siguiente ejemplo aplica el estilo a P con ID=nombre
Mi pagina
Nombre.
Edad.
Y el siguiente ejemplo aplica el estilo a cualquier selector con ID=nombre
Mi pagina
Nombre.
Edad.
14. 8 Seudo clases
Las seudo clases nos permiten clasificar elementos por características distintas a sus atributos,
contenido o nombre. La parte interesante de estas seudo clases es que pueden ser dinámicas, es
decir, un elemento puede adquirir o perder una seudo clase según el visitante interactúe con el
documento.
:first-child
Nos permite aplicar estilos al primer hijo de un elemento. En pocas palabras, el primer elemento
después del elemento padre.
Mi página
Bienvenidos todos a mi página
Un párrafo cualquiera .
Otro párrafo cualquiera.
- Elemento 1 de la lista 1
- Elemento 2 de la lista 1
- Elemento 3 de la lista 1
- Elemento 1 de la lista 2
- Elemento 2 de la lista 2
- Elemento 3 de la lista 2
Cuando visitamos una pagina hecha por todo un "caballero webmaster", podemos observar que los
vínculos no visitados se ven así y los visitados se ven así. Las siguientes 2 seudo clases nos
permitirán jugar con esto.
:link
Aplica el estilo a un vinculo no visitado.
:visited
Aplica el estilo a un vinculo visitado.
Ejemplo:
Mi página
Trieb
Ahora veamos las seudo clases dinámicas:
:active
Nos sirve para aplicar un estilo cuando un elemento esta activo:
Mi página
Trieb
:hover
A diferencia de la anterior seudo clase, :hover nos permitirá cambiar estilos cuando el elemento no
esta activo pero si seleccionado, por ejemplo, cuando pasamos el ratón por encima del vinculo:
Mi pagina
trieb
14. 9 Medidas
Al estudiar HTML encontramos dos formas de medición, por porcentaje y por píxeles. En CSS
encontramos mas formas de medición:
•
centímetros (cm)
•
•
•
•
milímetros (mm)
pulgadas (in): 1 in = 2.54 cm
puntos (pt): 1pt = 1 / 72 in
picas (pc): 1 pc = 12 pt
Dependiendo de nuestras necesidades será el tipo de medida a utilizar. Ejemplo:
H1 { font-size: 5cm }
H1 { font-size: 5mm }
H1 { font-size: 5in }
H1 { font-size: 5pt }
H1 { font-size: 5pc }
En cuanto al uso de porcentajes, estos porcentajes son relativos a otro valor por ejemplo:
BODY { font-size: 5cm }
BODY H1 { font-size: 90% }
El tamaño de la fuente será el 90% de 5 cm.
14. 10 Colores
Al igual que en HTML, en CSS podemos usar el formato hexagesimal extendido, es decir
#RRVVAA. Además de este formato, también podemos usar los siguientes:
Formato Hexagesimal Compacto
Similar al anterior pero de la forma:
#RVA
Notación Funcional Entera:
Este formato es de la forma:
rgb(RRR, VVV, AAA)
los valores RRR (cantidad de rojo), VVV (cantidad de verde) y AAA (cantidad de azul), son valores
enteros en el rango 0 - 255.
Notación Funcional Porcentual:
Este formato es de la forma:
rgb(RRR%, VVV%, AAA%)
los valores RRR (por ciento de rojo), VVV (por ciento de verde) y AAA (por ciento de azul), son
valores enteros en el rango 0 - 100%
La siguiente tabla muestra algunos colores escritos en distintos formatos:
Hexagesimal Hexagesimal Funcional Funcional
Ejemplo
Extendido Compacto Entera Porcentual
100%, 0%,
Rojo
FF0000
F00
255, 0, 0
0%
0%, 0%,
Azul
0000FF
00F
0, 0, 255
100%
0%, 100%,
Verde
00FF00
0F0
0, 255, 0
0%
100%,
255, 255,
Blanco
FFFFFF
FFF
100%,
255
100%
0%, 0%.
Negro
000000
000
0,0,0
0%
255, 255, 100%,
Amarillo FFFF00
FF0
0
100%, 0%
Color
14. 11 Problemas y navegadores
Tal vez mientras estamos aprendiendo CSS, hemos observado que partes de lo aquí descrito no
funciona. Esto se debe a que algunos navegadores (no voy a decir cual para que no se enojen) no
respetan las especificaciones para las hojas de estilo. Por lo tanto, cuando apliquemos estilos
debemos de ver que funciona y que no, que navegador funciona y cual no.
Si han llegado hasta aquí, felicidades, ya saben CSS en un 90%. Lo que sigue ahora es aprender
mas propiedades que de las pocas que hemos estado usando. Podemos decir que de aquí en adelante
lo demas es de bajada.
Fin de la sección 14
Sección 15. Propiedades de las fuentes
15. 1 font-family
15. 2 font-size
15. 3 font-style
15. 4 font-variant
15. 5 font-weight
15. 6 font
15. 1 font-family
En HTML para indicar la fuente que se deberá aplicar en nuestro texto debemos utilizar algo similar
a:
Algún texto
Para indicar el tipo de fuente cuando usamos hojas de estilo utilizaremos la propiedad font-family
de la siguiente manera:
P { font-family: Arial }
Recordemos que en HTML se pueden utilizar varias fuentes que serán utilizadas por el navegador
en el caso de que alguna de ellas no se encuentre en la maquina del visitante:
Algún texto
Utilizando la propiedad font-family:
P { font-family: Arial, Courier }
Cabe recordar que los nombres de las fuentes varían de una plataforma a otra. Para evitar que los
nombres de las fuentes resulten confusos a la maquina de nuestro visitante, existe la posibilidad de
llamar a las fuentes por nombres genéricos:
P { font-family: Serif }
Esto no significa que debamos omitir el nombre de la fuente que nosotros queramos utilizar, pero se
recomienda que uno de los nombres de las fuentes sea genérico:
P { font-family: Arial, Sans-serif }
En el ejemplo anterior se utiliza el nombre genérico Sans-serif cuyo resultado podría ser Arial. Los
nombres genéricos aceptados junto con un ejemplo de una fuente de esa familia son:
Serif (Times)
Sans-serif (Arial)
Cursive (Comic sans)
Fantasy (Western)
Monospace (Courier)
¿Que pasa si el nombre de la fuente que queremos utilizar tiene mas de una palabra? La solución
consiste en encerrar en comillas el nombre de esa fuente:
P { font family: Arial, "Times New Roman", sans-serif }
¿Que pasa si deseamos utilizar un nombre largo dentro de la etiqueta
100%
80%
60%
40%
20%
En este ejemplo se especifica el tamaño de letra para BODY, así, se calcula el 20, 40, 60, 80 y 100
por ciento de 50px. Esto se debe a que BODY es el padre de P y este tiene el valor implícito de 50
px.
15. 3 font-style
Esta propiedad nos permitirá mostrar el texto en cursivas. Los valores para esta propiedad son:
normal
No muestra la fuente en cursivas.
italic
Muestra la fuente en cursivas.
oblique
Similar a italic.
Ejemplo:
Ejemplo de normal
Ejemplo de italic
Ejemplo de oblique
Resultado:
Ejemplo de normal
Ejemplo de italic
Ejemplo de oblique
15. 4 font-variant
Los valores que acepta esta propiedad son normal y small-caps. Al utilizar el valor small-caps
veremos el testo al que se le aplico el estilo en mayúsculas pero de tamaño similar a las minúsculas.
Ejemplo
Ejemplo
MAYUSCULAS ... small-caps ... minúsculas ... small-caps
15. 5 font-weight
Los valores permitidos para esta propiedad son:
100, 200, 300, 400, 500, 600, 700, 800, 900
Los valores son crecientes, por ejemplo, un valor de 400 se vera mas destacado que uno con valor
200 (por lo menos en teoría).
Ejemplo:
100
200
300
400
500
600
700
800
900
Resultado:
100... 200... 300... 400... 500... 600... 700... 800... 900...
Además de estos valores numéricos podemos utilizar:
normal
Texto normal. Similar al valor numérico 400.
P{ font-weight: normal }
bold
Pone en negritas algún texto. Similar al valor numérico 700.
P { font-weight: bold }
bolder
Similar a aumentar en 100 el valor numérico.
P { font-weight: bolder }
lighter
Similar a disminuir en 100 el valor numérico.
P { font-weight: lighter }
En esta propiedad no se permite el uso de porcentajes como valores.
Ejemplo:
normal
bold
bolder
lighter
Resultado:
normal... bold... bolder... lighter...
15. 6 font
Veamos el siguiente ejemplo:
Ejemplo
Encabezado
Algún párrafo
La forma en que escribimos las propiedades para H1 y P resulta un poco larga. Para evitarnos
algunas líneas de código podemos usar la propiedad font de la siguiente manera:
Ejemplo
Encabezado
Algún párrafo
El orden importa por lo cual se muestra la forma de escribir los valores:
font: || style || variant || weight || size || family ||
Como vemos, los valores para font son los mismos utilizados con las propiedades vistas
anteriormente.
Fin de la sección 15
Sección 16. Propiedades de texto
16. 1 text-align
16. 2 text-decoration
16. 3 text-indent
16. 4 letter-spacing
16. 5 text-transform
16. 6 word-spacing
16. 1 text-align
Esta propiedad nos permite alinear nuestro texto de la misma forma que con el atributo ALIGN. Lo
nuevo e interesante es que ahora si tenemos la posibilidad para justificar nuestros párrafos.
Los valores para esta propiedad son left (izquierda), center (centro), right (derecha), justify
(justificado).
El siguiente texto nos ayudara a mostrar los resultados de un texto justificado. Fue tomado del libro
"Los dragones del edén" de Carl Sagan:
El mundo es viejísimo y el ser humano sumamente joven. Los acontecimientos relevantes de
nuestras vidas se miden en años o fracciones de tiempo aún más pequeñas, en tanto que la duración
de una vida humana se reduce a unos pocos decenios, el linaje familiar a unos cuantos siglos y los
hechos que registra la historia a unos milenios. Y, sin embargo, se extiende a nuestras espaldas un
fantástico panorama temporal que se pierde en un pasado remotísimo del que apenas sabemos nada.
En primer lugar porque no poseemos testimonios escritos, y en segundo lugar porque resulta muy
difícil hacerse una idea de la inmensidad de los períodos involucrados.
16. 2 text-decoration
Los posibles valores para esta propiedad son:
none
Ninguna decoración
Ejemplo de none
underline
Similar a lo obtenido con la etiqueta , es decir, subrayado.
Ejemplo de underline
Resultado:
Ejemplo de underline
overline
Dibuja una línea en la parte superior.
Ejemplo de overline
Resultado:
Ejemplo de overline
line-through
Similar a lo obtenido con la etiqueta , es decir, tachado.
Ejemplo de line-through
Resultado:
Ejemplo de line-through
blink
¿Recuerdan el truco molesto del parpadeo? Bueno pues aquí hay otra forma de lograrlo:
Ejemplo de blink (Netscape)
Resultado:
Ejemplo de blink (Netscape)
16. 3 text-indent
Nos permite dar un sangrado. Los valores pueden ser en píxeles, pulgadas, porcentajes etc.
Ejemplo:
Línea 1
Línea 2
Línea 3
Línea 4
Línea 5
Resultado:
Línea 1
Línea 2
Línea 3
Línea 4
Línea 5
16. 4 letter-spacing
Nos permite especificar el tamaño del espacio entre las letras de una palabra. El valor es
especificado en píxeles, centímetros, porcentajes etc. Para volver a tener el espaciado normal
usamos el valor normal.
Ejemplo:
letter-spacing: normal
letter-spacing: 5px
letter-spacing: 15px
letter-spacing: 20px
letter-spacing: 25px
Resultado:
letter-spacing: normal
l e t t e r - s p a c i n g :
5 p x
l
p
e
l
2
l
2
t
e
0
e
5
t
t
p
e
r
t
e
-
s
r
-
a
s
c
i
p
n
a
g
:
c
i
1
5
n
g
c
i
p
x
:
x
t
t
p
e
r
-
s
p
a
n
g
:
x
16. 5 text-transform
Permite especificar si un texto estará en minúsculas o mayúsculas. Los valores para esta propiedad
son:
none
No aplica ningún estilo.
capitalize
Pone el primer carácter de cada palabra en mayúsculas.
uppercase
Pone todos los caracteres de cada palabra en mayúsculas.
lowercase
Pone todos los caracteres de cada palabra en minúsculas.
Ejemplo:
Ejemplo de none
Ejemplo de capitalize
Ejemplo de uppercase
Ejemplo de lowercase
Resultado:
Ejemplo de none
Ejemplo de capitalize
EJEMPLO DE UPPERCASE
Ejemplo de lowercase
16. 6 word-spacing
Permite especificar el espacio en blanco que habrá entre palabras. Los valores para esta propiedad
son píxeles, milímetros, porcentajes, etc. Para volver a tener el espaciado normal usamos el valor
normal.
Ejemplo
word-spacing: normal
Ejemplo word-spacing: 5px
Ejemplo word-spacing: 10px
Ejemplo word-spacing: 15px
Ejemplo word-spacing: 20px
Resultado:
word-spacing: normal
Ejemplo word-spacing: 5px
Ejemplo word-spacing: 10px
Ejemplo word-spacing: 15px
Ejemplo word-spacing: 20px
Fin de la sección 16
Sección 17. La caja
17. 1 La caja (box)
17. 2 Dimensiones de la caja
17. 3 Propiedades del colchón
17. 4 Propiedades del borde
17. 5 Propiedades de los márgenes
17. 6 Ejemplos
17. 1 La caja (box)
En la sección 14 hablamos sobre el árbol de documento. A cada uno de los elementos dentro de este
árbol les corresponde un espacio especifico, llámenlo "espacio vital", "esfera de influencia o, menos
rebuscado: "caja".
Antes que nada debemos de decir que cada una de las cajas tiene 4 partes que son el contenido, el
colchón (padding), el borde (border) y el margen (margin). Cada una de estas partes tiene una
frontera o limite que la separa de las demás, así, podemos hablar de un limite de contenido, limite
de colchón, limite de borde y limite de margen.
Nosotros podremos dar distintas características a las distintas partes de la caja para obtener efectos
impresionantes que no podríamos crear con simple HTML. ¿No me creen? Bueno, pues sigan
leyendo.
Contenido
Si tenemos:
Hola Mundo
entonces la cadena "Hola Mundo" es el contenido de la caja.
Colchón
Es el espacio que se encuentra entre el contenido y el margen. Al usar la propiedad backgroundcolor para especificar el color de fondo de un elemento, tanto el contenido como el colchón tomaran
este color.
Borde
Es una línea que separa el colchón de los márgenes. Cuando no se indica su tamaño se utiliza el
valor por defecto lo que significa un borde no visible.
Margen
Es el espacio en blanco que existe alrededor de una caja, ningún otro elemento se colocara dentro de
estos limites. Cabe destacar que el margen siempre será transparente.
17. 2 Dimensiones de la caja
Antes de comenzar hagamos que se vea un elemento con su caja correspondiente:
Hola Mundo
Esto es lo que obtenemos
Hola Mundo
Con height especificamos el alto de la caja y con width el ancho para P. De la otra propiedad se
hablara mas adelante (aunque no creo que tengan mucho problema en descifrar para que sirve).
Cabe destacar que el ancho esta dado por la suma de los margenes laterales (izquierdo y derecho), el
ancho del colchon y el ancho del contenido. De manera similar, la altura esta dada por la suma de
los margenes superior e inferior, la altura del colchon y la altura del contenido.
17. 3 Propiedades del colchón
Las propiedades del colchón permiten especificar el tamaño de esta área. Al igual que todas las
propiedades que trabajan con medidas, nosotros podemos especificar el tamaño en distintas
unidades, incluso en porcentaje. Para mayor información sobre medidas ver la sección 14.
padding-top: especifica el tamaño de la parte superior del colchón.
padding-right: especifica el tamaño de la parte derecha del colchón.
padding-bottom: especifica el tamaño de la parte inferior del colchón.
padding-left: especifica el tamaño de la parte izquierda del colchón.
Este es un ejemplo de cómo luce nuestro texto sin utilizar las propiedades del colchón. Las
propiedades border-width y border-style se verán mas adelante.
P{
width: 150px;
border-width: 5px 5px 5px 5px;
border-style: solid;
}
Resultado:
Hola Mundo
P{
width: 150px;
border-width: 5px 5px 5px 5px;
border-style: solid;
padding-top: 50px;
}
Resultado:
Hola Mundo
P{
width: 150px;
border-width: 5px 5px 5px 5px;
border-style: solid;
padding-left: 20px;
}
Resultado:
Hola Mundo
Todos juntos:
P{
width: 200px;
border-width: 5px 5px 5px 5px;
border-style: solid;
padding-top: 100px;
padding-right: 150px;
padding-bottom: 100px;
padding-left: 10px;
background-color: #0f0;
}
Resultado:
Hola Mundo
padding
Esta propiedad nos permitirá ahorrar unas líneas de código. El ejemplo anterior quedaría:
P{
width: 200px;
border-width: 5px 5px 5px 5px;
border-style: solid;
padding: 100px 150px 100px 10px;
background-color: #0f0;
}
es decir, el orden para colocar los valores es top (arriba), right (derecha), bottom (abajo), left
(izquierda). Tal como las manecillas del reloj.
¿Que hace el siguiente código?
P{
width: 200px;
border-width: 5px 5px 5px 5px;
border-style: solid;
padding: 100px 50px;
background-color: #069;
}
Cuando en padding no encontramos cuatro valores entonces los valores son tomados de la siguiente
forma:
Un valor: top, right bottom y left toman el valor.
Dos valores: top y bottom toman el primer valor y right y left el segundo valor.
Tres valores: top toma el primer valor, left y right el segundo y bottom el tercero.
Este es el resultado del ejemplo anterior.
Hola Mundo
17. 4 Propiedades del borde
Hasta ahora hemos utilizado propiedades de los bordes sin meternos para nada en el tema. En el
ultimo ejemplo teníamos la siguiente línea:
border-width: 5px 5px 5px 5px;
border-width nos permite especificar el tamaño de los bordes en el orden de manecillas de reloj.
Esta propiedad es la forma compacta de especificar el tamaño de borde pero para aquellos que les
guste complicarse la vida mostramos la forma larga:
border-top-width: tamaño del borde superior.
border-right-width: tamaño del borde derecho.
border-bottom-width: tamaño del borde inferior.
border-left-width: tamaño del borde izquierdo.
En la forma compacta se aplica la misma regla para cuando encontramos menos de 4 valores.
La parte mas interesente de estas propiedades es que existen medidas especiales para indicar el
tamaño del borde. Además de poder utilizar las medidas que ya conocemos, podemos utilizar las
siguientes medidas:
thin
Para un borde delgado.
P{
border-width: thin;
border-style: solid;
}
Hola Mundo
medium
Para un borde medio.
P{
border-width: medium
border-style: solid;
}
Hola Mundo
thick
Para un borde grueso.
P{
border-width: thick;
border-style: solid;
}
Hola Mundo
Y esto es todo respecto a bordes... si es que no queremos bordes de colores o bordes especiales.
Veamos el siguiente ejemplo:
P{
width: 2cm;
border-width:10px;
border-style: solid;
border-color: #000 #f00 #0f0 #00f;
}
Hola Mundo
Ya se habrán dado cuenta que de nuevo utilizamos la forma compacta que igual utiliza la forma de
manecillas de reloj. De preferir complicarnos la vida debemos de utilizar:
border-top-color: color del borde superior.
border-right-color: color del borde derecho.
border-bottom-color: color del borde inferior.
border-left-color: color del borde izquierdo.
En la forma compacta se aplica la misma regla para cuando encontramos menos de 4 valores.
Además de las notaciones que ya conocemos (vistas en la sección 14) para especificar el color,
también podemos usar el valor transparent para esta propiedad. Este valor hace que el borde sea
transparente, lo cual no implica que no exista o que no tenga dimensiones.
Nota: MS IExplorer no reconoce el valor transparent.
Dicho esto tan solo nos queda hablar de los estilos de borde que podremos utilizar. Para esto
utilizaremos la propiedad border-style que otra vez es la forma compacta y sigue las mismas reglas
que las anteriores propiedades.
Las propiedades no compactas son: border-top-style, border-right-style, border-bottom-style y
border-left-style, las cuales, creo, no necesitan explicación.
Los valores que pueden tomar las propiedades de estilo de borde son:
none
Sin borde.
P{
width: 2cm;
border-width: 10px;
border-style: none;
border-color: #000 #069;
}
dashed
Líneas discontinuas.
P{
width: 5cm;
border-width: 10px;
border-style: dashed;
border-color: #000 #069;
}
Hola Mundo
dotted
Punteado.
P{
width: 5cm;
border-width: 10px;
border-style: dotted;
border-color: #000 #069;
}
Hola Mundo
double
Dos líneas continuas.
P{
width: 5cm;
border-width: 10px;
border-style: double;
border-color: #000 #069;
}
Hola Mundo
groove
Lo opuesto a ridge.
P{
width: 5cm;
border-width: 10px;
border-style: groove;
border-color: #000 #069;
}
Hola Mundo
inset
Hace que la caja se vea en bajorrelieve.
P{
width: 5cm;
border-width: 10px;
border-style: inset;
border-color: #000 #069;
}
Hola Mundo
outset
Hace que la caja se vea en altorrelieve.
P{
width: 5cm;
border-width: 10px;
border-style: outset;
border-color: #000 #069;
}
Hola Mundo
ridge
Lo opuesto a groove.
P{
width: 5cm;
border-width: 10px;
border-style: ridge;
border-color: #000 #069;
}
Hola Mundo
solid
Una línea continua.
P{
width: 5cm;
border-width: 10px;
border-style: solid;
border-color: #000 #069;
}
Hola Mundo
Nota: el porque de las definiciones de groove y ridge se debe a que aun no encuentro palabras para
describir el efecto. Cualquier idea enviarla a mi correo.
17. 5 Propiedades de los márgenes
Las propiedades de márgenes tan solo nos permitirán especificar el tamaño del margen, el cual
dijimos que es siempre transparente.
La forma compacta es margin y cumple las mismas reglas vistas anteriormente:
P{
width: 5in;
border-width: thick;
border-style: double;
border-color: #000 #069 transparent;
margin: 20px 20px 20px 100px;
}
Hola Mundo
Para la forma extendida tenemos las propiedades margin-top, margin-right, margin-bottom y
margin-left.
A manera de ejercicio... ¿Qué creen que haga el siguiente código?
P{
width: 5in;
background-color: #f96;
margin-left: -15px;
/* Si, es un signo menos */
padding-left: 15px;
}
17. 6 Ejemplos
Recursión
Recursión
La recursión es una técnica algorítmica
donde una función se llama a si misma para completar una tarea.
Para aplicar soluciones recursivas se debe dividir el problema
en pequeñas partes, invocar a la función recursivamente y combinar las soluciones de las partes en una sola que será la
solución final al problema.
Una parte importante de una solución recursiva es la condición de paro. Cuando las condiciones son conseguidas, un
algoritmo recursivo deja de llamarse a si mismo y comienza a regresar valores.
Recursión vs Iteración
Tanto la iteración y la recursión se basan en una estructura de control; para el caso de la iteración se trata de una
estructura de repetición y para la recursión se trata
de una estructura de selección. Ambas también
involucran una prueba de terminación y si esta prueba es equivocada pueden ocurrir de
forma indefinida.
Los contras de la recursión son que esta, al invocar de manera repetida al mecanismo
tiende a sobrecargar las llamadas de función lo que resulta costoso tanto en tiempo de
procesador como en espacio en memoria. Cada llamada recursiva genera otra copia de las variables
de la función.
Los pros de la recursión son que permite dar mas naturalidad a ciertos problemas lo que
resulta en un programa fácil de comprender y depurar. Otra razón es que la
solución iterativa puede no ser tan evidente.
Este es el resultado
Fin de la Sección 17.
Sección 18. Integración de interfaz
18. 1 Introducción
18. 2 Colores
18. 3 Fuentes
18. 4 Cursores
18. 1 Introducción
Muchas veces, cuando diseñamos un sitio, no nos ponemos a pensar en lo fácil o difícil de navegar
que es nuestro sitio. No toda la gente tiene tan buena vista como nosotros así que si en realidad
deseamos que nuestro sitio sea amigable con todos nuestros visitantes debemos de dar opciones
para aquellas personas que así lo deseen. El uso de colores o fuentes predefinidos en el sistema del
usuario es una manera sencilla de tomar en cuenta las necesidades visuales de nuestros visitantes.
De este tema hablaremos en esta sección.
18. 2 Colores
Los colores específicos de sistema que podemos utilizar con las distintas propiedades vistas hasta el
momento son:
ActiveBorder: borde de la ventana activa
ActiveCaption: fondo de la barra de títulos activa
AppWorkspace:
Background: fondo del escritorio
ButtonFace:
ButtonHighlight: elementos en 3 dimensiones seleccionados
ButtonShadow: sombra de elementos en 3 dimensiones
ButtonText: texto de los botones
CaptionText: texto de la barra de títulos inactiva
GrayText: elementos desactivados
Highlight: elementos seleccionados
HighlightText: texto seleccionados
InactiveBorder: borde de la ventana inactiva
InactiveCaption: fondo de la barra de títulos inactiva
InactiveCaptionText: texto de la barra de títulos inactiva
InfoBackground: fondo de la información (tooltips)
InfoText: texto de la información (tooltips)
Menu: fondo de menús
MenuText: texto de menús
Scrollbar: barra de desplazamiento
ThreeDDarkShadow: sombra oscura para elementos en 3 dimensiones
ThreeDFace:
ThreeDHighlight: elementos en 3 dimensiones seleccionados
ThreeDLightShadow: sombra clara para elementos en 3 dimensiones
ThreeDShadow: sombra clara para elementos en 3 dimensiones
Window: fondo ventana
WindowFrame: marco de la ventana
WindowText: texto de la ventana
Ejemplos de uso
18. 3 Fuentes
En la sección 15. 6 hablamos de la propiedad font y vimos que era una forma condensada para el
especificar el estilo, tamaño, familia, etc. de una fuente. Ademas de los valores vistos en esa
sección, existen otros que nos permiten utilizar las fuentes que el usuario a definido en su sistema.
Estos valores son: caption, icon, menu, message-box, small-caption, status-bar.
Ejemplo de uso de estos valores
Ejemplo de caption
Ejemplo de menu
Ejemplo de icon
Ejemplo de message-box
Ejemplo de small-caption
Ejemplo de status-bar
En el caso de Windows, el usuario especifica las fuentes dentro de las propiedades de pantalla. A
continuación se muestra la relación que hay entre estas propiedades y el respectivo elemento del
sistema.
En cuanto a la compatibilidad, Netscape soporta todos estos valores pero Iexplorer parece no
soportar los valores message-box, small-caption ni status-bar.
Nota: En el caso de *nix, Mozilla no establece ninguna diferencia entre estos valores pero si los
despliega de manera diferente al texto al que no se le han aplicado estilos. En mi caso, por ejemplo,
el texto con estilos, con estos valores, se despliega como Sans-Serif de 13 px y el texto sin estilos se
despliega como Serif de 16 px.
18. 4 Cursores
Así como hemos sido capaces de especificar nuestras fuentes y colores, también podemos
especificar el cursor que se desplegara en ciertos elementos de nuestra pagina. Para esto
utilizaremos la propiedad cursor. Esta propiedad puede utilizar los valores: auto, crosshair, default,
pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text,
wait y help. A continuación se muestra un ejemplo en la siguiente tabla (pasen su ratón por cada
una de las celdas):
auto
crosshair default
enwne-resize
resize
resize
pointer move
text
wait
nresize
swresize
swresize resize
seresize
En cada una de las celdas aplicamos algo similar a esto:
ne-resize
help
Fin de la Sección 18.
Sección 19. Propiedades de color y fondo
19. 1 color
19. 2 background-color
19. 3 background-image
19. 4 background-attachment
19. 5 background-position
19. 6 background-repeat
19. 7 background
19. 1 color
En secciones anteriores hemos usado esta propiedad así que el resultado de aplicarla no es
desconocido. Esta propiedad nos permite cambiar el color (foreground) de un elemento.
Por ejemplo:
Ejemplo
Ejemplo del uso de color
Algo mas...
19. 2 background-color
Esta propiedad, a diferencia de la anterior nos permite cambiar el color de fondo de un elemento.
Regresando al ejemplo anterior:
Ejemplo
Ejemplo del uso de color y background-color
Algo mas...
Además de los valores que conocemos, se puede usar el valor transparent (transparente). Esto es, el
elemento toma el color de fondo según en donde se encuentre:
Ejemplo
Párrafo 1, Color Azul
Párrafo 2, Color Verde
Párrafo 3, Color Rojo
19. 3 background-image
Esta propiedad nos permitirá usar una imagen de fondo para cualquier elemento.
Los posibles valores para esta propiedad pueden ser:
none
Sin imagen de fondo. Ejemplo:
BODY { background-image: none }
Dirección:
Permite especificar en donde se encuentra la imagen.
Ejemplo
19. 4 background-attachment
Los posibles valores para esta propiedad son:
fixed
La imagen de fondo no se mueve junto con el documento.
Ejemplo:
Resultado
scroll
La imagen de fondo se mueve junto con el documento. Este es el valor por defecto.
Ejemplo:
Resultado
19. 5 background-position
Con esta propiedad podremos indicar la posición de una imagen de fondo si es que se ha
especificado alguna. La posición se puede especificar con medidas tradicionales (píxeles,
centímetros, etc) pero es recomendable hacer uso de porcentajes. La siguiente imagen muestra la
disposición de la pantalla:
La declaración es de la forma
background-position: X% Y%
donde el primer valor (X%) es para la posición horizontal y el segundo valor (Y%) para la posición
vertical. Así, para que la imagen este en la esquina superior izquierda, usamos los valores 0% y 0%
de la siguiente manera:
Resultado
Para que la imagen este en el centro (horizontal y vertical) usamos los valores 50% y 50% de la
siguiente manera:
Resultado
Para que la imagen este en la esquina inferior derecha usamos los valores 100% y 100% de la
siguiente manera:
Resultado
La propiedad background-repeat se vera mas adelante.
19. 6 background-repeat
Nos permite indicar el comportamiento que tendrá la imagen de fondo en cuanto a la repetición que
habrá de la misma. Los valores para esta propiedad son:
repeat
La imagen se repite horizontal y verticalmente.
Ejemplo:
Resultado
repeat-x
La imagen se repite horizontalmente.
Ejemplo:
Resultado
repeat-y
La imagen se repite verticalmente.
Ejemplo:
Resultado
no-repeat
Solo se muestra una vez; sin repetición.
Ejemplo:
Resultado
19. 7 background
Esta propiedad nos permite agrupar todas las propiedades anteriores para salvarnos líneas de
código. Es similar a los visto en la propiedad font por lo que solo necesitamos saber el orden en que
deberemos escribir los valores:
background : || color || image || repeat || attachment || position ||
Ejemplo:
Ejemplo
Se escribe mas fácil:
Ejemplo
Fin de la sección 19
Source Exif Data:
File Type : PDF
File Type Extension : pdf
MIME Type : application/pdf
PDF Version : 1.3
Linearized : Yes
Create Date : 2009:01:13 13:22:50-03:00
Modify Date : 2009:01:13 13:22:50-03:00
Page Count : 164
Creation Date : 2009:01:13 16:22:50Z
Mod Date : 2009:01:13 16:22:50Z
Producer : Acrobat Distiller 5.0 (Windows)
Author : Sil
Metadata Date : 2009:01:13 16:22:50Z
Creator : Sil
Title : Microsoft Word - Manual de HTML CSS.doc
EXIF Metadata provided by EXIF.tools
Navigation menu
Versions of this User Manual:
|