Curso de Cascade Style Sheet (CSS) PDF

Curso de Cascade Style Sheet
Manual del alumno
<CSS>
Versin 1.0
www.detodoprogramacion.com
Curso de Cascade Style Sheet CSS
Pagina 2 / 26
ndice de contenido
1. Introduccin al curso..............................................................................................................................3 1.1. Objetivo de este curso...................................................................................................................3 1.2. Manual del alumno.........................................................................................................................3 1.3. Ejercicios prcticos........................................................................................................................3 1.4. Requisitos para atender a este curso.............................................................................................3 1.5. Soporte despus del curso.............................................................................................................3 2. Introduccin...........................................................................................................................................4 3. El tag LINK............................................................................................................................................6 4. Hojas de estilos alternativas..................................................................................................................7 5. La directiva @import..............................................................................................................................8 6. Reglas bsicas......................................................................................................................................9 7. Agrupacin de selectores y declaraciones...........................................................................................10 8. Atributos CLASS y ID...........................................................................................................................12 8.1. CLASS.........................................................................................................................................12 8.2. ID.................................................................................................................................................12 9. Pseudo-Clases y Pseudo-Elementos...................................................................................................13 10. Estructura..........................................................................................................................................14 11. Especificidad......................................................................................................................................15 12. Estilos en cascada.............................................................................................................................16 13. Colores y unidades............................................................................................................................17 13.1. Colores.......................................................................................................................................17 13.2. Unidades....................................................................................................................................17 Medidas absolutas de longitud:......................................................................................................17 Medidas relativas de longitud:........................................................................................................17 14. Indentacin........................................................................................................................................18 15. Margenes...........................................................................................................................................19 15.1. Introduccin...............................................................................................................................19 15.2. Margin........................................................................................................................................19 15.3. Padding......................................................................................................................................20 16. Alineacin..........................................................................................................................................21 17. Espacios en blanco............................................................................................................................22 18. Anchura de lneas..............................................................................................................................23 19. Espacio entre palabras......................................................................................................................24 20. Transformaciones del texto................................................................................................................25 21. Decoracin del texto..........................................................................................................................26
Versin 1.0
Curso de Cascade Style Sheet (CSS)
Pagina 3 / 26
1. Introduccin al curso
1.1. Objetivo de este curso
En este curso vamos a aprender el uso de hojas de estilo, que nos permitir crear pginas web mas atractivas.
1.2. Manual del alumno

Este manual del alumno es una ayuda para el alumno, para tenga un recuerdo del curso. Este manual contiene un resumen de las materias que se van a estudiar durante el curso, pero el alumno debera de tomar notas personales para completas este manual.
1.3. Ejercicios prcticos

Para captar mejor la teora, se harn muchos ejercicios con los alumnos, para probar la teora y verificar la integracin de la materia. Tambin, el alumno podr copiar sus cdigos en una memoria flash al fin del curso para llevarse, con fin de seguir la prctica en su hogar.
1.4. Requisitos para atender a este curso

El conocimiento del lenguaje HTML es requerido para poder atender a este curso. Si el alumno tiene dificultades en un u otro capitulo, el debe sentirse libre de pedir explicaciones adicionales al profesor. Pero si aparece que el alumno no posee los requisitos mnimos para este curso, por respeto a los otros alumnos que ya poseen esta materia, el alumno podra ser traslado para otro curso en el futuro, cuando el cumplir con los requisitos.
Versin 1.0
Pagina 4 / 26
2. Introduccin
CSS son las siglas de "Cascade Style Sheet". Se trata de una especificacin sobre los estilos fsicos aplicables a un documento HTML, y trata de dar la separacin definitiva de la lgica (estructura) y el fsico (presentacin) del documento. En este curso veremos algunos conceptos bsicos de cmo aplicar este lenguaje para definir estilos. En los orgenes de la Web y en sus primeras versiones, HTML era un lenguaje fcil de aprender y muy reducido en cuanto a sus tags y estructura. Estamos hablando de los aos 1990 al 1993. Todo cambi cuando empezaron a surgir los 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 contemplaba. El objetivo era construir sitios web cada vez ms atractivos visualmente hablando, con lo que HTML deba incluir 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 sido "orientado a la estructura", ahora estaba totalmente "orientado a la visualizacin" (HTML 4 es la ms viva representacin de esta realida). Encontramos tags com <B>, <U> o <I> que definen estilos de visualizacin sin aportar nada a la estructura del documento representados. Otro aspecto importante y que condiciona totalmente la estructura del documento es el uso del tag FONT. Con el uso de este tag podemos hacer que una zona que corresponde a la cabecera o ttulo de una pgina, y que debera expresarse con un H1, pase ahora a estar definida mediante el tag FONT. Con este cambio se pierder totalmente la estructura del documento. La realidad ahora es que el mayor nmero de los sites realizados con HTML 4 consiguen que el volumen de informacin de visualizacin sea muy superior al de la informacin verdaderamente relevante. Esto parece, cuanto menos precoupante. Motivos por los que no podemos permitir que nuestros documentos publicados en la web pierdan su estructura: 1. La indexacin por los buscadores es mucho ms complicada (Google asigna un peso mucho mayor a una pgina que utliza H1 para definir sus secciones, que a los campos META del documento). 2.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 a una pgina sin una mnima estructuracin, el resultado puede ser lamentable. 3.La estructura de la pgina y la informacin contenida en la misma es mucho ms sencilla de mantener. Actualmente, ciertos aspectos del cdigo HTML pueden hacer que una misma pgina tenga visualizaciones distintas en distintos navegadores. Estos herrores de diseo son dificilmente depurables cuando la pgina contiene una estructura de tags complicada y sin ninguna estructuracin. Por otra parte, un cambio en un tipo de fuente supone el 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.
Versin 1.0
Pagina 5 / 26
Principales caractersticas aportadas por CSS en contraposicin a los elementos de visualizacin presentes en la especificacin de HTML 4: 1.Estilo enriquecido. CSS permite la creacin de documentos visualmente mucho ms ricos que lo que HTML nunca permitir. No en vano CSS est pensado nica y exclusivamente para asistir al diseador a la hora de dar estilo a un documento estrucuturado. 2.Fcil de utilizar. La utilizacin de hojas de estilo CSS hace que el diseador pueda reducir sustancialmente su carga de trabajo al disear todo un site. Esto se debe a que CSS es capaz de centralizar ciertos efectos visuales que plasmemos en diversas secciones del site, en lugar de tenerlos diseminados por pginas y pginas del sitio. 3.Reutilizacin en mltiples pginas. Una hoja de estilo que recoja aspectos visuales comunes a varias pginas puede ser reutilizada en cualquier seccin del site aprovechando dichos efectos ya definidos. De esta manera es sencillo generar un estilo general del web y mantenerlo as consistente para todas las pginas. As, si deseamos modificar 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). 4.Reduce el tamao del cdigo HTML enviado. Al centralizar los estilos ya no es necesario la utilizacin de tags como FONT en todos los documentos del site. De esta manera se reduce considerablemente el tiempo en que tarda en cargarse el cdigo de una pgina. 5.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 sern eliminados 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 aproximacis es el lenguaje de marcas XHTML.
Versin 1.0
Pagina 6 / 26
3. El tag LINK
Veamos un ejemplo de tag link
<link rel="stylesheet" type="text/css" href="estilos.css" title="default">
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 puede haber en el mismo documento ms de un tag LINK. En el caso de que haya ms de un tag LINK, slo aquellos cuyo valor de REL sea "stylesheet" se aplicarn inicialmente al documento:
<link rel="stylesheet" type="text/css" href="basic.css"> <link rel="stylesheet" type="text/css" href="splash.css">
El navegador cargar ambas hojas de estilo, combinando las reglas que definen y aplicando el resultado al documento.
Versin 1.0
Pagina 7 / 26
4. Hojas de estilos alternativas

Es de especial utilidad hacer uso del tag TITLE, cuando definimos hojas de estilo alternativas. En el siguiente ejemplo se definen tres hojas de estilo dentro del mismo documento de forma que: 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 su identificacin.
<link rel="stylesheet" type="text/css" href="fija.css" title="default"> <link rel="alternate stylesheet" type="text/css" href="alternativa1.css" title="Vista de impresin"> <link rel="alternate stylesheet" type="text/css" href="alternativa2.css" title="Vista decorada">
El tag STYLE.- permite dos tipos de tratamiento: 1.Definir estilos que se aplicarn al tag en que se ubique, sin necesidad de definirlos en el HEAD del documento. 2.Definir una hoja de estilo completa en el HEAD sin que esta se almacene en un fichero externo. Siempre debe hacer uso del atributo TYPE. Contiene estilos que se aplicarn al documento, pero tambin puede contener mltiples enlaces a hojas de estilo externas definidas con la directiva @import.
Versin 1.0
Pagina 8 / 26
5. La directiva @import
La nica diferencia con el tag LINK es su sintaxis y el lugar donde puede utlizarse. La directiva @import slo puede utilizarse dentro de una regin STYLE en el HEAD de la pgina. Adems, estas directivas deben definirse antes de cualquier regla CSS que contenga esta regin STYLE.
<style type="text/css"> @import url(externo.css); h1 {color: gray;} </style>
Con la directiva @import no podemos definir hojas de estilos alternativas, y en algunos navegadores no se cachea estos contenidos. Comentarios en CSS.- Podemos definir comentarios dentro de un fichero CSS haciendo uso de una sintaxis muy similar a la C/C++, es decir, se considerar un comentario cualquier seccin del documento que comience con /* y termine con */.
Versin 1.0
Pagina 9 / 26
6. Reglas bsicas
Con CSS podemos aplicar reglas de estilo a un tipo determinado de elementos dentr del documento HTML, as podemos podemos conseguir el mismo efecto que utilizando el marcado tradicional:
<h2><font color="red">Texto de prueba</font></h2>
Pero con el mnimo esfuerzo:

H2 {color: red;}
A esta expresin se la denomina "regla", y esta en concreto, permite poner en rojo los elementos de tipo h2. Estructura de las reglas.- Cada regla tiene dos partes: 1.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 selector 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;}
2.La "declaracin": adems, la declaracin se compone de una lista de parejas "propiedad : valor" separadas por punto y coma, que se corresponden con propiedades vlidas dentro de la especificacin CSS. Motivos por los que 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 depende de la implementacin del navegador (aunque la mayora son bastante tolerantes con los errores en el cdigo CSS).
Si la definicin del valor de una propiedad permite el uso de ms de una palabra, estas estarn separadas por espacios en blanco. Adems existen unos poco ejemplos en los que se pueden utilizar otros tipo de elementos dentro de la 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.
Versin 1.0
Pagina 10 / 26
7. Agrupacin de selectores y declaraciones

Normalmente, se da el caso en que dos elementos del documento HTML comparten la definicin de la misma propiedad CSS. Estos elementos podemos declararlos de una forma extendida:
H1 H2 H3 H4 H5 H6 {color: {color: {color: {color: {color: {color: purple;} purple;} purple;} purple;} purple;} 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 reglas. 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;
Versin 1.0
Pagina 11 / 26
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. -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;}
Versin 1.0
Pagina 12 / 26
8. Atributos CLASS y ID
8.1. CLASS
El atributo CLASS nos 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 CLASS en los lugares donde queramos aplicar estilos.
<p class="cita">En en lugar de la mancha ...</p>
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 documento. Si queremos restringir el uso de este estilo a un tipo de elemento, podemos definirlo como:
p.cita {font-weight: bold; color: red;}
8.2. ID
El atributo ID en cierta forma, 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;}<P ID="first-para">This is the first paragraph, and will be boldfaced.</P>
El mismo atributo ID slo puede usarse en un elemento. Debe ser nico. En la realidad, los navegadores no hacen 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 tienen ningn sentido al ser sus valores nicos y no aplicables a otros elementos.
Versin 1.0
Pagina 13 / 26
9. Pseudo-Clases y Pseudo-Elementos
Permite la asignacin de estilos a estructuras, estados de los elementos o estados del propio documento, las cuales 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 ninguna forma posible de poder formatear de forma diferente estos tipos de enlaces en HTML, para ello utilizamos unas estrucuturas virtuales que no se corresponden con ningn objeto del documento HTML, conocidas como pseudo-clases. 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. En CSS1 slo se puede definir esta propidedad sobre los enlaces, mientras que en CSS2 esta propiedad se aplica a cualquier elemento. Pseudo-Elementos.- En CSS1, hay dos pseudo-elementos que son :first-letter y :first-line. Se utilizan para dar estilo a la primera letra de 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: 1.first-letter -propiedades de las fuentes -fondos y colores -text-decoration -vertical-align (si float es none) -text-transform -line-height -mrgenes -padding -bordes -float -clear 2.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. Esto cambia en CSS2, aunque la sintaxis de definicin es bastante rgida.
Versin 1.0
Pagina 14 / 26
10. Estructura
La estructura del documento es determinante para la forma en que CSS aplica los estilos al documento, sobre todo en torno a las relaciones entre padres e hijos.
El primer gran beneficio de este tipo de relaciones es el hecho de que podemos definir relaciones de contexto entre los elementos. Por ejemplo, si queremos definir que los EM que estn dentro de un H1 sern grises, podemos aadir un atributo CLASS a cada EM que est dentro de un H1, o definir una regla como la siguiente:
H1 EM {color: gray;}
Herencia.- Es la propiedad por al cual un estilo no slo se aplica a un elemento en concreto, sino que es heredado por sus descendientes y aplicado por estos:
H1 {color: gray;} <H1>Meerkat <EM>Central</EM></H1>
Debemos tener en cuenta que no todas las propiedades se heredan. Existen una serie de razones (normalmente de sentido comn) por las cuales algunas propiedades no se pueden heredar, por ejemplo la definicin de bordes.
Versin 1.0
Pagina 15 / 26
11. Especificidad
Hay ocasiones en las que podemos encontrarnos en la situacin de que un mismo elemento tenmltiples definiciones para ser formateado de formas distintas:
.grape {color: purple;} H1 {color: red;} <H1 CLASS="grape">Meerkat <EM>Central</EM></H1>
En estos casos CSS define que se debe aplicar el estilo que sea ms especfico, ejemplo de gradacin que aplicar un navegador a la hora de aplicar los estilos:
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 propiedad STYLE, un valor superior a 100. Importancia.- Podemos marcar que ciertos estilos son ms importantes que otros, pudiendo as modificar las reglas de especificidad 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.
Versin 1.0
Pagina 16 / 26
12. Estilos en cascada

Cuando 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 ordenarlas por 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 declaraciones obtenidas como consecuencia de un IMPORT se considerarn como las primeras teniendo as un peso menor, al contrario 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 elementos.- En 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 que fuerzan 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 automticamente numerados o susceptibles de tomar algn tipo de estilo que se aplique a cada uno de los tems que los definen. Podemos cambiar la visualizacin de ciertos elementos mediante la propiedad display, la cual tiene las siguientes caractersticas: -Puede tomar los valores: block, inline, list-item, none (oculta el elemento). -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 de que 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. Esto se 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.
Versin 1.0
Pagina 17 / 26
13. Colores y unidades

13.1. 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 notacin hexadecimal 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 colores, los cuales se obtienen mediante incrementos del 20%, 51 unidades o 33 en hexadecimal (rgb(40%,100%,80%), rgb(0,204,153) o #669933).
13.2. Unidades
Medidas 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). -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 texto 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. Tenemos 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 ser milisegundos (ms) o segundos (s). Valores de frecuencia: define la frecuencia que los navegadores que generan voz pueden emitir.
Versin 1.0
Pagina 18 / 26
14. Indentacin
Indentacin de la primera lnea de un prrafo. Es una propiedad que se aplica a elementos de tipo bloque, y acepta tanto 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 :
<html> <head> <title>Propiedades del texto</title> <style> 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; } </style> </head> <body> <p class="indentacion"> Texto de ejemplo sobre los valores de la indentación. Texto de ejemplo sobre los valores de la indentación. </p> <p class="indentacion_francesa"> Texto de ejemplo sobre los valores de la indentación. Texto de ejemplo sobre los valores de la indentación. </p> </body> </html>
Versin 1.0
Pagina 19 / 26
15. Margenes
15.1. Introduccin
Hay dos propiedades que establecen la separacin de los elementos: margin y padding. Si bien parecen lo mismo porque a veces no notamos ninguna diferencia entre usar una u otra, no lo son. Podramos decir que margin es la separacin de un elemento de otro y padding es el relleno, la separacin entre un elemento y aquel que lo contiene Confuso? Ciertamente, lo es.
Veamos la sintaxis de las propiedades ya que son sencillas.
15.2. Margin
margin es una forma reducida de establecer la separacin de los cuatro bordes al mismo tiempo. sintaxis en HTML
elemento {margin: valores;}
por ejemplo:
div {margin: 2px 0 10px 5px;}
Donde el orden de los valores es: arriba, izquierda, derecha, abajo y, cada una de ellos puede ser especificad por separado. La propiedad margin-bottom establece el margen inferior; margin-right el margen derecho; marginbottom el margen inferior y margin-left el margen izquierdo. sintaxis en HTML
elemento elemento elemento elemento {margin-top: valor;} {margin-roght: valor;} {margin-bottom: valor;} {margin-left: valor;}
por ejemplo:
div {margin-left: 5px;}
Versin 1.0
Pagina 20 / 26
Nota: * Si slo de especifica un valor, este se aplica a los cuatro lados. * Si se especifican dos valores, el primero se aplica a los mrgenes superior e inferior y el segundo a los mrgenes derecho e izquierdo. * Si se especifican tres valores, el primero se aplica al margen superior, el segundo a los mrgenes derecho e izquierdo y el tercero al margen inferior. * Si establecemos cuatro valores, definirn los mrgenes superior, derecho, inferior e izquierdo respectivamente. Los valores los separamos mediante espacios; por ejemplo: div {margin: 10px 20px;} En los llamados elementos inline, los mrgenes superior e inferior no tienen efectos prcticos.
15.3. Padding
La propiedad padding es una forma reducida de establecer el "relleno" de los cuatro lados al mismo tiempo y tiene la misma sintaxis que margin. sintaxis en HTML
elemento elemento elemento elemento elemento {padding: valores;} {padding-top: valor;} {padding-right: valor;} {padding-bottom: valor;} {padding-left: valor;} por ejemplo: div {padding-left: 5px;}
El padding o relleno, es la cantidad de espacio a insertar entre el objeto y su margen o, si hay un borde (propiedad border) la distancia entre el objeto y el borde. Sigue todas las reglas que los mrgenes excepto que slo se pueden usar valores positivos. Por ejemplo:
div {padding: 50px 10px 20px 30px}
Cada elemento de una pgina web es un rectngulo que tiene un contenido (textos, imgenes, etc.) y una serie de reas opcionales a su alrededor (border, margin y padding) por lo tanto, el tamao final depende de todas y cada una de esas propiedades aunque tambin depende de si han asignadas otras propiedades como width y height, si contiene texto u otros elementos, si es una tabla, si ... etc. En trmimos generales, el ancho es la suma de los mrgenes, los bordes y los rellenos izquierdos y derechos ms el ancho del contenido y la altura es la suma de los mrgenes, lso bordes y los rellenos superiores e inferiores ms la altura del contenido.
Versin 1.0
Pagina 21 / 26
16. Alineacin
Nos 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:
<html> <head> <title>Propiedades del texto</title> <style> h1 { text-align: left; } h2 { text-align: right; } h3 { text-align: center; } </style> </head> <body> <h1>Alineacin izquierda</h1> <h2>Alineacin derecha</h2> <h3>Alineacin centrada</h3> </body> </html>
Versin 1.0
Pagina 22 / 26
17. Espacios en blanco

Se 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 en blanco.
nowrap. Permite que se conserve todo el texto definido sin aplicar ningn salto de lnea forzado por algn elemento del documento. Es el sustituto del tpico <TD nowrap>.
normal. Valor por defecto para la definicin de espacios en blanco, la cual no aplica ninguna consideracin especial sobre el texto. Como las explicaciones includas en el estndar CSS 2.1 pueden llegar a ser confusas, la siguiente tabla resume el comportamiento de cada valor: Respeta espacios en blanco no pre si nowrap no pre-wrap si pre-line no Valor Respeta saltos de lnea no si no si si Ajusta las lneas si no no si si
normal
Ejemplo:
<html> <head> <title>Propiedades del texto</title> <style> p { width: 300px; } p.libre { white-space: pre; } p.sinsaltos { white-space: nowrap; } p.normal { white-space: normal; } </style> </head> <body> <p class="libre"> Texto con distintas representacion de espacios en blanco para ver su comportamiento. </p> <p class="sinsaltos"> Texto con distintas representacion de espacios en blanco para ver su comportamiento. </p> <p class="normal"> Texto con distintas representacion de espacios en blanco para ver su comportamiento. </p> </body> </html>
Versin 1.0
Pagina 23 / 26
18. Anchura de lneas

Define la distancia entre las lneas base de dos lneas de texto. En resumen, esta propiedad permite aumentar o disminuir 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. Ejemplo <html> <head> <title>Propiedades del texto</title> <style> p { width: 300px; } p.normal { line-height: 14pt; } p.grande { line-height: 150%; } p.xgrande { line-height: 200%; } </style> </head> <body> <p class="normal"> Texto con distintas medidas entre lneas para ver su comportamiento en párrafos de texto. </p> <p class="grande"> Texto con distintas medidas entre lneas para ver su comportamiento en párrafos de texto. </p> <p class="xgrande"> Texto con distintas medidas entre lneas para ver su comportamiento en párrafos de texto. </p> </body> </html>
Versin 1.0
Pagina 24 / 26
19. Espacio entre palabras

Se define mediante la propiedad "word-spacing" y puede tomar los valores "normal" (equivalente a cero) o un valor numrico.
Ejemplo: <html> <head> <title>Propiedades del texto</title> </head> <body> <p style="word-spacing: normal;"> Prueba de espaciado de palabras en un </p> <p style="word-spacing: 0;"> Prueba de espaciado de palabras en un </p> <p style="word-spacing: 1em;"> Prueba de espaciado de palabras en un </p> <p style="word-spacing: 2em;"> Prueba de espaciado de palabras en un </p> <p style="word-spacing: -1em;"> Prueba de espaciado de palabras en un </p> </body> </html>
parrafo. parrafo. parrafo. parrafo. parrafo.
Espacio entre letras.- Idntico al espaciado entre palabras, pero aplicado a los caracteres que forman cada palabra. Su propiedad asociada es "letter-spacing".
Versin 1.0
Pagina 25 / 26
20. Transformaciones del texto

Permiten modificaciones en la presentacin de las cadenas de texto mediante la propiedad "texttransform", la cual puede 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. Ejemplo: <html> <head> <title>Propiedades del texto</title> <style> p { font-size: 200%; font-weight: bold;} </style> </head> <body> <p style="text-transform: uppercase;"> Prueba de transformación </p> <p style="text-transform: lowercase;"> Prueba de transformación </p> <p style="text-transform: capitalize;"> Prueba de transformación </p> </body> </html>
Versin 1.0
Pagina 26 / 26
21. Decoracin del texto

Aade a las cadenas de texto cierto formato mediante el uso de la propiedad "text-decoration", la cual puede tomar uno de los siguientes valores:
underline: subraya el texto 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. Ejemplo: <html> <head> <title>Propiedades del texto</title> <style> p { font-size: 200%; font-weight: bold;} </style> </head> <body> <p style="text-decoration: underline;"> Prueba de decoracin del texto </p> <p style="text-decoration: overline;"> Prueba de decoración del texto </p> <p style="text-decoration: line-through;"> Prueba de decoración del texto </p> <p style="text-decoration: blink;"> Prueba de decoración del texto (este est parpadeando :) </p> </body> </html>
Versin 1.0

Curso de Cascade Style Sheet (CSS) PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso de Cascade Style Sheet (CSS) PDF

Cargado por

Copyright:

Formatos disponibles

Curso de Cascade Style Sheet

Manual del alumno

Curso de Cascade Style Sheet CSS

Curso de Cascade Style Sheet (CSS)

1.2. Manual del alumno

1.3. Ejercicios prcticos

1.4. Requisitos para atender a este curso

Curso de Cascade Style Sheet CSS

Curso de Cascade Style Sheet (CSS)

Curso de Cascade Style Sheet CSS

Curso de Cascade Style Sheet (CSS)

4. Hojas de estilos alternativas

Curso de Cascade Style Sheet CSS

Curso de Cascade Style Sheet (CSS)

Pero con el mnimo esfuerzo:

Curso de Cascade Style Sheet CSS

7. Agrupacin de selectores y declaraciones

Otros ejemplos de estructuras de agrupacin que son equivalentes:

Podemos redefirnirlo como:

Curso de Cascade Style Sheet (CSS)

Curso de Cascade Style Sheet CSS

Curso de Cascade Style Sheet (CSS)

Curso de Cascade Style Sheet CSS

Curso de Cascade Style Sheet (CSS)

Curso de Cascade Style Sheet CSS

12. Estilos en cascada

Curso de Cascade Style Sheet (CSS)

13. Colores y unidades

Medidas relativas de longitud:

Curso de Cascade Style Sheet CSS

Curso de Cascade Style Sheet (CSS)

Veamos la sintaxis de las propiedades ya que son sencillas.

Curso de Cascade Style Sheet CSS

Curso de Cascade Style Sheet (CSS)

Curso de Cascade Style Sheet CSS

17. Espacios en blanco

Curso de Cascade Style Sheet (CSS)

18. Anchura de lneas

Curso de Cascade Style Sheet CSS

19. Espacio entre palabras

parrafo. parrafo. parrafo. parrafo. parrafo.

Curso de Cascade Style Sheet (CSS)

20. Transformaciones del texto

Curso de Cascade Style Sheet CSS

21. Decoracin del texto

También podría gustarte