一、样式有几种引入方式? link 和 @import有什么区别?
- css样式引入方式有三种方式,分别是:
-
外部样式表,大多数页面共有的,公用的多用外部样式表,用法如下图红色方框所围代码
-
link
标签放在head
之间 -
href
属性表示css外部样式表所在地 -
rel
属性指定了HTML文件与所链接文件之间的关系,这里链接到的是样式表,所以这里属性值为stylesheet
- 在HTML5中,css成为HMTL5的标准样式,即默认样式,所以
type
可以不写 - 还有一种在css文件里再引用的写法
@inport url()
-
-
内部样式表,某些页面只有少许的css可以使用内部样式表,用法如下图红色方框所围代码
-
style
标签放在head
之间 -
style
标签内css写法同在css文件里一样
-
-
内联样式,用法如下图红色方框所围代码
- javascript引入方式有两种方式,分别是:
-
外部JS,用法如下图红色方框所围代码
-
<script>
标签应放在</body>
之前,这样不会使浏览器呈现页面时出现明显的延迟 - 在HTML5中,Javascript已经成为标准,即默认脚本语言,故可以不写type属性
-
-
内部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(默认值)实现元素中的文本左对齐,如下图
-
center实现元素中的文本居中对齐,如下图
-
right实现元素中的文本右对齐,如下图
-
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 审查元素的功能做个简单的截图介绍?
七、如下图代码,设置 p 为几 rem,让 h1 和 p 的字体大小相等?
- 根元素html的字体大小为10px,h1的字体大小是60px,p为6rem则可以同h1字体大小相等!!
版权声明:本教程版权归邓攀和饥人谷所有,转载须说明来源!!!!