- Escrito al frente: consulte el tutorial de Bilibili Dark Horse Programmer Pink Teacher
- Dirección: https://www.bilibili.com/video/BV14J4114768?t=328&p=26
Tabla de contenido
font-weight: peso de la fuente
fuente: establece de forma completa el estilo de fuente (énfasis)
text-align: alineación horizontal del texto
text-indent: sangra la primera línea
decoracion de texto decoracion de texto
Resumen de las propiedades de apariencia de CSS
Estilo de texto CSS
fuente
tamaño de fuente: tamaño
- Función: el atributo de tamaño de fuente se utiliza para establecer el tamaño de fuente
p { font-size:20px; }
- unidad:
- Puede utilizar unidades de longitud relativa o unidades de longitud absoluta.
- Las unidades de longitud relativa se utilizan con más frecuencia, se recomienda la unidad de píxel px y se utiliza menos la unidad de longitud absoluta.
- Nota:
- Después de nuestro tamaño de texto, básicamente usamos px, y otras unidades rara vez se usan
- El tamaño de texto predeterminado de Google Chrome es 16px
- Sin embargo, los distintos navegadores pueden mostrar distintos tamaños de fuente de forma predeterminada. Intentamos dar un tamaño de valor claro en lugar del tamaño predeterminado.
- Por lo general, especifique el tamaño de todo el texto de la página para el cuerpo.
font-family: fuente
- Función: El atributo font-family se utiliza para establecer qué fuente.
p{ font-family:"微软雅黑";}
- Las fuentes de uso común en las páginas web incluyen Times New Roman, Microsoft Yahei, HeiTi, etc. Por ejemplo, establezca la fuente de todo el texto de párrafo en la página web en Microsoft Yahei
- Se pueden especificar varias fuentes al mismo tiempo, separadas por comas, lo que significa que si el navegador no admite la primera fuente, intentará la siguiente hasta encontrar una fuente adecuada. Si no hay ninguna, prevalecerá la fuente predeterminada de nuestro ordenador.
p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}
- 1. Las distintas fuentes deben estar separadas por comas en inglés .
- 2. Las fuentes chinas deben citarse en inglés, y las fuentes en inglés generalmente no necesitan citarse. Cuando necesite configurar la fuente en inglés, el nombre de la fuente en inglés debe estar antes del nombre de la fuente en chino .
- 3. Si el nombre de la fuente contiene espacios, #, $ y otros símbolos, la fuente debe ir entre comillas simples o dobles en inglés , como font-family: "Times New Roman" ;.
- 4. Intente utilizar la fuente predeterminada del sistema para asegurarse de que se pueda mostrar correctamente en el navegador de cualquier usuario.
- Fuente CSS Unicode:
- Por que utilizar fuentes Unicode
- Establezca el nombre de la fuente en CSS y escriba directamente en chino. Sin embargo, cuando la codificación del archivo (GB2312, UTF-8, etc.) no coincide, se producirá un error confuso.
- El sistema xp no admite chino como Microsoft Yahei.
- resolver:
- Opción 1: puedes usar inglés en su lugar. Por ejemplo
font-family:"Microsoft Yahei".- Solución 2: utilice directamente la codificación Unicode para escribir nombres de fuentes en CSS para evitar estos errores. Al usar Unicode para escribir nombres de fuentes en chino, el navegador puede analizarlo correctamente.
font-family: "\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”。
Nombre de la fuente nombre inglés Codificación Unicode Song Ti SimSun \ 5B8B \ 4F53 Nueva canción NSimSun \ 65B0 \ 5B8B \ 4F53 Cuerpo negro SimHei \ 9ED1 \ 4F53 Microsoft Yahei Microsoft YaHei \ 5FAE \ 8F6F \ 96C5 \ 9ED1 Italics_GB2312 KaiTi_GB2312 \ 6977 \ 4F53_GB2312 Guión oficial LiSu \ 96B6 \ 4E66 Jardín de infancia YouYuan \ 5E7C \ 5706 Chino fino negro STXihei \ 534E \ 6587 \ 7EC6 \ 9ED1 Cuerpo detallado MingLiU \ 7EC6 \ 660E \ 4F53 Nuevos detalles PMingLiU \ 65B0 \ 7EC6 \ 660E \ 4F53
- Para solucionar el problema de instalación de fuentes en diferentes computadoras, intentamos usar solo las fuentes chinas Song Ti y Microsoft Yahei
font-weight: peso de la fuente
- Cómo hacer que la fuente en negrita en html se puede lograr con etiquetas
- Utilice by etiquetas fuertes para poner el texto en negrita.
- Puede usar CSS para lograrlo, pero CSS no tiene semántica.
Valor de atributo descripción normal Valor predeterminado (no en negrita) negrita Definir negrita (negrita) 100 ~ 900 400 es equivalente a normal y 700 es equivalente a negrita. Recordemos esta oración
- Abogado: Por lo general, preferimos usar números para indicar negrita y no negrita . (Negrita equivale a 700)
font-style: estilo de fuente
- Cómo inclinar la fuente en html podemos usar etiquetas para lograr
- La fuente está inclinada a excepción de las etiquetas i y em
- Puede usar CSS para lograrlo, pero CSS no tiene semántica
- El atributo de estilo de fuente se utiliza para definir el estilo de fuente, como cursiva, cursiva o fuente normal. Los valores de atributo disponibles son los siguientes:
Atributos efecto normal De forma predeterminada, el navegador mostrará el estilo de fuente estándar font-style: normal; itálico El navegador mostrará el estilo de fuente en cursiva.
- Por lo general, rara vez ponemos el texto en cursiva, pero preferimos cambiar las etiquetas en cursiva (em, i) al modo normal .
fuente: establece de forma completa el estilo de fuente (énfasis)
- El atributo de fuente se utiliza para configurar de manera integral el estilo de fuente
El formato de sintaxis básico es el siguiente:
选择器 { font: font-style font-weight font-size/line-height font-family;}
- Nota :
- Cuando se utiliza el atributo de fuente, se debe escribir en el orden en el formato gramatical anterior y el orden no se puede cambiar.Cada atributo está separado por espacios .
- Los atributos que no es necesario configurar se pueden omitir (tome el valor predeterminado), pero los atributos de tamaño de fuente y familia de fuentes deben conservarse, de lo contrario, el atributo de fuente no funcionará .
resumen de fuentes
Atributos Medio punto importante tamaño de fuente Tamaño de fuente La unidad que usamos habitualmente es px, debemos seguir el ritmo de la unidad Familia tipográfica Fuente En el trabajo real, escriba fuentes de acuerdo con el acuerdo del equipo. peso de la fuente Peso de fuente Recuerde que la negrita es 700 o negrita. Si no es negrita, es normal o 400. Recuerde que los números no deben seguir la unidad Estilo de fuente Estilo de fuente Recuerde que la inclinación es en cursiva y no la inclinación es normal. Normalmente usamos normal en el trabajo. fuente Concatenación de fuentes 1. La ligadura de la fuente está en orden y no se puede cambiar al azar 2. El tamaño de la fuente y la fuente deben aparecer al mismo tiempo
Propiedades de apariencia CSS
color: color del texto
- Rol: el atributo de color se utiliza para definir el color del texto,
- Hay tres formas de seleccionar valores:
Representación Valor de atributo Valor de color predefinido rojo, verde, azul y nuestra reina color rosa Hexadecimal # FF0000 ， # FF6600 ， # 29D794 Código RGB rgb (255,0,0) o rgb (100%, 0%, 0%)
- Nota: En nuestro trabajo real, la notación hexadecimal es la más común y preferimos abreviaturas como # f00 para rojo
text-align: alineación horizontal del texto
- Función: el atributo text-align se utiliza para establecer la alineación horizontal del contenido del texto, que es equivalente al atributo align en html
- Los valores de atributo disponibles son los siguientes:
Atributos Explicación izquierda Alineación izquierda (valor predeterminado) Derecha Alinear a la derecha centrar Alinear al centro
- Nota: el contenido del cuadro está centrado horizontalmente, no el cuadro está alineado en el centro
altura de línea: interlineado
- Función : El atributo de altura de línea se utiliza para establecer el espaciado de línea, que es la distancia entre líneas, es decir, el espaciado vertical de caracteres, generalmente llamado altura de línea.
- Unidad : Hay tres unidades de valor de atributo que se utilizan comúnmente para la altura de línea, que son píxeles px, valor relativo em y porcentaje%. El píxel px es el más utilizado en el trabajo real.
- Generalmente, el interlineado debe ser aproximadamente 7 u 8 píxeles más grande que el tamaño de la fuente .
- altura de línea: 24px;
text-indent: sangra la primera línea
- Función : el atributo text-indent se utiliza para establecer la sangría de la primera línea de texto,
- Valor del atributo : El valor del atributo puede ser un valor numérico 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.
- 1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
p { /*行间距*/ line-height: 25px; /*首行缩进2个字 em 1个em 就是1个字的大小*/ text-indent: 2em; }
text-decoration 文本的装饰
- text-decoration 通常我们用于给链接修改装饰效果
值 描述 none 默认。定义标准的文本。 取消下划线（最常用） underline 定义文本下的一条线。下划线 也是我们链接自带的（常用） overline 定义文本上的一条线。（不用） line-through 定义穿过文本下的一条线。（不常用）
CSS外观属性总结
属性 表示 注意点 color 颜色 我们通常用 十六进制 比如 而且是简写形式 #fff line-height 行高 控制行与行之间的距离 text-align 水平对齐 可以设定文字水平的对齐方式 text-indent 首行缩进 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; text-decoration 文本修饰 记住 添加 下划线 underline 取消下划线 none
CSS文字文本样式总结
综合案例
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>综合案例-体育页面</title> <style> body { font-size: 16px; } .title { font-size: 28px; /*让字体不加粗*/ font-weight: 400; /*color: #FF6700;*/ /*color: rgb(255,103,0);*/ } em { /*让倾斜的标签 不倾斜*/ font-style: normal; color: skyblue; } .time { color: #ccc; /*#ff0000 #f00 #000000 #000 #ffffff #fff #ff1234 #ff1122 #f12*/ } .people { /*color: #990000;*/ color: #900; text-decoration: underline; } .search { color: red; } .btn { color: green; font-weight: 700; } /*文本 水平居中对齐*/ .tac { text-align: center; } p { /*行高 */ line-height: 26px; /*首行缩进2个字的距离 em 是倍数关系， 1em 就是1个字的距离 2em 就是2个字的宽度*/ text-indent: 2em; } a { /*取消下划线 a 默认自带下划线的*/ text-decoration: none; } </style> </head> <body> <h1 class="title tac">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1> <div class="tac"> <span class="time">2017年07月16日20:11</span> <span class="people"> 新浪体育 评论中大奖 （11人参与）</span> <a href="#">收藏本文</a> <input type="text" value="请输入查询条件" class="search" /> <input type="button" value="搜索" class="btn" /> </div> <hr /> <p> 新浪体育讯 7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。 </p> <p> 在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。 </p> <p> 据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。 </p> <p> 这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong> </p> </body> </html>
