HTML基础知识2-引入样式的方式、chrome审查元素功能介绍
一、样式有几种引入方式? link 和 @import有什么区别？
- 有三种方式
a、外部样式
<link rel="stylesheet" type="tex/csst" href="./index.css">
b、内部样式
<style type="text/css" >
p{color:red;font-height:18px;}
</style>
c、内联样式
<p style="color:red;font-size:20px;"> 段落</p>
- 区别是
a、使用link时需增加一次网络请求，但有时使用它可重复利用相关式样（比如导航栏、底部栏等），方便管理；使用@import 不需要另外增加一次网络请求；
b、@import 只支持CSS而link还可定义RSS等其他事务；
c、link不存在兼容性问题。@import 是在CSS2.1以后才推出的，低版本浏览器不支持；
d、加载时间点不同 link在页面加载的同时也加载link里面的内容而@import需要页面加载完后才能加载@import的内容；
e、ink支持使用Javascript控制DOM去改变样式；而@import不支持
** 二、文件路径../main.css 、./main.css、main.css有什么区别？**
../main.css表示上级路径中的css文件；./main.css及main.css 表示当前文件夹中的css文件；
三、console.log是做什么用的？
方便调式javascript用的
四、text-align有几个值，分别有什么作用
有五个值，left 、right、center、justify及inherit作用分别为：文本左对齐，右对齐，居中，两端对齐及继承父元素属性中的text-align
五、px、em、rem分别是什么？有什么区别？如何使用？
px表示像素的意思；em为相对单位，其不是绝对单位，其大小依据父元素数值而定；rem也为相对单位，但其大小依据HTML根元素而定；（除了IE8及更早版本外，所有浏览器均已支持rem）
关于rem的相关知识可见：【干货】前端rem单位的正确使用姿势
rem与px间的转换工具：http://mxd.tencent.com/wp-content/uploads/2014/11/rem.html
六、对chrome 审查元素的功能做个简单的截图介绍
chrome开发者工具.png
Elements: 允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果；
Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等；
Sources: 主要用来调试js；
Timeline: 提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在Timeline中；
Profiles: 分析web应用或者页面的执行时间以及内存使用情况；
Resources: 对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；
Audits: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；
Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。fen
七、如下代码，设置 p为几 rem，让h1和p的字体大小相等?
Paste_Image.png
p设为6rem，h1和P字体大小相等。因为rem依据html根字体大小有关，默认html字体大小为16px，但本样式中其字体大小为62.5%*16px=10px，而h1字体大小为60px，故p应该为6rem才是的其与h1字体大小相等。
八、设置body的字体为微软雅黑，字号16px， 行高1.5倍，字体颜色 #333
设置段落颜色#000, 首行缩进两个字体宽度，1.5倍行高
代码可见如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title> 网页标题</title>
<style type="text/css">
p{color: #000;text-indent:2em;line-height:1.5}
body{font-family: Microsoft Yahei;font-size: 16px;line-height: 1.5;color: #333}
</style>
</head>
<body>
<h1> 这是默认标题 </h1>
设置body的字体为微软雅黑，字号16px， 行高1.5倍，字体颜色 #333
<p> 设置段落颜色#000, 首行缩进两个字体宽度，1.5倍行高</p>
</body>
</html>
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
