1 什么是CSS

CSS(Cascading Style Sheets)层叠样式表，主要是用来修饰网页。
CSS的语法格式：
选择器{
属性： 值；
属性： 值；
}
eg:h1{
color: red;
font-size: 30px;
}

2 如何在页面上引用CSS

• 内联样式:将css的属性值放到HTML标签的的style属性里。
  eg:<h1 style="color: red; font-size: 30px;></h1>
• 内部样式：将css放到<style>标签里。属性type="text/css"
  eg:

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

• 外部样式：link和import两种方法
  1 link:在head标签中使用link链接到CSS样式表，是HTML标签
  使用链接时是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，这是链接式的优点。
  eg:<link href="mystyle.css" rel="stylesheet" type="text/css"/>
  2 import：在style标签中加上@import + css的地址，import是CSS的语法。
  import在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是import固有的一个缺陷。
  eg:

<style type="text/css">
        @import  "mystyle.css";   //此处要注意.css文件的路径
        @import url("mystyle.css");   //该方法引号可以去掉
 </style>

• 默认样式

3 关于文件路径

1 相对路径：是指相对于当前所处路径的其他目录的表示方法
css/a.css当前目录下css目录的a.css文件
./css/a.css同上
b.css当前目录下的b.css
../imgs/a.png当前目录的上一级目录下的imgs目录下的a.png文件
/static/css/a.css当前目录下static目录下css目录下的a.css文件
2 绝对路径： 是指该文件自己所处的磁盘根目录
/Users/hunger/project/css/a.css
3 网页路径：是指该文件存放于某个网页的网页地址
http://cdn.jirengu.com/kejian1/8-1.png

4 js.jirengu.com上展示图片

html上展示图片使用<img>标签。
css的图片起到装饰的作用，可以使用背景图片来显示。
eg:

展示图片

5 html和 css 的书写规范

1语法格式：
HTML：标签语言
css语法格式：
选择器{
属性： 值；
属性： 值；
}
2适当缩进，体现元素的嵌套关系
3只能出现小写字符或者中划线（破折号符），不用下划线，驼峰命名法。
4避免过度任意的简写。
5class 名称应当尽可能短，并且意义明确。
详细参见：http://www.cnblogs.com/lwwen/archive/2016/08/29/5818043.html

6 chrome 开发者工具的功能区简介

打开网页右键检查或是按F12。

功能区

Elements介绍
Elements这个就比如页面的每个元素吧，比如百度搜索这个图片，可以通过Elements找到，搜索框也可以，在底下的“放大镜”类似的控件，点击然后选择自己想要查看要素或位置，Elements会跳转到相应的实现代码。
NetWork介绍
NetWork可以看到网页加载的脚本和资源的时间，还可以看到某些不能加载成功的资源；这里有位是百度首页演示，百度首页内容很干净所以不需要加载什么图片等资源
Sources介绍
Sources可以查看运行的脚本，调试一般都是在Sources调试的，所以程序开发者需要了解和熟悉Sources的使用
Resources介绍
Resources里可以查看web程序跑起来后所加载的一些资源（Resources），包括图片或者其他“值”，以及Cookies
Console介绍
Console可以查看网页运行后提示的消息，错误或者警告以及输出内容等，网页后台可以使用Console.debug("输出内容")；来在Console输出显示，可以做到调试的作用吧，不过一般真正调试不是拿Console。console.debug("Console使用介绍");console是小写形式，不然提示没有Console