常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏
文本:1.letter-spacing/字间距/2.word-spacing/词间距/3.text-decoration/下划线/4.text-align/对齐/5.text-indent/缩进/6.line-height/行高/7.color/颜色/8.word-break/文本折行/**
字体:1.font-family/字体类型/2.font-size/字体大小/3.font-style/字体样式/4.font-weight/字体粗细/**
*注意：font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
/font字体的简写:font:style weight size/line-heigt font-family/ /要求必须出现的2个是 size font-family/ 其次word-break: break-all;/文本折行 自动换行，中文的会自动换行，单词ok，字母的不会，默认文本添加overflow: 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>
网友评论