1. selectores básicos - mural.uv.esmural.uv.es/paumarsa/inf2p1/hojasxestiloxmaterialxclase.pdf ·...
TRANSCRIPT
1. Selectores básicos
1.1 Selector universal
Se utiliza para seleccionar todos los elementos de la página. 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 declaración de la regla CSS):
* { margin: 0; padding: 0; }
El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.
No obstante, sí que se suele combinar con otros selectores y además, forma parte de algunos hacks muy utilizados, como se verá más adelante.
1.2 Selector de tipo o etiqueta
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:
p { ... }
Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres < y >) correspondiente a los elementos que se quieren seleccionar.
El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML:
h1 { color: red; } h2 { color: blue; } p {
color: black; }
Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos:
h1 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h2 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }
En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y el resultado es que la siguiente regla CSS es equivalente a las tres reglas anteriores:
h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }
En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación, establece el tamaño de letra de cada uno de ellos:
h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }
1.3 Selector descendiente
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 página que se encuentren dentro de un elemento <p>:
p span { color: red; }
Si el código HTML de la página es el siguiente:
<p> ... <span>texto1</span> ... <a href="">...<span>texto2</span></a> ... </p>
El selector p span selecciona tanto texto1 como texto2. El motivo es que en el selector descendiente, un elemento no tiene que ser "hijo directo" de otro. La única condición es que un elemento debe estar dentro de otro elemento, sin importar lo profundo que se encuentre.
Al resto de elementos <span> de la página que no están dentro de un elemento <p>, no se les aplica la regla CSS anterior.
Los selectores descendientes permiten aumentar la precisión del selector de tipo o etiqueta. Así, utilizando el selector descendiente es posible aplicar diferentes estilos a los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de color azul todo el texto de los <span> contenidos dentro de un <h1>:
p span { color: red; } h1 span { color: blue; }
Con las reglas CSS anteriores:
Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de color rojo.
Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de color azul.
El resto de elementos <span> de la página, se muestran con el color por defecto aplicado por el navegador.
La sintaxis formal del selector descendiente se muestra a continuación:
selector1 selector2 selector3 ... selectorN
Los selectores descendientes siempre están formados por dos o más selectores separados entre sí por espacios en blanco. El último selector indica el elemento sobre el que se aplican los estilos y todos los selectores anteriores indican el lugar en el que se debe encontrar ese elemento.
En el siguiente ejemplo, el selector descendiente se compone de cuatro selectores:
p a span em { text-decoration: underline; }
Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>.
No debe confundirse el selector descendiente con la combinación de selectores:
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */ p, a, span, em { text-decoration: underline; } /* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a span" */ p a span em { text-decoration: underline; }
Se puede restringir el alcance del selector descendiente combinándolo con el selector universal. El siguiente ejemplo, muestra los dos enlaces de color rojo:
p a { color: red; } <p><a href="#">Enlace</a></p> <p><span><a href="#">Enlace</a></span></p>
Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo:
p * a { color: red; } <p><a href="#">Enlace</a></p> <p><span><a href="#">Enlace</a></span></p>
La razón es que el selector p * a se interpreta como todos los elementos de tipo <a> que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de tipo <p>. Como el primer elemento <a> se encuentra directamente bajo un elemento <p>, no se cumple la condición del selector p * a.
1.4 Selector de clase
Si se considera el siguiente código HTML de ejemplo:
<body> <p>Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body>
¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal (*) no se puede utilizar porque selecciona todos los elementos de la página. El selector de tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos. Por último, el selector descendente (body p) tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo sitio.
Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar:
<body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body>
A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos los estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como muestra el siguiente ejemplo:
.destacado { color: red; }
El selector .destacado se interpreta como "cualquier elemento de la página cuyo atributo class sea igual a destacado", por lo que solamente el primer párrafo cumple esa condición.
Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los selectores de ID que se verán a continuación. La principal característica de este selector es que en una misma página HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo class:
<body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p> <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p> </body>
Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya que permiten disponer de una precisión total al seleccionar los elementos. Además, estos selectores permiten reutilizar los mismos estilos para varios elementos diferentes.
A continuación se muestra otro ejemplo de selectores de clase:
.aviso { padding: 0.5em; border: 1px solid #98be10; background: #f6feda; } .error { color: #930; font-weight: bold; } <span class="error">...</span> <div class="aviso">...</div>
El elemento <span> tiene un atributo class="error", por lo que se le aplican las reglas CSS indicadas por el selector .error. Por su parte, el elemento <div> tiene un atributo class="aviso", por lo que su estilo es el que definen las reglas CSS del selector .aviso.
En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera de nuevo el ejemplo anterior:
<body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p> <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p> </body>
¿Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class sea igual a destacado? Combinando el selector de tipo y el selector de clase, se obtiene un selector mucho más específico:
p.destacado { color: red }
El selector p.destacado se interpreta como "aquellos elementos de tipo <p> que dispongan de un atributo class con valor destacado". De la misma forma, el selector a.destacado solamente selecciona los enlaces cuyo atributo class sea igual a destacado.
De lo anterior se deduce que el atributo .destacado es equivalente a *.destacado, por lo que todos los diseñadores obvian el símbolo * al escribir un selector de clase normal.
No debe confundirse el selector de clase con los selectores anteriores:
/* Todos los elementos de tipo "p" con atributo class="aviso" */ p.aviso { ... } /* Todos los elementos con atributo class="aviso" que estén dentro de cualquier elemento de tipo "p" */ p .aviso { ... } /* Todos los elementos "p" de la página y todos los elementos con atributo class="aviso" de la página */ p, .aviso { ... }
Por último, es posible aplicar los estilos de varias clases CSS sobre un mismo elemento. La sintaxis es similar, pero los diferentes valores del atributo class se separan con espacios en blanco. En el siguiente ejemplo:
<p class="especial destacado error">Párrafo de texto...</p>
Al párrafo anterior se le aplican los estilos definidos en las reglas .especial, .destacado y .error, por lo que en el siguiente ejemplo, el texto del párrafo se vería de color rojo, en negrita y con un tamaño de letra de 15 píxel:
.error { color: red; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; } <p class="especial destacado error">Párrafo de texto...</p>
Si un elemento dispone de un atributo class con más de un valor, es posible utilizar un selector más avanzado:
.error { color: red; }
.error.destacado { color: blue; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; } <p class="especial destacado error">Párrafo de texto...</p>
En el ejemplo anterior, el color de la letra del texto es azul y no rojo. El motivo es que se ha utilizado un selector de clase múltiple .error.destacado, que se interpreta como "aquellos elementos de la página que dispongan de un atributo class con al menos los valores error y destacado".
1.5 Selectores de ID
En ocasiones, es necesario aplicar estilos CSS a un único elemento de la página. Aunque puede utilizarse un selector de clase para aplicar estilos a un único elemento, existe otro selector más eficiente en este caso.
El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.
La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS:
#destacado { color: red; } <p>Primer párrafo</p> <p id="destacado">Segundo párrafo</p> <p>Tercer párrafo</p>
En el ejemplo anterior, el selector #destacado solamente selecciona el segundo párrafo (cuyo atributo id es igual a destacado).
La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class.
De esta forma, la recomendación general es la de utilizar el selector de ID cuando se quiere aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML.
Al igual que los selectores de clase, en este caso también se puede restringir el alcance del selector mediante la combinación con otros selectores. El siguiente ejemplo aplica la regla CSS solamente al elemento de tipo <p> que tenga un atributo id igual al indicado:
p#aviso { color: blue; }
A primera vista, restringir el alcance de un selector de ID puede parecer absurdo. En realidad, un selector de tipo p#aviso sólo tiene sentido cuando el archivo CSS se aplica sobre muchas páginas HTML diferentes.
En este caso, algunas páginas pueden disponer de elementos con un atributo id igual a aviso y que no sean párrafos, por lo que la regla anterior no se aplica sobre esos elementos.
No debe confundirse el selector de ID con los selectores anteriores:
/* Todos los elementos de tipo "p" con atributo id="aviso" */ p#aviso { ... } /* Todos los elementos con atributo id="aviso" que estén dentro de cualquier elemento de tipo "p" */ p #aviso { ... } /* Todos los elementos "p" de la página y todos los elementos con atributo id="aviso" de la página */ p, #aviso { ... }
2. Propiedades A continuación veremos diferentes propiedades que permiten controlar la apariencia del texto, fondo, fuente, dimensiones y posicionamiento de los elementos en textos y tablas.
2.1 Fondo (Background)
Las propiedades de CSS llamadas “background” son usadas para definir los efectos de color e imagen de fondo de cada elemento. Las propiedades que se pueden aplicar para el background son:
background-color background-image background-repeat background-attachment background-position
La propiedad background-color se emplea para establecer el color de fondo de un elemento mediante cualquiera de las tres diferentes formas de indicar un color en CSS que se muestran a continuación:
Por su nombre –siempre en inglés, ejemplo: "red" Por sus componentes RGB – ejemplo: "rgb(255,0,0)" Con un valor hexadecimal: ejemplo "#ff0000
Veamos un ejemplo donde los elementos div, p y h1 tienen diferentes colores de fondo:
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
h1 { background-color:red;}
p{ background-color:yellow;}
div
{ background-color:green;}
</style>
</head>
<body>
<h1>Ejemplo de CSS background...y es rojo</h1>
<div>
Esto es un texto dentro del elemento div y es de color verde
<p>Este parrafo tiene su propio color de fondo que es amarillo.</p>
Todavía estamos dentro del elmento div y por tanto sale verde.
</div>
</body>
La propiedad background-image se emplea para establecer la imagen de fondo de cada elemento. La imagen se muestra en la zona que ocupan el contenido y el relleno del elemento, justo hasta su borde.
Para indicar la imagen que se muestra como fondo de un elemento, se utiliza una URL. Los navegadores no restringen el tipo de URL que se pueden utilizar, por lo que pueden ser URL externas/internas y URL relativas/absolutas como vemos en los siguientes ejemplos:
Declaración externa: div {
background-image: url(http://www.librosweb.es/website/css/images/logo.gif); } Declaración interna h1, h2, h3 { background-image: url("imagenes/fondo.png"); } ul li { background-image: url('../comun/imagenes/icono.gif'); }
La URL de la imagen que se quiere mostrar se incluye dentro de los paréntesis de la palabra url(). De forma opcional, el valor de la URL se puede encerrar entre comillas simples o entre comillas dobles.
Veamos un ejemplo de documento xhtml donde se ha incluido una imagen de fondo al elemento “body” <!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> <title>Ejemplo de estilos CSS en el propio documento</title> <style type="text/css"> body {background-image:url('bgdesert.jpg');} </style> </head> <body> <h1>Hello World!</h1> <p>This text is not easy to read on this background image.</p> </body> </html> La propiedad background-repeat controla la forma en la que se repiten las imágenes de fondo de los elementos. Por defecto, si la imagen de fondo que se establece con la propiedad background-image es más pequeña que el sitio disponible, el navegador repite la imagen en todas las direcciones hasta cubrir completamente la superficie del elemento, como ocurre en el siguiente ejemplo.
Para evitar esto y que sólo se repita por ejemplo horizontalmente usaremos background-repeat:repeat-x tal como muestra el siguiente ejemplo: <!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> <title>hola</title> <style type="text/css"> body { background-image:url('gradient2.png'); background-repeat:repeat-x; } </style> </head> <body> <h1>Hello World!</h1> </body> También podríamos haber utilizado background-repeat:repeat-y si queremos que una imagen se repita sólo verticalmente En el siguiente ejemplo la imagen de fondo se muestra en el mismo sitio que el texto y evitamos que se repita usando background-repeat: no-repeat tal como se muestra a continuación: .<!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> <title>hola</title> <style type="text/css"> body { background-image:url('img_tree.png'); background-repeat:no-repeat; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background image example.</p> <p>The background image is only showing once, but is not disturbing the reader!</p> </body> </html>
Acabamos de ver en el ejemplo anterior, que la imagen interfiere con el texto para evitar esto deberíamos cambiar la posición de la imagen utilizando la propiedad background-position Veamos cómo hacer esto en el siguiente ejemplo: <!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> <title>hola</title> <style type="text/css"> body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background no-repeat, set postion example.</p> <p>Now the background image is only show once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> </body> </html> La propiedad background-position permite indicar la distancia que se desplaza la imagen de fondo respecto de su posición original situada en la esquina superior izquierda. El primer valor indica el desplazamiento horizontal (right, center, left) y el segundo el desplazamiento vertical (top, bottom, right) respecto del origen (situado en la esquina superior izquierda). Si solamente se indica un valor se considera que es el desplazamiento horizontal y al desplazamiento vertical se le asigna automáticamente el valor de 50%. La propiedad background-attachment controla si la imagen de fondo establecida en un elemento se mueve o permanece fija cuando se hace scroll en la ventana del navegador.
NOTA: Se puede utilizar la propiedad background para mostrar una imagen de fondo en un elemento y simultáneamente establecer las propiedades de esa imagen (si se repite o no, su posición y si es fija o no). Las dos reglas CSS siguientes son equivalentes, pero la segunda es mucho más compacta:
div { background-image: url("images/imagen_pequena.png"); background-repeat: no-repeat; background-position: 2em 1.5cm; background-attachment: fixed; }
div { background: url("images/imagen_pequena.png") no-repeat 2em 1.5cm fixed; }
2.2 Texto
CSS define numerosas propiedades para modificar la apariencia del texto. A pesar de que no dispone de tantas posibilidades como los lenguajes y programas específicos para crear documentos impresos, CSS permite aplicar estilos complejos y muy variados al texto de las páginas web.
Algunas de las propiedades más importantes que se pueden aplicar para modificar la apariencia del texto y que veremos en más detalle son:
Color Text-align Text-decoration Text-transform Text-indent
La propiedad básica que define CSS relacionada con la tipografía se denomina color y se utiliza para establecer el color de letra. El color puede ser especificado de tres maneras diferentes:
Por su nombre –siempre en inglés, ejemplo: "red" Por sus componentes RGB – ejemplo: "rgb(255,0,0)" Con un valor hexadecimal: ejemplo "#ff0000"
El color por defecto para todos los elementos de una página viene definido por el selector de “body”. La única excepción de este comportamiento son los enlaces que se crean con la etiqueta <a>. Aunque el color de la letra se hereda de los elementos padre a los elementos hijo, con los enlaces no sucede lo mismo, por lo que es necesario indicar su color de forma explícita:
Veamos un ejemplo de cómo utilizar la propiedad color :
<!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>
<title>hola</title>
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>Estas letras son de color verde</h1>
<p>Rojo: Rojo Rojo Rojo</p>
<p class="ex">Blue: Blue blue blue.</p>
</body>
</html>
La propiedad tex-align se usa para establecer el alineamiento horizontal de un texto.The text-align property is used to set the horizontal alignment of a text.
La propiedad text-align define cuatro valores para alinear los contenidos a la izquierda (left), a la derecha (right), centrados (center) o justificados (justify). El siguiente ejemplo muestra 1 título y 2 párrafos iguales con diferentes valores en sus propiedades text-align:
<!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> <title>hola</title> <style type="text/css"> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} </style> </head> <body> <h1>Ejemplo alineación de Texto</h1> <p class="date">May, 2009</p> <p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</p><p><b>Note:</b> Try to resize the browser window to see how justify works.</p> </body> </html>
La propiedad text-decoration establece la decoración que se aplica al texto de un elemento. El estándar CSS 2.1 define los siguientes cinco tipos de decoraciones:
underline: se muestran subrayadas todas las líneas de texto. overline: similar al valor underline, pero en este caso el subrayado se muestra en
la parte superior de cada línea. line-through: todas las líneas de texto se muestran tachadas mediante una línea
continua en el medio de cada línea. blink: el texto parpadea apareciendo y desapareciendo de forma alternativa. none: el texto no muestra ninguna decoración, por lo que se eliminan todas las
decoraciones que puede haber heredado el elemento.
Veamos a continuación un ejemplo de la utilización de la propiedad text-decoration: <!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> <title>hola</title> <style type="text/css"> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <p><b>Note:</b> El "blink" value no es soportado IE, Chrome, o Safari.</p> </body> </html>
La propiedad text-transform permite transformar el texto de un elemento para mostrarlo en mayúsculas, minúsculas o una mezcla de ambas. Los cuatro valores definidos por esta propiedad son los siguientes:
lowercase: muestra todo el texto del elemento con letras minúsculas. uppercase: muestra todo el texto del elemento con letras mayúsculas. capitalize: muestra la primera letra de cada palabra en mayúscula y el resto de
letras en minúsculas. none: muestra el texto tal y como está escrito, respetando todas las mayúsculas
y minúsculas.
A continuación se muestran ejemplos del resultado y el código XHTML de aplicar cada uno de los valores anteriores:
<!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> <title>hola</title> <style type="text/css"> p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} </style> </head> <body> <p class="uppercase">Esto es un texto .</p> <p class="lowercase">Este es otro texto.</p> <p class="capitalize">Este es el último texto que escribo.</p> </body> </html>
La propiedad text-indent se utiliza para tabular la primera línea de texto de un párrafo. Veamos a continuación un ejemplo donde se muestra dos párrafos con la primera línea de estos tabulada y el correspondiente código XTHML: <!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> <title>hola</title> <style type="text/css"> p {text-indent:50px;} </style> </head> <body> <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</p> <p>Este texto está extraído de un libro que leí hace tiempo. Creo recordar que lo leí en el verano de 1950</p> </body> </html>
2.3 Fuentes
CSS define una seria de propiedades que nos permite establecer propiedades tipográficas del texto
Algunas de las propiedades más importantes que se pueden aplicar al texto y que veremos en más detalle son:
font-family font-style font-size
La propiedad font-family establece la fuente o tipo de letra con la que se muestra el texto. Cuando no se establece de forma explícita el tipo de letra, los navegadores muestran el texto con un tipo de letra por defecto. Aunque la fuente por defecto depende de cada navegador, la mayoría utilizan Times New Roman o la fuente disponible que más se parezca.
Cuando una página web establece que su texto se debe mostrar con un tipo de letra concreto, los navegadores buscan esa fuente entre la lista de fuentes instaladas en el dispositivo con el que accede el usuario. Por ese motivo, si se emplean fuentes
profesionales o poco conocidas, la mayoría de los usuarios normales no la tendrán instalada. En este caso, los navegadores sustituyen esa fuente por otra fuente genérica.
Afortunadamente, la propiedad font-family permite indicar una serie de fuentes alternativas separadas por comas. La lista de fuentes tiene prioridad, por lo que los navegadores intentan mostrar el texto con la primera fuente y si no está disponible, intentan utilizar la segunda fuente y así sucesivamente hasta la última fuente indicada:
body { font-family: Arial, Helvetica, Verdana; } p { font-family: Georgia, Cambria, Times, "Times New Roman"; }
Aunque se pueden indicar tantas fuentes alternativas como se necesiten, nunca es posible asegurar que todos los usuarios disponen de al menos una de las fuentes alternativas. Por este motivo, CSS también permite indicar nombres genéricos de fuentes. Los cinco nombres genéricos no hacen referencia a fuentes concretas, sino al aspecto con el que se muestra el texto.
A continuación se muestran los cinco valores genéricos definidos y la lista de fuentes con un aspecto similar a ese valor:
Valor genérico Fuentes con aspecto similar serif Times New Roman, Times, Garamond, Georgia, Cambria sans-serif Arial, Helvetica, Verdana, Trebuchet, Tahoma, Futura cursive Comic Sans fantasy Comic Sans, Impact monospace Courier New, Monaco, Consolas
El aspecto con el que se muestran los cinco valores genéricos es el siguiente:
font-family: serif
abcdefghijklmñnopqrstuvwxyz
font-family: sans-serif
abcdefghijklmñnopqrstuvwxyz
font-family: cursive
abcdefghijklmñnopqrstuvwxyz
font-family: fantasy
abcdefghijklmñnopqrstuvwxyz
font-family: monospace
abcdefghijklmñnopqrstuvwxyz
El aspecto real de cada valor genérico depende tanto del navegador utilizado como de las fuentes instaladas en el dispositivo con el que se accede a la página.
En la práctica, cuando se define el tipo de letra del texto, se utiliza una lista de fuentes alternativas en la que el último valor siempre es uno de los valores genéricos. De esta forma, primero se intenta mostrar el texto con el tipo de letra deseado por el diseñador y si no es posible, se utiliza un valor genérico cuyo aspecto sea similar al deseado:
body { font-family: Arial, Helvetica, Verdana, sans-serif; } p { font-family: Georgia, Cambria, Times, "Times New Roman", serif; }
Veamos un ejemplo del uso de font-family :
<!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> <title>hola</title> <style type="text/css"> p.serif{font-family:"Times New Roman",Times,serif;} p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style> </head> <body> <h1>CSS font-family</h1> <p class="serif">Esto es un párrafo mostrando Times New Roman.</p> <p class="sansserif">Esto es un párrafo mostrando Arial font.</p> </body> </html>
La propiedad font-style permite establecer el estilo con el que se muestra el tipo de letra seleccionado mediante la propiedad font-family. Los tres estilos disponibles son: normal (normal), itálico (italic) y oblicuo (oblique).
Normalmente, la propiedad font-style se utiliza para mostrar un texto en cursiva (también llamada itálica o bastardilla).
A continuación se muestran todos los caracteres con un tamaño de letra muy grande para apreciar las diferencias de cada estilo:
font-style: oblique
abcdefghijklmñnopqrstuvwxyz
font-style: italic
abcdefghijklmñnopqrstuvwxyz
Desafortunadamente, cuando un tipo de letra dispone del estilo cursiva, los navegadores muestran el estilo oblicuo con el mismo aspecto. Por este motivo, seguramente todos los caracteres del ejemplo anterior tienen el mismo aspecto cuando los ves en cualquier navegador.
Veamos un ejemplo: <!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> <title>hola</title> <style type="text/css"> p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} </ style> </head> <body> <p class="normal">Esto es un párrafo, normal.</p> <p class="italic">Esto es un párrafo,italic.</p> <p class="oblique">Esto es un párrafo,, oblique.</p> </body> La propiedad font-size permite establecer el tamaño de letra del texto. Las unidades de medida más conocidas y utilizadas son: em, px, pixels y %.
Poder establecer el tamaño del texto es muy importante para el diseño de páginas web. Sin embargo, no deberías usar font-size para hacer que los párrafos parezcan encabezados o encabezados que parezcan párrafos.
Simpre usa la etiqueta adecuado de XHTML, como <h1> - <h6> para encabezados and <p> para párrafos.
El valor de font-size puede ser escrito utilizando unidades absolutas, o relativas.
Unidades absolutas:
Establece el tamaño de texto a un tamaño determinado. Su valor real es el directamente indicado
No permite a un usuario cambiar el tamaño del texto en todos los navegadores (lo cual no es bueno para finalidades de accesibilidad)
El tamaño en expresado en unidades absolutas puede ser útil cuando el tamaño físico de la salida es conocido.
Las unidades de medida absoluta que se utilizan son: in (inches), cm, mm, pt (1 punto equivale a 0.35mm), pc (1 pica equivale a 4,23 mm)
Unidades relativas:
Establecen el tamaño en relación con otra medida. Permite a los usuarios cambiar el tamaño en el navegador. La unidades relativas son más flexibles que las unidades absolutas porque se adaptan
más fácilmente a los diferentes medios. Las unidades de medida relativa que más se utilizan son: em, ex, px y % em, relativa respecto del tamaño de letra empleado. Aunque no es una definición
exacta, el valor de 1 em se puede aproximar por la anchura de la letra M ("eme mayúscula") del tipo de letra que se esté utilizando
ex, relativa respecto de la altura de la letra x ("equis minúscula") del tipo de letra que se esté utilizando
px, (píxel) relativa respecto de la pantalla del usuario
Si no se especifica un tamaño de fuente, el valor por defecto para un texto es 16px (16px=1em).
Veamos un ejemplo de cómo establece el tamaño del texto en pixels: <!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> <title>hola</title> <style type="text/css"> h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} </style> </head> <body> <h1>Encabezado 1</h1> <h2>Encabezado 2</h2> <p>Esto es un párrafo.</p> <p>Especificando la "font-size" en px permite a Firefox, Chrome, and Safari redimensionar el text, pero no a Internet Explorer.</p> </body> </html>
El ejemplo anterior funciona para Firefox, Chrome y Safari cuando redimensionamos el tamaño de texto, pero no en Internet Explorer (IE) .
El texto puede ser redimensionado en todos los navegadores usando la herramienta Zoom (sin embargo, esto redimensiona la página entero, no solamente el texto).
Para evitar el problema de redimensionamiento con Internet Explorer, muchos desarrolladores usan em en vez de pixels.
La unidad em es recomendada por el W3C. El motivo es que al tratarse de una unidad de medida relativa, se adapta fácilmente sin realizar cambios a cualquier dispositivo de acceso utilizado por los usuarios.
El tamaño por defecto de los navegadores es 16px. Así es que el tamaño por defecto de 1em es 16px. Para pasar de pixels a em se puede hace usando la siguiente fórmula: pixels/16=em
En el ejemplo siguiente, el texto en em es el mismo que en ejemplo anterior. Sin embargo con em size, es posible ajustar el tamaño del texto en todos los navegadores.
h1{font-size:2.5em;} /* 40px/16=2.5em */ h2{font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */
Desafortunadamente todavía hay un problema con Internet Explorer. Cuando redimensionamos el texto, se hace más grande de lo que debería cuando aumentamos el tamaño y mucha más pequeño de lo que debería cuando reducimos su tamaño.
La solución que funciona bien en todos los navegadores es poner a un valor por defecto para el elemento “body” en porcentaje tal como:
body{font-size:100%;} h1{font-size:2.5em;} h2{font-size:1.875em;} p {font-size:0.875em;}
Ahora el código funciona bien! Muestra el mismo tamaño de texto en los navegadores, y permite a todos los navegadores hacer zoon o redimensionar el texto!
2.4 Tablas
CSS define una seria de propiedades que nos permite establecer propiedades en las tablas. Entre estas propiedades, que a continuación detallaremos, caben destacar:
border-collapse width,height text-align, vertical-align padding border, color, background-color
El estándar de CSS establece que existen dos modelos de bordes para las celdas de las tablas. El primer modelo es el "separado" (separate) y hace que todas las celdas de la tabla muestren sus cuatro bordes. El segundo modelo es el "fusionado" (collapse) y combina los bordes de las celdas adyacentes.
El modelo de bordes se establece mediante la propiedad border-collapse.
Los navegadores utilizan por defecto el modelo de bordes separate, que hace que todas las celdas estén separadas y muestren siempre sus cuatro bordes. La tabla del siguiente ejemplo emplea el modelo separate:
Si queremos combinar los bordes de las celdas adyacente utilizaremos el modelo collapse, border-collapse:collapse, tal como muestra el siguiente ejemplo:
<!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> <title>hola</title> <style type="text/css"> table { border-collapse:collapse; } table, td, th { border:1px solid black; } </style> </head> <body> <table> <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> </body> </html> Si queremos establecer la anchura o altura de un elemento de la tabla o la propia tabla utilizaremos la propiedad width y height respectivamente. El siguiente ejemplo muestra una tabla que ocupa el total de la anchura del navegador y la altura del encabezado es de 50 pixels. <!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> <title>hola</title> <style type="text/css"> table,td,th { border:1px solid black; } table { width:100%; } th { height:50px; } </style> </head> <body> <table> <tr>
<th>Nombre</th> <th>Apellido</th> <th class="savings">Ahorros</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html>
El texto en una table se alinea con la propiead text-align y vertical-align.
La propiedad text-align estable el alineamiento horizontal del texto, a la derecha (right), izquierda (left) y centro (center) de una celda de la tabla.
<!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> <title>hola</title> <style type="text/css"> table,td,th { border:1px solid black; } td { text-align:right; } </style> </head> <body> <table> <tr> <th>Nombre</th> <th>Apellidos</th> <th>Ahorros</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr>
<tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html> La propiedad vertical-align establece el alineamiento vertical del texto, al border superior a(top), borde inferior(bottom) o or centro(middle) de una celda de la tabla. Veamos un ejemplo donde se alinea el texto al borde inferior <!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> <title>hola</title> <style type="text/css"> table, td, th { border:1px solid black; } td { height:50px; vertical-align:bottom; } </style> </head> <body> <table> <tr> <th>Nombre</th> <th>Apellidos</th> <th>Ahorros</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td>
<td>$250</td> </tr> </table> </body> </html> Para controlar el espacio entre el borde de las celdas y su contenido, se usa la propiedad padding sobre los elementos td y th. Veamos un ejemplo: <!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> <title>hola</title> <style type="text/css"> table, td, th { border:1px solid black; } td { padding:15px; } </style> </head> <body> <table> <tr> <th>Nombre</th> <th>Apellidos</th> <th>Ahorros</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html> Se puede especificar el color de los borde, fondo y texto de los elementos con las propiedades Border, background-color y color respectivamente tal como se muestra a continuación: <!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> <title>hola</title> <style type="text/css"> table, td, th { border:1px solid green; } th { background-color:green; color:white; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html>
2.5. Link
CSS también permite aplicar diferentes estilos a un mismo enlace en función de su estado. De esta forma, es posible cambiar el aspecto de un enlace cuando por ejemplo el usuario pasa el ratón por encima o cuando el usuario pincha sobre ese enlace.
Como con los atributos id o class no es posible aplicar diferentes estilos a un mismo elemento en función de su estado, CSS introduce un nuevo concepto llamado pseudo-clases. En concreto, CSS define las siguientes cuatro pseudo-clases:
:link, aplica estilos a los enlaces que apuntan a páginas o recursos que aún no han sido visitados por el usuario.
:visited, aplica estilos a los enlaces que apuntan a recursos que han sido visitados anteriormente por el usuario. El historial de enlaces visitados se borra
automáticamente cada cierto tiempo y el usuario también puede borrarlo manualmente.
:hover, aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del ratón.
:active, aplica estilos al enlace que está pinchando el usuario. Los estilos sólo se aplican desde que el usuario pincha el botón del ratón hasta que lo suelta, por lo que suelen ser unas pocas décimas de segundo.
Como se sabe, por defecto los navegadores muestran los enlaces no visitados de color azul y subrayados y los enlaces visitados de color morado. Las pseudo-clases anteriores permiten modificar completamente ese aspecto por defecto y por eso casi todas las páginas las utilizan.
Anexo: Colores Estandarizados aqua: Agua black: Negro blue: Azul fuchsia: Fucsia gray: Gris green: Verde lime: Lima maroon: Marrón navy: Azul marino olive: Verde oliva purple: Púrpura red: Rojo silver: Plateado teal: Verde azulado white: Blanco yellow: Amarillo
BIBLIOGRAFÍA:
WWW.W3SCHOOLS.COM/CSS Programación Web con HTML, XHTML y CSS, Jon Duckett, Anaya Multimedia www.w3.org/TR/CSS21/ http://sestud.uv.es/manual.esp/estilo2.htm www.devguru.com/technologies/CSS/8044.asp