CSS字体类型 默认情况下是：微软雅黑 英文字体：Arial（对中文不起作用）‘TimesNewRoman‘（对中文不起
2，看浏览器的调试台（F12），选择elements选项中需要调试的元素，然后通过style选项进行调试。在调试台中可以随意变动元素的属性值进行调试，但是不会对变动源代码。
二，配景图片属性1，background-attchment ： fixed 让配景进行固定。
2，background-size ：
值 ： width 和 height - > 配景图的宽和高， 可以为 100% 100% ，可以将配景图铺满容器。
值 ： 单词（cover）笼罩 可以将配景图片等比例地铺满整个容器，但是超过容器部分不会显示
（contain）包罗 可以将图片等比例的调解到恰好不会超过容器的巨细，但是不会完全铺满容器
三，CSS字体类型
默认情况下是：微软雅黑
英文字体：Arial（对中文不起感化） ‘Times New Roman‘ （对中文不起感化）
中文字体：宋体，楷体、黑体（对中英文都起感化）
中英文比较：https://www.cnblogs.com/chbyiming-bky/articles/9789869.html
什么时候添加引号：当字体中存在空格的时候，添加引号。
一般字体可以设置多个，通过空格进行添加，主要目的做一些备选方案。
四，CSS字体巨细
font-size : 16px (默认巨细)
注：建议字体巨细都设置成偶数。(主要目的是考虑文字对齐)
font-weight :
值 100 200 ... 900
三个档：100 200 300 (细) 400 500 ( 正常 ) 600 700 800 900 (粗)
单词 ( normal 默认暗示正常 , bold 加粗 )
font-style :
normal(正常)
italic（倾斜）
color：设置字体颜色
七，CSS文本修饰text-decoration: overline(上划线) underline(下划线) line-through(删除线)
可以设置多个值。
八，CSS文本巨细写（英文）text-transform: lowercase(单词小写) uppercase(单词大写) capitalize(首字母大写)
九，CSS文本缩进（中文）text-indent: 32px;
em单位：相对单位 1em == 一个字的px巨细 默认情况下 1em == 16px
十，CSS文本对齐方法
text-align : left right center justify(两端点对齐)
页面构造实例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 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="header"> 11 <a href="#" >trevlsotheme</a> 12 <input type="text" placeholder="SEARCH"> 13 </div> 14 <div id="banner"> 15 <a href="#"><img src="#" alt="图片"></a> 16 </div> 17 <div id="news" > 18 <div 19 <h3><a href="#">公司新闻</a></h3> 20 <ul> 21 <li> 22 <a href="#">董事长召开大会</a> 23 </li> 24 <li> 25 <a href="#">中国电器分会</a> 26 </li> 27 <li> 28 <a href="#">董事长访谒中国住的大使馆</a> 29 </li> 30 <li> 31 <a href="#">企业文化与企业</a> 32 </li> 33 <li> 34 <a href="#">董事长的发卖会议</a> 35 </li> 36 <li> 37 <a href="#">喜迎七一</a> 38 </li> 39 </ul> 40 </div> 41 <div > 42 <h3><a href="#">公司介绍</a></h3> 43 <p>公司创立于1984年<br>颠末几十年的成长</p> 44 <p>已成为电器制造，房地产开发和金融<br>投资的大企业</p> 45 </div> 46 <div> 47 <h3><a href="#">人才招聘</a></h3> 48 <p>培养一流的人才，锻造一六的工程<br>实现员工与企业的配合成长</p> 49 <a href="#"><img src="" alt="图片"></a> 50 </div> 51 </div> 52 <div id="project"> 53 <h3><a href="">市场项目</a></h3> 54 <a href="#"><img src="" alt="图片"></a> 55 <p>交通轨道</p> 56 <a href="#"><img src="" alt="图片"></a> 57 <p>节能环保</p> 58 <a href="#"><img src="" alt="图片"></a> 59 <p>航空航天</p> 60 <a href="#"><img src="" alt="图片"></a> 61 <p>石油，天然气与采矿</p> 62 </div> 63 <div id="product"> 64 65 </ul> 66 <div> 67 <h3>产品中心</h3><hr> 68 <ul> 69 <li><a href="#">汽车电机</a></li> 70 <li><a href="#">日用电机</a></li> 71 <li><a href="#">特种电机</a></li> 72 <li><a href="#">大功率电机</a></li> 73 <li><a href="#">电工设备</a></li> 74 </ul> 75 <ul> 76 <li><a href="#">自动化</a></li> 77 <li><a href="#">系统根本</a></li> 78 <li><a href="#">搅拌机</a></li> 79 <li><a href="#">电动车辆</a></li> 80 </ul> 81 <ul> 82 <li><a href="#">电池电源</a></li> 83 <li><a href="#">输入设备</a></li> 84 <li><a href="#">楼盘信息</a></li> 85 <li><a href="#">金融产品</a></li> 86 </div> 87 <div> 88 <h3>技术研发</h3><hr> 89 <ul> 90 <li><a href="">科技力量</a></li> 91 <li><a href=""></a>先进设备</li> 92 <li><a href="">研发测试</a></li> 93 <li><a href="">工艺流程</a></li> 94 </ul> 95 </div> 96 <div> 97 <h3>营销网络</h3><hr> 98 <a href="#"><img src="" alt="图片"></a> 99 </div> 100 </div> 101 <div id="foot"> 102 <a href="">网站舆图</a> 103 <a href="">联系我们</a> 104 <a href="">存眷入口</a> 105 <a href="">采购系统入口</a> 106 <p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</p> 107 <a href="">分享到</a> 108 </div> 109 </body> 110 </html>
web第四天，CSS根本
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30415.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")