CSSMM4E 笔记 - 3.14 - 页面中元素的定位

发表于 2016-06-24 | 分类于 Web

Position 属性工作原理

Absolute 使元素相对最近的 positioned 祖先元素定位; 否则相对viewport(broswer window)定位; 脱离 page flow.
Relative 相对自身原本的位置定位; 不脱离 page flow, 在原本位置留下空白; 更多用于包含absolutely positioned 元素.
Fixed 相对viewport定位; 脱离 page flow.
static Default.
元素的层次
z-index: 3; Make a element above or beneath others.

隐藏页面部分

visibility: hidden | visible; 显示/隐藏元素, 不脱离流, 留空白.
opacity: 0 .. 1; 不脱离流, 留空白; 可用于动画.
display: .. | none; 脱离流, 空白被其他元素填充.

display: none; skip visibility property;
display: none; 同 position: abosulte; visibility: hidden;效果相同.

css tooltip:
http://www.menucool.com/tooltip/css3-tooltip
http://qtip2.com//

/* 1. Create the HTML for the image and caption. */
<figure class="hat">
  <img src="hat.jpg" width="100" height="100">
  <figcaption>A picture of a hat</figcaption>
</figure>
/* 2. Postion the Caption. */
.hat {
  postion: relative;
  width: 100px;
  height: 100px;
}
.hat figcaption {
  display: none;  /* 3. Hide the caption */
  /* or
   * opacity: 0;
   * transition: opacity .5s ease-in; */
  postion: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
}
/* 4. Make the caption appear when a visitor mouses over the image. */
.hat:hover figcaption {
  display: block;
  /* or
   * opacity: 1; */
}

强大的定位策略

元素内定位 - relative containing absolute
超出盒子 - 使用负数margin使元素伸出(poke out of)其容器
固定 (fixed) 定位 - 固定navigation panel, search box, site logo, sidebar…

React 快速入门指南: ES6 版（译）

发表于 2016-06-19 | 分类于 Web

这篇文章翻译自 Jack Callister 的 The React Quick Start Guide: ES6 Edition。

这篇文章是原文 React 快速入门指南的 ES6 版。Babel 是一个 Javascript 编译器，加上 React 可以让你写出现代的，可理解的，可维护的用户界面代码。只要知道这些就足以让你开始玩 React 了。跟着这个仓库 starter kit（里面有指导）一起编码吧，或者只是读一读也是好的。

概念（Concepts）

React 只有一个极小的 API. 这使得它用起来好玩，学起来简单，理解起来容易。但是，简单并不意味着熟悉。开始之前，还有少量概念需要了解。来，一个一个看看吧。

React 元素 (React elments) 是表示 HTML 元素的 Javascript 对象。它们不会出现在浏览器中。它们表示浏览器中得 h1, div 或 section 这样的元素。

组件 (Components) 是开发者创建的 React 元素。它们是用户界面中较大的组成部分，组件中包含结构和功能。比如 NavBar, LikeButton 或者 ImageUploader。

JSX 是创建 React 元素和 React 组件的技术。例如 <h1>Hello</hell> 就是一个 JSX 写成的 React 元素。这个 React 元素也可以写成 Javascript 的形式: React.DOM.h1(null, 'Hello');。相较而言 JSX 更好读更好写。 JSX 要先转换成 Javascript 之后才会在浏览器中运行。

虚拟 DOM （The Virtual DOM） 是 React 元素和组件的 Javascript 树。React 将虚拟 DOM 渲染到浏览器，从而显示用户界面。React 监听虚拟 DOM 的变化自动的改变浏览器 DOM 来同步两个 DOM。

我们已经简单了解了这些概念，可以开始使用 React 了。我们创建了一系列的用户界面，每一个都在前一个的基础上添加功能。我们最终创建了一个类似 instagram 的照片流 — 作为一个例子应用程序再好不过了。

渲染（Rendering）

事情的第一步是渲染一个虚拟元素（一个 React 元素或组件）。要记住，因为虚拟元素只存在于 Javascript 内存中，我们必须显式地告诉 React 将它渲染到浏览器 DOM 中去。

1	ReactDOM.render(<img src='http://tinyurl.com/lkevsb9' />, document.getElementById('app'));

见JSBin

代码中的 render 方法接受两个参宿: 一个虚拟元素和一个真实的浏览器 DOM 节点 (node) 。React 将虚拟元素插入到这个 DOM 节点上。现在可以在浏览器上看到图片了。

组件（Components）

组件是 React 的心脏和灵魂。组件是自定义的 React 元素，它们通常扩展了独特的功能和结构。

class Photo extends React.Component {
  render() {
    return <img src='http://tinyurl.com/lkevsb9' />
  }
}
ReactDOM.render(<Photo />, document.getElementById('app'));

见 JSBin

Photo 类定义为 React 组件类的子类。它有一个 render 返回 React 图片元素的方法。

这个 Photo 组件一 <Photo /> 的形式使用，并且渲染成应用程序的 div 。

这个组件没有比之前的 React 图片元素做更多的工作，但确实以自定义的功能和结构扩展了。

属性（Props）

属性可以认为是组件的选项。它们以参数的形式传递个组件，看起来就像 HTML 的属性(attributes)一样。

class Photo extends React.Component {
  render() {
    return (
      <div className='photo'>
        <img src={this.props.src} />
        <span>{this.props.caption}</span>
      </div>
    )
  }
}
ReactDOM.render(<Photo src='http://tinyurl.com/lkevsb9' caption='Hong Kong!' />, document.getElementById('app'));

见 JSBin

在 React 的 render 方法中，传递了两个属性给 Photo 组件：imageURL 和 caption。

在组件的 render 方法中，imageURL 属性用作 React 图片元素的 src, caption 属性用作 React span 元素的文本。

如果一个组件永远不改变其属性，那么就没有意义了，组件的属性是可以改变的。如果一个组件拥有可变的数据，就会用到状态 (state) 对象。

状态（State）

状态对象是组件内部的。该对象持有的数据随着时间变化。

class Photo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      liked: false
    }
  }
  toggleLiked() {
    this.setState({
      liked: !this.state.liked
    });
  }
  render() {
    const buttonClass = this.state.liked ? 'active' : '';
    return (
      <div className='photo'>
        <img src={this.props.src} />
        <div className='bar'>
          <button onClick={(e) => {this.toggleLiked(e)}} className={buttonClass}>
            ♥
          </button>
          <span>{this.props.caption}</span>
        </div>
      </div>
    )
  }
}
ReactDOM.render(<Photo src='http://tinyurl.com/lkevsb9' caption='Hong Kong!' />, document.getElementById('app'));

见 JSBin

拥有状态使组件引入了少量的复杂性。

组件类的 constructor 方法在组件初始化时调用。state 在这个过程中设置。此例中 liked 被设置为 false。

注意: 为了 React 准备好渲染的类，super 方法必须要调用（传入 props 参数）。

组件还增加了一个新的方法 toggleLiked。这个新的方法在组件上调用 setState 方法来切换 liked 的值。

组件 render 方法中的变量 buttonClass 根据 liked 的值被设置为 active 或空值。

buttonClass 在 React 按钮元素当做类名使用。这个按钮还有一个 onClick 事件处理器 toggleLiked。onClick 处理器使用了 ES6 的箭头语法，这是 function(e) { return this.toggleLiked(e)} 的简便写法。

下面列出了组件渲染到浏览器 DOM 时发生的事情:

当组件按钮被点击是，toggleLiked 被调用
liked 状态改变
React 重渲染组件到虚拟 DOM
比较虚拟 DOM 和之前的虚拟 DOM
React 分离出改变的部分并更新到浏览器 DOM

在此例中，React 将改变按钮上得类名。

组合（Composition）

组合就是说将较小的组件合成一个较大的组件。比如 PhotoGaller 组件可以在其内部使用 Photo 组件，想这样：

class Photo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      liked: false
    }
  }
  toggleLiked() {
    this.setState({
      liked: !this.state.liked
    });
  }
  render() {
    const buttonClass = this.state.liked ? 'active' : '';
    return (
      <div className='photo'>
        <img src={this.props.src} />
        <div className='bar'>
          <button onClick={(e) => {this.toggleLiked(e)}} className={buttonClass}>
            ♥
          </button>
          <span>{this.props.caption}</span>
        </div>
      </div>
    )
  }
}
class PhotoGallery extends React.Component {
  render() {
    const photos = this.props.photos.map((photo) => {
      return <Photo src={photo.url} caption={photo.caption} />
    });
    return (
      <div className='photo-gallery'>
        {photos}
      </div>
    );
  }
};
const data = [
  {
    url: 'http://tinyurl.com/lkevsb9',
    caption: 'Hong Kong!'
  },
  {
    url: 'http://tinyurl.com/mxkwh56',
    caption: 'Cows'
  },
  {
    url: 'http://tinyurl.com/nc7jv28',
    caption: 'Scooters'
  }
];
ReactDOM.render(<PhotoGallery photos={data} />, document.getElementById('app'));

见 JSBin

Photo 跟原来的完全一样。

PhotoGallery 组件通过 prop 传入假数据生成了3个 Photo 组件。

总结

这篇文章应该足以让你能够开始使用 React 构建用户界面了。[React docs]详细说明了点点滴滴。强烈建议阅读。

还有一些非常好的视频值得看看。Pete Hunt 关于 React 的演说 re-thinking web application architecture 和 Tom Occhino 对 React Native 的介绍 - 用 React 构建的原生移动端应用 (WIP)。

如果 ES6 你不熟悉，可以查看 Babel 官网的指南，在 REPL 中联系熟悉。

这个指南中没有有关本地环境设置的细节，React 官方文档应该能帮到您，或者查看这个 boilerplate 作为一个简单的解决方案。

CSSMM4E 笔记 - 3.13 - 构建基于浮动的布局

发表于 2016-06-13 | 分类于 Web

这里有模板:

模板生成器:

http://www.pagecolumn.com/

CSS 本身有列支持:
https://www.w3.org/TR/css3-multicol/
https://dev.opera.com/articles/css3-multi-column-layout/
http://aaronlumsden.com/multicol/

两列设计的步骤

用<div>包裹每一列，设置ID或class属性
<div class="news"> <div class="main">
浮动 sidebar div 到左边或右边
为浮动的 sidebar 设置宽度
设置 main div 的左或右右 margin

应用浮动的布局

Flaot对内容在html出现的顺序有要求.
让最重要的内容出在html的最前面对search engine更友好.
下面两个方法都可以使主要内容靠前.

浮动所有列
比如: 3列: 1. Float sidebar1 left; 2. Float main content; 3. Float right sidebar2.
浮动中的浮动
比如: 3列: 1. Wrap left sidebar and main; 2. Float main right, left sidebar left; 3. Float right sidebar right.

克服浮动(float)的缺陷

Clearing and Containing Floats why?

由于Floating元素下面的元素会包围它, 有时这是我们不期望的.
用 footer { clear: both; } 解决.

当容器中Floating元素后面没有后继元素/后继元素较短时, 容器会收缩(就当Floating元素不存在).

如下图: 标题”Bathtub…” 与下面两个小section在同一个Container(浅灰色背景)中
由于sections floating, 导致Container Collapse.
三个长条容器, 其中三个img floating, collapse.

解决方案:

在容器底部加一个 clearing 元素
缺点: 额外的元素.
浮动容器元素
Floating container expands to fit everything inside it. 但Floating向外传递了.
使用 overflow:hidden
加overflow:hidden到container, 但当container中有absolutely positioned元素是就不适用了.

使用 Micro Clear Fix(MCF, 清除修复宏)

.clear:after { /* clear is the class of the container. */
  content: " ";
  display: table;
  clear: both;
}

创建全高 (full-height) 的列

First other way
Second other way

方法1: 为各列设置背景图片包裹.

1 2	.wrapper1 { background: url(images/col1_bg.gif) repeat-y left top; } .wrapper2 { background: url(images/col2_bg.gif) repeat-y left top; }

方法2: Wrap all columns and apply gradient across columns.

Wrap all three columns.
Add a linear gradient, with color stop that match the width of the columns.

.wrapper {
  background-image: linear-gradient(left,
    red 0%, red 25%,
    white 25%, white 75%,
    blue 75%, blue 100%);
}

防止浮动元素挤落

用 box-sizing 防止浮动元素被挤落
* { box-sizing: border-box; }

CSSMM4E 笔记 - 3.12 - CSS 布局简介

发表于 2016-06-04 | 分类于 Web

Web页面布局类型

固定宽度 Fixed Width
流式 Liquid
响应式web设计 Responsive web design (RWD)

CSS 布局怎样工作

最早用表格.

<div>元素分块, 浏览器没有为div预设样式, div只是在块前后加了两个新行.

应用HTML5新的sectioning Elements代替div.

CSS Layout 技术:

浮动 float;
绝对定位 absolute positioning;
网格系统 grid system;
弹性盒子 flexbox.

布局策略

从内容开始
手机优先
https://abookapart.com/products/mobile-first
http://www.sitepoint.com/making-case-mobile-first-designs/
用软件/拍板画出梗概
https://developer.yahoo.com/ypatterns/wireframes/
识别出盒子
通过草图得出哪个部分使用何种盒子, div ? section ? …
顺应标准流
记得使用背景图片
使用背景图片可以通过CSS设置大量的属性, 比<img>更好的控制图片.
<img>对search engine更有用, 比如alt属性.
分成小块
分层处理元素
别忘了Margin 和 Padding
它们有空白效果

CSSMM4E 笔记 - 2.11 - 格式化表格和表单

发表于 2016-05-21 | 分类于 Web

正确使用表格

仅用于表格的 HTML 标签:

<table>
<caption>
<colgroup>
<col>
<thead>
<tbody>
<tr>
<th>
<td>

<table>
  <caption align="bottom">
    Table 1: CosmoFarmer.com's Indoor Mower Roundup
  </caption>
  <colgroup>
    <col class="brand" />
    <col class="price" />
    <col class="power" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Brand</th>
      <th scope="col">Price</th>
      <th scope="col">Power Source</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Chinook Push-o-matic Indoor Mower</td>
      <td>$247.00</td>
      <td>Mechanical</td>
    </tr>
    <tr>
      <td>Sampson Deluxe Apartment Mower</td>
      <td>$370.00</td>
      <td>Mechanical</td>
    </tr>
  </tbody>
</table>

表格样式

添加留白

1	td, th { padding: 10px; }

横向、竖向对齐

1
2
3

table { text-align: right; }        /* text-align is an inherited property */
th, td { vertical-align: center; }  /* vertical-align is NOT inherited */
vertical-align: top | baseline | middle | bottom;

表格边框

对table 使用border, 只影响table最外面的border;
对td, th使用border, 会产生可见的cells间的空隙.

单元格间的空隙
1
2
3
table {
border-spacing: 0;
}

消除双边框

1
2
3

table {
  border-collapse: collapse | separate(D);
}

圆角

td {
  border: 1px solid black;
  /* 如果设置了border-collapse, radius将被忽略. */
  border-radius: 5px;
}

行、列的样式

1 2	.products tr:nth-of-type(odd) {} .products tr:nth-of-type(even) {}

HTML用<colgroup>, <col> 来为列分组. 可以用它们来(类选择器)来style列.

...
<col class="price">
...
.price { width: 200px; }

Note: 通常浏览器会显示空cell的border和background color.
如果想hide它们, table { empty-cells: hide; }
但 border-collapse: collapse; 会使其无效.

表单样式

HTML表单元素

Fieldset - <fieldset>
Legend - <legend> Fieldset 的标题
Text field - <input type="text | password | textarea">
Button - <input type="submit | button">
Drop-down menu - <select>
Checkbox / radio - <input type="checkbox | radio">

CSS布局表单

Wrap each label in a tag
对 radio, <span class="label">What's your favorite color?</span>
其他, <label>Label</label><input =type="text" />

Set the display property to inline-block, and set a width

.label {
  display: inline-block;
  width: 20em;
}

Adjust the style

.label {
  float: left;
  width: 20em;
  vertical-align: top;
  text-align: right;
  margin-right: 15px;
}

伪类和表单

:focus, :ckecked, :enabled :disabled

http://html5doctor.com/css3-pseudo-classes-and-html5-forms/

CSSMM4E 笔记 - 2.10 - Transforms, Transitions 和 Animations

发表于 2016-05-15 | 分类于 Web

Transforms

3D Transforms

http://coding.smashingmagazine.com/2012/01/06/adventures-in-the-third-dimension-css-3-d-transforms/

http://desandro.github.io/3dtransforms/

http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html

http://davidwalsh.name/css-flip

Rotate

{
  transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(-45deg);
}

Scale

{
  transform: scale(2);
  transform: scaleX(2);
  transform: scaleY(2);
  transform: scale(-1);
  transform: scale(-1, 2);
  transform: scale(-0.5, .8);
}

Translate

{
  trnasform: translateX(-.5em);
  trnasform: translateY(-.5em);
  transform: translate(1px,2px);
}

Skew

{
  /* 下图 左 */
  transform: skew(45deg, 0);
  /* 下图 中 */
  transform: skew(0, 45deg);
  /* 下图 右 */
  transform: skew(25deg, 10deg);
  transform: skewX(25deg);
  transform: skewY(10deg);
}

Transformation组合

1
2
3

{
  transform: rotate(45deg) scale(2) translate(400px,500px) skew(45deg,0deg);
}

Origin

{
  transform-origin: left top;
  transform-origin: 0 0;
  transform-origin: 20% 45%;
}

Transitions

A few thins in plcace for trasition:
1.Two styles 2. Transition property 3. A trigger
transition properties:

rotate, scale, translate, skew
color, background-color, border-color, border-width, font-size, height, width, letter-spacing, line-height, margin, opacity, padding, word-spacing
top, left, right, bottom

complete list: https://www.w3.org/TR/css3-transitions/#animatable-properties

添加 Transition

.navButton {
  background-color: orange;
  transition-property: background-color; /* <== */
  transition-duration: 1s; /* <== */
}
.navButton:hover {
  background-color: blue;
}

{
  transition-property: clor, background-color, border-color;
  transition-property: all;
  transition-duration: .5s | 500ms;
  transition-property: color, background-color, border-color;
  transition-duration: .25s,  .75s,             2s;
}

Transition Timing

{
  transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out; 
  transition-timing-function: cubic-bezier(.20, .96, .74, .07);
}

Timing: http://www.the-art-of-web.com/css/timing-function/
Cubic Bezier: https://matthewlein.com/ceaser/

推迟Transition的开始

{
  transition-property: color, background-color, border-color;
  transition-duration: 1s,    1s,               .5s;
  transition-delay:    0,     0,                1s;
}

Tip:
比如在鼠标旋停弹出菜单时, 为使菜单立即出现:
比如在鼠标离开弹出菜单时, 为防止菜单立即消失:

.popMenu {
  transition-delay: 1s;  /* 延迟消失 */
}
.popMenu:hover {
  transition-delay: 0s;  /* 立即出现 */
}

Transition 速记法

{
  transition: property           duration timing-function delay;
  transition: color              1s       ease-in         1s,
              background-color   1s       ease-out        1s,
              border-color color 1s       ease-in-out     1s;
}

Animations

Transition vs. Animation:
Transition: One set properties => Another
Animation: Transition + 1. repeat, 2. pause, 3. reverse

Two steps to create animation:

Define the animation - keyframes
Apply the animation to an element.

定义 Keyframes

@-webkit-  -o- -moz-
@keyframes growAndGlow {
    from {
      background-color: yellow;
      animation-timing-function: cubic-bezier(1, .03, 1, .115);
    }
    
    20% {
      background-color: blue;
      animation-timing-function: linear;
    }
    
    45% 60% {
      background-color: orange; /* solid orange@45%-60% */
    }
    
    70% 90% {
      background-color: gray;
    }
    
    80% 95% {
      background-color: red; /* gray@70% -> red@80% -> gray@90% -> red@95% */
    }
    
    to {
      background-color: black;
    }
}

应用 Animation

Apply to normal element h1, or with pseudo class :hover, :active, :target, :focus ...

@keyframes fadeIn {}
.announcement {
  animation-name: fadeIn;  /* name */
  animation-duration: 1s;  /* duration */
  animation-timing-function: ease-out; /* timing-function */
  animation-delay: 1s;     /* delay */
  animation-iteration-count: 2 | infinite; /* iteration-count */
  animation-direction: alternate; /* revers its direction on second time */
  /* By default, animations end and then return to its original
  * state. Use fill-mode: forwards make them keep the end state.
  */
  animation-fill-mode: forwards;
}

Animation 速记法

{
  animation: name duration timing-function iteration-count direction delay fill-mode, ...;
  animation: fadeOut 2s    ease-in-out     5s     2 alternate forwards,
            fadeIn  2s    ease-in         5s     2 alternate forwards;
}

暂停 Animation

.fade {
  animation: fadeOut 2s ease-in 2 alternate 5s forwards,
             glow 5s;
}
.fade:hover {
  animation-play-state: paused;
}

CSSMM4E 笔记 - 2.09 - 美化网站的导航

发表于 2016-05-09 | 分类于 Web

链接的样式

下划线

完全删除下划线
1
2
3
a {
text-decoration: none;
}

鼠标悬停时加下划线

a {
  text-decoration: none;
  background-color: #F00;
}
a:hover {;
  text-decoration: underline;
  background-color: transparent;
}

使用底边(border-bottom)

a {
  text-decoration: none;
  border-bottom: dashed 2px #9F3;
}

使用背景图片

a {
  text-decoration: none;
  background: url(images/underline.gif) repeat-x left bottom;
  padding-bottom: 5px;
}

创建按钮

使用 linear graidient, rounded corners, box/text shadows …
注意 :hover 时的状态.

使用图片

Don’t forget no-repeat
Control placement with background-postion
Padding gives you room
Use the pesudo-classes

选择加样式的链接

理解链接状态
:linek, :visited, :hover, :active LoVe/HAte
目标不同的链接(站内、站外…)
Usint .class or [href^="http"] or [href*="myweb.com"] …

用后代选择器分组链接

nav a { font-family: Arial, sans-serif; }
nav a:link { color: #F60; }
nav a:visited { color: #900; }
nav a:hover { color: #F33; }
nav a:active { color: #B2F511; }

构建导航条

使用无序列表

<ul class="nav">
  <li><a href="index.html">Home</li>
  <li><a href="news.html">News</li>
  <li><a href="reviews.html">Reviews</li>
</ul>

删除项目符号

去掉padding & maring

ul.nav {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

竖排的导航条

将链接 (a) 设置为块元素

固定按钮宽度

ul.nav a {
  display: block;
  width: 8em;
}

横排导航条

使用`display: inline` & `display: inline-block`

为无序列表创建样式删除padding, margin & bullet

ul.nav {
  margin-left: 0px;
  padding-left: 0px;
  list-style: none;
  order-bottom: 1px dashed #000;
}

列表项为行内元素 (inline elements).
1
2
3
ul.nav li {
display: inline;
}

链接为行内快(inline-block)

ul.nav a {
  display: inline-block;
  border: 1px dashed #000;
  border-bottom: none;
  padding: 5px 15px 5px 15px;
  background-color: #EAEAEA;
  text-decoration: none; 
  color: #333;
}

使用 `float` 创建横向导航条

Pop-up Menus:
http://blog.teamtreehouse.com/create-simple-css-dropdown-menu
http://www.red-team-design.com/css3-animated-dropdown-menu
http://purecssmenu.com
https://css-tricks.com/drop-down-menus-with-more-forgiving-mouse-movement-paths

浮动列表项Float the list items
链接为块元素Add display: block; to the links
格式化链接Style the links
设置宽度Add a width
溢出隐藏列表Add overflow: hidden; to the <ul> tag style

.nav {
  margin: 0px;
  padding: 0px;
  list-style: none;
  border-bottom: 3px solid rgb(204, 204, 204);
  overflow: hidden;
}
.nav li {
  float: left;
}
.nav a {
  width: 12em;
  display: block;
  border: 3px solid rgb(204,204,204);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  padding: 10px;
  margin-right: 5px;
  background-color: rgb(95,95,95);
  background-image: -webkit-linear-gradient(rgb(175,175,175),rgb(95,95,95));
  background-image: -moz-linear-gradient(rgb(175,175,175),rgb(95,95,95));
  background-image: -o-linear-gradient(rgb(175,175,175),rgb(95,95,95));
  background-image: linear-gradient(rgb(175,175,175),rgb(95,95,95));
  text-decoration: none;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sns-serif;
  font-weight: bold;
}

CSS样式预下载轮转(Preloading Rollovers[轮转, 翻转])

制作一张含有不同版本按键的图片
计算从整张图片顶部到每张按钮顶部的长度
为正常regular 链接创建样式. 使图片处于背景中得左上角
1
a { background: #E7E7E7 url(image/pixy.png) no-repeat left top; }

创建 :hover 样式

1	a:hover { background-postion: 0 -39px; }

特殊链接的样式

站外链接

1
2
3

a[href^='http']
a[href*='://']
a[href*='://']:not(a[href*='www.mysite.com'])

邮件链接
1
a[href^='mailto']
特定文件类型的链接
1
a[href$='.pdf']

CSSMM4E 笔记 - 2.08 - 为网页添加生动的图片

发表于 2016-05-02 | 分类于 Web

免费图片

http://foter.com
https://unsplash.com
http://www.morguefile.com
http://www.freeimages.com
http://openphoto.net
http://search.creativecommons.org
http://www.flickr.com/creativecommons
ICON: http://www.flaticon.com
ICON: http://www.somerandomdude.com/work/sanscons/
Tiling patterns: http://www.colourlovers.com/patterns
Tiling patterns: http://www.kollermedia.at/pattern4u
Tiling patterns: http://squidfingers.com/patterns
Tiling patterns2: http://bgpatterns.com
Tiling patterns2: http://stripegenerator.com
Tiling patterns2: http://patterncooler.com

`<img>`标签

<img> 最常用的属性: border padding float margin border-radus

作为背景的图片

body {
  background-image: url(images/bg.png);
}
url(../images/bg.png) /* document-relative */
url(/images/bg.png)   /* root-relative */
url('/images/bg.png') /* quotes or not both ok */
url("/images/bg.png")

GIF JPEG PNG SVG

GIF (Graphics Interchange Format): 动态图
JPEG(Joint Photographic Experts Group): 色彩丰富, 适于照片
PNG (Portable Network Graphics)
- png8 取代gif;
- png24, png32比jpeg色彩更丰富,但体积更大;
- png提供alpha通道;
SVG (Scalable Vector Grphic)

控制重复

1
2
3

{
  background-repeat: repeat(D) | no-repeat | repeat-x | repeat-y | round | space;
}

round 使图片变形来填满背景(下图左);
space 不变形图片, 在重复图片间填充space来铺满背景(下图右).

定位背景图片

简单定位

{
  background-postion: {left center right} {top center bottom};
  background-postion: 5px 8px;
  background-postion: 20% 80%;
  background-postion: 5px 50%;
}

固定图片位置(不滚动)

1
2
3

{
  background-attachment: fixed | scroll(D);
}

背景的原点和裁剪

{
  background-origin: boder-box(D) | padding-box | content-box;
  background-clip: boder-box(D) | padding-box | content-box;
}

缩放背景图片

{
 background-size: 100px 200px;
 background-size: 100px auto; /* keep aspect ratio */
 background-size: 100% 100%;  /* scall to fit the background */
 background-size: contain;    
 background-size: cover;
}

contain: forces the image to resize to fit the background space of the page element while maintaing the aspect ratio of the image.
cover: forces the width of the image to fit the width of the element and the height of the image to fit the height of the element, without changing the aspect of the image.

Background 属性速记法

{
  background: img postiton(x,y)/size repeat origin clip attachment color; 
}
body {
  background: url(bullseye.gif) center center / 50% no-repeat fixed #FFF;
}

为滚动设置多个背景图片

{
  background: url(scrollTop.jpg) center top no-repeat,
              url(scrollBottom.jpg) center bottom no-repeat,
              url(scrollMiddle.jpg) center top repeat-y;
}

渐变背景

线性渐变

{
background-image: linear-gradient(to right, black, white);
background-image: linear-gradient(to bottom right, black, white);
background-image: linear-gradient(135deg, rgb(0,0,0), white);
background-image: linear-gradient(135deg, black, rgb(255,255,255), HSL(0,0%,0%) ...);
background-image: linear-gradient(to right, #900, #FC0 10%, 3FC0 90%, #900);
background-image: linear-gradient(to right, #900 20%, #FC0 30%, 3FC0 70%, #900 80%);
background-image:
  line-gradient(cyan, transparent),
  line-gradient(255deg, magenta, transparent),
  line-gradient(45deg, yellow, transparent);
}

重复线性渐变

{
  background-image: repeating-linear-gradient(45deg, c1 atp1, c2 atp2, c3 atp3);
  /* 下图 左 */
  background-image: repeating-linear-gradient(45deg, #900 20px, #FC0 30px, #900 40px);
  /* 下图 右 */
  /* SOLID strips: 0-10px -> solid #900; 10-20px -> solid FC0 */
  background-image: repeating-linear-gradient(45deg, #900 0, #900 10px, #FC0 10px, #FC0 20px);
}

径向渐变

{
  /* top left */
  background-image: radial-gradient(red, blue);
  /* top right */
  background-image: radial-gradient(circle, red, blue);
  /* middle left ?????? */
  background-image: radial-gradient(circle at 20% 40%, red, blue);
  /* middle left */
  background-image: radial-gradient(closest-side circle at 20% 40%, red, blue);
  /* middle right */
  background-image: radial-gradient(closest-corner circle at 20% 40%, red, blue);
  /* bottom left */
  background-image: radial-gradient(farthest-side circle at 20% 40%, red, blue);
  /* bottom right */
  background-image: radial-gradient(farthest-corner circle at 20% 40%, red, blue);
  /* color stops */
  background-image: radial-gradient(circle at 20% 40%, red 20%, orange 80%, yellow);
}

重复径向渐变

1
2
3

{
  background-image: repeating-radial-gradient(circle, red 20px, orange 30px, yellow 40px, red 50px);
}

CSSMM4E 笔记 - 2.07 - Margins, Paddings, 和 Borders

发表于 2016-04-17 | 分类于 Web

Margin & Padding速记法

TRouBLe - Top Right Bottom Left

相碰的(Colliding) Margins

当一个元素的地步margin与另一元素的margin性触时，浏览器使用较大的那个margin.

负数margin消减空间

行内，块(Inline, Block)以及其他display设定

Top/Bottom Maring/Padding 对行内元素没有效果/影响.
使用 display: inline-block; 来调整这种行为.

1
2
3

{
  display: inline | block | line-block | none;
}

边框(border)

{
  border: 4px solid red;
  border-top: 4px solid red;
  border-width: 4px;
  border-style: solid | dashed | dotted | double | groove | inset | outset | ridge | none;
  border-color: red;
}

背影着色

1
2
3

{
  background-color: rgb(109,218,63);
}

创建圆角

{
  border-radius: TL TR BR BL;
  border-radius: 0 30px 10px 5px;
  border-radius: horizontal radius / vertical radius;
  border-radius: 40px/20px;
  border-radius: 40px 10px 20px 10px / 20px 30px 40px 20px;
  border-radius: percetage;
  border-radius: 20%; /* => radius = 20% * width or height. */
  border-radius: 2em;
}

投射阴影

.box {
  box-shadow: [inset] -left+right -top+bottom blur [spread] color, ...;
  box-shadow:         4px         6px         8px           rgba(0,0,0,.75);
  box-shadow:         -4px        -6px        8px  2px      rgba(0,0,0,.75),
                      8px         6px         12px          rgba(0,0,0,.5);
  box-shadow: inset   4px         6px         8px           rgba(0,0,0,.75);
}

inset: 表示让web broswer在box内部画阴影.
spread: 向4个方向(上下左右)延伸阴影.

Determing Height and Width

计算盒子的实际宽度和高度

Actual width = left boerder + left padding + width + right padding + right border
Actual height = top boerder + top padding + height + bottom padding + bottom border

box-sizing 重定义盒子的 width/height

1
2
3

{
  box-sizing: border-box | padding-box | content-box;
}

内容超出时的行为

1
2
3

{
  overflow: visible | scroll | auto | hidden;
}

宽高的最大最小值

body {
  max-width: 1200px;
  min-width: 760px;
}

浮动(flaot)元素

float属性移动元素到左边或者右边。
这个过程中，浮动元素下面的内容就会向上移动，
并且围绕在浮动元素周围。
浮动元素移动到容器元素(containing element)的左或右的边界上(edge).

1
2
3

{
  float: left | right | none;
}

背景边框和浮动 (Background, Borders, and Floats)

Floated元素下面的元素如果带有background/border的话, 这些元素的background/border会显示在Floated元素的下面.

解决方案1: overflow: hidden; 添加到下面的上移的元素
解决方案2: 向floated元素添加border, 使它的border和页面背景色相同, 且宽度合适.

停止浮动

clear属性指示一个元素不要围绕一个浮动元素.

1
2
3

.copyright {
  clear: left | right | both | none;
}

CSSMM4E 笔记 - 2.06 - 格式化文本

发表于 2016-04-12 | 分类于 Web

速记法字体(Shorthand Font)

font: style variant weight size/line-height family

最后两个必须是font-size[/line-height] 和font-family, 其他属性可以任意顺序.

1	font: italic bold small-caps 18px/1.5 Arial, Helvetica, sans-serif;

使用常用字体

Serif Fonts	Sans-Serif Fonts	Monospace and Fun Fonts
“Times New Roman”, Times, serif	Arial, Helvetica, sans-serif	“Courier New”, Courier, monospace
Georgia, “Times New Roman”, Times, serif	Verdana, Arial, Helvetica, sans-serif	“Lucida Console”, Monaco, monospace
Baskerville, “Palatino Linotype”, Times, serif	Geneva, Arial, Helvetica, sans-serif	“Copperplate Light”, “Copperplate Gothic Light”, serif
“Hoefler Text”, Garamond, Times, serif	Tahoma, “Lucida Grande”, Arial, sans-serif	“Marker Felt”, “Comic Sans MS”, fantasy
	“Century Gothic”, “Gill Sans”, Arial, sans-serif

使用Web字体

字体文件格式(Types):

EOT Embedded OpenType .eot
TrueType, OpenType .ttf .otf
WOFF Web Open Font Format .woff
SVG Scalable Vector Graphic .svg

寻找Web字体

The League of Moveable Type theleagueofmoveabletype
Exljbris font foundry http://www.exljbris.com/
The Open font Library http://openfontlibrary.org
Font Squirrel https://www.fontsquirrel.com
Google Fonts https://www.google.com/fonts

生成多种字体格式

using https://www.fontsquirrel.com/tools/webfont-generator

Web字体使用示例

@font-face {
    font-family: 'League Gothic';
    src: url('fonts/League_Gothic-webfont.eot');
    src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded- opentype'),
         url('fonts/League_Gothic-webfont.woff2') format('woff2'),
         url('fonts/League_Gothic-webfont.woff') format('woff'),
         url('fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('fonts/League_Gothic-webfont.svg') format('svg');
}
h1 {
  font-family: 'League Gothic';
  font-weight: normal;
}

处理Bold和Italic字体变体(Variants)

@font-face {
  font-family: 'PTSans';
  src: url('PTSansRegular.woff2') format('woff2'),
      url('PTSansRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'PTSans';
  src: url('PTSansItalic.woff2') format('woff2'),
      url('PTSansItalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'PTSans';
  src: url('PTSansBold.woff2') format('woff2'),
      url('PTSansBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'PTSans';
  src: url('PTSansBoldItalic.woff2') format('woff2'),
      url('PTSansBoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

发现Google Web字体

给文点颜色看看

色彩的表示方法(Representation):

Hexadecimal Color Nation #0066FF
RGB / RGBA rgb(100%, 100%, 100%); rgb(255,255,255); rgba(255, 100, 50, .5)
HSL / HSLA hsl(0-360, 100%, 50%), hsla(0-360, 50%, 70%, .5)
H: Hue色相
S: Saturation 饱合度, 纯度
L: Lightness 高度
色相: 红, 橙, 黄, 绿, 青, 蓝, 紫: 0-51-102-153-204-255-306-357; 相差约51.

改变字体大小

* {
  font-size: 1em;
  font-size: 1rem;
  font-size: 200%;
  font-size: 36px;
  font-size: xx-small, x-small, small, medium, large, x-large, xx-large;
}

% 和 em 本质上是一样的, 是相对浏览器默认的字体大小(16px)来计算的, 它们在嵌套的中会通过继承积累效果.
rem (Root em) 与em 相似, 它总是相对根元素(html)来设定字体大小.

格式化单词和字母

斜体Italiczing
粗体Bolding
Capitalizing - SMALL CAPS
装饰Decorating
单词、字母间距Letter/word Spacing

{
    font-style:italic | normal;
    font-weight: bold | normal;
    font-transform: uppercase | lowercase | none;
    font-variant: small-caps;
    text-decoration: underline | overline | line-through | blink | none;
    text-decoration: underline overline;
    letter-spacing: -1px | .7em ...;
    word-spacing: 2px | .5em ...;
}

文本阴影

{
  text-shadow: -left+right -top+bottom blur color;
  text-shadow: -4px 4px 3px #999999;
  text-shadow: -4px 4px 3px #666, 1px -1px 2px #000;
}

格式化段落

行间距
1
2
3
4
5
{
line-height: 150%;
line-height: 1.5em;
line-height: 1.5;
}
1.5em和1.5区别: 1.5总是通过(font-size of current tag) * 1.5来计算的.

对齐

1
2
3

{
  text-align: left | right | center | justify ;
}

首行缩进
1
2
3
{
text-indent: 25px | 5em | 50%;
}
text-indent: 50% 表示indent为containing元素宽度的50%.

段落首字、首行

{
  p::first-letter {}
  .intro::first-line {}
}

格式化列表

项目符号种类

1
2
3

li { 
   list-style-type: squire | disc | circle | decimal | decimal-leading-zero | upper-alpha | lower-alpha | upper-roman | lower-roman | lower-greek | upper-greek .... | none;
}

项目符号(Bullets and Numbers)的位置

li {
  list-style-position: inside | outside;
}
ul, ol {
  padding-left: 0;
  margin-left: 0;
}

图形化项目符号(Graphic Bullets)
1
2
3
li {
list-style-image: url(images/bullet.gif);
}
url 不需要(quotation marks: ‘ “)包裹

Position 属性工作原理

强大的定位策略

概念（Concepts）

渲染（Rendering）

组件（Components）

属性（Props）

状态（State）

组合（Composition）

总结

两列设计的步骤

应用浮动的布局

克服浮动(float)的缺陷

Clearing and Containing Floats why?

创建全高 (full-height) 的列

防止浮动元素挤落

Web页面布局类型

CSS 布局怎样工作

布局策略

正确使用表格

表格样式

添加留白

横向、竖向对齐

表格边框

行、列的样式

表单样式

HTML表单元素

CSS布局表单

伪类和表单

Transforms

Rotate

Scale

Translate

Skew

Transformation组合

Origin

Transitions

添加 Transition

Transition Timing

推迟Transition的开始

Transition 速记法

Animations

定义 Keyframes

应用 Animation

Animation 速记法

暂停 Animation

链接的样式

下划线

创建按钮

使用图片

选择加样式的链接

构建导航条

使用无序列表

竖排的导航条

横排导航条

使用display: inline & display: inline-block

使用 float 创建横向导航条

CSS样式 预下载轮转(Preloading Rollovers[轮转, 翻转])

特殊链接的样式

免费图片

<img>标签

作为背景的图片

控制重复

定位背景图片

简单定位

固定图片位置(不滚动)

背景的原点和裁剪

缩放背景图片

Background 属性速记法

为滚动设置多个背景图片

渐变背景

线性渐变

重复线性渐变

径向渐变

重复径向渐变

Margin & Padding速记法

相碰的(Colliding) Margins

负数margin消减空间

行内，块(Inline, Block)以及其他display设定

边框(border)

背影着色

使用`display: inline` & `display: inline-block`

使用 `float` 创建横向导航条

CSS样式预下载轮转(Preloading Rollovers[轮转, 翻转])

`<img>`标签