css基础

CSS的全称是什么?

CSS全程是Cascading Style Sheets层叠样式表

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

内联样式
这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护
<h1 style = "color: red; font-size: 20px;"></h1>
内部样式。放到head里
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护

<style type = "text/css">
  h1 {
      color: red;
      font-size: 20px; 
   }
</style>
<h1>饥人谷</h1>

外部样式。使用链接引用的方式加载样式
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可

<head>
/*link标签很早以前不光可以加载样式表，可以加载
各种各样的链接，rel是relation，type属性可以不
写，href样式的文件地址。link一般写在<head>
</head>里，否则可能会引起无样式内容闪烁、白屏
等浏览器渲染时会出现的问题*/
    <link rel = "stylesheet" type = "text/css" href = "index.css">
</head>

导入样式
是使用 CSS 规则引入外部 CSS 文件

<style>
    @import url("hello.css");/*import的两种写法*/
    @import "world.css";
</style>

link和@import都是外部引用CSS的方式，但是存在一定的区别：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

ink支持使用Javascript控制DOM去改变样式；而@import不支持

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

相对路径：自己相对与目标的位置，当两个文件的相对关系没有变，就可以使用相对路径指明它的地址进而去引用彼此
css/a.css css目录下的a.css文件
./css/a.csscss目录下的a.css文件
b.css 与目标文件同处于一级的b.css文件
../imgs/a.png ../表示上一级，相对于目标的上一级目录下的imgs目录下的a.png
绝对路径：完整的描述文件位置的路径就是绝对路径，当文件之间的相对关系改变了，不处于同一个根目录下，就需要明确的描述文件的位置
/Users/hunger/project/css/a.css /表示根目录，跟目录下的users目录下的hunger目录下的project目录下的css目录下的a.css文件
网站路径：也是绝对路径，当两个具有引用与被引用关系的文件不在同一个服务器上时，需要完整的描述文件位置
/static/css/a.css与目标文件同处于一个服务器地址下的相对路径，例如服务器地址为http://cdn.jirengu.com，则它代表的是http://cdn.jirengu.com/static/css/a.css
http://cdn.jirengu.com/kejian1/8-1.png网络上的地址

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

将要展示的图片上传到服务器上，若js.jirengu.com与图片处于同一服务器，可以以相对路径或绝对路径去描述；若不在同一个服务器上，只能用绝对路径这样完整的描述文件的方式来展示，具体为：
<img src = "imgs/a.png">
或
<img src = "http://a.com/images/a.jpg">

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

html中：

是闭合标签的标签一定要完整的把标签的开始和结束都写上，/表示闭合，写在闭合标签的标签名称的前面，例如：<h1></h1>
当标签之间存在嵌套关系时，最好是使用缩进的方式进行编写，以便阅读、理解和修改
标签以尖括号开始，也以尖括号结束
标签内属性与属性值的连接使用“=”等号来连接
CSS中：
部分css可以写在html的标签中，其紧跟在标签名称后面，以空格分开。
部分css无法写在标签中，这时可以写在head标签内部，用<style></style>包裹起来。在style标签内部，对具有同一个名称或属于同一个类或是同一个元素的标签进行统一设置，设置的内容用花括号包裹起来，例如：

<style>
    span{
        color: yellow;
    }
</style>

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

image.png

面板上包含了Elements面板、Console面板、Sources面板、Network面板、 Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板:

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文件等。
元素选择器

image

标签栏第一个类似放大镜的标志。按下放大镜并且在页面上滑动鼠标，会发现有区域被点亮（这里会点亮接触的最内层元素）同时会看到这个元素的一些基本信息（类，宽高）另外元素的box模型的真实内容，padding，margin也会被不同颜色标示。单击后则工具会选中DOM中的该元素。效果如下图：

image

移动设备模拟

p3

在桌面浏览器模拟移动端的操作，虽然可能样式上会稍有偏差，但可以模拟多种屏幕分辨率以及支持一些触屏的事件，非常实用

p4

Elements标签页
和对网页右键查看源代码有所不同，是经过js代码执行以后真实的html代码，因此直接改动就会在页面生效。同时进入该面板以后还会有额外的一块功能区出现，这里可以查看和修改样式，也可以查看元素绑定的事件等。

image

网络
查看页面的网络请求（打开开发者工具并且选择开启录制以后以后才会记录）这里可以开启过滤，通过关键字或者请求的类型来更快的定位想查找的请求，概况里可以查看请求的方式，状态，大小，来源等属性。

image

单击一个请求就能查看请求具体的信息，如请求的头部，回复等。这里查看response有个小技巧，如果返回的是json/jsonp数据，可以用Preview标签页方便的查看生成的对象，告别Unicode转码和显示的困扰查看response

image

选择preview查看返回内容

image

资源
可以查看页面的图片，cookie，local storage等信息（但是没法修改cookie只能清除，如果需要修改则需要通过js修改，目前只成功在firebug提供图形界面修改过cookie）

image

控制台
在这里可以自由的撰写js代码，可以使用浏览器提供的内置对象，同时可以自己新定义对象和函数。在控制台输入代码和许多IDE一样提供了自动补全功能。

image