样式有几种引入方式?link和@import有什么区别?
共计 4 种方式可以在 HTML 中引入 CSS。
- 内联方式 直接在html里用标签添加样式。
- 嵌入方式 通常在标签添加样式。一般是给class或者id添加样式。 嵌入方式所添加的样式对当前页面有效。
- 链接方式 在标签内引入外部css文件。此种方式优点:可维护性好,CSS文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。
- 导入方式 使用@import导入外部css文件。
link和@import有什么区别?
- link属于html标签,一般用于引用css样式和a标签的链接。 @import必须在标签里引用css样式。
- 加载顺序不同。
link是在浏览器加载到css时同时加载,而@import 是在加载完所有html后才加载。 - 兼容差别。link所有浏览器都支持,@import必须在ie5以上版本。
- 通过dom控制样式时,只能用link,而@import不支持。
文件路径../main.css 、./main.css、main.css有什么区别?
../main.css 指上一层目录里的main.css文件。
./main.css和main.css 都指当前文件夹内的main.css文件。
console.log是做什么用的?
调试js。在浏览器控制台显示console.log的内容。
text-align有几个值,分别有什么作用?
text-align 指文本水平对齐方式。
text-align:left; 左对齐
text-align:right;右对齐
text-align:center;居中对齐
text-align:justify;两端对齐
text-align:inherit;继承父元素属性中的text-align
px、em、rem分别是什么?有什么区别?如何使用。
px是像素单位,绝对数值。
em/rem是相对数值,em相对其父元素,rem相对其html节点定义的数值大小。rem是css3新引入的一个度量单位,支持IE 8以上版本。
对chrome 审查元素的功能做个简单的截图介绍。
如下代码,设置p为几 rem,让h1和p的字体大小相等?
<h1>饥人谷</h1>
<p>饥人谷</p>
html{
font-size: 62.5%;
}
p{
font-size: ?rem;
}
h1{
font-size: 60px;
}
一般浏览器的根元素默认字体大小16px,16*62.5%=10px 也就是说1rem=10px
p标签的font-size设置为6rem.