2016.9.10 HTML1

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

在HTML中,引入CSS的方法主要有行内式、内嵌式、导入式和链接式三种。

  • 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用例:
  • 嵌入式:嵌入式则将对页面中各种元素的设置集中写在和之间,对于单一的网页,这种方法很方便。但是对于一个包含很多页面的网站,如果每个页面都以内嵌方式设置各自的样式,就失去了CSS带来的巨大优点,因此一个网站通常都是编写一个独立的CSS样式表文件,使用以下两种方式中的一种,引入HTML文档中。
  • 导入式与链接式:导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件,二者有相应的区别。事实上,二者最大的区别在于链接式使用HTML的标记引入外部CSS文件,而使用导入式则是使用CSS的规则引入外部CSS文件。因此它们的语法也不同。如果使用链接式,需要使用如下语句引入外部CSS文件。
    如果使用链接式,需要使用如下语句引入外部CSS文件:

    如果使用导入式,则需要使用如下语句。

特别注意!

采用这两种方式后的显示效果也略有区别。使用链接方式时,会在装置页面主体部分之前装载CSS文件,这样显示出来的网页从一开始就是带有样式的效果,而使用导入式时,会在整个页面装载完成后再装载CSS文件,对于有的浏览器来说,在一些情况下,如果网页文件的体积比较大,则会出现先显示无样式的页面,闪烁一下之后再出现样式设置后的效果。从浏览者的感受来说,这是使用导入式的一个缺陷。

link和 @import的区别

2.文件路径

   ../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是做什么用的?

它是一个彪悍的日志记录功能,您可以从您自己的web页面上调用,然后以最快的方式转储尽可能多的信息到控制台上,从而能更醒目地让你意识到你的javascript下一步需要做什么。

  • console 控制台
  • log 日志
    意思是在控制台输出日志信息。

4.text-align有几个值,分别有什么作用?写截图说明区别

描述
left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。
2016.9.10 HTML1_第1张图片
text-align.png

5.px、em、rem分别是什么?有什么区别?如何使用?

  • px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
  • em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
  • rem是CSS3新增的一个相对单位rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
    一般在body中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em , 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

10px=1em=1rem

2016.9.10 HTML1_第2张图片
5.2.png

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

chrome开发者工具简介

2016.9.10 HTML1_第3张图片
chrome.gif

你可能感兴趣的:(2016.9.10 HTML1)