1.样式有几种引入方式?link 和@import有什么区别
样式有三种引入方式,分别为外部样式表,内部样式表和内联样式表
外部样式表:将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中。
链入式样式表
格式:<link rel = "" type="text/css" href ="css文件路径"/>
导入式样式表
格式:<style type = "text/css">@import"css路径"</style>
内部样式表:也叫内嵌式样式表
格式:<style type = "text/css"></style>
HTML5可直接写成:<style></style>
内部样式表css样式支队其所在的HTML页面有效,因此,仅设计一个页面时可以使用内嵌式。
内联样式表:也称为行内式,通过标记的style属性来设置元素的样式
格式:<标记名 style = "属性:属性值;属性....">内容</标记名>
行内式css样式是通过标记的属性来控制样式的,没有做到结构与表现分离。
三种样式表总结
内联样式表:只控制某个标签
内部样式表:可控制整个页面
外部样式表:可以控制整个站点
link 和@import 区别:
1.link是html文件,可以链入一个css文件;@import url是从css文件导入到另一个css文件中,是css文件;
2.@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,如果网速较慢的话,会出现一开始没有css样式,闪烁一下出现样式后的页
总结:当样式少,且当前页面独有,为减少网络请求,多用此种。拥有大量共有样式,则多选择写在外部的link.
2.文件路径../main.css、./main.css、main.css、/main.css有什么区别
../main.css指的上级目录里面的的main.css文件
./main.css指的是当前目录下的main.css文件
main.css指的是当前目录下的main.css文件
/main.css指的是当前目录下的main.css文件
3.console.log是做什么用的
把信息展示在控制台上,供开发调试用
JS中用console.log替换alert可以防止alert阻断线程运行
4.text-align有几个值,分别有什么作用?写截图说明区别
text-align:水平对齐方式,用于水平对齐,相当于html的align对齐属性
text-align可能的值
left:左对齐(默认值)
right:右对齐
center:居中对齐
justify:实现两端文本对齐
inherit:规定应该从父元素继承 text-align 属性的值。
5.px、em、rem分别是什么?有什么区别?如何使用
px:(Pixel)像素,相对长度单位,相对于屏幕分辨率而言的,值是固定的,所有浏览器未经调整的默认字体大小都是16px;
em:(emphasize):相对长度单位,相对于父元素。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
rem:是CSS3新增的一个相对长度单位,相对于根节点长度设置
6.设置p为几 rem,让h1和p的字体大小相等
当html{font-size:62.5%},此时p的值为16px *62.5% = 10px
h1的字体大小为60px,则60px÷10px = 6em