Formateo de Texto. (parte II)

Transcripción

1 Formateo de Texto (parte II) JUAN CARLOS CONDE RAMÍREZ WEB-TOOLS

2 Objetivos Identificar la diferencia entre background y foreground. Conocer las diferentes maneras de aplicar color al texto. Conocer más tipos de selectores. Comprender la importancia de los selectores descendentes, de ID y de clase. Aplicar la Especificidad 101. Conocer más fuentes externas para la comprensión del calculo de especificidad. FCC-BUAP 2

3 Color de texto, I Se puede cambiar el color al texto usando la propiedad color, cuya descripción se muestra a continuación. Asignación de color. color Valores: Predeterminado: Aplicable a: Herencia: valor de color (nombre o número) inherit depende del navegador y de las preferencias de usuario todos los elementos. sí FCC-BUAP 3

4 Color de texto, II El CSS2.1 define 17 nombres de color estándar: black white purple lime navy aqua silver maroon fuchsia olive blue orange gray red green yellow teal La actualización del módulo de color de CSS3 permite nombres de entre un conjunto de 140 nombres de color. Puedes ver ejemplos de cada uno en: FCC-BUAP 4

5 Color de texto, III El valor de la propiedad de color también puede ser un valor numérico que describa un color específico RGB. A continuación algunos ejemplos: h1 { color: gray; } h1 { color: #666666; } h1 { color: #666; } h1 { color: rgb(102,102,102); } El color se hereda, por lo que puede cambiar el color de todo el texto de un documento aplicando la propiedad de color al elemento del body, como se muestra a continuación: body { color: fuchsia; } FCC-BUAP 5

6 Color de texto, III Ok, posiblemente el fuchsia no sea un buen color para todo el texto, pero sólo para darte una idea. Para ser precisos, la propiedad color no está estrictamente relacionada con el texto. De hecho de acuerdo a la especificación de CSS esta es usada para cambiar el color de primer plano (foreground) de un elemento opuesto al background. El primer plano de un elemento consta tanto del texto que contiene como de su borde. Cuando aplique un color a un elemento (incluidos los elementos de imagen), ese color también se usará para el borde, a menos que exista una propiedad border-color que lo anule. FCC-BUAP 6

7 Mas tipos de selectores, I Hasta el momento conoces los selectores de elementos y los selectores agrupados. Por ejemplo: Element selector p { color: navy; } Grouped selectors p, ul, p, td, th { color: navy; } La desventaja de seleccionar elementos de esta manera es que la propiedad (en este caso, texto azul marino) se aplicará a todos los párrafos y otros elementos agrupados en la regla. Algunas veces se quiere aplicar una regla a un párrafo o párrafos en particular. Existen tres tipos de selectores que nos permiten hacer precisamente eso: selectores de Descendientes, selectores de ID y selectores de Clase. FCC-BUAP 7

8 Selectores de Descendientes, I La meta de un selector de descendientes son los elementos (y sus descendientes) contenidos dentro de otros elementos. Se trata de un caso de selector contextual porque selecciona un elemento en función de su contexto o relación con otro elemento. Los selectores de descendientes se indican en una lista separada por un espacio. En el siguiente ejemplo el texto enfatizado (em) dentro de los párrafos (p) y otros elementos NO se verán afectados. li em { color: olive; } FCC-BUAP 8

9 Selectores de Descendientes, II FCC-BUAP 9

10 Selectores de Descendientes, III Aquí hay otro ejemplo que muestra cómo los selectores contextuales se pueden agrupar en una lista separada por comas. Esta regla apunta hacia los elementos em, pero sólo aquellos que aparezcan dentro de h1, h2 o h3. h1 em, h2 em, h3 em { color: red; } También es posible anidar selectores de descendientes con varias capas de profundidad. Este ejemplo apunta hacia elementos em que aparecen en elementos de anclaje (a) que a su vez aparecen en listas ordenadas (ol). ol a em { font-variant: small-caps; } FCC-BUAP 10

11 Otros selectores contextuales, I Los selectores de descendientes, llamados combinadores (combinators) en la especificación de CSS3, son unos de los cuatro tipos de selectores contextuales. Los otros tres son: Selectores de hijos Selectores de hermanos adyacentes Selectores de hermanos generales FCC-BUAP 11

12 Otros selectores contextuales, I Selector de hijos. Es similar a un selector de descendente, pero se dirige sólo a los hijos directos de un elemento dado. No puede haber otros niveles jerárquicos intermedios. Son identificados con el símbolo de mayor-que (>). La siguiente regla afecta texto enfatizado siempre y cuando esté directamente contenido en un elemento p. En contraste, un elemento em dentro de un link (a) dentro de un párrafo NO será afectado. p > em {font-weight: bold;} FCC-BUAP 12

13 Otros selectores contextuales, II Selector de hermanos adyacentes. Se dirige a un elemento que va inmediatamente después de otro elemento con el mismo elemento padre. Identificados con el símbolo de suma (+). La siguiente regla da un tratamiento especial a los párrafos contenidos en h1. Los demás párrafos no son afectados. h1 + p {font-style: italic;} FCC-BUAP 13

14 Otros selectores contextuales, II Selector de hermanos generales (NUEVO EN CSS3). Selecciona a un elemento que comparte un elemento padre con el elemento especificado y aparece después en el orden de origen. No necesitan seguirse el uno al otro directamente. La siguiente regla selecciona cualquier h2 que comparta un elemento padre con un h1 y aparezca después (tal como section o article). h1 ~ h2 {font-weight: normal;} FCC-BUAP 14

15 Selectores de ID, I En temas pasados, hemos aprendido sobre el atributo id que otorga a un elemento un nombre de identificación único (referencia de identificación). El atributo id se puede usar con cualquier elemento HTML, pero se usa comúnmente para dar significado a los elementos genéricos div y span. Los selectores de ID te permiten dirigir los estilos hacia elementos especificados por sus valores de id. El símbolo que identifica a los selectores de ID es el símbolo de número (octothorpe, #), también conocido como símbolo hash. FCC-BUAP 15

16 Selectores de ID, II Aquí hay un ejemplo de un elemento de lista con una referencia de id. <li id="catalog1234">happy Face T-shirt</li> Ahora puedes escribir una regla de estilo sólo para ese elemento li usando un selector de ID, así: li#catalog1234 { color: red; } FCC-BUAP 16

17 Selectores de ID, III Debido a que los valores de id deben ser únicos en el documento, es aceptable omitir el nombre del elemento. La siguiente regla es equivalente a la anterior: #catalog1234 { color: red; } También se puede usar un selector de ID como parte de un selector contextual. Con el siguiente ejemplo sería posible tratar ítems de una lista, identificados con links, de forma diferente a los demás ítems de la lista ( sin ningún marcado adicional!). #links li { margin-left: 10px; } Esto es prueba del poder de los selectores y cómo se pueden usar estratégicamente junto con el marcado semántico bien planeado. FCC-BUAP 17

18 Selectores de Clase, I El otro identificador de elementos aprendido en temas previos es el identificador class, utilizado para clasificar elementos dentro de un conjunto o grupo conceptual. A diferencias del atributo id, múltiples elementos pueden compartir el mismo nombre de clase. No solamente eso, sino que además un elemento puede pertenecer a más de una clase. Los nombres de clase se indican con un punto (.) al comienzo de un selector de clase. Por ejemplo, para seleccionar todos los párrafos con class= special, se utiliza el siguiente selector: p.special { color: orange; } FCC-BUAP 18

19 Selectores de Clase, II Para aplicar una propiedad a todos los elementos de la misma clase, omite el nombre del elemento en el selector (manteniendo el punto, ya que es el que denota a la clase). El siguiente ejemplo se dirige a todos los párrafos y cualquier otro elemento que haya sido marcado con class= special..special { color: orange; } Nótese que el valor de un atributo id debe comenzar con letras, puede contener dígitos, guiones, guiones bajos, punto y coma y puntos. Pero deben evitarse los punto y coma y los puntos dado que pueden ser confusos con la sintaxis de CSS para este tipo de selector. FCC-BUAP 19

20 El selector Universal, I CSS2 introdujo un selector de elementos universal (*) que hace coincidir cualquier elemento (como un comodín en lenguajes de programación). Por ejemplo: * {color: gray; } hace que el primer plano de cada elemento en el documento sea gris. También se utiliza como un selector contextual, como se muestra en este ejemplo, que selecciona todos los elementos dentro de una sección intro": #intro * { color: gray; } El selector universal causa problemas con los controles de formulario en algunos navegadores. Si tu página contiene entradas de formulario, lo mejor sería evitar el selector universal. FCC-BUAP 20

21 Especificidad 101, I En temas previos se introdujo el término de especificidad, que se refiere a que los selectores más específicos tienen más peso cuando se trata de manejar conflictos de reglas de estilo. Ahora que conoces algunos selectores más, es un buen momento para volver a mencionar este concepto tan importante. El sistema CSS actual que se utiliza para calcular la especificidad del selector es muy complicado, pero la siguiente lista de tipos de selector (de más a menos específico) sirve para la mayoría de los escenarios. FCC-BUAP 21

22 Especificidad 101, II Selectores de ID, que son más específicos que (y anularán) Selectores de Clase, que son más específicos que (y anularán) Selectores contextuales, que son más específicos (y anularán) Selectores de elementos individuales. Por ejemplo, si una hoja de estilos tiene dos reglas en conflicto para el elemento strong: strong { color: red;} h1 strong { color: blue; } el selector contextual (h1 strong) es más específico y por lo tanto tendrá más peso o relevancia que el selector de elemento individual. FCC-BUAP 22

23 Especificidad 101, III Puedes utilizar la especificidad de manera estratégica para mantener tus hojas de estilo simples y tu marcado al mínimo. Por ejemplo, es posible definir un estilo para un elemento p y posteriormente anularlo cuando sea necesario usando selectores más específicos: p { line-height: 1.2em; } /* mayor altura que blockquote p*/ blockquote p { line-height: 1em; } /* menor altura que p*/ p.intro { line-height: 2em; } /* mayor altura que blockquote p*/ FCC-BUAP 23

24 Especificidad 101, IV Comprender los conceptos de herencia y especificidad es fundamental para dominar CSS, y todavía hay mucho más que decir sobre la especificidad. Conforme tengas más experiencia y tus hojas de estilo se vuelvan más complejas, comprobarás que necesitas una comprensión más profunda del funcionamiento interno Para obtener una explicación más técnica de cómo se calcula exactamente la especificidad, consulta la Recomendación de CSS en: FCC-BUAP 24

25 Especificidad 101, V Eric Meyer proporciona una descripción completa, pero más digerible, de este sistema en su libro: Cascading Style Sheets: The Definitive Guide (O Reilly Media) Si lo que estás buscando es soporte en línea se recomienda el siguiente artículo de la revista Smashing Magazine: CSS Specificity: Things You Should Know por Vitaly Friedman O si aprendes mejor con analogías de StarWars prueba con la página de Andy Clarke: CSS: Specificity Wars FCC-BUAP 25