<h3>1.样式有几种引入方式?</h3>
<ul>
<li>外部样式表
在head部分加入
<link rel='stylesheet' type='text/css' href = '/css/base.css'>
,引入外部的CSS文件.此种方式的优点:一个页面可以引入多个外部CSS文件,方便CSS代码复用,方便维护;
目前应用较多。
缺点:代码量集中,容易混乱。
<li>内部样式表
在head部分加入
<html><head><style> div { background: #fff; } </style></head></html>
此种方式的优点:单个页面内的CSS代码具有统一性和规划性,便于维护。
缺点:多个页面之间CSS复用仍然不够。
<li>行内样式表
<p style="font-size:12px; color: blue">
这种方式的优点:分散灵活方便;
缺点:缺乏整体性和规划性,不利于维护,维护成本高;
这种方式的CSS渲染的优先级要高于其它三种。
<li>导入
@import url("test.css")
特点:引入方便,但性能可能较差</br>
<h3>2.link
和@import
的区别?</h3>
1.范畴不同: link是HTML标签,除了加载CSS之外,还可以定义其他如RSS事务;@import属于CSS范畴,只能加载CSS;
2.加载顺序不同:link引入CSS时,在页面加载时同时加载,而@import需要页面完全载入以后加载;
3.兼容性差别: link是XHTML标签,因此无兼容问题,而@import是CSS2.1提出的(IE5以上才能识别),因此低版本的浏览器不兼容;
4.是否支持JS DOM改变: link支持使用JavaScript控制DOM改变CSS样式,@import不支持
5.权重不同: link方式样式的权重高于@import样式的权重。</br>
<h3>3.文件路径../main.css 、./main.css、main.css、/main.css
有什么区别?</h3>
文件路径 | 区别 |
---|---|
../mian.css | 上级目录的main.css |
./mian.css | 当前目录的mian.css |
mian.css | 当前目录的mian.css |
/mian.css | 根目录的mian.css |
<h3>4.console.log
是做什么用的?</h3>
console.log()
是向控制台输出一条消息,作用是让开发者调试代码。
</br>
<h3>5.text-align
有几个值,分别有什么作用?写截图说明区别?</h3>
值 | 作用 |
---|---|
left | 把文本排列到左边。默认值:由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 text-align 属性的值。 |
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。######
<h3>6.px、em、rem分别是什么?有什么区别?如何使用</h3>
1.px:是Pixel的缩写,像素,是指基本原色素及其灰度的基本编码.
2.em:单位名称为相对长度单位,相对于当前对象内文本的字体尺寸.
3.rem:是相对单位,是相对HTML根元素.</br>
<h3>区别?</h3>
值 | 区别 |
---|---|
px | px为相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的; |
em | em为相对长度单位。相对于当前对象内文本的字体尺寸; |
rem | rem可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。 |
<h3>使用?</h3>
选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem(除了IE8及更早版本外),如果要考虑兼容性,那就使用px,或者两者同时使用。国外的大部分网站能够调整的原因在于其使用了em作为字体单位。</br>
<h3>7.对chrome 审查元素的功能做个简单的截图介绍?</h3>
。
感谢观众~~~
本教程版权归饥人谷peter和饥人谷所有,转载须说明来源