css práctico

8/9/2019 CSS prctico

1/25

CSS prctico

Tabla de contenidosIntroduccin ...............................................................................................................................1El tag LINK ...............................................................................................................................5Hojas de estilos alternativas ..........................................................................................................5El tag STYLE .............................................................................................................................6La directiva @import ...................................................................................................................6Comentarios en CSS ....................................................................................................................6Reglas bsicas ............................................................................................................................6

Estructura de las reglas .........................................................................................................7Agrupacin de selectores y declaraciones .........................................................................................7

Agrupacin de selectores ......................................................................................................7Agrupacin de declaraciones .................................................................................................8Combinaciones de agrupacin de selectores y declaraciones ........................................................9

El atributo CLASS ......................................................................................................................9El atributo ID .............................................................................................................................9Pseudo-Clases y Pseudo-Elementos ................................................................................................9

Pseudo-Clases .................................................................................................................. 10Pseudo-Elementos ............................................................................................................. 10Restricciones en las Pseudo-Clases y los Pseudo-Elementos ...................................................... 10

Estructura ................................................................................................................................ 11Herencia .................................................................................................................................. 12Especificidad ............................................................................................................................ 12

Importancia ...................................................................................................................... 13Estilos en cascada ..................................................................................................................... 13Clasificacin de los elementos ..................................................................................................... 13Colores ................................................................................................................................... 14

Unidades ................................................................................................................................. 14Indentacin .............................................................................................................................. 15Alineacin ............................................................................................................................... 16Espacios en blanco .................................................................................................................... 17Anchura de lneas ...................................................................................................................... 18Alineacin vertical .................................................................................................................... 19Espacio entre palabras ................................................................................................................ 22Espacio entre letras .................................................................................................................... 23Transformaciones del texto ......................................................................................................... 23Decoracin del texto .................................................................................................................. 24

IntroduccinEn los orgenes de la Web y en sus primeras versiones, HTML era un lenguaje fcil de aprender y muy reducido encuanto a sus tags y estructura. Estamos hablando de los aos 1990 al 1993. Todo cambi cuando empezaron a surgirlos primeros navegadores que eran capaces de representar recursos grficos como aadido a la informacin textual.

As, el nmero de sitios web comenz a crecer y con l, el nmero de tags que la especificacin HTML contempla#ba. El objetivo era construir sitios web cada vez ms atractivos visualmente hablando, con lo que HTML deba in#cluir nuevos tags destinados a conseguir diversos efectos visuales.

Con todos estos cambios que la web haba sufrido, nos encontramos con que un lenguaje que en sus inicios haba si#

1


2/25

do "orientado a la estructura", ahora estaba totalmente "orientado a la visualizacin" (HTML 4 es la ms viva repre#sentacin de esta realida). Encontramos tags com , o que definen estilos de visualizacin sin aportarnada a la estructura del documento representados.

Otro aspecto importante y que condiciona totalmente la estructura del documento es el uso del tag FONT. Con eluso de este tag podemos hacer que una zona que corresponde a la cabecera o ttulo de una pgina, y que debera ex#

presarse con un H1, pase ahora a estar definida mediante el tag FONT. Con este cambio se pierder totalmente la es#tructura del documento.

La realidad ahora es que el mayor nmero de los sites realizados con HTML 4 consiguen que el volumen de infor#macin de visualizacin sea muy superior al de la informacin verdaderamente relevante. Esto parece, cuanto menosprecoupante.

Motivos por los que no podemos permitir que nuestros documentos publicados en la web pierdan su estructura:

La indexacin por los buscadores es mucho ms complicada (Google asigna un peso mucho mayor a una pginaque utliza H1 para definir sus secciones, que a los campos META del documento).

Se reduce la acesibilidad. Actualmente existen aplicaciones que permiten la lectura de pginas web como ayuda

a los discapacitados (persona ciegas o con otras discapacidades). Si una persona discapacitada intenta acceder auna pgina sin una mnima estructuracin, el resultado puede ser lamentable.

La estructura de la pgina y la informacin contenida en la misma es mucho ms sencilla de mantener. Actual#mente, ciertos aspectos del cdigo HTML pueden hacer que una misma pgina tenga visualizaciones distintas endistintos navegadores. Estos herrores de diseo son dificilmente depurables cuando la pgina contiene una es#tructura de tags complicada y sin ninguna estructuracin. Por otra parte, un cambio en un tipo de fuente suponeel rediseo de todas las pginas de un site al tener que sustituir todos los valores para el tag FONT.

Todos estos problemas han sido seguidos muy de cerca por el W3C, el cual comenz a trabajar en 1995 en CSS.

Principales caractersticas aportadas por CSS en contraposicin a los elementos de visualizacin presentes en la es#pecificacin de HTML 4:

Estilo enriquecido. CSS permite la creacin de documentos visualmente mucho ms ricos que lo que HTMLnunca permitir. No en vano CSS est pensado nica y exclusivamente para asistir al diseador a la hora de darestilo a un documento estrucuturado.

Fcil de utilizar. La utilizacin de hojas de estilo CSS hace que el diseador pueda reducir sustancialmente sucarga de trabajo al disear todo un site. Esto se debe a que CSS es capaz de centralizar ciertos efectos visualesque plasmemos en diversas secciones del site, en lugar de tenerlos diseminados por pginas y pginas del site.

Reutilizacin en mltiples pginas. Una hoja de estilo que recoja aspectos visuales comunes a varias pginaspuede ser reutilizada en cualquier seccin del site aprovechando dichos efectos ya definidos. De esta manera essencillo generar un estilo general del web y mantenerlo as consistente para todas las pginas. As, si deseamosmodificar un estilo que es comn a todo el site, slo necesitaramos modificar una lnea de nuestro fichero CSS(con la aproximacin clsica que ofrece HTML, deberamos modificar todas y cada una de las pginas).

Reutilizacin en mltiples pginas. Una hoja de estilo que recoja aspectos visuales comunes a varias pginaspuede ser reutilizada en cualquier seccin del site aprovechando dichos efectos ya definidos. De esta manera essencillo generar un estilo general del web y mantenerlo as consistente para todas las pginas. As, si deseamosmodificar un estilo que es comn a todo el site, slo necesitaramos modificar una lnea de nuestro fichero CSS(con la aproximacin clsica que ofrece HTML, deberamos modificar todas y cada una de las pginas).

Figura 1. Hoja de estilos personal

CSS prctico

2


3/25

Figura 2. Hoja de estilos personal

CSS prctico

3


4/25

Ejemplo 1. Fichero personal.css

a {color: white; background-color: black;

}

Reduce el tamao del cdigo HTML enviado. Al centralizar los estilos ya no es necesario la utilizacin de tagscomo FONT en todos los documentos del site. De esta manera se reduce considerablemente el tiempo en quetarda en cargarse el cdigo de una pgina.

Nos prepara par el futuro. Debemos ser conscientes que muchos tags como FONT, BASEFONT, U, STRIKE, S,CENTER, han sido marcados por el W3C como "deprecated", es decir, que se desaconseja su uso ya que serneliminados en un futuro de la especificacin. De igual menera HTML retornar progresivamente a sus orgenes,volviendo a ser un lenguaje para la estrucuturacin de informacin. Esta es la via de XML, cuya primera aproxi#macis es el lenguaje de marcas XHTML.

Aspectos con los que CSS no se ha enfrentado en su primera especificacin:

En CSS1 no se habla casi nada acerca de las tablas. Por ejemplo, segn lo que se v en la especficacin pareceevidente que se podrn definir mrgenes para las celdas de una tabla (se pueden definir mrgenes para todos loselemento), pero no es as. CSS2 introduce un nuevo conjunto de propiedades para la interaccin con tablas. Dehecho, la omisin del tratamiento de tablas en la primera especificacin de CSS, intenta marcar que las tablas noson un elemento que se deba utilizar para disponer el resto de elementos en la pgina.

CSS prctico

4


5/25

As, para el posicionamiento de los elementos se deben utilizar estilos y no tablas. Aunque CSS2 tiene tres cap#tulos enteros dedicados al posicionamiento de elementos.

CSS1 no trata la posibilidad de disponer de fuentes descargables. Aunque CSS2 introduce algn aspecto sobre elsoporte de fuentes, es un tema que no queda resuelto. Parece que ser otros estandar como SVG (Scalable VectorGraphics), el que tendr en su mano la solucin.

En CSS1 no se definen los posibles medios de presentacin de CSS, siendo la pantalla el nico medio disponi#ble. Con el fin de conseguir hojas de estilo que adapten su visualizacin al medio en que sern presentadas,CSS2 define el soporte para que se aplique una hoja de estilos u otra en funcin del medio seleccionado (screen,print o aural).

Implementaciones:

Las peores son las que realizaron en su dia "Microsoft Internet Explorer 3.x" y "Netscape Navigator 4.x".

Mejoraron en cierta medida su soporte con las versiones de "Microsoft Internet Explorer 4.x and 5.x".

Actualmente, el mejor soporte de CSS lo tiene Opera y Mozilla (en menor medida).

El tag LINK

Para conseguir la adecuada carga de la hoja de estilos, debemos posicionar este elemento en el HEAD de la pgina.

Atributos del tag LINK:

REL. Define el tipo del documento o "con qu tiene relacin". En general, su valor ser "stylesheet".

TYPE. Ser siempre "text/css".

HREF. Es el valor de la URL que nos permite el acceso al fichero de estilos.

TITLE. Actualmente casi no se utiliza, pero ser muy importante en el futuro. Su importancia radica en que pue#de haber en el mismo documento ms de un tag LINK. En el caso de que haya ms de un tag LINK, slo aque#llos cuyo valor de REL sea "stylesheet" se aplicarn inicialmente al documento:

El navegador cargar ambas hojas de estilo, combinando las reglas que definen y aplicando el resultado al docu#mento.

Hojas de estilos alternativasEs de especial utilidad hacer uso del tag TITLE, cuando definimos hojas de estilo alternativas. En el siguiente ejem#plo se definen tres hojas de estilo dentro del mismo documento de forma que:

CSS prctico

5


6/25

La primera definicin se aplicar siempre.

El navegador nos permitir seleccionar alguna de las dos siguientes como fuente alternativa de estilos. Adems,cuando nos presente el men para seleccionar la hoja de estilos alternativa, utilizar el atributo TITLE para suidentificacin.


7/25

Estructura de las reglas

Cada regla tiene dos partes:

El "selector". El selector es la parte de la regla que selecciona a qu partes del documento se les debe de aplicar

el estilo. En cuanto a la declaracin se compone de una combinacin de propiedades CSS. Normalmente, el se#lector es un elemento HTML, aunque puede tomar otros valores. Si estamos formatenado un documento XML,puede tomar el valor de cualquiera de los elementos o nodos del documento XML:

QUOTE {color: gray;}BIB {color: red;}BOOKTITLE {color: purple;}

La "declaracin". Adems, la declaracin se compone de una lista de parejas "propiedad : valor" separadas porpunto y coma, que se corresponden con propiedades vlidas dentro de la especificacin CSS. Motivos por losque se puede anular una declaracin:

Si utilizamos un propiedad que no existe, la declaracin entera es ignorada.

Si utilizamos un valor incorrecto para una propiedad, slo debera ignorarse el valor, aunque este aspecto de#pende de la implementacin del navegador (aunque la mayora son bastante tolerantes con los errores en elcdigo CSS).

Figura 3. Estructura de una regla

Si la definicin del valor de una propiedad permite el uso de ms de una palabra, estas estarn separadas por espa#cios en blanco. Adems existen unos poco ejemplos en los que se pueden utilizar otros tipo de elementos dentro dela declaracin. Es el caso de la propiedad FONT:

H2 {font: large/150% sans-serif;}

Esta declaracin permite definir adems del tamao de la fuente, el grosor de la lnea en la que est el texto.

Agrupacin de selectores y declaraciones

Agrupacin de selectores

Normalmente, se da el caso en que dos elementos del documento HTML comparten la definicin de la misma pro#piedad CSS. Estos elementos podemos declararlos de una forma extendida:

H1 {color: purple;}

CSS prctico

7


8/25

H2 {color: purple;}H3 {color: purple;}H4 {color: purple;}H5 {color: purple;}H6 {color: purple;}

O utilizar la agrupacin para conseguir una declaracin ms compacta (el resultado es el mismo en ambos casos):

H1, H2, H3, H4, H5, H6 {color: purple;}

Otros ejemplos de estructuras de agrupacin que son equivalentes:

H1 {color: purple; background: white;}H2 {color: purple; background: green;}H3 {color: white; background: green;}H4 {color: purple; background: white;}B {color: red; background: white;}

H1, H2, H4 {color: purple;}H2, H3 {background: green;}

H1, H4, B {background: white;}H3 {color: white;}B {color: red;}

H1, H4 {color: purple; background: white;}H2 {color: purple;}H3 {color: white;}H2, H3 {background: green;}B {color: red; background: white;}

Agrupacin de declaraciones

Podemos agrupar declaraciones cuando tenemos diferentes reglas que definen propiedades de un mismo elemento.

Por ejemplo:

H1 {font: 18pt Helvetica;}H1 {color: purple;}H1 {background: aqua;}

Podemos redefirnirlo como:

H1 {font: 18pt Helvetica; color: purple; background: aqua;}

Los espacios en blanco sern ignorados, as que el navegador se fiar de la correcta estructura sintctica de las re#glas. Es por eso, que para una ms sencilla visualizacin, podemos escribir las reglas CSS de esta forma:

H1 {font: 18pt Helvetica;color: purple;background: aqua;

}

Es una buena prctica terminar las declaraciones siempre con punto y coma (aunque no es obligatorio). Motivos:

Te permite habituarte a terminar las declaraciones correctamente, que es uno de los errores ms comunes.

CSS prctico

8


9/25

Si decides aadir una nueva declaracin a la regla, no tiens porque preocuparte de cmo termina la anterior.

Algumos navegadores antiguos pueden confundirse cuando las reglas no se terminan adecuadamente.

Combinaciones de agrupacin de selectores y declaraciones

BODY {background: white; color: gray;}H1, H2, H3, H4, H5, H6 {font-family: Helvetica, sans-serif;color: white; background: black;}H1, H2, H3 {border: 2px solid gray; font-weight: bold;}H4, H5, H6 {border: 1px solid gray;}P, TABLE {color: gray; font-family: Times, serif;}PRE {margin: 1em; color: maroon;}

El atributo CLASSNos permite asignar estilos al documento sin preocuparnos de los elementos concretos a los que se aplicarn. Como

desventaja, est el hecho de que debemos modificar el cdigo HTML del documento, incluyendo atributos CLASSen los lugares donde queramos aplicar estilos.

En en lugar de la mancha ...

Slo nos queda definir este nuevo estilo como una regla ms de nuestro documento CSS:

.cita {font-weight: bold; color: red;}

El punto inicial es necesario para mantener la definicin de este estilo desvinculada de cualquier elemento del docu#mento. Si queremos restringir el uso de este estilo a un tipo de elemento, podemos definirlo como:

p.cita {font-weight: bold; color: red;}

El atributo IDEn cierta forma, el atributo ID es igual que CLASS. Diferencias:

La definicin de los estilos de tipo ID, estn precedidas por el carcter #, en lugar del punto.

#first-para {font-weight: bold;}

This is the first paragraph, and will be boldfaced.

El mismo atributo ID slo puede usuarse en un elemento. Debe ser nico. En la realidad, los navegadores no ha#

cen comprobaciones de este tipo y podemos utilizar el mismo valor de ID para dar estilo a mltiples elementos.

Los estilos de tipo ID tambin pueden definirse al margen de cualquier elemento, pero estas definiciones no tie#nen ningn sentido al ser sus valores nicos y no aplicables a otros elementos.

Pseudo-Clases y Pseudo-ElementosPermite la asignacin de estilos a estructuras, estados de los elementos o estados del propio documento, las cuales

CSS prctico

9


10/25

no deben estan definidas en la estructura del propio documento.

Pseudo-Clases

En el caso de los enlaces, algunos de ellos hacen referencia a pginas que ya han sido o no visitadas. No hay ningu#

na forma posible de poder formatear de forma diferente estos tipos de enlaces en HTML, para ello utilizamos unasestrucuturas virtuales que no se corresponden con ningn objeto del documento HTML, conocidas como pseudo-cla#ses.

En CSS1, hay slo tres pseudo-clases:

:link. Hace referencia a cualquier enlace no visitado de la pgina.

:visited. Hace referencia a cualquier enlace ya visitado de la pgina.

:active. Hace referencia al enlace en el que estamos haciendo click en este momento o estamos activando. EnCSS1 slo se puede definir esta propidedad sobre los enlaces, mientras que en CSS2 esta propiedad se aplica acualquier elemento.

Pseudo-Elementos

En CSS1, hay dos pseudo-elementos que son :first-letter and :first-line. Se utilizan para dar estilo a la primera letrade un elemento de bloque (un prrafo por ejemplo) y a su primera lnea respectivamente. Ejemplo:

P:first-letter {color: red;}P:first-line {color: gray;}

Restricciones en las Pseudo-Clases y los Pseudo-Elementos

Cuando aplicamos un pseudo-elemento slo podemos emplear en su definicin, los siguientes estilos:

:first-letter

propiedades de las fuentes

fondos y colores

text-decoration

vertical-align (si float es none)

text-transform

line-height

margenes

padding

bordes

float

CSS prctico

10


11/25

clear

:first-line

propiedades de las fuentes

fondos y colores

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

En CSS1, no podemos combinar una pseudo-clase y un pseudo-elemento para la misma definicin de estilo. Estocambia en CSS2, aunque la sintaxis de definicin es bastante rgida.

EstructuraLa estructura del documento es determinante para la forma en que CSS aplica los estilos al documento, sobre todoen torno a las relaciones entre padres e hijos.

Figura 4. Estructura

CSS prctico

11


12/25

El primer gran beneficio de este tipo de relaciones es el hecho de que podemos definir relaciones de contexto entrelos elementos. Por ejemplo, si queremos definir que los EM que estn dentro de un H1 sern grises, podemos aadirun atributo CLASS a cada EM que est dentro de un H1, o definir una regla como la siguiente:

H1 EM {color: gray;}

HerenciaEs la propiedad por al cual un estilo no slo se aplica a un elemento en concreto, sino que es heredado por sus des#cendientes y aplicado por estos:

H1 {color: gray;}

Meerkat Central

Debemos tener en cuenta que no todas las propiedades se heredan. Existen una serie de razones (normalmente desentido comn) por las cuales algunas propiedades no se pueden heredar, por ejemplo la definicin de bordes.

Especificidad

Hay ocasiones en las que podemos encontrarnos en la situacin de que un mismo elemento tenmltiples definicionespara ser formateado de formas distintas:

.grape {color: purple;}H1 {color: red;}

Meerkat Central

En estos casos CSS define que se debe aplicar el estilo que sea ms especfico, ejemplo de gradacin que aplicar unnavegador a la hora de aplicar los estilos:

CSS prctico

12


13/25

H1 {color: red;} /* specificity = 1 */P EM {color: purple;} /* specificity = 2 */.grape {color: purple;} /* specificity = 10 */P.bright {color: yellow;} /* specificity = 11 */P.bright EM.dark {color: brown;} /* specificity = 22 */#id216 {color: blue;} /* specificity = 100 */

Por definicin, los estilos heredados tendrn un valor de especificidad 0 y los aplicados a travs de la propiedadSTYLE, un valor superior a 100.

Importancia

Podemos marcar que ciertos estilos son ms importantes que otros, pudiendo as modificar las reglas de especifici#dad aplicadas por el navegador. Un estilo importante se define aadiendo la coletilla !important al final del mismo:

P.dark {color: #333 !important; background: white;}

Esto estilos recibirn siempre el valor de especificidad ms alto considerado por el navegador.

Como los estilos heredados tienen un valor de especificidad 0, esta definicin se mantendr aunque el estilo hereda#do contuviera la definicion !important.

Estilos en cascadaCuando hay dos reglas que tienen la misma especificidad sobre el mismo elemento:

H1 {color: red;}H1 {color: blue;}

Debemos seguir el siguiente proceso para decidir qu estilos aplicar:

1. Buscar todas las declaraciones que contengan un selector que encaje con un elemento dado.

2. Ordenar por especificidad todas las declaraciones que se aplican a este elemento. Tambin debemos ordenarlaspor su origen como: Diseador, navegante o navegador (la priorizacin sigue este orden).

3. Ordenar por orden las declaraciones. Las ltimas declaraciones tendrn un peso ms elevado. Las declaracionesobtenidas como consecuencia de un IMPORT se considerarn como las primeras teniendo as un peso menor, alcontrario de las resultantes de aplicar un STYLE que se pondrn al final de la lista con un peso ms elevado.

As el color obtenido para el elemento H1 ser azul.

Clasificacin de los elementosEn CSS1, los elementos formateados pueden agruparse en tres categoras:

Elementos de bloque. Como los prrafos, los encabezdos, las tablas, las listas, los DIV o el BODY. Son lso quefuerzan un salto de lnea al final de los mismo.

Elementos inline. Como los enlaces, el nfasis o el SPAN. Pueden ser hijos de cualquier otro elemento.

Elementos de lista. Son aquellos que en HTML slo pueden contener elementos de tipo LI. Pueden ser automti#

CSS prctico

13


14/25

camente numerados o susceptibles de tomar algn tipo de estilo que se aplique a cada uno de los tems que losdefinen.

Podemos cambiar la visualizacin de ciertos elementos mediente la propiedad display, la cual tiene las siguientescaractersticas:

Puede tomar los valores: block, inline, list-item, none (oculta el elemento).

Su valor por defecto es block.

No se hereda.

Es aplicable a todos los elementos.

Con display podemos cambiar aspectos tpicos de visualizacin que estn definidos en HTML, como el hecho deque los prrafos sean de tipo bloque:

P {display: inline;}

Pero cuando realmente se le saca partido a la propiedad display, es cuando formateamos un documento XML. Estose debe a que XML no tiene un comportamiento predefinido para los elementos que contiene.

CSS2 completa los tipos de formateos aadiendo un tratamiento especfico para tablas, filas y celdas.

Colores

Lista de colores disponibles por nombre: aqua, gray, navy, silver, black, green, olive, teal, blue, lime, purple,white, fuchsia, maroon, red, yellow. Estn tomados de los dieciseis colores bsicos que se generan como VGA.

Colores definidos mediante valores RGB. Pueden definirse como valores porcentuales entre 0 y 100 % (color:rgb(100%,80%,60%)) , o mediante valores numricos entre 0 y 255 (color: rgb(255,0,0)).

Colores definidos mediante valores hexadecimales con la estructura #RRGGBB (color: #FF0000). La notacinhexadecimal puede abreviarse cuando sus valores se repiten para cada par, como en la expresin color: #000.

Colores web-safe. Son aquellos cuya visualizacin se mantendr entre navegadores. Existen 216 de estos colo#res, los cuales se obtienen mediante incrementos del 20%, 51 unidades o 33 en hexadecimal(rgb(40%,100%,80%), rgb(0,204,153) o #669933).

UnidadesMedidas absolutas de longitud:

Pulgadas (in).

Centmetros (cm).

Milmetros (mm).

Puntos (pt). Medida tipogrfica utilizada en la definicin de las fuentes. En una pulgada hay 72 puntos(font-size: 18pt equivale a font-size: 0.25in).

CSS prctico

14


15/25

Picas (pc). Mediada tambin tipogrfica que hace corresponder una pica a 12 puntos.

Medidas relativas de longitud:

em. Se corresponde al tamao de la fuente para el parrafo en concreto al que se aplique. Si definimos que el tex#to tendr un tamao de 14 puntos, el valor de 1em ser equivalente a 14 puntos.

ex. Similar a em, pero hace corresponder el tamao actual de la fuente, al que tendra una X minscula.

En CSS2 se aaden unidades de medida adicionales como:

Valores de ngulo. Utilizado para definir la posicin desde la cual se ha originado un sonido determinado. Tene#mos tres tipos de ngulos: degrees, grados (grad) y radianes (rad).

Valores de tiempo. Utilizados para introducir retardos entre los elementos hablados de una pgina. Pueden sermilisegundos (ms) o segundos (s).

Valores de frecuencia. Define la frecuencia que los navegadores que generan voz pueden emitir.

IndentacinIndentacin de la primera lnea de un prrafo. Es una propiedad que se aplica a elementos de tipo bloque, y aceptatanto un valor de longitud, como un porcentaje:

P {text-indent: 0.25in;}

Podemos conseguir una sangra francesa, utilizando valores negativos para la indentacin:

P {text-indent: -30px;}

Ejemplo 2. Indentacin

Propiedades del texto

p.indentacion { text-indent: 0.25in; }p.indentacion_francesa { margin-left: 0.25in; text-indent: -0.25in; }

p.indentacion:first-letter, p.indentacion_francesa:first-letter {font-size: 24pt;background-color: magenta;color: white;padding: 5px;border: 1px solid navy;

}

CSS prctico

15


16/25

Texto de ejemplo sobre los valores de la indentacin.Texto de ejemplo sobre los valores de la indentacin.

Texto de ejemplo sobre los valores de la indentacin.Texto de ejemplo sobre los valores de la indentacin.

Figura 5. Indentacin

AlineacinNos permite alinear los textos dentro de elementos de bloque de las siguientes formas:

Izquierda (left).

Centrado (center).

Derecha (right).

Justificado (justify), es decir, centrado a derecha e izquierda.

Podemos utilizar el valor de "text-align: center" para reemplazar al tag CENTER que ahora es DEPRECATED:

Ejemplo 3. Alineacin


h1 { text-align: left; }h2 { text-align: right; }h3 { text-align: center; }

Alineacin izquierdaAlineacin derechaAlineacin centrada

CSS prctico

16


17/25

Figura 6. Alineacin

Espacios en blancoSe define mediante la propiedad "white-space", la cual puede tomar los siguientes valores:

pre. Cuando queremos que se tome literalemente los escrito, incluyendo todos y cada uno de los espacios enblanco.

nowrap. Permite que se conserve todo el texto definido sin aplicar ningn salto de lnea forzado por algn ele#mento del documento. Es el sustituto del tpico .

normal. Valor por defecto para la definicin de espacios en blanco, la cual no aplica ninguna consideracin es#

pecial sobre el texto.

Ejemplo 4. Espacios en blanco


p { width: 300px; }

p.libre { white-space: pre; }p.sinsaltos { white-space: nowrap; }

p.normal { white-space: normal; }

Texto con distintas representacion de espaciosen blanco para ver su comportamiento.

Texto con distintas representacion de espacios

CSS prctico

17


18/25

en blanco para ver su comportamiento.

Texto con distintas representacion de espaciosen blanco para ver su comportamiento.

Figura 7. Espacios en blanco

Anchura de lneasDefine la distancia entre las lneas base de dos lneas de texto. En resumen, esta propiedad permite aumentar o dis#minuir la distancia vertical entre dos lneas de texto. Esta distancia pude expresarse con medidas relativa (em, ex),valores absolutos (cm, in, px) o porcentajes directamente.


p { width: 300px; }

p.normal { line-height: 14pt; }p.grande { line-height: 150%; }p.xgrande { line-height: 200%; }

Texto con distintas medidas entre lneas para versu comportamiento en prrafos de texto.



CSS prctico

18


19/25

Figura 8. Anchura de lneas

Alineacin verticalPermite cualquier tipo de alineacin vertical, pero no est pensado para ser el equivalente a la propiedad "valign" deHTML en celdas. Puede tomar los siguientes valores:

baseline. Es el comportamiento tpico de los navegadores, el cual permite alinear el texto del prrafo a la lnea

base de cada lnea de texto.

Figura 9. Alineacin vertical 1

sub/super. Permite la definicin de subndice y superndices.

CSS prctico

19


20/25



bottom. Alinea los elementos a la parte inferior del espacio definido entre las lneas, pegndolo al mximo a lazona inferior.

text-bottom. La alineacin se hace sobre la lnea del texto, la cual es un poco ms baja que la lnea base.


CSS prctico

20


21/25

top. Mismo comportamiento que bottom, pero alineando a la parte superior.

text-top. Mismo comportamiento que bottom, pero alineando a la parte superior.


CSS prctico

21


22/25

middle. Centrado en el espacio definido entre las lneas.


porcentajes. Podemos incluso definir la posicin exacta de alineacin mediante valores porcentuales.


Espacio entre palabrasSe define mediante la propiedad "word-spacing" y puede tomar los valores "normal" (equivalente a cero) o un valornumrico.


Prueba de espaciado de palabras en un parrafo.


CSS prctico

22


23/25




Figura 16. Espacio entre palabras

Espacio entre letras

Idntico al espaciado entre palabras, pero aplicado a los caracteres que forman cada palabra. Su propiedad asociadaes "letter-spacing".

Transformaciones del textoPermiten modificaciones en la presentacin de las cadenas de texto mediante la propiedad "text-transform", la cualpuede tomar alguno de los siguientes valores:

uppercase. Todo el texto se transformar a maysculas.

lowercase. Todo el texto se transformar a minsculas.

capitalize. Convierta a mayscula la primera letra de cada palabra.

none. No se realizar ninguna transformacin sobre el texto.


p { font-size: 200%; font-weight: bold;}

CSS prctico

23


24/25

Prueba de transformacin



Figura 17. Transformaciones del texto

Decoracin del textoAade a las cadenas de texto cierto formato mediante el uso de la propiedad "text-decoration", la cual puede tomaruno de los siguientes valores:

underline. Subraya el texo asociado.

overline. Dibuja un lnea sobre el texto asociado. Es como un subrayado, pero sobre la parte superior del texto.

line-through. Tacha el texto asociado dibujando una lnea sobre el mismo.

blink. Hace que el texto asociado parpadee.

none. No aplica ningn elemento decorativo al texto.


p { font-size: 200%; font-weight: bold;}

CSS prctico

24


25/25

Prueba de decoracin del texto



Prueba de decoracin del texto (este est parpadeando :)

Figura 18. Decoracin del texto

CSS prctico

25

css práctico

Documents