HTML基础2

样式有几种引入方式? link和 @import有什么区别？

• 样式有三种引入方式
• 1.内联样式

内联样式

• 2.内部样式

• 3.外部样式

• link和@import有什么区别
  • 历史差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
  • 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
  • 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
  • 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

文件路径../main.css 、./main.css、main.css有什么区别？

• ../main.css 表示当前文档上一目录文件夹下的main.css文件
• ./main.css、main.css 一样，表示当前文档文件夹下的main.css文件

console.log是做什么用的？

• console.log常用于在在浏览器中调试javascript

代码

浏览器控制台

text-align有几个值，分别有什么作用？

• text-align有四个值
  • text-align:left; 文本左对齐，也是text-align的默认样式
  • text-align:right; 文本右对齐
  • text-align:center; 文本居中

  • text-align:justify; 改变字与字之间的间距：主要用于长文本段落使文本对齐美观。

    
    
    

    text-align:justify效果

px、em、rem分别是什么？有什么区别？如何使用？

• px是绝对大小，em、rem是相对大小
  • px表示像素单位，font-size:12px;表示字体为12像素。
  • em与rem表示相对大小的单位
    • font-size:1.2em;表示当前字体大小相对于父元素字体大小的1.2倍。
    • font-size:1.2rem;表示当前字体大小相对于HTML(根节点)字体大小的1.2倍。（如果HTML未设置字体大小，在浏览器中默认的文字大小是16px）

对chrome 审查元素的功能做个简单的截图介绍

选中将要审查元素的工具

选中页面中将要审查的元素

选中后元素的代码将在开发者工具Elements选项中高亮显示

最右侧显示所选中元素的style样式

在审查界面中更改样式

可直接对此元素进行更改（优先级最高）

在此元素原样式下更改

![Uploading Paste_Image_805446.png . . .]

如下代码，设置 p为几 rem，让h1和p的字体大小相等?

饥人谷
饥人谷
 

• 在浏览器中默认的文字大小是16px，font-size:62.5%;应该为10px。所以p为6rem可以让h1和p的字体大小相等

本博客版权归 杨然和饥人谷所有，转载需说明来源