css基础

1.CSS的全称是什么?

Cascading Style Sheet ,层叠样式表

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

• CSS有几种引入方式

• 内联样式(页面内的结构中)
  

• 内部样式（页面包裹在style标签内）
  

• 外部样式（通过link@import引入）
  *link
  

   *@import
   
  

• link 和 @import 的区别：

  • 老祖宗的差别：link是XHTML标签，可以放在html中的
    任意位置，除了加载样式外，还可以加载RSS,定义rel链接属性；@import 是css提供的一种方法，只能放在style标签里面，只能用于加载样式。

• 加载顺序差别：当一个页面被加载的时候，link引用的css同时被加载；@import 会等到页面全部加载完被加载，会有闪烁（没有样式 ）的情况，尤其是网速的时候。

• 兼容性。@import 是css2.1提供的，所以老式浏览器不支持，ie5以上才可以；link没有这种情况。

• dom控制样式的差别。当用javascript控制dom去改变样的时候，只能用link标签，因为@import 是不可以控制的。

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

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:本地绝对路径，一般不用；
/static/css/a.css：网络路径，主域名-static目录下-css文件夹内的a.css；
http://cdn.jirengu.com/kejian1/8-1.png：网络绝对路径

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

  1.将本地图片上传服务器，生成线上网址，使用该地址展示图片。
  2.本地测试投机取巧方法：本地开服务，用localhost加载图片，并使用这个路径展示图片。

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

*HTML
  1.文档类型：推荐使用HTML的文档类型声明：
  2.脚本加载：一段脚本放在会阻塞dom解析，应放在之前
  3.语义化:使用合理的标签布局，eg:p元素定义文字段落，a元素定义锚点，等
  4.多媒体回溯:对页面上的媒体而言，像图片、视频、canvas动画等，要确保有可替代的接入接口。图片采用有意义的备选文本alt,视频和音频文件 可以为其加上说明文字或字幕。
    图片的alt 可不填内容，纯装饰图片可以这么做：alt=""
  5.行为、样式、行为分离，尽量不使用行内样式、内部样式，不在行内运行脚本。
  6.html使用双引号，eg:
      


*CSS
  1.选择器与{之间必须包含空格,属性名与之后的“：”之间不允许包含空格，“：”与属性值之间必须包含空格，列表型属性值书写在单行时，“，”后必须跟一个空格。
    .selector {
        margin: 0;
        font-family: Arial, sans-serif;
      }
    2.CSS选择器中避免标签名，便于维护。
    3.缩写属性，提高代码效率和可读性。
    4.省略0后面的单位。
    5.最好使用连字符作为分隔符，eg:.ads-sample {}
    6.声明顺序：
       1. 结构性属性：
          display
          position, left, top, right                     
          etc.
          overflow, float, clear etc.
           margin, padding
       2. 表现性属性：
          background, border etc.
           font, text

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

参考网址

  Element:元素面板--检查和调整页面，编辑样式/DOM
  Sources:源代码面板--设置端点来调试js,或通过workspaces链接本地文件来使用开发者工具的实时编辑器。
  Console:控制台面板--记录诊断信息，或者作为shell在页面上写js交互
  Network:网络面板--了解请求和下载的资源文件并优化网页加载性能 
          1.Headers。与资源关联的 HTTP 标头。
          2.Preview。JSON、图像和文本资源的预览。
          3. Response。HTTP 响应数据（如果存在）。
          4.Timing。资源请求生命周期的精细分解。
  Performance:性能面板--使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。
  Memory:内存面板--如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。
  Application:应用面板--使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。
  Security:安全面板--使用安全面板调试混合内容问题，证书问题等等。

chrome开发者工具常用功能介绍.png

使用设备模式.png

改变样式.png

附加.png

控制台.png