JSON基础

JSON语法

Javascript 对象表示法 (Javascript Object Notation,简称JSON) 是一种轻量级的数据交换格式,它是一种文本格式,与语言无关;

JSON有六种类型的值:

对象、数组、字符串、数字、布尔值和特殊值 null;

JSON字符串必须是 双引号 的;

数字的整数首位不允许为0,数字可以是整数、实数或科学计数;

空白(空格符、制表符、回车符和换行符)可被插到任何值的前后,不过为了减少传输和存储成本,空白可以省略;

Continue →

前端MVC模式

MVC模式(Model - View - Controller) 是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller);

MVC 模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并且使程序某一个部分的重复利用成为可能;

除此之外,此模式通过对复杂度的简化,使程序结构更加直观。

软件系统通过对自身基本部分分离的同时也赋予了各个基本应用的功能。

Continue →

Jade中文教程

先来看一下例子

jade.jade

doctype html
html(lang="en")
  head
    - var name = 'Jade'
    title= name
    meta(charset="utf-8")
    link(rel="stylesheet", type="text/css" href="/stylesheets/style.css")

  body
    h1 Jade - node template engine
    #container.col
      if name === 'Jade'
        p #{name} is very cool
      else
        p Get on Jade
    footer
      p.
        Jade is a terse and simplae
        templating language with a
        strong focus on performance
        and powerful features.

Continue →

Compass基础

compass 是一个开源的基于 sass 的 css 编辑框架;sass 本身只是一个编译器,compass 在它的基础上,封装了一系列有用的模块和模板,在使用的时候直接调用就行了,不需要我们自己再去手动写我们需要的一些常用 css 模块;

安装 compass 前必须要先安装 ruby,安装好 ruby 后,执行以下命令安装 compass:

sudo gem install compass

大陆有可能执行不了,原因都懂的,不过我们可以手动安装:

直接去 rubygems.org 下载,然后执行本地安装,注意要先下载 compass 的依赖程序,页面最下方有介绍需要哪几个依赖程序;

安装完后,下面介绍一下 compass 的一些常用命令:

  • compass create jaySite

    创建一个 jaySite 的项目,这样当前目录中会生成一个 jaySite 的目录,里面包含 sass(存放sass源文件) 和 stylesheets(存放编译后的css文件) 两个目录和一个 config.rb 配置文件

  • compass compile

    将 sass 编译成 css,还记得上面说的,编译后的 css 文件是保存在 stylesheets 目录内的哟;

    compass 只编译发生变动过的文件,如果需要重新编译已经编译过的文件,可以加 --force 参数

    默认编译出来的 css 带有大量的注释,所以我们可以使用 --output-style 参数来选择执行编译的模式:

    比如,我们有如下一个 jay.scss 源文件:

      $baseSize: 12px;
    
      h1 {
          font-size: $baseSize * 2; /* double */
          span {
              font-size: $baseSize;
          }
      }
    
    • compass compile —output-style compressed,编译成压缩后的 css 适合生产环境使用;

        h1{font-size:24px}h1 span{font-size:12px}
      
    • compass compile —output-style nested —force,编译成嵌套缩进带注释的格式;

        /* line 3, ../sass/jay.scss */
        h1 {
            font-size: 24px;
            /*double;*/ }
            /* line 6, ../sass/jay.scss */
            h1 span {
                font-size: 12px; }
      
    • compass compile —output-style expanded —force,编译成没有嵌套的、扩展的带注释格式;

        /* line 3, ../sass/jay.scss */
        h1 {
            font-size: 24px;
            /*double;*/
        }
        /* line 6, ../sass/jay.scss */
        h1 span {
            font-size: 12px;
        }
      
    • compass compile —output-style compact —force,编译成简洁的带注释格式;

        /* line 3, ../sass/jay.scss */
        h1 { font-size: 24px; /*double;*/ }
        /* line 6, ../sass/jay.scss */
        h1 span { font-size: 12px; }
      

      除了使用命令行参数,进行编译外,我们也可以修改 config.rb 这个配置文件来指定编译模式,在文件中加入以下代码:

        output_style = :expanded
      

      如果要去除编译后 css 文件中对应 scss 源文件的来源注释,可以在 config.rb 中设置

        line_comments = false
      
  • compass watch

    运行该命令后,会自动监听 scss 文件的变化,并自动编译成 css 文件

  • 关于 compass 的更多学习,可以去官方网站查看或者去看一看阮一峰老师的compass用法指南

CSS3继承、特殊性、重要性与层叠

特殊性

同一个元素可以设置多个选择器,就会导致可能有重复的规则,但是浏览器不可能两个规则都显示,所以最终只会显示一个规则,那到底是运用哪一个规则呢?

答案就在于每个选择器的特殊性,最高特殊性的声明会胜出。

选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分:0 0 0 0

Continue →

CSS3选择器整理总结

CSS选择器规则结构

规则结构由两基本部分组成:选择器(selector)和声明块(declaration block)

选择器必须以字母或下划线开头,其后可以是数字、字母、下划线、中横线等,区分大小写;

  • 声明块由一个或多个声明(declaration)组成;

  • 每个声明是一个属性—值对(property-value);

  • 每个样式表由一系列的规则组成;

    h1 {font-size:14px; color:#ff0;} 这是一条简单的声明,选择所有的 h1 标签,其中:

  • h1就是选择器;

  • {}大括号里面的是声明块;

    • font-size:14pxcolor:#ff0是两个声明;

    • font-sizecolor是属性;

    • 14px#ff0是值;

Continue →

HTML全局属性

全局属性大部分HTML标签都具有这些属性,除了少数几个外,比如<base><head><html><meta><param><script><style>

  • accesskey=”character”,设置访问元素的键盘快捷键,不同浏览器访问键盘快捷键的方式也不同:

Continue →