mission-6

1.CSS的全称是什么?

CSS 指层叠样式表(Cascading Style Sheets)。通过CSS和HTML的结合可以实现表现与结构分离。从而提升工作效率,降低维护难度。

2.CSS引入的方式有哪些? link和@import的区别?

内联样式

内部样式

饥人谷

外部样式

浏览器默认样


mission-6_第1张图片

外部引用 link 标签引用CSS

将样式规则写在.css的样式文件中,再以标签引入。
假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入:

这样引入该css样式表文件以后,就可以直接套用该样式档案中所制定的样式了。 通常是将link标签写在网页的部份之中。
这种方法的优点:可以把要套用相同样式规则的数篇文件都指定到同一个样式文件中,可以进行统一的修改,也便于整站的设置有统一的风格。
一般css网页布局都使用此种方法。
这种方法的缺点:在个别文件或元素的灵活度不足。

外部引用 @import 引用CSS

跟link方法很像,但必须放在 中:

例如:

要注重的是,行末的分号是必须的!千万不能漏写!
这种方法的优点:可以灵活的引入css文件对xhtml元素进行控制。有时候也用来编写某些css hack。
这种方法的缺点:在个别文件或元素的灵活度不足。

3.以下这几种文件路径分别用在什么地方,代表什么意思?

css/a.css
./css/a.css
b.css
../imgs/a.png
/Users/hunger/project/css/a.css
/static/css/a.css
http://cdn.jirengu.com/kejian1/8-1.png

分为三个方面:

相对路径:以当前文件所在路径为参考来查找相关文件
css/a.css:在当前路径(当前文件所在地址)下存在css文件夹,定位该文件夹下的a.css文件
./css/a.css:同上,其中./表示当前目录,选择当前目录下css文件夹中的a.css文件
b.css:选择当前文件目录中的b.css文件
../imgs/a.png: ../表示上一级目录,即选择上一级目录中的imgs文件夹下的a.png文件

绝对路径:文件或目录在硬盘上真正的路径
/Users/hunger/project/css/a.css:在本地计算机上通过该路径定位到a.css文件

网路路径:例如开辟一个本地服务器,当前地址为http://localhost:8080/code/index.html, 在该HTML文件中存在以下路径:/static/css/a.css:以绝对路径的方式在服务器中寻找a.css文件,即在服务器上直接通过该路径寻找相关文件
css/a.css:以相对路径的方式在服务器中寻找a.css文件,即在index.html文件所在路径(目录)中寻找css文件夹下的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png: 该地址可以找到定位到互联网上的"8-1.png"文件:如下

mission-6_第2张图片
Paste_Image.png

4.如果我想在js.jirengu.com上展示一个图片,需要怎么操作?

如果这个图片本来就存在网络上, 可以直接使用图片的网络绝对地址
如果图片在本地,可将图片上传到某个网址,生成一个线上网址,或将图片文件存于本地服务器.

5.列出5条以上html和 css 的书写规范

html规范

  • id class建议单词全字母小写,单词间以 -分隔。同项目必须保持风格一致。
  • HTML 标签的使用应该遵循标签的语义。
  • 禁止 img的 src取值为空。延迟加载的图片也要增加默认的 src
  • 使用 button元素时必须指明 type 属性值。
  • 在 CSS 可以实现相同需求的情况下不得使用表格进行布局

css规范

  • 属性名与之后的 :之间不允许包含空格, :与 属性值之间必须包含空格
  • 选择器的嵌套层级应不大于 3级,位置靠后的限定条件应尽可能精确
  • 在可以使用缩写的情况下,尽量使用属性缩写
  • 尽量不使用 !important声明。
  • 将 z-inde 进行分层,对文档流外绝对定位元素的视觉层级关系进行管理

http://book.jirengu.com/jrg-team/frontend-knowledge-ppt/CSS-CSS%E5%9F%BA%E7%A1%80.md.html 语法参考

6.截图介绍 chrome 开发者工具的功能区

使用 设备模拟器可以模拟不同的设备分辨率显示效果。
mission-6_第3张图片

使用 Elements(元素)面板,检查并实时编辑页面中的HTML和CSS。1)在Styles(样式)窗格中查看和更改应用于任何选定元素的CSS规则。2)在Computed(计算)窗格中查看和编辑所选元素的盒模型。3)在Sources(源代码)面板中查看您在本地网页上所做的任何更改。
mission-6_第4张图片

在开发期间,可以使用Console(控制台面板)记录诊断信息。或者使用它作为 shell,在页面上与JavaScript交互。
mission-6_第5张图片

在Sources(源代码面板)中,可以断点调试 JavaScript 。或者通过Workspaces(工作区)连接本地文件,使用开发者工具实时编辑。
mission-6_第6张图片

使用Network(网络面板)了解请求和下载的资源文件,并优化您的网页加载性能。
mission-6_第7张图片

使用Application(资源面板)检查加载的所有资源,包括IndexedDB与Web SQL数据库,本地和会话存储,cookie,应用程序缓存,图像,字体和样式表。
mission-6_第8张图片

你可能感兴趣的:(mission-6)