Entrada frontal web para el combate real: 11 aprendizajes de fuentes de texto de estilo CSS comúnmente utilizados

Estilos CSS comunes: 1. Fuente y color 2. Propiedad de fondo 3. Propiedad de texto 4. Propiedad de borde 5. Propiedad de cursor del mouse 6. Estilo de lista 7. Propiedad de posicionamiento 8. Margen interno y externo 9. Flotante y vaciado flotante 10. Barra de desplazamiento 11 Muestre y oculte

Texto: 1.letter-espaciado / espacio entre palabras /2.word-spacing/ espacio entre palabras /3.text-decoration/ subrayado /4.text-align/ Alineados /5.text-indent/ guión /6.line-height / Altura de línea / 7.color / color / 8.parte de palabra / salto de línea de texto /

Fuente: 1.font familiar / tipo de fuente /2.font-size/ tamaño de la fuente /3.font-style/ estilo de fuente /4.font-weight/ peso de la fuente /

* 注意 : fuente: 24px / 1.5em 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Ginebra, Verdana, sans-serif;

/ Abreviatura de font font: font: style weight size / line-heigt font-family / / Los dos que deben aparecer son size font-family / Second word-break: break-all; / Automatic line break of text line break , Chinese Se ajustará automáticamente, la palabra ok, la letra no, el texto predeterminado se agrega desbordamiento: auto; word-break: break-all; /

专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>11种常用css样式之文本字体学习</title>
 7     <style type="text/css">
 8         div.box1{
 9         /*字体*/
10         font-family:"Microsoft Yahei";/*字体类型 添加引号有无均正常展示,建议添加*/
11         font-size:24px;/*字体大小*/
12         font-style:italic;/*字体外观,斜体等同em*/
13         font-weight:900;/*字体粗细 默认100-900,常用bold粗体等同值900 normal正常 lighter细体*/
14         font:30px/1em "黑体";
15         }
16         /*font字体的简写:font:style weight size/line-heigt font-family*/ /*要求必须出现的2个是 size font-family*/
17 font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 18         /*文本*/
19         div.box2{
20         letter-spacing:1px;/*字间距*/
21         word-spacing: -5px;/*词/字符间距*/
22         text-decoration: line-through;
23         /*下划线 underline overline line-through*/
24         text-align:justify;/*对齐 left right center justify*/
25         text-indent: 100px;/*缩进*/
26         /* height: 40px; 27 background-color: #ccc; */
28         /*块级元素高度与行高一致,文本垂直居中展示*/
29         line-height: 40px;
30         color: rebeccapurple;/*颜色 16进制 rgb 单词*/
31         /*恶意输入字母,系统不换行,出现滚动条, word-break: break-all*/
32         overflow: auto;
33         word-break: break-all;/*文本折行*/
34         }
35     </style>
36 </head>
37 <body>
38     <div class="box1">
39 愿星空不问赶路人,时光不负有心人“你的压力来源于:无法自律,只是假装很努力;现状跟不上内心的欲望;所以你焦虑又恐慌” 
40     </div>
41     <div class="box">
42 文本:1.letter-spacing/*字间距*/2.word-spacing/*词间距*/3.text-decoration/*下划线*/4.text-align/*对齐*/5.text-indent/*缩进*/6.line-height/*行高*/7.color/*颜色*/8.word-break/*文本折行*/ 
43     </div>
44     <div class="box2">
45 https://www.cnblogs.com/dhnblog/May the starry sky not ask passers-by, time is worthy of the people who care about you "Your pressure comes from: you ca n’t discipline yourself, just pretend to work hard; the status quo can't keep up with your inner desires; so you are anxious and panic"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 
46     </div>
47 </body>
48 </html>

Supongo que te gusta

Origin blog.51cto.com/14592820/2488268
Recomendado
Clasificación