任务6 CSS基础

2017-06-26 本文已影响0人饥人谷_哈噜噜

Cascading Style Sheets，层叠样式表。是一种样式表语言，用于为HTML文档定义布局

引入方式
1. 内联式：把css代码直接写在现有的HTML标签中
  eg.<p style="color:#ccc; font-size:18px;">学习使我快乐我愿沉迷于学习无法自拔-.-</p>

内部式(嵌入式)：把css样式代码写在<style type="text/css"></style>标签之间
一般情况下写在<head></head>之间，也可写在<body>标签内

 eg：
     <style type="text/css">
         p { 
             color: #ccc; 
             font-size: 18px;
            }
     </style>

外部式：把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内

eg：
  <head>
        <link rel="stylesheet" type="text/css" href="index.css">
  </head>

导入@import

eg：
  <style>
     @import url("index.css");
     @import "index.css";
  </style>

JS Bin示例：

CSS引用方式

link是链接式，@import是导入式。两者都是从外部引入CSS文件。@import会在整个页面加载完成后再加载CSS文件，当网页内容较大时会产生不好的体验；而link会同时加载。
link是html的一个标签，@import是CSS的语法。两者效果相同。但是link不止可以调用CSS，还能调用其他类型的文件；而@import只能调用CSS文件。
@import不兼容过早版本的浏览器，而link没有这个问题。

相对路径：以当前文件(HTML页面)所在路径为基准来查找相关文件
- css/a.css：选择当前目录(HTML文件所在路径)下css文件夹中的a.css文件
- ./css/a.css：等价于css/a.css，选择当前目录下css文件夹中的a.css文件
- b.css：选择当前目录中的b.css文件
- ../image/a.png：选择上一级目录中的imgs文件夹下的a.png文件
绝对路径：从盘符开始的路径，是指文件在硬盘上真正存在的路径
注：不常用，在本地计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片
- /Users/hunger/project/css/a.css：在本地计算机上可以通过该路径找到a.css文件
网站路径：
- /static/css/a.css：以相对路径的方式在服务器中寻找a.css文件，网站根目录下 static目录下的css目录下的a.css文件
- http://cdn.jirengu.com/kejian1/8-1.png：
  网络路径，通过该路径可以找cdn.jirengu.com域名下kejian1目录下的8-1.png文件

统一使用小写（包括标签、属性、命名id class等）
id class命名使用有意义的单词，尽量使用缩写，分隔符用-
尽量不使用内联的style属性定义样式
属性名“：”后面添加一个空格
使用 4 个空格做为一个缩进层级，不允许使用 2 个空格或 tab 字符
属性书写顺序：Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果）
注：

Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相关属性包括：border / margin / padding / width / height 等
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
Visual 相关属性包括：background / color / transition / list-style 等

chrome调试工具

Elements:允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以在右下方(5)的styles中修改样式更改页面显示效果
Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互(6)
Sources: 主要用来调试js
Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等
Application(应用面板): 使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。在 Chrome 52 之后资源面板更名为应用面板.