Fuente CSS y estilo de texto
Texto: color, tamaño de fuente, fuente, negrita, etc.
Texto: altura de línea, alineación y decoración del texto, etc.
Atributos de estilo de texto:
font-family
font-size
color
peso de
fuente estilo de fuente
在html4.0之前，可以用font，但4之后就不用了
<font face="宋体" color="red" size="12px">hiii</font>
<style>
h1{
font-family:"宋体"，"Times New Roman";}
</style>
Ahora use el estilo CSS en lugar de la etiqueta de fuente
tamaño de fuente
Unidad relativa:
píxel px Afectado por la resolución del monitor
en/% em y% son el tamaño establecido para el elemento padre
Tamaño absoluto, no puede cambiar con la resolución del navegador o el tamaño del elemento principal
color define el color del texto en el elemento
color | RGB | #ffffff
color: rojo;
color: rgb (33,43,34); número 0 ~ 255 porcentaje es 0% -100%
color: #fff; #comienzo, 6 dígitos: 0 ~ f se puede abreviar a 3 dígitos, no se distingue entre mayúsculas y minúsculas
Peso de fuente :
normal | negrita | negrita | más clara | 100 ~ 900
De hecho, la negrita y la negrita muestran básicamente el mismo efecto, 100 ~ 600 es el mismo, 700-900 también es el mismo. El
valor predeterminado es normal, que es equivalente a 400 y 700 es equivalente a negrita
斜体：
estilo de fuente
normal cursiva oblicua
Deformación de fuente variante de fuente
Establecer el texto en el elemento en minúsculas mayúsculas normal | minúsculas
se utiliza text-alignElemento de bloque
Establezca la alineación horizontal del texto dentro del elemento :
valores de atributo:
izquierda, derecha, centro, justificar
Si desea que la imagen esté alineada en el centro , debe anidar un elemento a nivel de bloque como div afuera
Si desea mostrar en el centro bajo diferentes navegadores, y el texto en la etiqueta p debajo del div está centrado, debe
<style>
.first{
text-align:center;}
.first p{
width:50%;margin:0 auto;}
</style>
<div class="first">
<p> fsadfasdfasdfsa</p>
</div>
propiedad de alineación vertical Solo efectivo para elementos en línea
El contenido del elemento se proporciona verticalmente
línea de base, sub, super, superior, texto superior, medio, inferior, texto inferior, la longitud, el porcentaje de distinción positiva negativa
centrada verticalmente aplicada en el centro vertical de una
sola línea:
altura y altura de línea como
texto grande -align: center;
El texto de varias líneas está centrado verticalmente:
Los elementos en línea no se pueden colocar en elementos a nivel de bloque
Agregue display: table al elemento padre; agregue al
elemento central:
vertical-align: middle;
display: table-cell;
El atributo line-height se utiliza para establecer la altura y la
longitud de la línea de texto en el elemento. El porcentaje
se superpondrá cuando la altura de la línea sea 16px menor que el tamaño de fuente 20px.
Se recomienda utilizar em como unidad de altura de fila., Para que
em y% no se superpongan con el tamaño de fuente
índice de texto: 2em; cuadrícula superior
Cuando la altura de la línea se establece para que sea la misma que el tamaño de la fuente, o 1em o 100%, la distancia entre las líneas se vuelve más pequeña y el navegador tiene una altura de línea predeterminada, Chrome es de 16px y
se puede heredar la altura de la línea.
Se hereda el valor calculado , en lugar de heredar directamente el valor em o%, puede haber superposición cuando el tamaño de fuente> altura de línea
Atributos de estilo de texto:
espaciado entre palabras establece el espaciado entre palabras en el elementoUsa espacios como estándar
letter-spacing Establece el espacio entre las letras en el elemento. El
valor se puede establecer como positivo o negativo, y la unidad puede ser em,%, px, etc.
text-transform Establece el caso del texto en el elemento: mayúsculas, mayúsculas, minúsculas, ninguna
text-decoration Establece la decoración del texto dentro del elemento. El
subrayado, el sobrelínea, la línea, el parpadeo, ningún
parpadeo tienen problemas de compatibilidad
No puede heredar
solicitud
<style>
p{
background-color:#ececec;height:150px;text-align:center;line-height:150px;}
.one{
font-size:80px;color:#c9394a;font-weight:bold;}
.two{
font-size:40px;color:gray;text-decoration:underline;letter-spacing:5px;vertical-align:15px;}
.three{
font-size:80px;color:gray;font-style:oblique;}
</style>
<p><span class="one">郑乾</span><span class="two">小白啊</span><span class="three">!</span></p>
para resumir:
Producción de
páginas web de la totalidad a la parte, con la ayuda de manuales e Internet.
文字 样式
familia de
fuentes tamaño de fuente
color
peso de
fuente estilo de fuente
alineación
de texto altura de línea alineación
vertical
espaciado de palabras espaciado de
letras
transformación de
texto decoración de texto
SIGUIENTE:
Fondo y lista de CSS
