一,样式有几种引入方式? link 和 @import有什么区别?
答:在html文件中,css样式一共有三种引入方式。
- 外部样式表,有两种方法:
a. 使用<b>link
</b>引入(最常用,推荐使用);b.使用@import引入。
举例说明:
link 方式:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
@import方式:
<head> <style type="text/css" media="screen"> @import url("mystyle.css"); </style> <head>
- 内部样式表,放入<b>
<style>
</b>标签内部;
举例说明:
<head> <style> h1 {color:red;} p {margin-top:20px;} body {background-image:url("images/123.gif");} </style> </head>
- 内嵌样式表,直接放入html元素标签内部;
举例说明:
<body> <p style="color:red; font-size:18px">good</p> </body>
link和@import的区别?
答:
- 从属不同:link是HTML标签,除了加载CSS外,还可以定义RSS,定义rel连接属性等其他事务;@import属于CSS范畴,只能加载CSS。
- link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。所以某些网页在打开的时候只出现文字,没有排版和样式,而等@import加载以后才会重新渲染。
- link是HTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。@import只有在IE5以上的才能识别,而link标签无此问题。
- link支持使用Javascript控制DOM去改变样式;而@import不支持。
- ink可以放在页面任何位置,一般情况下放在
<head>..</head>
标签中 ;但是@import
必须放在<style>@import url(index2.css);</style>
标签内。
二,文件路径…/main.css 、./main.css、main.css、/main.css有什么区别 ?
答:
- …/main.CSS是上级目录中的main.CSS文件
- ./main.CSS与main.CSS是当前目录中的main.CSS文件
- /main.css:当前文件的根目录下的文件main.css
三,console.log是做什么用的 ?
答:用来分析和调试的一个JS函数,在浏览器的开发工具控制台中使用,改变参数值,调试页面。
四,text-align有几个值,分别有什么作用?写截图说明区别
- text-align:center/文本水平居中对齐
- text-align:right/文本右对齐
- text-align:left/文本左对齐
- text-align:justify/文本两端对齐
- text-align:inherit/从父元素继承text-align属性
截图说明:
五,px、em、rem分别是什么?有什么区别?如何使用 ?
- px为像素,相对长度单位,像素是固定大小的单元,一个像素等于电脑屏幕上的一个点。
- em是相对大小单位,em是相对于父元素的属性而计算的.如2em,则是父级元素的2倍大小。
- rem是相对大小单位,和根元素的尺寸大小一致,例如2rem,则是根元素尺寸的2倍大小。
参考详细资料
六,对chrome 审查元素的功能做个简单的截图介绍
- Elements:页面元素,可以进行编辑,保存后实时查看页面效果;
- Console:此功能是模拟js控制台,直接写代码,查看结果;
- Sources:查看加载本页面所调用的资源,如js,css,php等;
- Network: 查看js模拟的http请求;
- Timeline:查看页面性能,页面渲染速度的;
- Profile:主要测试加载文件速度参考;
- Resources:查看加载页面所用的资源,链接的数据库,域名下保存的cookie信息等;
- styles:可以查看页面样式。
详细资料1 OR 详细资料2
七,如下代码,设置 p为几 rem,让h1和p的字体大小相等?
<h1>饥人谷</h1> <p>饥人谷</p> <style> html{ font-size: 62.5%; } p{ font-size: ?rem; } h1{ font-size: 60px; } </style>
答:设置为6rem。
计算方法:浏览器默认大小为16px,则html大小=16 x 62.5%=10px。h1=60px。rem 是相对于跟节点大小的倍数。即p=6 x 10px=60px。