课程目标
掌握样式的几种引入方式
能使用Chrome开发工具进行基本页面调试
熟悉常见文本样式
熟悉单位的使用
课程建议
代码题需要把代码提交到公共作业项目下自己名字的文件夹内，如homework/若愚/task5-1.html
当提交完作业后，可在浏览器查看代码作业预览。如：班级项目是 jrg-renwu4
，在提交作业后可在 http://book.jirengu.com/jirengu-inc/jrg-renwu4/查看
预习视频
课程视频- HTML 基础-资源路径&样式引入方式&基本调试
课程视频- HTML 基础-单位-基础样式
课程任务
问答
1. 样式有几种引入方式?
link和@import有什么区别
样式有三种写法——
（确切的说如果包含浏览器缺省（默认）的设置一共有四种，以下罗列其余三种写法）
- 外部样式表
link rel="stylesheet" type="text/css" href="css文件路径地址"
(其中，href为资源定位符，与src作用一致；
type="text/css"为html4中所必须的，而在html5中可忽略)
- *优势:文件可控制多个页面；易改版、便于维护；减少代码量、代码简洁规范易于分工协作；有效利用缓存机制。
- 劣势：外部引入中的href属性会给服务器造成请求的压力。*
- 内部样式表（位于标签内部）
<style type="text/css">
p{color: red; }
</style>
- 这种方式的缺点是只对当前页面有效,不便于维护.不过像外部样式表那样加载外部文件需要时间如果有少量的,只在本页面使用的css时推荐这种方式.
- 内联样式表（位于标签内部）
<p style="color: blue; font-size:14px;">段落</p>
- 这种方式只对当前元素有效
***总结：大量、通用的样式用外部样式表；少量的独有的放在内部样式表。 ***
另外JS的引入方式也可以分为：
- 内部JS
<script>
console.log("hello");
</script>
- 外部JS
<script type="text/javascript" src="js文件路径地址"></script>
** link和@import有什么区别——**
关于<link>标签：
- 实例
<head>
<link rel="stylesheet" type="text/css" href="css文件路径地址" />
</head>
href 值为外部资源地址，这里是css的地址；
rel 定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet；
type 规定被链接文档的 MIME 类,这里是值为text/css
-
浏览器支持
能支持<link>标签的浏览器
- 定义与用法
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。 - HTML 与 XHTML 之间的差异
在 HTML 中，<link> 标签没有结束标签。
在 XHTML 中，<link> 标签必须被正确地关闭。 - 提示和注释：
注释：link 元素是空元素，它仅包含属性。
注释：此元素只能存在于 head 部分，不过它可出现任何次数。 - 属性
<link>标签属性
关于@import
实例：
在html中
<head>
<style>
@import url(css文件路径地址);
</style>
</head>
在css中
@import url(css文件路径地址);
关于两者的异同
相同点：作用一样，即都是引入外部的css样式
不同点：
- @import url（）机制是不同于link的，link是在加载页面前把css加载完毕，所以显示出来的页面从开始就是带样式效果的；而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。
- @import 是css2里面的，所以古老的ie5不支持。
- 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。（由于这一点没学习JS还不能理解）
- link属于XHTML标签（功能不局限于导入CSS），而@import则是CSS提供的一种规则（CSS2.1以后，要考虑兼容）。
- @import url(xxx.css); 有最大次数的限制，经测试IE6的最大次数是31次。
- link的复用度更高，适用于大量的共有的样式，@import的网络请求较少， 适用于少量的独有的样式。
其实link和@import的最根本区别就是，link是一个html的一个标签，而@import是css的一个标签
总结：本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。
扩展阅读：
HTML <link> 标签
HTML DOM Link 对象
web前端优化时为什么不建议使用css @import
css @import url加载样式应用深入分析
css中link和@import的区别分析详解
高性能网站设计：不要使用@import
2. 文件路径
../main.css、./main.css、main.css有什么区别
../表示当前文件的上级文件夹,./表示当前文件所在的文件夹，故——
- ./main.css和main.css都代表当前目录的main.css文件。
- ../main.css代表上一级目录的mian.css文件。
3.
console.log是做什么用的
- 什么是console.log()？
console.log是一个彪悍的输出记录功能，我可以从我自己的web页面上调用，然后以最快的方式转储尽可能多的信息到控制台上，从而能更醒目地让你意识到你的javascript下一步需要做什么。
在具备调试功能的浏览器上，window对象中会注册一个名为console的成员变量，指代调试工具中的控制台。通过调用该console对象的log()函数，可以在控制台中打印信息。比如，以下代码将在控制台中打印”Sample log”：
console.log("Sample log");
console.log()可以接受任何字符串、数字和JavaScript对象。与alert()函数类似，console.log()也可以接受换行符\n以及制表符\t。console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。
- 什么是alert()?
在JavaScript代码中，可以使用window对象的alert()函数来显示一段文本，从而进行程序的调试，或者向用户警示相关信息。代码如下：
alert("sample text");
- console.log()和alert()的异同
- 相同点
- 两者都可以调试程序
- 两者都可以接受变量并将其与别的字符串进行拼接
- 不同点
- alert()函数可以用来向用户警示信息,console()不能
- alert()有阻塞作用，不点击确定，后续代码无法继续执行,console()可在打印台输出
- console.log()可以接受变量作为参数传递到字符串中，alert()不行
总结：对于JavaScript程序的调试，相比于alert()，使用console.log()是一种更好的方式，原因在于：alert()函数会阻断JavaScript程序的执行，从而造成副作用；而console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑
（尽管查阅相关资料，但是JS知识还没学到，并不能很好的融会贯通，需以后再慢慢消化）
扩展阅读：
Window alert() 方法
JavaScript中的alert()函数使用技巧详解
JavaScript调试技巧之console.log()详解
简介alert()与console.log()的不同
4.
text-align有几个值，分别有什么作用
| 值 | 作用 |
|---|---|
| left | 把文本排到左边 |
| right | 把文本排到右边 |
| center | 把文本排到中间 |
| justify | 两端对齐 |
| inherit | 规定应该从父元素继承text-align属性的值 |
附实例：
text-align练习
5.
px、em、rem分别是什么？有什么区别？如何使用
px、em、rem分别是什么？有什么区别？
- CSS有哪些单位
| 单位 | 描述 |
|---|---|
| % | 百分比 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| em | 1em等于当前的字体尺寸；2em等钱字体尺寸的2倍。例如，如果某元素以12pt显示，那么2em是24pt |
| ex | 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) |
| pt | 磅 (1 pt 等于 1/72 英寸) |
| pc | 12 点活字 (1 pc 等于 12 点) |
| px | 像素 (计算机屏幕上的一个点) |
-
px、em、rem区别介绍
- px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 - IE无法调整那些使用px作为单位的字体大小。
- em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 - IE无法调整那些使用px作为单位的字体大小。
- em会继承父级元素的字体大小。
（注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意：
（1）body选择器中声明Font-size=62.5%；
（2）将你的原来的px数值除以10，然后换上em作为单位；
（3）重新计算那些被放大的字体的em数值。避免字体大小的重复声明。）
- px
-
rem
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
(注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。) -
px 与 rem 的选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。 -
使用实例
px、em及rem使用实例
6. 对chrome 审查元素的功能做个简单的截图介绍
饥人谷首页chrome审查元素
- Elements
允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果； - Console
显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互； - Sources
主要用来调试js； - Network
可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等； - Timeline
提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在Timeline中； - Profiles
分析web应用或者页面的执行时间以及内存使用情况； - Resources
对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑； - Security
- Audits
分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案。
扩展阅读：
Chrome开发者工具使用教程
7. 如下代码，设置p为几rem，让h1和p的字体大小相等?
<h1>饥人谷</h1>
<p>饥人谷</p>
<style>
html{
font-size: 62.5%;
}
p{
font-size: ?rem;
}
h1{
font-size: 60px;
}
</style>
结论：
分析过程：
任意浏览器的默认字体高都是16px，所以所有未经调整的浏览器都符合: 1em=16px；
那么12px=0.75em,10px=0.625em；
为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%；
这就使em值变为 16px*62.5%=10px；
rem表现为相对于html根元素的相对大小，此时html跟元素为1em，即10px；
h1表现为60px，即6em，故p只需为6em,即6rem，即可与h1字体大小相等
代码:
本教程版权归本人和饥人谷所有，转载须说明来源
网友评论