Conocimientos básicos de CSS y CSS3 (dos) atributos de apariencia de texto

        Espero poder crecer con todos en CSDN. Si hay errores, ¡por favor critique y aconseje!

        El nombre completo de CSS es Hoja de estilo en cascada en inglés y se traduce como "Hoja de estilo en cascada" en chino. Basado en HTML, CSS proporciona una gran cantidad de funciones, como fuente, color, control de fondo y diseño general, etc., y se pueden configurar diferentes estilos para diferentes navegadores. Aprendí las propiedades de estilo de fuente en CSS y Conocimiento básico de CSS3 (1) (haga clic para revisar), ¡ahora aprendamos juntos las propiedades de apariencia del texto CSS!

1.color: color del texto

Hay tres métodos de valor: nombres de colores predefinidos: como rojo, verde, etc.

                             Hexadecimal, como # ff000, etc.

                              El código RGB, como el rojo, se puede expresar como rgb (255,0,0) o rgb (100%, 0,0), es decir, rojo, verde y azul.

2.capitalización de letras: espacio entre palabras

El valor del atributo puede ser un valor numérico en diferentes unidades, se permiten valores negativos y el valor predeterminado es normal.

3.paso entre palabras: espaciado entre palabras

Se utiliza para definir el espacio entre palabras en inglés y no es válido para caracteres chinos. El valor del atributo puede ser un valor numérico en diferentes unidades, se permiten valores negativos y el valor predeterminado es normal.

4.line-height: interlineado

El espaciado entre líneas es la distancia entre líneas, es decir, la distancia vertical de los caracteres.

5.text-transform: transformación de texto

Usado para controlar el caso de los caracteres ingleses, los valores de los atributos son los siguientes:

ninguno: sin conversión

capitalizar: poner en mayúscula la primera letra

mayúsculas: convierte todos los caracteres a mayúsculas

minúsculas: convierte todos los caracteres a minúsculas

6.text-decoration: decoración de texto

Se utiliza para establecer el subrayado, el sobrelineado, el tachado y otros efectos decorativos del texto. Los valores de atributo disponibles son los siguientes:

ninguno: sin decoración

subrayado: subrayado

overline: overline

line-through: tachado

* Si desea que el texto tenga efectos de subrayado y tachado, puede escribir subrayado y tachado al mismo tiempo después del atributo.

p {decoración de texto: subrayado de línea;}

7.text-align: alineación horizontal

Se utiliza para establecer la alineación horizontal del contenido del texto, que es equivalente al atributo de alineación en HTML. Los valores de atributo disponibles son los siguientes:

left: alineación izquierda (predeterminado)

derecha: alineado a la derecha

centro: centro alineado

8.text-indent: sangría de texto

Se utiliza para establecer la sangría de la primera línea de texto. Su valor de atributo puede ser un valor en diferentes unidades, un múltiplo del ancho del carácter em o un porcentaje relativo al ancho de la ventana del navegador. Se permiten valores negativos. Se recomienda utilizar em como unidad de ajuste.

* El atributo de sangría de texto solo se aplica a elementos a nivel de bloque y no es válido para elementos en línea (los elementos a nivel de bloque y en línea se agregarán en blogs futuros)

9.white-space: manejo de espacios en blanco

* Al crear una página web en HTML, no importa cuántos espacios escribas, el navegador solo mostrará uno al final. Todo lo que necesitamos para configurar el método de procesamiento de espacios en blanco del espacio en blanco CSS, sus valores de atributo son los siguientes:

normal: los espacios y las líneas en blanco en el texto no son válidos y se ajustan automáticamente después de las líneas completas

pre: preformatear, mantener espacios y líneas en blanco como están de acuerdo con el formato de escritura del documento

nowrap: los espacios y las líneas vacías no son válidos, y el texto forzado no se puede ajustar a menos que encuentre una etiqueta de nueva línea <br/>. * El contenido no se ajustará si excede el límite de la etiqueta, y la barra de desplazamiento aumentará automáticamente si excede la página del navegador

10.text-shadow: efecto de sombra

Usado para agregar efectos de sombra al texto de la página, el formato de sintaxis básico es el siguiente:

Selector {text-shadow: h-shadow (distancia de sombra horizontal) v-shadow (distancia de sombra vertical) desenfoque (radio de desenfoque) color (color de sombra)}

Regala una castaña:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影效果</title>
    <style type="text/css">
    .one{
        font-size: 60px;
        text-shadow:10px 5px 10px #6600ff;
    }
    </style>
</head>
<body>
<p class="one">这就是阴影效果</p>
</body>
</html>

**** Nota: Cuando los parámetros de distancia horizontal y vertical de la sombra establecida son positivos, la dirección de proyección de la sombra está en la esquina inferior derecha. Cuando es negativo, está en la esquina superior izquierda. El parámetro del radio de desenfoque de la sombra solo puede ser un valor positivo, cuanto mayor sea el valor, mayor será el rango de desenfoque hacia afuera de la sombra.

 

11.text-overflow: indica el desbordamiento de texto en el objeto

Usado para indicar el desbordamiento del texto en el objeto, los valores de atributo disponibles son los siguientes:

puntos suspensivos: utilice la etiqueta de puntos suspensivos "..." para marcar el texto construido, la posición donde se inserta la etiqueta de puntos suspensivos es el último carácter

clip: construye texto de desbordamiento sin mostrar la etiqueta omitida "..."

Supongo que te gusta

Origin blog.csdn.net/m0_47228284/article/details/109177964
Recomendado
Clasificación