Formateo de Texto(parte II)JUAN CARLOS CONDE RAMÍREZ

WEB-TOOLS

Objetivos

FCC-BUAP 2

◦ 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.

JCCR©

•Se puede cambiar el color al texto usando la propiedad color, cuya descripción se muestra acontinuación.

•Asignación de color.

•color

◦ Valores: valor de color (nombre o número)| inherit

◦ Predeterminado: depende del navegador y de las preferencias de usuario

◦ Aplicable a: todos los elementos.

◦ Herencia: sí

Color de texto, I

FCC-BUAP 3JCCR©

•El CSS2.1 define 17 nombres de color estándar:

•La actualización del módulo de color de CSS3 permite nombres de entre un conjunto de 140nombres de color. Puedes ver ejemplos de cada uno en:

https://www.w3schools.com/colors/colors_names.asp

Color de texto, II

FCC-BUAP 4JCCR©

black white purplelime navy aquasilver maroon fuchsiaolive blue orangegray red greenyellow teal

•El valor de la propiedad de color también puede ser un valor numérico que describa un colorespecí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 documentoaplicando la propiedad de color al elemento del body, como se muestra a continuación:

body { color: fuchsia; }

Color de texto, III

FCC-BUAP 5JCCR©

•Ok, posiblemente el fuchsia no sea un buen color para todo el texto, pero sólo para darte unaidea. 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 primerplano (foreground) de un elemento – opuesto al background. El primer plano de un elementoconsta tanto del texto que contiene como de su borde.

•Cuando aplique un color a un elemento (incluidos los elementos de imagen), ese color tambiénse usará para el borde, a menos que exista una propiedad border-color que lo anule.

Color de texto, III

FCC-BUAP 6JCCR©

•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, textoazul 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 tiposde selectores que nos permiten hacer precisamente eso:

◦ selectores de Descendientes,

◦ selectores de ID y

◦ selectores de Clase.

Mas tipos de selectores, I

FCC-BUAP 7JCCR©

•La meta de un selector de descendientes son los elementos (y sus descendientes) contenidosdentro de otros elementos.

•Se trata de un caso de selector contextual porque selecciona un elemento en función de sucontexto o relación con otro elemento.

•Los selectores de descendientes se indican en una lista separada por un espacio. En el siguienteejemplo el texto enfatizado (em) dentro de los párrafos (p) y otros elementos NO se veránafectados.

li em { color: olive; }

Selectores de Descendientes, I

FCC-BUAP 8JCCR©

Selectores de Descendientes, II

FCC-BUAP 9JCCR©

•Aquí hay otro ejemplo que muestra cómo los selectores contextuales se pueden agrupar en unalista separada por comas. Esta regla apunta hacia los elementos em, pero sólo aquellos queaparezcan 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. Esteejemplo apunta hacia elementos em que aparecen en elementos de anclaje (a) que a su vezaparecen en listas ordenadas (ol).

ol a em { font-variant: small-caps; }

Selectores de Descendientes, III

FCC-BUAP 10JCCR©

•Los selectores de descendientes, llamados combinadores (combinators) en la especificación deCSS3, son unos de los cuatro tipos de selectores contextuales. Los otros tres son:

• Selectores de hijos

• Selectores de hermanos adyacentes

• Selectores de hermanos generales

Otros selectores contextuales, I

FCC-BUAP 11JCCR©

•Selector de hijos.

◦ Es similar a un selector de descendente, pero se dirige sólo a los hijos directos de un elemento dado. Nopuede haber otros niveles jerárquicos intermedios.

◦ Son identificados con el símbolo de mayor-que (>). La siguiente regla afecta texto enfatizado siempre ycuando 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;}

Otros selectores contextuales, I

FCC-BUAP 12JCCR©

•Selector de hermanos adyacentes.

◦ Se dirige a un elemento que va inmediatamente después de otro elemento con el mismo elementopadre.

◦ Identificados con el símbolo de suma (+). La siguiente regla da un tratamiento especial a los párrafoscontenidos en h1. Los demás párrafos no son afectados.

h1 + p {font-style: italic;}

Otros selectores contextuales, II

FCC-BUAP 13JCCR©

•Selector de hermanos generales (NUEVO EN CSS3).

◦ Selecciona a un elemento que comparte un elemento padre con el elemento especificado y aparecedespué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 aparezcadespués (tal como section o article).

h1 ~ h2 {font-weight: normal;}

Otros selectores contextuales, II

FCC-BUAP 14JCCR©

•En temas pasados, hemos aprendido sobre el atributo id que otorga a un elemento un nombrede identificación único (referencia de identificación).

•El atributo id se puede usar con cualquier elemento HTML, pero se usa comúnmente para darsignificado a los elementos genéricos div y span.

•Los selectores de ID te permiten dirigir los estilos hacia elementos especificados por sus valoresde 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.

Selectores de ID, I

FCC-BUAP 15JCCR©

•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; }

Selectores de ID, II

FCC-BUAP 16JCCR©

•Debido a que los valores de id deben ser únicos en el documento, es aceptable omitir elnombre 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 siguienteejemplo sería posible tratar ítems de una lista, identificados con “links”, de forma diferente a losdemá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 elmarcado semántico bien planeado.

Selectores de ID, III

FCC-BUAP 17JCCR©

•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. Porejemplo, para seleccionar todos los párrafos con class=“special”, se utiliza el siguienteselector:

p.special { color: orange; }

Selectores de Clase, I

FCC-BUAP 18JCCR©

•Para aplicar una propiedad a todos los elementos de la misma clase, omite el nombre delelemento 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 sidomarcado 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 lospuntos dado que pueden ser confusos con la sintaxis de CSS para este tipo de selector.

Selectores de Clase, II

FCC-BUAP 19JCCR©

•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, queselecciona 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. Situ página contiene entradas de formulario, lo mejor sería evitar el selector universal.

El selector Universal, I

FCC-BUAP 20JCCR©

•En temas previos se introdujo el término de “especificidad”, que se refiere a que los selectoresmá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 esteconcepto 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 delos escenarios.

Especificidad 101, I

FCC-BUAP 21JCCR©

◦ 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 orelevancia que el selector de elemento individual.

Especificidad 101, II

FCC-BUAP 22JCCR©

•Puedes utilizar la especificidad de manera estratégica para mantener tus hojas de estilo simplesy tu marcado al mínimo.

•Por ejemplo, es posible definir un estilo para un elemento p y posteriormente anularlo cuandosea 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*/

Especificidad 101, III

FCC-BUAP 23JCCR©

•Comprender los conceptos de herencia y especificidad es fundamental para dominar CSS, ytodaví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ásque 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:

https://www.w3.org/TR/CSS22/cascade.html#specificity

Especificidad 101, IV

FCC-BUAP 24JCCR©

•Eric Meyer proporciona una descripción completa, pero más digerible, de este sistema en sulibro:

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 revistaSmashingMagazine:

“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

Especificidad 101, V

FCC-BUAP 25JCCR©