Entonces, lo siguiente que queremos hacer es agregar el texto en la parte superior, así que debe verse así.
Y, afortunadamente, esto es relativamente simple en comparación con hacer esta cuadrícula de imágenes.
Entonces, lo primero que debemos hacer es obtener la fuente.
Esta fuente se llama Ferrocarril.
Es una de las fuentes de Google que hemos visto hasta ahora.
Así que iré a las fuentes de Google y buscaré las reales.
Aquí vamos.
Es el mejor aquí uso y luego voy a seguir adelante y agarrar normal.
Y también hagamos 800.
Y luego incluiremos esto
en nuestra HMO.
Entonces ahora tenemos acceso a esa fuente y luego todo lo que tenemos que hacer es agregar el texto.
En primer lugar, así que arriba voy a hacer un párrafo y voy a poner mi nombre, que es lo que
tenía aquí separado por una barra.
Podemos hacer que sepas poner lo que quieras aquí.
pero con solo un texto lo mantendré simple y luego lo guardaré y luego veremos aquí.
Esto podría ser que Texas podría ser un blog de fotografía o entrar a mi blog,
Seleccione el párrafo y simplemente diremos la familia de fuentes de manera real y veamos con qué terminamos.
DE ACUERDO.
Entonces no es el más emocionante.
Todavía no está allí.
Es muy pequeño y no está espaciado correctamente.
Necesitamos que se mueva más de 1. 6 por ciento también.
Al igual que esta imagen, para moverla en línea podemos comenzar allí.
Todo lo que tenemos que hacer es ir a un párrafo y agregar nuestro margen izquierdo y eso es solo
un punto seis seis por ciento.
Estamos bien, ahora está espaciado correctamente.
Entonces, una cosa más que queremos hacer es definitivamente aumentar el tamaño de la fuente.
Así que sé que el tamaño de fuente que utilicé aquí es de 23 píxeles y no solo eso, pero utilicé un
peso de fuente de 800, por lo que tuve que seleccionarlo.
Así que aquí dirá el tamaño de la fuente 23 píxeles.
Te mostraré cómo se ve eso.
Entonces es más grande pero aún no es tan atrevido.
Entonces volvemos y agregamos el peso de la fuente.
Ochocientos y guardar.
Ahora estábamos frescos en el otoño.
Se ve de cerca, pero todavía nos falta algo que es el hecho de que
no usé el texto en mayúsculas, así que puedo hacerlo usando la transformación de texto o podría alterar el HDMI.
Así que solo voy a hacer eso aquí, el texto se transforma en mayúsculas.
Ahora tenemos todo en mayúsculas.
Aquí vamos.
De modo que puede ver con un ejemplo rápido por qué podría utilizar la transformación de texto porque es mucho
más rápido y más fácil simplemente agregar una para evaluar la propiedad en lugar de tener que volver
a escribir cada letra, especialmente si tiene una cadena de caracteres más larga.
De acuerdo, ahora la última pieza faltante es esta pequeña línea aquí.
Sé que es bastante débil, pero hay una línea aquí y va en línea con esta primera imagen, por lo
que no llega hasta el final.
Va un 30 por ciento del camino.
Entonces, la forma en que vamos a hacer eso es que en realidad es solo un borde en la parte inferior de la que se inspeccionó
en la parte inferior de este párrafo.
De modo que puede ver que el párrafo en sí va un 30 por ciento hasta el final, y
luego se limita al borde que encendimos.
Regresemos a nuestro C SS y a nuestro párrafo.
Comencemos por dejarlo en el límite inferior y hagámoslo obvio para comenzar así que hagamos como tres píxeles de
color rojo sólido.
Así que guardaremos y actualizaremos y solo veremos que la frontera atraviesa todo el camino.
Y supongo que no se ve tan mal.
Definitivamente queremos arreglar esto aquí.
Pero en lugar de hacer eso, voy a cambiar el ancho para que solo llegue al 30 por ciento del camino.
Entonces comenzaremos con eso.
Así que eso es solo cuestión de establecer el ancho del párrafo 30 por ciento.
De acuerdo, entonces ahora termina allí, y luego lo que hace es hacer coincidir el color para que el color que uso
sea muy tenue.
Solo voy a cambiar esto aquí.
Es un color hexadecimal
EF 1 EF 1 EF 1 se ve así.
Puedes ver que es muy débil y creo que lo tenía en dos píxeles en lugar de tres.
Entonces un cambio muy pequeño.
Cambie eso para ser dos píxeles y lo último es el espaciado.
Entonces aquí puede ver que tenemos espacio entre el texto y el borde.
Y aquí no recordamos el espacio entre un elemento y su borde es relleno.
Entonces, si inspeccionamos, puedes verificar que puedo ver el relleno verde allí.
Así que solo necesitamos hacer que el relleno también esté aquí.
Entonces en RC SS solo vamos a
hacer un relleno de 20 pixeles inferiores y volveremos a actualizar.
Y ahora tenemos un poco de espacio allí.
Ahora, por supuesto, siéntete libre de jugar con esto de la forma que prefieras, si prefieres esa línea
en línea recta o ninguna línea en absoluto.
Desea hacer que el texto sea más grande si desea que elimine el relleno o agregue más relleno si
desea que haya más imágenes en la pantalla en lugar de solo tres.
Hay todo tipo de cosas que puedes hacer.
Está bien, así que espero que hayas disfrutado haciendo algo que se ve bien.