Estilos relacionados con el texto CSS
1. Atributos de estilo de fuente CSS
1. tamaño de fuente tamaño fuente
Puede usar unidades de longitud relativa o unidades de longitud absoluta, en general, usar px
| Unidad de longitud relativa | Explicación |
|---|---|
| en | El tamaño de fuente relativo al texto en el objeto actual |
| px | Píxeles, más comúnmente utilizados, recomendados |
| Unidad de longitud absoluta | Explicación |
|---|---|
| en | Pulgadas |
| cm | Cm |
| mm | Mm |
| pt | Punto |
Fuente 2.font-family
Puede configurar varias fuentes al mismo tiempo (también puede configurar solo una), separadas por una coma en el medio, lo que indica que si el navegador no admite la primera fuente, probará la siguiente hasta que encuentre una fuente adecuada, por ejemplo
body{font-faily:"华文彩云"，"宋体"，"黑体";}Nota: ① Todas las fuentes deben estar separadas por comas en inglés.
② chino fuente requiere comillas en el estado de Inglés, Inglés fuentes son generalmente no cotizados, sólo había la fuente Inglés, el nombre de la fuente debe estar en Inglés antes de que el nombre de la fuente china
③ Si el nombre de la fuente contiene, #, $ símbolos, cambie el tipo de letra Debe agregar comillas dobles o comillas simples en inglés, por ejemplo:
font-family: "Times New Roman"
④ Intente utilizar la fuente predeterminada del sistema para asegurarse de que se puede mostrar normalmente en cualquier navegador
3.peso de fuente de peso de fuente
| Valor | Descripción |
|---|---|
| normal | Valor predeterminado, define caracteres estándar |
| negrita | Definir caracteres en negrita |
| más audaz | Define personajes más gruesos |
| encendedor | Define personajes más finos |
| 100 ~ 900 (múltiplo entero de 100) | Definir caracteres finos a gruesos. Entre ellos, 400 es equivalente a lo normal, 700 es equivalente a negrita, cuanto mayor es el valor, más gruesa es la fuente |
4. variante de fuente variante
Generalmente se usa para definir letras minúsculas, solo válido para caracteres en inglés
| normal | El navegador mostrará las fuentes estándar. |
|---|---|
| letras minúsculas | El navegador mostrará una pequeña fuente en mayúscula, es decir, todas las letras minúsculas se convertirán a mayúsculas. Sin embargo, todas las letras en minúsculas tienen un tamaño de fuente más pequeño que el resto del texto. |
5.Estilo de fuente estilo fuente
| normal | Por defecto, el navegador mostrará el estilo de fuente estándar |
|---|---|
| itálico | El navegador mostrará el estilo de letra cursiva |
| oblicuo | El navegador mostrará el estilo de letra cursiva |
6.Fuente conjunto completo de fuentes
Formato de sintaxis básica:
选择器{font:font -style font-variant font-weight font-size/line-weight font-family;}Por ejemplo:
p{font-family:Arial,"宋体";font-size:30px;font-style:italic;
font-weight:bold;font-variant:small-caps;linr-weight:40px;}Es equivalente a:
p{font: italic small-caps bold 30px/40px Arial,"宋体";}Entre ellos, se puede omitir el valor del atributo que no necesita establecerse (tome el valor predeterminado), pero se deben conservar los atributos de tamaño de fuente y familia de fuentes; de lo contrario, el atributo de fuente no funcionará
Segundo, las propiedades de apariencia del texto CSS
1.color color de texto
Hay tres formas de obtener el valor:
| Colores predefinidos | Tales como rojo, azul, verde, etc. |
|---|---|
| Maleficio | Tales como: # FF0000, # FF6600, etc. En el trabajo práctico, el hexadecimal es la forma más utilizada para definir el color. |
| Código RGB | Tal como el rojo se puede expresar como rgb (255,0,0) o rgb (100%, 0%, 0%) |
2. espaciado entre palabras espaciado entre palabras
La tabla vacía entre los caracteres de autocuración, su valor de atributo puede ser un valor en diferentes unidades, puede ser un valor negativo, por defecto es normal
3. espaciado de palabras
Los valores de los atributos pueden ser valores en diferentes unidades. Se permiten valores negativos. El valor predeterminado es normal
4. espaciado de línea de altura de línea
5. transformación de texto de transformación de texto
Controle el caso de los caracteres en inglés, los valores de los atributos son los siguientes:
| noveno | Sin conversión (predeterminado) |
|---|---|
| capitalizar | Capitalizar |
| mayúscula | Convierte todos los caracteres a mayúsculas |
| minúsculas | Convierta todos los caracteres a minúsculas |
6. decoración de texto decoración de texto
Establezca efectos decorativos como el dibujo de línea superior, el dibujo de línea inferior, el tachado, etc. del texto. Los valores de los atributos son los siguientes:
| ninguna | Sin decoración (predeterminado para texto normal) |
|---|---|
| subrayar | Subrayar |
| overline | Dibujar linea |
| line-through | Tachado |
(Puede asignar múltiples valores de atributos al mismo tiempo)
7. alineación horizontal de alineación de texto
Equivalente al atributo de alineación en HTML, los valores de los atributos son los siguientes:
| izquierda | Justificar a la izquierda (predeterminado) |
|---|---|
| derecho | Derecho |
| centrar | Alinear centro |
Por ejemplo, establecer el centro del título secundario para mostrar puede ser:
h2{text-align:center;}注意：text-align属性仅适用于块级元素，对行内元素无效
如果需要设置图像设置水平对齐，可以为图像添加一个父标记如< p >或< div >,然后对父标记应用text-align属性，即可实现图像的水平对齐。
8.text-indent 首行缩进
9.white-space 空白符处理
在使用HTML中，无论源代码有多少个空格，浏览器只会显示一个字符的空白。在CSS中，使用white-space属性可以设置空白符的处理方式，其属性值如下：
| normal | 常规(默认值），文本的空格，空行无效，满行（到达区域边界）后自动换行 |
|---|---|
| pre | 预格式化，按文档的书写格式保留空格，空行原样显示 |
| nowrap | 空格空行无效，强制文本不能换行，除非遇到换行标记< br/ >.内容超出元素的边界也不换行，若超出浏览器的页面则会自动增加滚动条 |
