Cómo hacer una hermosa fuente en HTML: tamaños, colores, etiquetas de fuente HTML. Cómo escribir en el texto HTML en las imágenes por qué se usa RGBA

Miniatura

Miniatura

Más ordinario

Menos habitual

Cursiva

Cursiva

Con enfasis

Aplastada

Las características del atributo de estilo.

Además de las etiquetas descritas, todavía hay varias formas de cambiar la fuente en HTML. Uno de ellos es el uso del atributo universal de estilo. Usando los valores de sus propiedades, puede configurar el estilo de visualización de fuente:

1) Fuente-familia: la propiedad establece la familia Font. Puedes enumerar varios valores.
Cambiar la fuente en HTML al siguiente valor ocurrirá si la familia anterior no está instalada en sistema operativo Usuario.

Sintaxis de escritura:

fuente-Familia: 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 formas principales de cómo en HTML puede aumentar la fuente.
Sintaxis de escritura:

tamaño de fuente: Tamaño absoluto | Tamaño relativo | Valor | Interés | heredar.

Tamaño de fuente también se puede configurar:

• En píxeles;
• En valor absoluto ( xx-pequeño, x-pequeño, pequeño, medio, grande);
• En porcentajes;
• Puntos (PT).

Tamaño de fuente: 7

Tamaño de fuente: 24px

Tamaño de fuente: x-grande

Tamaño de fuente: 200%

Tamaño de fuente: 24pt

3) Estilo de fuente: establece el estilo de escribir la fuente. Sintaxis:

estilo de fuente: Normal | Cursiva | Oblicuo | heredar.

Valores:

• escritura normal y normal;
• cursiva - cursiva;
• oblicuo - fuente con una pendiente a la derecha;
• hereda: hereda la escritura del elemento padre.

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

estilo de fuentes: heredar

estilo de fuente: cursiva

estilo de fuente: normal

estilo de fuente: oblicuo

4) Variante de fuentes: traduce todas las letras mayúsculas al título. Sintaxis:

variante de fuentes: normal | Gorras pequeñas | heredar.

Un ejemplo de cómo cambiar la fuente en HTML por esta propiedad:

variante de fuentes: heredar

variante de fuentes: Normal

variante de fuentes: Pequeñas capas

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

peso de fuente: negrita | Más audaz | Lighter | Normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Valores:

• negrita: instala una fuente HTML audaz;
• más audaz - grasiento en relación con la normalidad;
• más ligero es un relativo saturado a la normalidad;
• normal - escritura normal;
• 100-900: el grosor de la fuente se establece en el equivalente numérico.

peso de fuente: negrita

peso de fuente: más audaz

peso de fuente: encendedor

peso de fuente: normal

peso de fuente: 900

peso de fuente: 100

Propiedad de fuente y color de fuente HTML.

La fuente es otra propiedad de contenedores. Dentro de sí mismo, combinó los valores de varias propiedades diseñadas para cambiar las fuentes. Fuente de sintaxis:

fuente: Fuente-familia de tamaño de fuente | heredar.

Además, las fuentes utilizadas por el sistema en inscripciones en varios controles se pueden especificar como un valor.

• leyenda - para botones;
• icono - para iconos;
• menú - menú;
• cuadro de mensaje - cuadros de diálogo;
• pequeño título - para pequeños controles;
• barra de estado - Fuente de cadena de estado.

fuente: icono

fuente: leyenda.

fuente: menú.

fuente: caja de mensaje

pequeño título.

fuente: Barra de estado

fuente: Italia 50px Bold "Times New Roman", Times, Serif

Para establecer el color de la fuente en HTML, puede usar la propiedad Color. Te permite configurar el color como usando indicioy formato RGB. Así como en la forma de código hexadecimal.

Tags HTML que define la alineación de texto, sangría

Texto de ancho utilizado en la imprenta.

En el siguiente ejemplo, se muestra cómo alinearse. texto de ancho Páginas:

Justificar el valor proporciona uniforme texto de nivelación a la derecha e izquierda., es decir por ancho. Este método es ampliamente utilizado en la impresión.

Texto de nivelación en HTML en el centro y ancho.

Texto de nivelación en HTML centrado, texto a la derecha.:

Resultado:

Atributos y valores

• align \u003d "izquierda" - determina texto de nivelación dejado (defecto).
• align \u003d "centro" - niveles de texto en el centro..
• align \u003d "Derecho" - líneas de texto a la derecha.

Alineación | Texto de Penente HTML

Texto html y su retiro a la izquierda de la página.

Produce texto de sangría dejado de dos maneras:

Resultado:

Ver en una nueva ventana.

Sucede que necesita retirar la imagen y atribuir el nombre (frase corta). Para esto hay parámetros:

Align \u003d "TOP" - Líneas el texto en la parte superior de la imagen.
Align \u003d "Bottom": líneas de texto en la parte inferior.
Align \u003d "Medio": alinea el texto en el centro.

A continuación se muestra un código que demuestra la operación por encima de los parámetros descritos.

Hermosa abeja

Muy bonita abeja

Nada tampoco.

Ahora veamos cómo necesita mostrar una imagen con una gran cantidad de texto.
Hay dos parámetros:

Align \u003d "Izquierda": la imagen "arroja el texto" a la izquierda.
Align \u003d "Derecho" - La imagen "arroja el texto" a la derecha.

Para mayor claridad, escriba este código:

La forma del sol está cerca de la esfera perfecta con un diámetro de 1392000 km. Se adapta a la órbita de la luna, y todavía hay mucho espacio. De hecho, más de un millón de planetas de este tipo, ya que la Tierra encajaría libremente dentro del sol. Además, si pudiera conducir un automóvil en su superficie a una velocidad de 88 km / h, habría dejado 5 años y medio para conducir alrededor del sol una vez (sin parar). Pero el tamaño del sol no es constante. Los estudios modernos muestran que el diámetro del sol disminuye aproximadamente 1 metro por hora. Si este fenómeno se llevó a cabo en el siglo pasado, entonces el sol, que vemos ahora 800 km menos de lo que vieron nuestros antepasados. Tal vez esta compresión solar sea parte de una oscilación a largo plazo que ayude a estabilizar una enorme emisión de energía.

Luna

Este es el único satélite natural de la tierra. La masa de la luna es de 0.0123 masas de la Tierra (aproximadamente 1/81) o 7.6.1022 kg. El diámetro de la luna es un poco más de un cuarto de la Tierra (0.273) o 3 476 km. La luna ilumina la tierra de 500,000 veces más débil que el sol). No hay atmósferas familiares para nosotros en la luna, no hay ríos y lagos, vegetación y organismos vivos. La fuerza de la gravedad en la luna es seis veces menos que en la tierra. Día y noche con temperatura cae hasta 300 grados las últimas dos semanas.

Pero Como puede ser, puede ser para que el texto y la imagen estén demasiado cerca entre sí. Para corregirlo, solo necesita establecer parte del tamaño deseado del espesor del marco y el color, como el fondo posterior.

Fenómeno astronómico que se encuentra en el hecho de que la luna cierra (eclipses) total o parcialmente el sol del observador en la tierra. El eclipse solar es posible solo en la Luna Nueva, cuando el lado de la luna que mira hacia el suelo no está cubierto, y la luna en sí no es visible. Los eclipses son posibles solo si la luna nueva ocurre cerca de uno de los dos nodos de la luna (los puntos de intersección de las órbitas visibles de la luna y el sol), no más de aproximadamente 12 grados de uno de ellos.

En general, la pregunta en sí misma es fácil. No hay nada astuto para organizar una cuadra, encima de otro. Pero aún así, hay varios momentos dignos de discusión en este asunto. Creo que habrá personas que estarán interesadas.

La idea es simplemente aplicar algún texto a la imagen. El texto se presenta en forma de bloques de longitud variable, se supone que se ubicará en el lado izquierdo, con un relleno suave alrededor del texto. Por ejemplo, como en esta imagen:

Plan de documentos

Html markup

Una película en el parque:
Kung Fu Panda.

Por supuesto, sería más fácil usar el elemento div para emitir la imagen como un patrón de fondo, pero en este caso asumo que la imagen es el contenido del documento y, por lo tanto, pertenece a HTML. El elemento div se utilizará como un recipiente para el posicionamiento absoluto del texto.

CSS.

Por lo tanto, colocamos el texto directamente sobre la imagen. SIGUIENTE Nuestra tarea hace el fondo para el texto. Desde el elemento

Es un elemento de bloque, no podemos usarlo para estos fines. Utilizamos elemento en línea . Envuelva el texto de TI dentro del título.

Una película en el parque:
Kung Fu Panda.

Usaremos este lapso para el diseño de texto y el fondo:

H2 Span (Color: Blanco; Fuente: negrita 24px / 45px Helvetica, Sans-Serif; Letra-Spacion: -1px; Fondo: RGB (0, 0, 0); / * En caso de que la siguiente línea no funcione * / Backgroundground : RGBA (0, 0, 0, 0.7); Acolchado: 10px;)

Problemas

Como se puede ver en la figura, al final de la línea, el bloque de texto termina inmediatamente después del último símbolo en la cadena, y se inicia inmediatamente en el borde izquierdo. proxima linea. El acolchado de propiedad para el span-a, en este caso, no nos ayudará.

Para resolver el problema, debe usar placas adicionales en ambos lados de la etiqueta.
En este caso, podemos usar fácilmente el relleno.

Una película en el parque:
Kung Fu Panda.

Este nuevo span-am tareará la propiedad de acolchado:

H2 span.spacer (relleno: 0 5px;)

¿Qué es la semántica?

Sobre el este escenario El diseño se completa, pero se mantuvo un problema. A saber, gran cantidad Elementos HTML adicionales agregados solo para el diseño. Me refiero a span-s. Para resolver este problema, usamos jQuery. Para hacer esto, elimine todos los spans en el markup, y agrégalos dinámicamente:

Una película en el parque:
Kung Fu Panda.

$ (Función () ($ ("H2"). Wrapinner (" "); $ (" H2 BR "). Antes (" ") .Después (" "); });