[CSS] repaso notas de estudio (atributos de estilo de letra) Artículos adicionales

atributos de estilo de fuente CSS

 

directorio

atributos de estilo de fuente CSS

A, atributos de fuente

Dos, atributo de color

Tres, espaciado de línea línea de altura (altura de línea)

Cuatro, texto-align horizontal alineación

Cinco, texto-guión de la sangría de primera línea

En sexto lugar, decorativo text-decoration texto


 

A, atributos de fuente


atributos de fuente para el estilo de fuente para un conjunto integral.
La sintaxis básica:
selector {font:-estilo de fuente Font- peso de la fuente de tamaño / line-altura de la fuente familiar;}
ligaduras de fuente están ordenados, el orden no puede ser reemplazado, separados por espacios cada atributo.
font-size, y la fuente de la familia no pueden ser omitidos (se pueden omitir), o no funciona.

[Ejemplo de código]
    <style>
        h1 de {
            fuente: 12px "Microsoft Yahei";
        }
    </ style>

 

Dos, atributo de color


color define el color de texto, que forma de realización tiene los tres valores siguientes:

  • 1, el valor de un color predefinido, tal como rojo, verde, azul y similares;
  • "#" Al principio 2, hexadecimal, tal como # FF0000 (o # F00), # FF6600 (o # F60), # 29D794 como, si las mismas, a continuación, veintidós puede abreviarse (tres cada dos grupos deben ser los mismos);
  • 3, códigos de RGB, como el rojo pueden expresarse como rgb (255,0,0) o rgb (100%, 0%, 0%);

[Código de ejemplo]

    <style>
        Gen {
            color: # FF0000;
        }
    </ Style>

 

Tres, espaciado de línea línea de altura (altura de línea)


atributo línea de altura se utiliza para ajustar el espaciado de línea es la distancia entre las filas y las líneas, comúnmente conocida como la altura de la línea.
valor de la propiedad común en píxeles px, em y el valor relativo en%, la práctica más común es igualmente píxeles px .
En general, gran espaciamiento a aproximadamente 7/8 de píxeles que el tamaño de fuente.

[Ejemplo de código]
    <style>
        P {
            font-size: 16px;
            Line-height: 24px;
        }
    </ style>


Cuatro, texto-align horizontal alineación


propiedad text-align nivel se utiliza para establecer el texto están alineados con respecto a alinear los atributos align html.

  • izquierda: Izquierda (por defecto)
  • derecha: alineación a la derecha
  • Centro: Alinear

[Ejemplo de código]
    <style>
        h1 {
            fuente: 12px "Microsoft Yahei";
            = texto Alinear a la izquierda: Centro; / * Let h1 centrado dentro del texto * /
        }
    </ style>


Cinco, texto-guión de la sangría de primera línea


atributo se utiliza para establecer el texto guión de texto guión, valores de atributos numéricos pueden ser diferentes unidades, em ancho de caracteres o múltiplos de porcentaje relativo a la anchura de la ventana del navegador%, permite el uso de un valor negativo se recomienda generalmente por EM .
1 em es la anchura de una palabra, un párrafo caracteres normales, los caracteres 1 em es igual a 1.

[Código de ejemplo]

    <Style>
        P {
            font-size: 16px;
            line-height: 24px;
            text-indent: 2em; / * sangría de párrafo primera línea de palabra * /
        }
    </ style>

 

En sexto lugar, decorativo text-decoration texto


text-decoration se suele utilizar para modificar el efecto decorativo enlace.

  • Ninguno de bajo coste (por defecto) - Cuando se utiliza decorativa cancelados
  • subrayado subrayado - Común
  • centelleo del centelleo
  • overline overline
  • línea-a través de la través de la línea (tachado)

[Código de ejemplo]

    <style>
        div {
            font-size: 40px;
            text-decoration: underline;
        }
    </ Style>

[Resumen mnemotécnico]

  1. Inclinación: etiqueta em y I → Cancelar inclinados font-style: normal; Añadir inclinado font-style: cursiva;
  2. etiquetas fuertes y b → Anular negrita font-weight:: Bold normal; o font-weight: 400; añadiendo negrita font-weight: bold; o font-weight: 700;
  3. Subrayado: u → etiquetas ins y fuera subrayado text-decoration: none; subrayado text-decoration: underline;
  4. Que atraviesa: s → y recuperar del lema text-decoration: none; tachado text-decoration: tachado;

 

Liberadas 2018 artículos originales · ganado elogios 3957 · Vistas 10350000 +

Supongo que te gusta

Origin blog.csdn.net/zhongguomao/article/details/104600545
Recomendado
Clasificación