CSS基础小记

1.CSS的全称

CSS全称是 Cascading Style Sheets, 层叠样式表

2.CSS的引用方式

• 内联样式
  样式与html标签混杂在一起

• 内部样式
  在style标签中进行样式的设计与页面结构的HTML分离，但css的样式内容仍在HTML文件中

• 外部样式
  1. HTML文件引用外部css文件

href：表明CSS文件的路径
type：表明页面链接文档的类型，值应该是text/css
rel：表明HTML与被链接文件的关系，当链接到CSS文件时，特性应该为stylesheet
通常把link放到head里面
Link是html的标签

2. CSS文件引用外部css

@import是CSS的语法，在style标签里面用，=不能把这个直接放到html页面里使用

3.文件路径

• 相对路径

  • css/a.css
    引用的a.css的html文件与css文件夹在同一级路径下，可以直接进入css引用

  • ./css/a.css
    “./”，代表当前文件夹，表示意义与上一种相同，用法等价

  • b.css
    引用的b.css的html文件与b.css在同一文件夹下，可以直接引用

  • ../imgs/a.png
    “../”，代表向上一级，从html当前路径向上一级，找到Imgs文件夹，进行引用

• 绝对路径

  • /Users/hunger/project/css/a.css
    本地文件的绝对路径，在本地使能服务器后，可用这种方法来引用本地文件

• 网站路径

  • /static/css/a.css
    在网站的根目录下，找static文件夹，进入css引用a.css

  • http://cdn.jirengu.com/kejian1/8-1.png
    将图片上传，得到一个线上地址，引用图片

4.如何在JsBin上展示一个图片

• 将图片上传图床，如七牛，得到图片的线上地址，在代码中引用图片的线上地址

• 直接将图片拖到Jsbin中，得到一个线上的url，也可展示，多用于调试

5.HTML和CSS的书写规范

• HTML

  1. 用两个空格来代替制表符（tab）
  2. 嵌套元素应当缩进一次（即两个空格）
  3. 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，
  4. 为 html 根元素指定 lang 属性，
  5. 明确声明字符编码，

• CSS

  1. 用两个空格来代替制表符（tab）
  2. 为选择器分组时，将单独的选择器单独放在一行
  3. 为了代码的易读性，在每个声明块的左花括号前添加一个空格
  4. 声明块的右花括号应当单独成行
  5. 每条声明语句的 : 后应该插入一个空格

6.开发者工具常用的功能区

• Element

用于查看页面结构，html元素，可通过选择元素查看对应的HTML代码

Paste_Image.png

• styles

对应网页的样式，可查看元素的样式设计，也可自己修改添加样式，进行验证

Paste_Image.png

• Console

用于调试JS代码，查看执行状态，在console中添加代码，可以查看动画的效果，调试JS时，如果有报错，可以双击定位出错的代码；

Paste_Image.png

• Network

查看请求的信息，调试ajex用到；Header，看到向接口传递的参数；Response看后台给的响应；可以通过请求的种类进行筛选

Paste_Image.png

• Source
  可用于JS调试，可添加断点

Paste_Image.png

• Resources/Application
  当前页面的资源，包括页面的图片，样式表，用的最多的是local storage和cookies

localStorage作为HTML5本地存储web storage特性的API之一，主要作用是将数据保存在客户端中

Cookie 实际上是指小量信息，是由 Web 服务器创建的，将信息存储在用户计算机上的文件。一般网络用户习惯用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 Session 跟踪而存储在用户本地终端上的数据

Paste_Image.png

• Emulation
  用于移动端网页开发，模拟手机
  可模拟不同手机分辨率，不同网速下网页加载响应速度；

Paste_Image.png

Paste_Image.png