SolucionJava.comIng. Cedric Simon – Tel: 2268 0974 – Cel: 8888 2387 – Email: c e d r i c @ s o l u c i o n j a v a . c o m...
Curso de Cascade Style Sheet – CSS                                                                                        ...
Curso de Cascade Style Sheet (CSS)                                                                Pagina 3 / 26           ...
Curso de Cascade Style Sheet – CSS                                                             Pagina 4 / 26              ...
Curso de Cascade Style Sheet (CSS)                                                            Pagina 5 / 26Principales car...
Curso de Cascade Style Sheet – CSS                                                              Pagina 6 / 26             ...
Curso de Cascade Style Sheet (CSS)                                                              Pagina 7 / 26             ...
Curso de Cascade Style Sheet – CSS                                                             Pagina 8 / 26              ...
Curso de Cascade Style Sheet (CSS)                                                             Pagina 9 / 26              ...
Curso de Cascade Style Sheet – CSS                                                            Pagina 10 / 26              ...
Curso de Cascade Style Sheet (CSS)                                                        Pagina 11 / 26}Es una buena prác...
Curso de Cascade Style Sheet – CSS                                                                 Pagina 12 / 26         ...
Curso de Cascade Style Sheet (CSS)                                                          Pagina 13 / 26      9. Pseudo-...
Curso de Cascade Style Sheet – CSS                                                           Pagina 14 / 26               ...
Curso de Cascade Style Sheet (CSS)                                                            Pagina 15 / 26              ...
Curso de Cascade Style Sheet – CSS                                                           Pagina 16 / 26               ...
Curso de Cascade Style Sheet (CSS)                                                              Pagina 17 / 26            ...
Curso de Cascade Style Sheet – CSS                                                          Pagina 18 / 26                ...
Curso de Cascade Style Sheet (CSS)                                                          Pagina 19 / 26                ...
Curso de Cascade Style Sheet – CSS                                                             Pagina 20 / 26Nota:   * Si ...
Curso de Cascade Style Sheet (CSS)                                                       Pagina 21 / 26                   ...
Curso de Cascade Style Sheet – CSS                                                              Pagina 22 / 26            ...
Curso de Cascade Style Sheet (CSS)                                                           Pagina 23 / 26               ...
Curso de Cascade Style Sheet – CSS                                                           Pagina 24 / 26               ...
Curso de Cascade Style Sheet (CSS)                                                      Pagina 25 / 26                20. ...
Curso de Cascade Style Sheet – CSS                                                         Pagina 26 / 26                 ...
Upcoming SlideShare
Loading in …5
×

Curso de css

324 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
324
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Curso de css

  1. 1. SolucionJava.comIng. Cedric Simon – Tel: 2268 0974 – Cel: 8888 2387 – Email: c e d r i c @ s o l u c i o n j a v a . c o m – Web: www.solucionjava.com Cascade Style Sheet Manual del alumno <CSS> Curso de Versión 1.0
  2. 2. Curso de Cascade Style Sheet – CSS Pagina 2 / 26Índice de contenido1. Introducción al curso..............................................................................................................................3 1.1. Objetivo de este curso...................................................................................................................3 1.2. Manual del alumno.........................................................................................................................3 1.3. Ejercicios prácticos........................................................................................................................3 1.4. Requisitos para atender a este curso.............................................................................................3 1.5. Soporte después del curso.............................................................................................................32. Introducción...........................................................................................................................................43. El tag LINK............................................................................................................................................64. Hojas de estilos alternativas..................................................................................................................75. La directiva @import..............................................................................................................................86. Reglas básicas......................................................................................................................................97. Agrupación de selectores y declaraciones...........................................................................................108. Atributos CLASS y ID...........................................................................................................................12 8.1. CLASS.........................................................................................................................................12 8.2. ID.................................................................................................................................................129. Pseudo-Clases y Pseudo-Elementos...................................................................................................1310. Estructura..........................................................................................................................................1411. Especificidad......................................................................................................................................1512. Estilos en cascada.............................................................................................................................1613. Colores y unidades............................................................................................................................17 13.1. Colores.......................................................................................................................................17 13.2. Unidades....................................................................................................................................17 Medidas absolutas de longitud:......................................................................................................17 Medidas relativas de longitud:........................................................................................................1714. Indentación........................................................................................................................................1815. Margenes...........................................................................................................................................19 15.1. Introducción...............................................................................................................................19 15.2. Margin........................................................................................................................................19 15.3. Padding......................................................................................................................................2016. Alineación..........................................................................................................................................2117. Espacios en blanco............................................................................................................................2218. Anchura de líneas..............................................................................................................................2319. Espacio entre palabras......................................................................................................................2420. Transformaciones del texto................................................................................................................2521. Decoración del texto..........................................................................................................................26 Versión 1.0
  3. 3. Curso de Cascade Style Sheet (CSS) Pagina 3 / 26 1. Introducción al curso1.1. Objetivo de este cursoEn este curso vamos a aprender el uso de hojas de estilo, que nos permitirá crear páginas web masatractivas.1.2. Manual del alumnoEste manual del alumno es una ayuda para el alumno, para tenga un recuerdo del curso. Este manualcontiene un resumen de las materias que se van a estudiar durante el curso, pero el alumno debería detomar notas personales para completas este manual.Este manual es una versión adaptada del manual CSS Practico escrito por Ricardo Borillo y publicadoen www.mailxmail.com1.3. Ejercicios prácticosPara captar mejor la teoría, se harán muchos ejercicios con los alumnos, para probar la teoría y verificarla integración de la materia.También, el alumno podrá copiar sus códigos en una memoria flash al fin del curso para llevarse, con finde seguir la práctica en su hogar.1.4. Requisitos para atender a este cursoEl 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 explicacionesadicionales al profesor.Pero si aparece que el alumno no posee los requisitos mínimos para este curso, por respeto a los otrosalumnos que ya poseen esta materia, el alumno podría ser traslado para otro curso en el futuro, cuandoel cumplirá con los requisitos.1.5. Soporte después del cursoSi tienes preguntas sobre la materia del curso en tus ejercicios prácticos, puedes escribir tuspreguntas a cedric@solucionjava.com .Para informaciones sobre otros cursos, visita el sitio web www.solucionjava.com. Versión 1.0
  4. 4. Curso de Cascade Style Sheet – CSS Pagina 4 / 26 2. IntroducciónCSS son las siglas de "Cascade Style Sheet". Se trata de una especificación sobre los estilos físicosaplicables a un documento HTML, y trata de dar la separación definitiva de la lógica (estructura) y elfísico (presentación) del documento.En este curso veremos algunos conceptos básicos de cómo aplicar este lenguaje para definir estilos.En los orígenes de la Web y en sus primeras versiones, HTML era un lenguaje fácil de aprender y muyreducido en cuanto a sus tags y estructura. Estamos hablando de los años 1990 al 1993. Todo cambiócuando empezaron a surgir los primeros navegadores que eran capaces de representar recursosgráficos como añadido a la información textual.Así, el número de sitios web comenzó a crecer y con él, el número de tags que la especificación HTMLcontemplaba. El objetivo era construir sitios web cada vez más atractivos visualmente hablando, con loque HTML debía incluir nuevos tags destinados a conseguir diversos efectos visuales.Con todos estos cambios que la web había sufrido, nos encontramos con que un lenguaje que en susinicios había sido "orientado a la estructura", ahora estaba totalmente "orientado a la visualización"(HTML 4 es la más viva representación de esta realida). Encontramos tags com <B>, <U> o <I> quedefinen estilos de visualización sin aportar nada a la estructura del documento representados.Otro aspecto importante y que condiciona totalmente la estructura del documento es el uso del tagFONT. Con el uso de este tag podemos hacer que una zona que corresponde a la cabecera o título deuna página, y que debería 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 número de los sites realizados con HTML 4 consiguen que elvolumen de información de visualización sea muy superior al de la información verdaderamenterelevante. Esto parece, cuanto menos precoupante.Motivos por los que no podemos permitir que nuestros documentos publicados en la web pierdan suestructura: 1. La indexación por los buscadores es mucho más complicada (Google asigna un peso mucho mayor a una página 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 páginas web como ayuda a los discapacitados (persona ciegas o con otras discapacidades). Si una persona discapacitada intenta acceder a una página sin una mínima estructuración, el resultado puede ser lamentable. 3.La estructura de la página y la información contenida en la misma es mucho más sencilla de mantener. Actualmente, ciertos aspectos del código HTML pueden hacer que una misma página tenga visualizaciones distintas en distintos navegadores. Estos herrores de diseño son dificilmente depurables cuando la página contiene una estructura de tags complicada y sin ninguna estructuración.Por otra parte, un cambio en un tipo de fuente supone el rediseño de todas las páginas de un site altener que sustituir todos los valores para el tag FONT. Todos estos problemas han sido seguidos muy decerca por el W3C, el cual comenzó a trabajar en 1995 en CSS. Versión 1.0
  5. 5. Curso de Cascade Style Sheet (CSS) Pagina 5 / 26Principales características aportadas por CSS en contraposición a los elementos de visualizaciónpresentes en la especificación de HTML 4: 1.Estilo enriquecido. CSS permite la creación de documentos visualmente mucho más ricos que lo que HTML nunca permitirá. No en vano CSS está pensado única y exclusivamente para asistir al diseñador a la hora de dar estilo a un documento estrucuturado. 2.Fácil de utilizar. La utilización de hojas de estilo CSS hace que el diseñador pueda reducir sustancialmente su carga de trabajo al diseñar 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 páginas y páginas del sitio. 3.Reutilización en múltiples páginas. Una hoja de estilo que recoja aspectos visuales comunes a varias páginas puede ser reutilizada en cualquier sección 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 páginas. Así, si deseamos modificar un estilo que es común a todo el site, sólo necesitaríamos modificar una línea de nuestro fichero CSS (con la aproximación clásica que ofrece HTML, deberíamos modificar todas y cada una de las páginas). 4.Reduce el tamaño del código HTML enviado. Al centralizar los estilos ya no es necesario la utilización de tags como FONT en todos los documentos del site. De esta manera se reduce considerablemente el tiempo en que tarda en cargarse el código de una página. 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 serán eliminados en un futuro de la especificación. De igual menera HTML retornará progresivamente a sus orígenes, volviendo a ser un lenguaje para la estrucuturación de información. Esta es la via de XML, cuya primera aproximaciés es el lenguaje de marcas XHTML. Versión 1.0
  6. 6. Curso de Cascade Style Sheet – CSS Pagina 6 / 26 3. El tag LINKVeamos 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 HEADde la página.Atributos del tag LINK.-REL: define el tipo del documento o "con qué tiene relación". 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. Suimportancia radica en que puede haber en el mismo documento más de un tagLINK. En el caso de que haya más de un tag LINK, sólo aquellos cuyo valor deREL sea "stylesheet" se aplicarán 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 resultadoal documento. Versión 1.0
  7. 7. Curso de Cascade Style Sheet (CSS) Pagina 7 / 26 4. Hojas de estilos alternativasEs de especial utilidad hacer uso del tag TITLE, cuando definimos hojas de estilo alternativas. En elsiguiente ejemplo se definen tres hojas de estilo dentro del mismo documento de forma que:La primera definición se aplicará siempre.El navegador nos permitirá seleccionar alguna de las dos siguientes como fuente alternativa de estilos.Además, cuando nos presente el menú para seleccionar la hoja de estilos alternativa, utilizará el atributoTITLE para su identificación.<link rel="stylesheet" type="text/css" href="fija.css" title="default"><link rel="alternate stylesheet" type="text/css" href="alternativa1.css" title="Vistade impresión"><link rel="alternate stylesheet" type="text/css" href="alternativa2.css" title="Vistadecorada">El tag STYLE.- permite dos tipos de tratamiento: 1.Definir estilos que se aplicarán 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 aplicarán al documento, pero también puede contener múltiples enlaces a hojas de estilo externas definidas con la directiva @import. Versión 1.0
  8. 8. Curso de Cascade Style Sheet – CSS Pagina 8 / 26 5. La directiva @importLa única diferencia con el tag LINK es su sintaxis y el lugar donde puede utlizarse. La directiva @importsólo puede utilizarse dentro de una región STYLE en el HEAD de la página. Además, estas directivasdeben definirse antes de cualquier regla CSS que contenga esta región 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 nose cachea estos contenidos.Comentarios en CSS.- Podemos definir comentarios dentro de un fichero CSS haciendo uso de unasintaxis muy similar a la C/C++, es decir, se considerará un comentario cualquier sección del documentoque comience con /* y termine con */. Versión 1.0
  9. 9. Curso de Cascade Style Sheet (CSS) Pagina 9 / 26 6. Reglas básicasCon CSS podemos aplicar reglas de estilo a un tipo determinado de elementos dentró del documentoHTML, así podemos podemos conseguir el mismo efecto que utilizando el marcado tradicional:<h2><font color="red">Texto de prueba</font></h2>Pero con el mínimo esfuerzo:H2 {color: red;}A esta expresión se la denomina "regla", y esta en concreto, permite poner en rojo los elementos de tipoh2.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 debede aplicar el estilo. En cuanto a la declaración se compone de una combinación de propiedades CSS.Normalmente, el selector es un elemento HTML, aunque puede tomar otros valores. Si estamosformatenado un documento XML, puede tomar el valor de cualquiera de los elementos o nodos deldocumento XML:QUOTE {color: gray;}BIB {color: red;}BOOKTITLE {color: purple;}2.La "declaración": además, la declaración se compone de una lista de parejas "propiedad : valor"separadas por punto y coma, que se corresponden con propiedades válidas dentro de la especificaciónCSS. Motivos por los que se puede anular una declaración:-Si utilizamos un propiedad que no existe, la declaración entera es ignorada.-Si utilizamos un valor incorrecto para una propiedad, sólo debería ignorarse el valor, aunque esteaspecto depende de la implementación del navegador (aunque la mayoría son bastante tolerantes conlos errores en el código CSS).Si la definición del valor de una propiedad permite el uso de más de una palabra, estas estaránseparadas por espacios en blanco. Además existen unos poco ejemplos en los que se pueden utilizarotros tipo de elementos dentro de la declaración. Es el caso de la propiedad FONT:H2 {font: large/150% sans-serif;}Esta declaración permite definir además del tamaño de la fuente, el grosor de la línea en la que está eltexto. Versión 1.0
  10. 10. Curso de Cascade Style Sheet – CSS Pagina 10 / 26 7. Agrupación de selectores y declaracionesNormalmente, se da el caso en que dos elementos del documento HTML comparten la definición de lamisma propiedad CSS. Estos elementos podemos declararlos de una forma extendida:H1 {color: purple;}H2 {color: purple;}H3 {color: purple;}H4 {color: purple;}H5 {color: purple;}H6 {color: purple;}O utilizar la agrupación para conseguir una declaración más compacta (el resultado es el mismo enambos casos):H1, H2, H3, H4, H5, H6 {color: purple;}Otros ejemplos de estructuras de agrupación 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;}Agrupación de declaraciones.- Podemos agrupar declaraciones cuando tenemos diferentes reglas quedefinen 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 serán ignorados, así que el navegador se fiará de la correcta estructurasintáctica de las reglas. Es por eso, que para una más sencilla visualización, podemos escribir las reglasCSS de esta forma:H1 {font: 18pt Helvetica;color: purple;background: aqua; Versión 1.0
  11. 11. Curso de Cascade Style Sheet (CSS) Pagina 11 / 26}Es una buena práctica terminar las declaraciones siempre con punto y coma (aunque no es obligatorio).Motivos:-Te permite habituarte a terminar las declaraciones correctamente, que es unode los errores más comunes.-Si decides añadir una nueva declaración a la regla, no tiens porque preocupartede cómo termina la anterior.-Algumos navegadores antiguos pueden confundirse cuando las reglas no seterminan adecuadamente.Combinaciones de agrupación 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;} Versión 1.0
  12. 12. Curso de Cascade Style Sheet – CSS Pagina 12 / 26 8. Atributos CLASS y ID8.1. CLASSEl atributo CLASS nos permite asignar estilos al documento sin preocuparnos de los elementosconcretos a los que se aplicarán. Como desventaja, está el hecho de que debemos modificar el códigoHTML del documento, incluyendo atributos CLASS en los lugares donde queramos aplicar estilos.<p class="cita">En en lugar de la mancha ...</p>Sólo nos queda definir este nuevo estilo como una regla más de nuestro documento CSS:.cita {font-weight: bold; color: red;}El punto inicial es necesario para mantener la definición de este estilo desvinculada de cualquierelemento del documento. Si queremos restringir el uso de este estilo a un tipo de elemento, podemosdefinirlo como:p.cita {font-weight: bold; color: red;}8.2. IDEl atributo ID en cierta forma, es igual que CLASS. Diferencias:La definición de los estilos de tipo ID, están precedidas por el carácter #, en lugar del punto.#first-para {font-weight: bold;}<P ID="first-para">This is the first paragraph, andwill be boldfaced.</P>El mismo atributo ID sólo puede usarse en un elemento. Debe ser único. En la realidad, losnavegadores no hacen comprobaciones de este tipo y podemos utilizar el mismo valor de ID para darestilo a múltiples elementos.Los estilos de tipo ID también pueden definirse al margen de cualquier elemento, pero estasdefiniciones no tienen ningún sentido al ser sus valores únicos y no aplicables a otros elementos. Versión 1.0
  13. 13. Curso de Cascade Style Sheet (CSS) Pagina 13 / 26 9. Pseudo-Clases y Pseudo-ElementosPermite la asignación de estilos a estructuras, estados de los elementos o estados del propiodocumento, 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 páginas que ya hansido o no visitadas. No hay ninguna forma posible de poder formatear de forma diferente estos tipos deenlaces en HTML, para ello utilizamos unas estrucuturas virtuales que no se corresponden con ningúnobjeto del documento HTML, conocidas como pseudo-clases.En CSS1, hay sólo tres pseudo-clases::link: hace referencia a cualquier enlace no visitado de la página.:visited: hace referencia a cualquier enlace ya visitado de la página.:active: hace referencia al enlace en el que estamos haciendo click en este momento o estamosactivando. En CSS1 sólo se puede definir esta propidedad sobre los enlaces, mientras que en CSS2esta 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 párrafo por ejemplo) y a suprimera línea 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-elementosólo podemos emplear en su definición, los siguientes estilos:1.first-letter 2.first-line-propiedades de las fuentes -propiedades de las fuentes-fondos y colores -fondos y colores-text-decoration -word-spacing-vertical-align (si float es none) -letter-spacing-text-transform -text-decoration-line-height -vertical-align-márgenes -text-transform-padding -line-height-bordes -clear-float-clearEn CSS1, no podemos combinar una pseudo-clase y un pseudo-elemento para la misma definición deestilo. Esto cambia en CSS2, aunque la sintaxis de definición es bastante rígida. Versión 1.0
  14. 14. Curso de Cascade Style Sheet – CSS Pagina 14 / 26 10. EstructuraLa 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 decontexto entre los elementos. Por ejemplo, si queremos definir que los EM que estén dentro de un H1serán grises, podemos añadir un atributo CLASS a cada EM que esté dentro de un H1, o definir unaregla como la siguiente:H1 EM {color: gray;}Herencia.- Es la propiedad por al cual un estilo no sólo se aplica a un elemento en concreto, sino que esheredado 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 común) por las cuales algunas propiedades no se pueden heredar, porejemplo la definición de bordes. Versión 1.0
  15. 15. Curso de Cascade Style Sheet (CSS) Pagina 15 / 26 11. EspecificidadHay ocasiones en las que podemos encontrarnos en la situación de que un mismo elementotenmúltiples 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 más específico, ejemplo de gradaciónque 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 definición, los estilos heredados tendrán un valor de especificidad 0 y los aplicados a través de lapropiedad STYLE, un valor superior a 100.Importancia.- Podemos marcar que ciertos estilos son más importantes que otros, pudiendo asímodificar las reglas de especificidad aplicadas por el navegador. Un estilo importante se defineañadiendo la coletilla !important al final del mismo:P.dark {color: #333 !important; background: white;}Esto estilos recibirán siempre el valor de especificidad más alto considerado por el navegador. Versión 1.0
  16. 16. Curso de Cascade Style Sheet – CSS Pagina 16 / 26 12. 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. También debemosordenarlas por su origen como: Diseñador, navegante o navegador (la priorización sigue este orden).3.Ordenar por orden las declaraciones. Las últimas declaraciones tendrán un peso más elevado. Lasdeclaraciones obtenidas como consecuencia de un IMPORT se considerarán como las primerasteniendo así un peso menor, al contrario de las resultantes de aplicar un STYLE que se pondrán al finalde la lista con un peso más elevado.Así el color obtenido para el elemento H1 será azul.Clasificación de los elementos.- En CSS1, los elementos formateados pueden agruparse en trescategorías:-Elementos de bloque. Como los párrafos, los encabezdos, las tablas, las listas, los DIV o el BODY. Sonlso que fuerzan un salto de línea 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 sólo pueden contener elementos de tipo LI. Pueden serautomáticamente numerados o susceptibles de tomar algún tipo de estilo que se aplique a cada uno delos ítems que los definen.Podemos cambiar la visualización de ciertos elementos mediante la propiedad display, la cual tiene lassiguientes características:-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 típicos de visualización que están definidos en HTML, como elhecho de que los párrafos sean de tipo bloque: P {display: inline;}Pero cuando realmente se le saca partido a la propiedad display, es cuando formateamos un documentoXML. Esto se debe a que XML no tiene un comportamiento predefinido para los elementos quecontiene.CSS2 completa los tipos de formateos añadiendo un tratamiento específico para tablas, filas y celdas. Versión 1.0
  17. 17. Curso de Cascade Style Sheet (CSS) Pagina 17 / 26 13. Colores y unidades13.1. ColoresLista de colores disponibles por nombre: aqua, gray, navy, silver, black, green, olive,teal, blue, lime, purple, white, fuchsia, maroon, red, yellow. Están tomados de losdieciseis colores básicos 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 numéricos entre 0 y 255 (color: rgb(255,0,0)).Colores definidos mediante valores hexadecimales con la estructura #RRGGBB (color: #FF0000). Lanotación hexadecimal puede abreviarse cuando sus valores se repiten para cada par, como en laexpresión color: #000.Colores web-safe. Son aquellos cuya visualización se mantendrá entre navegadores. Existen 216 deestos 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. UnidadesMedidas absolutas de longitud:-Pulgadas (in).-Centímetros (cm).-Milímetros (mm).-Puntos (pt). Medida tipográfica utilizada en la definición de las fuentes. En una pulgada hay 72 puntos(font-size: 18pt equivale a font-size: 0.25in).-Picas (pc). Mediada también tipográfica que hace corresponder una pica a 12 puntos.Medidas relativas de longitud:em: se corresponde al tamaño de la fuente para el parrafo en concreto al que se aplique. Si definimosque el texto tendrá un tamaño de 14 puntos, el valor de 1em será equivalente a 14 puntos.ex: similar a em, pero hace corresponder el tamaño actual de la fuente, al que tendría una X minúscula.En CSS2 se añaden unidades de medida adicionales como:Valores de ángulo: utilizado para definir la posición desde la cual se ha originado un sonidodeterminado. Tenemos tres tipos de ángulos: degrees, grados (grad) y radianes (rad).Valores de tiempo: utilizados para introducir retardos entre los elementos hablados de una página.Pueden ser milisegundos (ms) o segundos (s).Valores de frecuencia: define la frecuencia que los navegadores que generan voz pueden emitir. Versión 1.0
  18. 18. Curso de Cascade Style Sheet – CSS Pagina 18 / 26 14. IndentaciónIndentación de la primera línea de un párrafo. Es una propiedad que se aplica a elementos de tipobloque, y acepta tanto un valor de longitud, como un porcentaje:P {text-indent: 0.25in;}Podemos conseguir una sangría francesa, utilizando valores negativos para la indentación: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&oacute;n.Texto de ejemplo sobre los valores de la indentaci&oacute;n.</p><p class="indentacion_francesa">Texto de ejemplo sobre los valores de la indentaci&oacute;n.Texto de ejemplo sobre los valores de la indentaci&oacute;n.</p></body></html> Versión 1.0
  19. 19. Curso de Cascade Style Sheet (CSS) Pagina 19 / 26 15. Margenes15.1. IntroducciónHay dos propiedades que establecen la separación de los elementos: margin y padding.Si bien parecen lo mismo porque a veces no notamos ninguna diferencia entre usar una u otra, no loson.Podríamos decir que margin es la separación de un elemento de otro y padding es el relleno, laseparación entre un elemento y aquel que lo contiene ¿Confuso? Ciertamente, lo es.Veamos la sintaxis de las propiedades ya que son sencillas.15.2. Marginmargin es una forma reducida de establecer la separación de los cuatro bordes al mismo tiempo.sintaxis en HTMLelemento {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 serespecificad por separado.La propiedad margin-bottom establece el margen inferior; margin-right el margen derecho; margin-bottom el margen inferior y margin-left el margen izquierdo.sintaxis en HTMLelemento {margin-top: valor;}elemento {margin-roght: valor;}elemento {margin-bottom: valor;}elemento {margin-left: valor;}por ejemplo:div {margin-left: 5px;} Versión 1.0
  20. 20. Curso de Cascade Style Sheet – CSS Pagina 20 / 26Nota: * Si sólo de especifica un valor, este se aplica a los cuatro lados. * Si se especifican dos valores, el primero se aplica a los márgenes superior e inferior y el segundo alos márgenes derecho e izquierdo. * Si se especifican tres valores, el primero se aplica al margen superior, el segundo a los márgenesderecho e izquierdo y el tercero al margen inferior. * Si establecemos cuatro valores, definirán los márgenes superior, derecho, inferior e izquierdorespectivamente.Los valores los separamos mediante espacios; por ejemplo:div {margin: 10px 20px;}En los llamados elementos inline, los márgenes superior e inferior no tienen efectos prácticos.15.3. PaddingLa propiedad padding es una forma reducida de establecer el "relleno" de los cuatro lados al mismotiempo y tiene la misma sintaxis que margin.sintaxis en HTMLelemento {padding: valores;}elemento {padding-top: valor;}elemento {padding-right: valor;}elemento {padding-bottom: valor;}elemento {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 márgenes excepto que sólo se pueden usar valores positivos. Porejemplo:div {padding: 50px 10px 20px 30px}Cada elemento de una página web es un rectángulo que tiene un contenido (textos, imágenes, etc.) yuna serie de áreas opcionales a su alrededor (border, margin y padding) por lo tanto, el tamaño finaldepende de todas y cada una de esas propiedades aunque también depende de si han asignadas otraspropiedades como width y height, si contiene texto u otros elementos, si es una tabla, si ... etc.En térmimos generales, el ancho es la suma de los márgenes, los bordes y los rellenos izquierdos yderechos más el ancho del contenido y la altura es la suma de los márgenes, lso bordes y los rellenossuperiores e inferiores más la altura del contenido. Versión 1.0
  21. 21. Curso de Cascade Style Sheet (CSS) Pagina 21 / 26 16. AlineaciónNos 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 esDEPRECATED: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>Alineación izquierda</h1><h2>Alineación derecha</h2><h3>Alineación centrada</h3></body></html> Versión 1.0
  22. 22. Curso de Cascade Style Sheet – CSS Pagina 22 / 26 17. 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 losespacios en blanco.nowrap. Permite que se conserve todo el texto definido sin aplicar ningún salto de línea forzado poralgún elemento del documento. Es el sustituto del típico <TD nowrap>.normal. Valor por defecto para la definición de espacios en blanco, la cual no aplica ningunaconsideración especial sobre el texto.Como las explicaciones incluídas en el estándar CSS 2.1 pueden llegar a ser confusas, la siguientetabla resume el comportamiento de cada valor: Valor Respeta espacios en blanco Respeta saltos de línea Ajusta las líneasnormal no no sipre si si nonowrap no no nopre-wrap si si sipre-line no si siEjemplo:<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 espaciosen blanco para ver su comportamiento.</p><p class="sinsaltos">Texto con distintas representacion de espaciosen blanco para ver su comportamiento.</p><p class="normal">Texto con distintas representacion de espaciosen blanco para ver su comportamiento.</p></body></html> Versión 1.0
  23. 23. Curso de Cascade Style Sheet (CSS) Pagina 23 / 26 18. Anchura de líneasDefine la distancia entre las líneas base de dos líneas de texto. En resumen, esta propiedad permiteaumentar o disminuir la distancia vertical entre dos líneas de texto. Esta distancia pude expresarse conmedidas 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 líneas para ver su comportamiento en p&aacute;rrafos de texto.</p><p class="grande">Texto con distintas medidas entre líneas para ver su comportamiento en p&aacute;rrafos de texto.</p><p class="xgrande">Texto con distintas medidas entre líneas para ver su comportamiento en p&aacute;rrafos de texto.</p></body></html> Versión 1.0
  24. 24. Curso de Cascade Style Sheet – CSS Pagina 24 / 26 19. Espacio entre palabrasSe define mediante la propiedad "word-spacing" y puede tomar los valores "normal" (equivalente acero) o un valor numérico.Ejemplo:<html><head><title>Propiedades del texto</title></head><body><p style="word-spacing: normal;">Prueba de espaciado de palabras en un parrafo.</p><p style="word-spacing: 0;">Prueba de espaciado de palabras en un parrafo.</p><p style="word-spacing: 1em;">Prueba de espaciado de palabras en un parrafo.</p><p style="word-spacing: 2em;">Prueba de espaciado de palabras en un parrafo.</p><p style="word-spacing: -1em;">Prueba de espaciado de palabras en un parrafo.</p></body></html>Espacio entre letras.- Idéntico al espaciado entre palabras, pero aplicado a los caracteres que formancada palabra. Su propiedad asociada es "letter-spacing". Versión 1.0
  25. 25. Curso de Cascade Style Sheet (CSS) Pagina 25 / 26 20. Transformaciones del textoPermiten modificaciones en la presentación de las cadenas de texto mediante la propiedad "text-transform", la cual puede tomar alguno de los siguientes valores:uppercase: todo el texto se transformará a mayúsculas.lowercase: todo el texto se transformará a minúsculas.capitalize: convierta a mayúscula la primera letra de cada palabra.none: no se realizará ninguna transformación 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&oacute;n</p><p style="text-transform: lowercase;">Prueba de transformaci&oacute;n</p><p style="text-transform: capitalize;">Prueba de transformaci&oacute;n</p></body></html> Versión 1.0
  26. 26. Curso de Cascade Style Sheet – CSS Pagina 26 / 26 21. Decoración del textoAñade a las cadenas de texto cierto formato mediante el uso de la propiedad "text-decoration", lacual puede tomar uno de los siguientes valores:underline: subraya el texto asociado.overline: dibuja un línea sobre el texto asociado. Es como un subrayado, pero sobre la parte superiordel texto.line-through: tacha el texto asociado dibujando una línea sobre el mismo.blink: hace que el texto asociado parpadee.none: no aplica ningún 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 decoración del texto</p><p style="text-decoration: overline;">Prueba de decoraci&oacute;n del texto</p><p style="text-decoration: line-through;">Prueba de decoraci&oacute;n del texto</p><p style="text-decoration: blink;">Prueba de decoraci&oacute;n del texto (este está parpadeando :)</p></body></html> Versión 1.0

×