CSS基础
CSS的全称是什么?
Cascading Style Sheet 层叠样式表
CSS有几种引入方式? link 和@import 有什么区别?
-
行内样式
最直接最简单的一种，直接对HTML标签使用style=""，例如：
<p style="color:#F00; "></p>缺点：HTML页面不纯净，文件体积大，不利于蜘蛛爬行，后期维护不方便。 -
内嵌样式
内嵌样式就是将CSS代码写在<head></head>之间，并且用<style></style>进行声明，例如：
<style type="text/css">body,div,a,img,p{margin:0; padding:0;}</style>优缺点：页面使用公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。 -
链接样式
链接样式是使用频率最高，最实用的样式，只需要在<head></head>之间加上<link…/>就可以了，如下：
<link type="text/css" rel="stylesheet" href="style.css" />优缺点：实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便 -
导入样式（不建议使用）
导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。@import在html中使用，如下：
<style type="text/css">@import url(style.css);</style>
@import在CSS中使用，如下：@import url(style.css);
四种CSS引入方式的优先级
- 就近原则
- 理论上：行内>内嵌>链接>导入
- 实际上：内嵌、链接、导入在同一个文件头部，谁离 相应的代码近，谁的优先级高
link和@import的区别
- link属于html标签，而@import是css的语法。
- 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
- link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
- link方式样式的权重高于@import
以下这几种文件路径分别用在什么地方，代表什么意思?
- css/a.css 当前目录下css文件中的a.css
- ./css/a.css 代表当前目录下css文件中的a.css
- b.css 代表当前目录下css文件中的b.css
- ../imgs/a.png ../代表上一级目录中imgs文件中的a.png文件
- /Users/hunger/project/css/a.css 绝对路径 本地文件地址
- /static/css/a.css 主域名下static文件中css的a.css文件
- http://cdn.jirengu.com/kejian1/8-1.png 网站路径
如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
使用网站路径链接的方式将图片文件夹上传至服务器上
列出5条以上html和 css 的书写规范
html规范
-
id class建议单词全字母小写，单词间以 -分隔。同项目必须保持风格一致。
-
HTML 标签的使用应该遵循标签的语义。
-
禁止 img的 src取值为空。延迟加载的图片也要增加默认的 src
-
使用 button元素时必须指明 type 属性值。
-
在 CSS 可以实现相同需求的情况下不得使用表格进行布局css规范
-
属性名与之后的 :之间不允许包含空格， :与 属性值之间必须包含空格
-
选择器的嵌套层级应不大于 3级，位置靠后的限定条件应尽可能精确
-
在可以使用缩写的情况下，尽量使用属性缩写
尽量不使用 !important声明。 -
将 z-inde 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理
截图介绍 chrome 开发者工具的功能区
chrome.jpg
- Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
- Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
- Sources:调试js
- Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。模拟不同网络状态下的网页响应状态.
- Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
- Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
- Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
- Security:判断当前网页是否安全。
- Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
