任务五~HTML2
2016-07-15 本文已影响86人
dengpan
一、样式有几种引入方式? link 和 @import有什么区别？
- css样式引入方式有三种方式，分别是：
-
外部样式表，大多数页面共有的，公用的多用外部样式表，用法如下图红色方框所围代码
css外部样式表
-
link标签放在head之间 -
href属性表示css外部样式表所在地 -
rel属性指定了HTML文件与所链接文件之间的关系，这里链接到的是样式表，所以这里属性值为stylesheet - 在HTML5中，css成为HMTL5的标准样式，即默认样式，所以
type可以不写 - 还有一种在css文件里再引用的写法
@inport url()
-
-
内部样式表，某些页面只有少许的css可以使用内部样式表，用法如下图红色方框所围代码
css内部样式表
-
style标签放在head之间 -
style标签内css写法同在css文件里一样
-
-
内联样式，用法如下图红色方框所围代码
css内联样式
- javascript引入方式有两种方式，分别是：
-
外部JS，用法如下图红色方框所围代码
外部JS
-
<script>标签应放在</body>之前，这样不会使浏览器呈现页面时出现明显的延迟 - 在HTML5中，Javascript已经成为标准，即默认脚本语言，故可以不写type属性
-
-
内部JS，用法如下图红色方框所围代码
内部JS
- link 和 @import有什么区别？
- link是XHTML标签，除了加载CSS外，还可以定义RSS、定义rel链接等其它方面；@import属于CSS范畴，只能加载CSS
- link引用CSS时，在页面载入时会被同时加载；@import在加载页面时开始会没有css样式，可能会出现闪烁情况
- 使用dom控制样式时有差别，当使用javascript控制dom去改变样式的时候，只能使用link标签；@import因为不受dom控制，则不能改变样式
二、文件路径 ../main.css 、./main.css、main.css有什么区别？
- ../main.css表示上一级目录下的文件（../表示上一级）
- ./main.css表示当前目录下的文件（./表示当前目录）
- main.css也表示当前目录下的文件
三、console.log是做什么用？
- console.log是把一些信息展示在控制台上，方便在开发调试中使用
- console.log能看到结构化的东西，而alert，则会弹出一个对象就是[object object],但console能看到对象的内容
- console.log不会打断你页面的操作，如果用alert弹出来内容，那么页面就会弹出提示框而被打断，但console输出内容后你页面还可以正常操作
四、text-align有几个值，分别有什么作用？
-
text-align应用于块级元素，它不会控制元素的对齐，而只是影响其内部内容，它具有left、center、right、justify、inherit这几个值 -
left（默认值）实现元素中的文本左对齐，如下图
left左对齐
-
center实现元素中的文本居中对齐，如下图
center居中对其
-
right实现元素中的文本右对齐，如下图
right右对齐
-
justify实现元素中的文本两端对齐，如下图
justify实现文本两端对齐
- inherit规定应该从父元素继承 text-align 属性的值
五、px、em、rem分别是什么？有什么区别？如何使用？
- px、em、rem分别是：
- px是一种相对长度单位，代表“像素”
- em也是一种相对长度单位，1em定义为给定字体font-size值
- rem也是一种相对单位长度，它是相对于根元素<html>的单位
- px、em、rem的区别：
- px为单位是比较方便，而且一致又稳定和精确，但是是固定的；当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破，从而影响布局
- em是相对于其父元素来设置字体大小的，比较灵活方便，但存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险
- rem既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应，故它就像使用px一样的方便，而且同时解决了px和em两者不同之处
- px、em、rem如何使用：
-
px直接对一个元素设置像素值，比如
div{width:20px;} -
em是相对单位，比如
p{font-size:14px;}，p{text-indent:1em;}则表示首行缩进为14px的大小 -
rem相对于根元素html而定的相对长度单位，比如
html{font-size:62.5%;}，p{font-size:1.4rem}则表示p的字体大小是14px
六、对chrome 审查元素的功能做个简单的截图介绍？
chrome审查元素功能简单介绍
七、如下图代码，设置 p 为几 rem，让 h1 和 p 的字体大小相等?
任务5问答
- 根元素html的字体大小为10px，h1的字体大小是60px，p为6rem则可以同h1字体大小相等！！
版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！
