From a40b9084a2520ae4ca2b4c17b08a578866b6e882 Mon Sep 17 00:00:00 2001 From: EkoWang Date: Thu, 11 Jun 2015 10:40:00 +0800 Subject: [PATCH] Merge remote-tracking branch 'li-xinyang/master' into Note Conflicts: JavascriptDesignPattern/JavascriptDesignPattern.md Progress.md README.md WebCreation/WebCreation.md --- Progress.md | 16 +- README.md | 4 + WebCreation/WebCreation-CSS-0.md | 459 ++++++++++++++++ WebCreation/WebCreation-CSS-1.md | 707 ++++++++++++++++++++++++ WebCreation/WebCreation-CSS-2.md | 856 +++++++++++++++++++++++++++++ WebCreation/WebCreation.md | 20 + img/S/scope-dynamic-scope.gif | Bin 0 -> 623351 bytes img/S/scope-function-init.png | Bin 0 -> 111766 bytes img/S/scope-function-with-name.png | Bin 0 -> 119758 bytes img/S/scope-global-init.png | Bin 0 -> 90463 bytes img/S/scope-lexical-scope.png | Bin 0 -> 162943 bytes img/S/scope-structure.jpg | Bin 0 -> 69466 bytes img/W/with-scope.png | Bin 0 -> 77710 bytes 13 files changed, 2058 insertions(+), 4 deletions(-) create mode 100644 WebCreation/WebCreation-CSS-0.md create mode 100644 WebCreation/WebCreation-CSS-1.md create mode 100644 WebCreation/WebCreation-CSS-2.md create mode 100644 img/S/scope-dynamic-scope.gif create mode 100644 img/S/scope-function-init.png create mode 100644 img/S/scope-function-with-name.png create mode 100644 img/S/scope-global-init.png create mode 100644 img/S/scope-lexical-scope.png create mode 100644 img/S/scope-structure.jpg create mode 100644 img/W/with-scope.png diff --git a/Progress.md b/Progress.md index 274d439..86f5454 100644 --- a/Progress.md +++ b/Progress.md @@ -2,12 +2,20 @@ **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* +<<<<<<< HEAD - [Javascript程序设计 16/23](#javascript%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1-1623) +======= +- [Javascript程序设计 20/23](#javascript%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1-2023) +>>>>>>> li-xinyang/master - [页面制作 39/41](#%E9%A1%B5%E9%9D%A2%E5%88%B6%E4%BD%9C-3941) +<<<<<<< HEAD # Javascript程序设计 16/23 +======= +# Javascript程序设计 20/23 +>>>>>>> li-xinyang/master |章节|课题|状态|时间戳| |----|----|----|------| @@ -27,10 +35,10 @@ |内置对象|RegExp, Date, Error|★|1505312132| |内置对象|Math, JSON|★|1505312132| |内置对象|全局对象|★|1505312132| -|表达式, 运算符|表达式, 运算符||| -|语句|语句||| -|变量作用域|变量作用域||| -|闭包|闭包||| +|表达式, 运算符|表达式, 运算符|★|1506091507| +|语句|语句|★|1506091507| +|变量作用域|变量作用域|★|150738| +|闭包|闭包|★|1506091529| |面向对象|简介||| |面向对象|原型||| |面向对象|JS面向对象||| diff --git a/README.md b/README.md index cf926dc..06bd165 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,11 @@ ### Javascript 程序设计 +<<<<<<< HEAD ![](http://progressed.io/bar/70?title=Progress) [详情](JavascriptDesignPattern/JavascriptDesignPattern.md) +======= +![](http://progressed.io/bar/87?title=Progress) [详情](JavascriptDesignPattern/JavascriptDesignPattern.md) +>>>>>>> li-xinyang/master ### 页面制作 diff --git a/WebCreation/WebCreation-CSS-0.md b/WebCreation/WebCreation-CSS-0.md new file mode 100644 index 0000000..e2389de --- /dev/null +++ b/WebCreation/WebCreation-CSS-0.md @@ -0,0 +1,459 @@ + + +**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* + +- [CSS](#css) + - [简介](#%E7%AE%80%E4%BB%8B) + - [语法](#%E8%AF%AD%E6%B3%95) + - [浏览器私有属性](#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%A7%81%E6%9C%89%E5%B1%9E%E6%80%A7) + - [属性值语法](#%E5%B1%9E%E6%80%A7%E5%80%BC%E8%AF%AD%E6%B3%95) + - [基本元素](#%E5%9F%BA%E6%9C%AC%E5%85%83%E7%B4%A0) + - [组合符号](#%E7%BB%84%E5%90%88%E7%AC%A6%E5%8F%B7) + - [数量符号](#%E6%95%B0%E9%87%8F%E7%AC%A6%E5%8F%B7) + - [@规则语法](#@%E8%A7%84%E5%88%99%E8%AF%AD%E6%B3%95) + - [@规则](#@%E8%A7%84%E5%88%99) + - [选择器](#%E9%80%89%E6%8B%A9%E5%99%A8) + - [简单选择器](#%E7%AE%80%E5%8D%95%E9%80%89%E6%8B%A9%E5%99%A8) + - [标签选择器](#%E6%A0%87%E7%AD%BE%E9%80%89%E6%8B%A9%E5%99%A8) + - [类选择器](#%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8) + - [id 选择器](#id-%E9%80%89%E6%8B%A9%E5%99%A8) + - [通配符选择器](#%E9%80%9A%E9%85%8D%E7%AC%A6%E9%80%89%E6%8B%A9%E5%99%A8) + - [属性选择器](#%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8) + - [伪类选择器](#%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8) + - [其他选择器](#%E5%85%B6%E4%BB%96%E9%80%89%E6%8B%A9%E5%99%A8) + - [伪元素选择器](#%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8) + - [组合选择器](#%E7%BB%84%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8) + - [选择器分组](#%E9%80%89%E6%8B%A9%E5%99%A8%E5%88%86%E7%BB%84) + - [继承、优先、层级](#%E7%BB%A7%E6%89%BF%E3%80%81%E4%BC%98%E5%85%88%E3%80%81%E5%B1%82%E7%BA%A7) + - [继承](#%E7%BB%A7%E6%89%BF) + - [优先](#%E4%BC%98%E5%85%88) + - [改变优先级](#%E6%94%B9%E5%8F%98%E4%BC%98%E5%85%88%E7%BA%A7) + - [层叠](#%E5%B1%82%E5%8F%A0) + + + +## CSS + +### 简介 + +CSS (Cascading Stylesheet) 它用于设置页面的表现。CSS3 并不是一个完整的独立版本而是将不同的功能拆分成独立模块（例如，选择器模块，盒模型模块），这有利于不同功能的及时更新与发布也利于浏览器厂商的实习。 + +![](../img/C/css3-history.png) + +**CSS 引入方法** +```html +// 外部样式表 + + + + +// 内部样式表 + + + + +// 内嵌样式(可在动态效果中同 JavaScript 一同使用) +

Sample Text

+``` + +### 语法 + +```css +/* 选择器 */ +.m-userlist { + /* 属性声明 */ + margin: 0 0 30px; + /* 属性名:属性值; */ +} +.m-userlist .list { + position: relative; + height: 100px; + overflow: hidden; +} +``` + +#### 浏览器私有属性 + +- Google Chrome, Safari (`-webkit`) +- Firefox (`-moz-`) +- IE (`-ms-`) +- Opera (`-o-`) + +```css +.pic { + -webkit-transform: rotate(-3deg); + -ms-transform: rotate(-3deg); + transform: rotate(-3deg); +} +``` + +NOTE: 使用 [http://pleeease.io/play/](http://pleeease.io/play/) ，CSS 预处理器（Sass，Less，Stylus）或编辑器插件可自动添加浏览器厂商的私有属性前缀。 + +#### 属性值语法 + +```css +margin: [ | | auto ]{1,4} +/* 基本元素：, , auto*/ +/* 组合符号：[], | */ +/* 数量符号：{1,4} */ +``` + +##### 基本元素 + +**关键字** +- auto +- solid +- bold +- ... + +**类型** +- 基本类型 + - `` + - `` + - `` + - ... +- 其他类型 + - <'padding-width'> + - <'color-stop'> +- 符号 + - `/` + - ',' +- inherit, initial + +##### 组合符号 + +- `<'font-size'> <'font-family'>` （` ` 两项必存，顺序毕遵） + - 合法：`12px arial` + - 不合法：`2em` + - 不合法：`arial 14px` +- `&&` (`&&` 两项必存，顺序无碍) + - 合法：green 2px + - 合法：1em orange + - 不合法：blue +- `underline || overline || line-through || blink` (`||` 至少选一，顺序无碍) + - 合法：underline + - 合法：overline underline +- ` | transparent`（`|` 只可选一，不可共存） + - 合法：orange + - 合法：transparent + - 不合法：orange transparent +- `bold [thin || ]`（`[]` 分组之用，视为整体） + - 合法：bold thin + - 合法：bold 2em + +##### 数量符号 + +- ``（无则表示仅可出现一次） + - 合法：1px + - 合法：10em + - 不合法：1px 2px +- `[, ]+` (`+` 可出现一次或多次) + - 合法：#fff, red + - 合法：blue, green 50%, gray + - 不合法：red +- `inset?&&` (`?` 表示可选) + - 合法：inset orange + - 合法：red +- `{2,4}` (`{2,4}` 可出现次数和最少最多出现次数) + - 合法：1px 2px + - 合法：1px 2px 3px + - 不合法: 1px + - 不合法：1px 2px 3px 4px 5px +- `