Fuente de texto CSS frontal y estilo de fondo

Fuentes de texto CSS y estilos de fondo

1. Estilo de fuente

• **tamaño de fuente:**tamaño de fuente: px / % / em / rem;

  • establecer la altura de la fuente

  • unidad:

    • px píxeles relativos a la resolución de la pantalla, el tamaño de fuente predeterminado del navegador es 16px

    • em, calculado en función del tamaño de fuente del elemento principal

    • Porcentaje: calculado en función del tamaño de fuente del elemento principal

    • rem: calculado en función del tamaño de fuente del elemento raíz

    • <style>
          html {
                  
                  
              font-size: 18px;
          }
          div {
                  
                  
              font-size: 20px;
          }
      
          p {
                  
                  
              /*font-size: 2em;*/
              /*font-size: 300%;*/
              font-size: 2rem;
          }
      </style>
      
      
      <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consectetur cupiditate dolore laboriosam non odit quae totam veniam. Alias blanditiis earum est eveniet, iste quia sapiente sequi! Culpa, nostrum nulla.</p>
      </div>
      

• **Color de fuente: **color: palabra en inglés/hexadecimal/rgb;

  • establecer el color de la fuente
  • El texto se representa en negro de forma predeterminada, excepto los enlaces (los enlaces son azules de forma predeterminada)
  • Palabras en inglés para color:
    • rojo
    • verde
    • azul
    • amarillo
    • rosa
    • cielo azul
  • notación de la función rgb:
    • r rojo
    • g verde
    • b azul
    • colores primarios
  • Valor hexadecimal #rrggbb #rbg

• **Tipo de fuente:**familia de fuentes: nombre de fuente;

  • Se utiliza para configurar la fuente: Arial Microsoft Yahei

• **Peso de fuente: **peso de fuente: valor; el valor puede ser:

  | valor| descripción|
  | :-----: | :----------------: |
  | negrita | definir fuente en negrita |
  | más negrita | definir fuente en negrita |
  | más claro | definir una fuente más clara |
  | normal | definir un tamaño de fuente normal |

Cientos de valores de 100-900

400 normal 700 negrita

• **Fuente en cursiva: **estilo de fuente: valor; el valor puede ser:

  valor	ilustrar
  normal	normal
  itálico	cursiva, cambiar a una fuente en cursiva

• Altura de línea: altura de línea: px%\multiple;

  • Controla la altura de cada línea de texto, y el texto se centrará verticalmente dentro de esta altura de línea
  • Cuando establezcamos el tamaño de fuente para el texto, estableceremos la altura de línea para el texto de acuerdo con la proporción de 1,32 del tamaño de fuente
  • Altura de línea = tamaño del texto + espacio entre líneas superior e inferior El espacio superior e inferior entre dos textos

2. Estilos de texto

• Sangría de texto: sangría de texto

• Alineación horizontal del texto: alineación de texto

  valor	ilustrar
  izquierda	alinear a la izquierda
  centro	alineación central
  bien	Mesa justificada a la derecha
  justificar	justificar

• **Decoración de texto: **decoración de texto

  valor	ilustrar
  ninguno	sin línea de texto
  subrayar	subrayar
  línea directa	Linea discontinua
  superposición	subrayar

• Estilo de subrayado: texto - decoración: línea ondulada ondulada

• **Color de subrayado: **texto-decoración: rojo rojo

• **Espaciado entre palabras: **espaciado entre palabras espaciado entre palabras

• Espaciado entre palabras: espaciado entre letras el espacio entre cada carácter

• Método de visualización de desbordamiento: desbordamiento de texto

  • Cuando la casilla especifica fuera de lo oculto:

    recortar por defecto, recortar texto

    puntos suspensivos muestra puntos suspensivos para representar texto recortado

3. Estilo de fondo

• background-color: establece el color de fondo del elemento;
  • Valor: el nombre en inglés del color rgb hexadecimal
  • El color de fondo no afectará el tamaño de nuestra caja. En la etapa de desarrollo, podemos usar el color de fondo para ver la posición y el tamaño de la caja.
• background-image: establece la imagen de fondo del elemento;
  • La imagen de fondo es solo un efecto decorativo para la caja, similar al color de fondo, que no puede abrir la caja.
  • Si el tamaño del elemento es más grande que la imagen, la imagen se organiza en mosaico horizontal y verticalmente de forma predeterminada
  • Si el tamaño del elemento es más pequeño que la imagen, la imagen se muestra de manera predeterminada desde la esquina superior y la parte sobrante es invisible
• background-repeat: Controla si la imagen de fondo se repite;
  • repetir mosaicos tanto horizontal como verticalmente
  • sin repetición
  • repetir-x mosaicos horizontalmente
  • repetir-x mosaicos verticalmente
• background-position: controla la posición de la imagen de fondo en el elemento;
  • posición de fondo: la configuración de la dirección horizontal y la configuración de la dirección vertical
  • Horizontal: izquierda centro derecha
  • Vertical: arriba centro abajo
  • número