Miniatura

Miniatura

Más de lo usual

menos de lo habitual

Cursiva

Cursiva

Con guión bajo

Tachado

Capacidades de atributos de estilo

Además de las etiquetas descritas, existen varias formas más de cambiar la fuente en HTML. Una de ellas es utilizar el atributo de estilo genérico. Usando los valores de sus propiedades, puede configurar el estilo de visualización de las fuentes:

1) familia de fuentes: la propiedad establece la familia de fuentes. Es posible enumerar varios valores.
Se cambiará la fuente en html al siguiente valor si la familia anterior no está instalada en el sistema operativo del usuario..

Sintaxis de escritura:

familia de fuentes: nombre de fuente [, nombre de fuente [, ...]]

2) tamaño de fuente: el tamaño se establece de 1 a 7. Esta es una de las principales formas en que puede aumentar la fuente en HTML.
Sintaxis de escritura:

tamaño de fuente: tamaño absoluto | tamaño relativo | significado | interés | heredar

También puedes configurar el tamaño de fuente:

• En píxeles;
• En términos absolutos ( xx-pequeño, x-pequeño, pequeño, mediano, grande);
• En porcentajes;
• En puntos (pt).

Tamaño de fuente: 7

Tamaño de fuente: 24px

Tamaño de fuente: extragrande

Tamaño de fuente: 200%

Tamaño de fuente: 24 puntos

3) estilo de fuente: establece el estilo de escritura de la fuente. Sintaxis:

estilo de fuente: normal | cursiva | oblicuo | heredar

Valores:

• normal – ortografía normal;
• cursiva – cursiva;
• oblicuo – fuente inclinada hacia la derecha;
• heredar: hereda la ortografía del elemento padre.

Un ejemplo de cómo cambiar la fuente en html usando esta propiedad:

estilo de fuente: heredar

estilo de fuente: cursiva

estilo de fuente: normal

estilo de fuente: oblicuo

4) variante de fuente: convierte todas las letras mayúsculas en letras mayúsculas. Sintaxis:

variante de fuente: normal | empresas de pequeña capitalización | heredar

Un ejemplo de cómo cambiar la fuente en html con esta propiedad:

variante de fuente: heredar

variante de fuente: normal

variante de fuente: versalitas

5) peso de fuente: le permite establecer el grosor del texto (saturación). Sintaxis:

peso de fuente: negrita|más negrita|más claro|normal|100|200|300|400|500|600|700|800|900

Valores:

• negrita: establece la fuente html en negrita;
• más audaz – más audaz en relación con lo normal;
• más claro – menos saturado en relación con lo normal;
• normal – ortografía normal;
• 100-900: establece el grosor de la fuente en equivalente numérico.

peso de fuente: negrita

peso de fuente: más negrita

peso de fuente: más ligero

peso de fuente: normal

peso de fuente: 900

peso de fuente: 100

Propiedad de fuente HTML y color de fuente

La fuente es otra propiedad del contenedor. En su interior combinaba los valores de varias propiedades destinadas a cambiar las fuentes. sintaxis de fuente:

fuente: tamaño de fuente familia de fuentes | heredar

El valor también se puede establecer según las fuentes utilizadas por el sistema en las etiquetas de varios controles:

• título – para botones;
• icono – para iconos;
• menú - menú;
• cuadro de mensaje: para cuadros de diálogo;
• subtítulos pequeños: para controles pequeños;
• barra de estado: fuente de la barra de estado.

fuente:icono

fuente: título

fuente:menú

fuente: cuadro de mensaje

subtítulo pequeño

fuente: barra de estado

fuente: cursiva 50 px negrita "Times New Roman", Times, serif

Para establecer el color de fuente en HTML, puede utilizar la propiedad de color. Te permite configurar el color, ya sea usando una palabra clave o en formato rgb. Y también en código hexadecimal.

Controla si el texto del elemento se convierte a mayúsculas o caracteres en mayúsculas. Cuando el valor es distinto de none, se cambiará el caso del texto fuente.

Breve información

Designaciones

Valores

capitalizar El primer carácter de cada palabra en una oración estará en mayúscula. Los símbolos restantes no cambian su apariencia. minúsculas Todos los caracteres del texto se vuelven minúsculas (minúsculas). mayúsculas Todos los caracteres del texto se convierten en mayúsculas (mayúsculas). none No cambia el caso de los caracteres.

Salvadera

Winnie the Pooh siempre no era reacio a tomar un pequeño refrigerio, especialmente a las once de la mañana, porque a esa hora el desayuno ya había terminado y el almuerzo aún no había comenzado. Y, por supuesto, se alegró terriblemente de ver que el Conejo sacaba tazas y platos.

div (transformación de texto: capitalizar;)

Ejemplo

Monumento cultural de la Edad Media

Las tierras bajas del Amazonas abundan en el pequeño transporte de perros y gatos, y Hajos Bahía es famosa por sus vinos tintos.

El resultado de este ejemplo se muestra en la Fig. 1.

Arroz. 1. Aplicar la propiedad de transformación de texto

modelo de objetos

Un objeto.style.textTransform

Especificación

Cada especificación pasa por varias etapas de aprobación.

• Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
• Recomendación del candidato ( Posible recomendación) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
• Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
• Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
• Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
• Borrador ( Borrador de especificación) - el primer borrador de la norma.

Una letra mayúscula, según la definición, es un elemento de texto que aumenta relativamente de tamaño. En casi todos los idiomas, una oración comienza con una letra mayúscula. Y diseñar el comienzo de un párrafo con una letra mayúscula destacada permite estructurar el texto y lo hace más fácil de percibir. Cuando se diseña una página de Internet, el texto se puede escribir de acuerdo con las preferencias del autor y las reglas del idioma ruso. También puede "automatizar" su diseño ingresando ciertos "comandos" en un archivo con extensión CSS (una hoja de estilo) o agregando una sección de estilo a su archivo html. CSS generalmente se estudia además de HTML para cambiar rápidamente algunos elementos de diseño en todo el texto a la vez.

Esto es especialmente cierto si el sitio tiene cientos de páginas y realizar cambios en cada una de ellas es un proceso que requiere mucha mano de obra.

Si aplica CSS, las letras mayúsculas al principio de cada párrafo pueden parecer especiales. Por ejemplo, el siguiente código, ingresado en HTML sin paréntesis, permite que el texto formateado con la etiqueta "p" haga que la letra mayúscula (primera letra) sea más grande (220 % del tamaño estándar), amarilla (el valor del color es amarillo) y escríbalo en una fuente diferente al resto del texto: Georgia vs. Batangche.

(<) style(>)

p: primera letra (familia de fuentes: Georgia; tamaño de fuente: 220%; color: amarillo;)

(<)/style(>)

Puede obtener hermosas letras mayúsculas creando su propia fuente en forma de imágenes: para cada letra hay una imagen separada, por ejemplo, en estilo ruso antiguo o gótico. Se pueden dibujar Luego, en los lugares requeridos, en lugar de la letra mayúscula, puede insertar el código sin paréntesis (<) img src=”ссылка на место, где лежит картинка”(>). Los atributos adicionales serán alto y ancho: el ancho y el alto de la imagen, que se pueden configurar en píxeles para una combinación armoniosa con el resto del texto. Ejemplo: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Paréntesis alrededor< и >eliminamos.

Si no tiene la oportunidad de dibujar el alfabeto usted mismo, puede diseñar la letra mayúscula utilizando fuentes que están disponibles gratuitamente en Google (sección Fuentes) u otros motores y recursos de búsqueda. Para hacer esto, el código anterior debe formatearse de la siguiente manera:

(<) style(>)

p (familia de fuentes: batangche; tamaño de fuente: 93%;)

p: primera letra (familia de fuentes: Kelly+Slab; tamaño de fuente: 220%; color: azul;)

(<)/style(>)

(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).

El servicio de Google le permite elegir uno u otro y proporciona enlaces listos para insertar en html o css. Llamamos su atención sobre el hecho de que es necesario seleccionar un grupo de fuentes: latina o cirílica, porque... Casi todas las fuentes latinas no funcionan al formatear texto en ruso. Actualmente, el motor de búsqueda ofrece alrededor de 40 tipos de forma gratuita.

Se puede aplicar estilo a una letra mayúscula o a su antípoda mayúscula utilizando la propiedad de transformación de texto CSS. Si establece el valor transformación de texto: ninguno en la hoja de estilo, el texto se verá tal como lo escribe. Para convertir todas las letras a minúsculas, debe establecer el valor de transformación de texto: minúsculas, separadas por dos puntos y para mayúsculas, mayúsculas. Establecer la propiedad en transformación de texto: mayúscula hará que cada palabra tenga una letra mayúscula al principio.

Hola lectores de este blog. Hoy hablaré sobre cómo puedes hacer todas las letras mayúsculas usando CSS. Por supuesto, para hacer esto, puede activar el bloqueo de mayúsculas y escribir el texto deseado, pero este es un método bastante primitivo. Pero, ¿qué sucede si necesita resaltar un párrafo separado en un artículo terminado?

Poner todas las letras en mayúscula en CSS

Hay una propiedad de transformación de texto para esto que, como habrás adivinado, transforma el texto. Tiene los siguientes valores:

• minúsculas: todo el texto se muestra en letras minúsculas
• mayúsculas: todas las palabras se muestran en mayúsculas (lo que necesitamos)
• capitalizar: la primera letra de cada palabra está en mayúscula

Eso es básicamente todo lo que necesitas saber. Todo lo que queda es descubrir cómo acceder al elemento deseado. Imaginemos este ejemplo: el quinto párrafo de un artículo debe escribirse en mayúsculas. ¿Y cómo se puede implementar esto?

¿Cómo llegar al elemento deseado?

Como sabes, un párrafo se crea utilizando una etiqueta html emparejada, cuyo contenido completo se convierte en un párrafo. Todo lo que queda es definir una nueva clase de estilo para ello:

Ahora tenemos la oportunidad de acceder a este párrafo en concreto a través del lenguaje CSS sin afectar al resto. Puedes hacerlo así:

Letra mayúscula(
Transformación de texto: mayúsculas;
}

Este método es adecuado cuando necesita resaltar un fragmento de un artículo en particular. ¿Qué pasaría si todas las páginas tuvieran que tener cierto texto en letras mayúsculas? En este caso, es mejor colocar el bloque en un archivo de plantilla para no escribirlo cada vez.

O quizás necesites resaltar el segundo párrafo de cada artículo usando CSS en mayúsculas. Entonces otra opción te conviene. Busque el bloque donde aparece el artículo y acceda al segundo párrafo utilizando la pseudoclase nth-child. En este ejemplo, nuestro bloque con un artículo tiene la clase artículo.

Artículo p: enésimo niño (2) (
Transformación de texto: mayúsculas
}

Como puedes ver, existe una solución diferente para cada caso concreto. Lo más importante es recordar la propiedad de transformación de texto, que cambia el formato de las letras.

En general, no se recomienda mostrar el texto de esta manera, porque perjudica mucho su percepción, pero se pueden resaltar algunos fragmentos particularmente importantes.

Hoy analizamos la propiedad de transformación de texto. Suscríbete al blog para recibir nuevos artículos.