CSS3 Secrets の第 3 版は、HTML5 学習ノート_html/css_WEB-ITnose の第 9 章から第 12 章までをカバーしています。

第 9 章、Web サイトのナビゲーションの装飾

アクセスの制限 プライバシー上の理由から、ブラウザは疑似クラス:visited に適用できる CSS 属性を制限し始めています。これには、訪問したリンクの色、背景色、境界線の色、およびその他のスタイルの定義が含まれます (これらのリンクの通常の状態に対して色、背景色、境界線の色が定義されていない限り)

タグの場合、すべてさまざまな訪問状態がスタイル設定されますが、スタイルを有効にするには、リンクを特定の順序で指定する必要があります: リンク、訪問済み、ホバー、アクティブ

CSS3 ボタン ジェネレーター: http://css3button.net

CSS3 ボタンの優れた例: http://hellohappy.org/css3-buttons/ および http://webdesignerwall.com/tutorials/css3-gradient-buttons

垂直ナビゲーション バー

1. リンクをブロックとして表示する

2. ボタンの幅を制限する

水平ナビゲーション バー

方法 1. display:inline-block 属性を使用しますが、ボタンの間に小さな隙間が残ります。

スペースを削除する方法 1: 前の と次の

を同じ行に配置します

<ul>   <li><a href="#">one</a></li><li>   <a href="#">two</a></li><li>   <a href="#">three</a></li></ul>

効果:

メソッド2 スペースを削除するには: 項目リストに負の右マージンを追加しますが、テキストの長さが異なるとこの値も異なります。実験する必要があります

    <style type="text/css">        li {            display: inline-block;            border: 1px solid #999;            margin-right: -9px;        }    </style>

効果:

水平ナビゲーション バーには float を使用します

1. フローティング リスト プロジェクト

2. リンクに display:block を追加します

3. リンクのスタイルを定義します

4. 幅を追加します

5.

タグ スタイルに overflow:hidden を追加します
ナビゲーション バーの作成について ヘルプ
普通のリストを特別なナビゲーション要素に変える: http://css.maxdesign.com.au/listutorial/
リストベースのナビゲーション デザイン チュートリアル: http://css.maxdesign .com.au/listamatic/
わざわざ自分で作成したくない場合は、List-O-Matic ウィザードを試すことができます: www.accessify.com/tools-and-wizards/developer- tools/list-o-matic
CSS スタイルのプリロード置換方法
CSS を使用することができます。マウスがその上を通過したときに、グラフィックリンクを別の画像に変更するのは非常に簡単です。ただし、画像がない場合には問題があります。がダウンロードされると、ブラウザーが新しい画像を受信して​​表示する際に大幅な遅延が発生します。遅延を避けるために、CSS スプライトを使用して 1 つの画像で異なるボタンの状態を作成できます
1. 画像編集ソフトウェアを使用して、異なる画像を作成します。ボタンのバージョン
2. 画像全体の上部から各画像の上部までの距離を測定します
3. 通常のリンクの CSS スタイルを作成します
4. 作成: ホバー スタイル

特別なリンクのスタイルを定義しますリンクタイプ

属性セレクターを使用する
a[href^='http ://']
第 10 章、CSS の変換、遷移、およびアニメーションのプロパティ

変換 (変換)

CSS3 では、Web ページを変換できるいくつかのプロパティを導入します要素の回転、拡大縮小、移動、または水平または垂直方向に沿ったねじれ (ベベル変換)
IE9、Safari、Chrome、Firefox、Opera は 2D 変換をサポートしていますが、IE8 以前はサポートしていません。変換する必要があります。ベンダープレフィックスを使用します
変換関数: ... 既存の要素からの位置は、左または右および上または下に一定の距離を移動します
変換関数には 2 つの値があります: 最初の値は水平距離 (正の数値) を指定します

は一方向にも使用できます:translateX 水平方向、translateY 垂直方向

都可以使用pixel，em以及percentage值

4、skew（倾斜）

.testClass{    transform:skew(45deg,0);          /* 第一个指沿X轴倾斜（正数向左倾斜<从元素上方沿逆时针进行>，负数向右），*/                 /*第二个指沿Y轴倾斜（正数往右边向下<沿顺时针从元素右侧进行>，负数往左边向下），这个理解不够，表达不明白 */}

多个函数共用：

.testClass{    transform:skew(45deg,0deg) scale(.5) translate(400px,500px) rotate(90deg);}

这些函数的应用顺序就是浏览器应用这些效果的顺序

5、origin

一般来说，都是相对于元素的中心作变换点，但CSS3允许使用transform-origin属性，改变这个点，与background-position属性一样，可以提供关键字、pixel为单位的绝对值、em和percentage为单位的相对值

transform-origin:left top;

transform-origin:0 0;

transform-origin:0% 0%;

transform-origin:right bottom ==> transform-origin:100% 100%

第一个指水平，第二个指垂直

3D变形，CSS3还提供了一种更加复杂的变换类型：3D变形（3D transform）

transition

实际上是在一定时间内，一组CSS属性变换到另一组属性的动画展示过程。

为了使transition生效，需要做以下几件事：
1、两个样式，一个开始，一个结束

2、transition属性。CSS3新增，使动画成为可能的秘诀所在。一般应用到最初开始的样式中

3、触发器

浏览器无法以动画形式模拟所有CSS属性，但还是有很多可选择。具体请看： 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用于定义要以动画显示哪些属性，可以指定一个或多个，也可以使用all关键字。

transition-duration用于定义动画要持续多久结束，可以使用秒或毫秒作单位transition-duration:.5s，transition-duration:500ms

还可以针对每个需要动画展示的属性分别定义时限：

.testClass{    transition-property:color,background-color,border-color;    transition-duration:.5s,.75s,2s;}

时间与属性是一一对应的

注：必须提供供应商前缀，并不需要提供IE供应商前缀，IE9及之前不支持，IE10可支持前缀版本

给transition定时

transition-timing-function属性可控制动画速度。并不是控制动画时间长短，而是控制动画期间的速度。可以使用关键字：linear、ease、ease-in、ease-out、ease-in-out，浏览器默认以ease方法。

还可以使用cubic-bezier值。Bezier曲线。

.testClass{     transition-timing-function:cubic-bezier(.20,.96,.74,.07);}

可以使用在线工具创建和测试不同的定时函数，Mathew Lein的Ceasar工具就是其中之一： http://matthewlein.com/ceaser/

延时启动transition

利用transition-delay属性阻止立即开始动画。

需要使用供应商前缀：

.testClass{    -webkit-transition-delay: .5s;    -moz-transition-delay: .5s;    -o-transition-delay: .5s;    -ms-transition-delay: .5s;    transition-delay: .5s;}

在使用CSS下拉菜单时，如果不小心让鼠标离开了菜单，则下拉菜单很快就消失了，可以使用如下做法：
在初始样式添加：transition-delay: 5s;

在:hover样式添加：transition-delay: 0;

这么做不合常理就是了

注：js改动CSS属性，也会启动transition

transition快捷方法

使用transition属性。只需要列出属性、延时时间、定时函数，并用空格分开即可。

.testClass{    transition:all 1s ease-in .4s;}

还可以分开定义多个，只需要逗号分隔：

.testClass{    transition:color 1s,background-color .5s 1s;}

需要提供供应商前缀

animation

创建动画

1、定义动画，包括创建关键帧，即列出要创建动画的CSS属性

2、将动画应用到元素上，可以应用给任意数量的元素

定义关键帧

@keyframes animationName{    from{        /*  list   CSS   properties   here   */    }    to{        /*   list   CSS    properties   here   */    }}

@keyframes并不是CSS属性，应该称之为at规则，CSS其他at规则还包括@import，@media

还可以使用多个百分比定义多个关键帧：

@keyframes backgroundGlow{    from{        backgorund-color:yellow;    }    50%{        background-color:blue;    }    to{        background-color:red;    }}

以上表示，蓝色背景会在动画进行到50%时出现，可以用0%代替from关键字，100%代替to关键字

还可以这么设置：

@keyframes glow{    from{        backgorund-color:yellow;    }    25%,75%{        background-color:blue;    }    to{        background-color:red;    }}

表示在动画进行25%-75%之间要显示持续显示蓝色背景

还有这个：

@keyframes glow{    from{        backgorund-color:yellow;    }    20%,60%{        background-color:blue;    }    40%,80%{        background-color:orange;    }    to{        background-color:red;    }}

表示在20%显示blue，在40%显示orange，在60%显示blue，在80%显示orange，跳来跳去

CSS3 animation一大缺点：需要特定的供应商前缀：

@-webkit-keyframes fadeIn{    from{        opacity:0;    }    to{        opacity:1;    }}@-moz-keyframes fadeIn{    from{        opacity:0;    }    to{        opacity:1;    }}@-o-keyframes fadeIn{    from{        opacity:0;    }    to{        opacity:1;    }}@keyframes fadeIn{    from{        opacity:0;    }    to{        opacity:1;    }}

注：不需要为IE提供，IE9及更早版本不支持，IE10支持无供应商前缀版本

应用animation

可以给元素的任何样式添加动画，也可以给伪类应用动画，js改动也会启动动画

1、用@keyframes规则创建淡入动画：

@keyframes fadeIn{    from{    opacity: 0;    }    to{    opacity: 1;    }}

2、将动画应用给

标签的样式：

.announcement{    animation-name: fadeIn;          /*设置动画名称，前面创建的*/    animation-duration: 1s;          /* 设置动画从开始到结束所花时间 */}

可以将非动画属性也一起放入样式中

animation-name，animation-duration也需要使用供应商前缀

给animation定时

使用animation-duration定时，可以像transition一样定义多个，只要用逗号分开，一一对应。

使用animation-timing-function函数控制整个动画或特定关键帧，可以使用Cubic Bezier曲线也可以使用关键字，关键字与transition-timing-function函数关键字一样（linear、ease、ease-in、ease-out、ease-in-out）

定义了多个关键帧，还可以在关键帧之间应用不同的函数：

@keyframes growAndGlow{    from{        background-color: yellow;        animation-timing-function: cubic-bezier(1, .3, 1, .115);    }    50%{        transform:scale(1.5);        background-color:blue;        animation-timing-function: linear;    }    to{        transform:scale(3);        background-color: red;    }}

还可以使用延时启动：animation-delay可以设置等待时间，与transition-delay属性一样。

完成animation

使用animation-iteration-count可以设置动画运行的次数。使用infinite可以不限次数的运行下去

为了使一个动画在奇数次时超前运行，在偶数次时反向运行，可以使用animation-direction属性和关键字alternate。

为了让一个动画在运行后回归最初的状态，可以使用偶数迭代次数，并将animation-direction设为alternate

可以使用animation-fill-mode:forwards;将动画固定在最后的样子，以免使得web浏览器在动画结束时，将元素突兀的变回初始状态

使用animation快捷方式

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

改写：

.fade{    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards;}

只有名称和持续时间是必要的，其他都是可选，应用多个动画，只需每个动画用逗号隔开即可。

.fade{    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                glow 5s;}

实际应用还需给定供应商前缀：

.fade{    -webkit-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                        glow 5s;    -moz-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                     glow 5s;    -o-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                   glow 5s;    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                glow 5s;}

暂停animation

使用animation-play-state属性，只接受两个关键字：running、paused，要暂停只需这样：animation-play-state:paused;但，在使用CSS时只有一种方法可以应用它，那就是伪类。

第11章，表格和表单格式化

使用text-align和vertical-align调整垂直对齐和水平对齐

text-align接受：left、right、center、justify四个值，可继承

vertical-align接受：top、baseline、middle、bottom四个值，不可继承，top：把内容推到表格单元顶部；middle：让内容居中；bottom：把内容底边推到单元格底部；baseline（基准线）作用和top类似，不过基本看不出来baseline有啥作用。

创建边框

在

标签中设置border时，只会给表格添加边框，并不会给单元格添加，当给单元格设置border时，将会在单元格之间留下一个间隙

控制表格单元之间的空格

CSS提供了border-spacing属性用来控制表格单元之间的空隙。

消除双边框

即使消除了间隙，表格单元的边框也会变成双边框。使用border-collapse属性，接受两个值：spearate（默认显示方式）、collapse（消除单元间隔和边框）

注：如果将border-collapse设置为collapse，border-spacing将不起作用

圆角

利用border-radius可以给表格单元（而不是表格本身）添加圆角。

还可以给表格和表格单元应用box-shadow属性。

可以使用nth-of-type选择器，给表格奇数行和偶数行添加不同的样式。

注：浏览器通常会显示出空白表格单元的边框和背景色，若要隐藏可以使用empty-cells:hide：

table{     empty-cells:hide;}

但，如果border-collapse设为collapse，则浏览器忽略empty-cells属性，依然显示空白单元格边框和背景色

给表单定义样式

HTML表单元素

1、fieldset，

标签用来集中相关表单问题

2、legend，

标签就在

标签的HTML代码之后，它给一组域提供一个标签

3、text fields（文本域）

4、buttons（按钮），表单按钮：提交，重置或其他动作

5、drop-down menus（下拉菜单），

6、checkbox（复选框）和radio button（单选按钮）

第三部分----CSS页面布局 第12章，CSS布局简介

网页布局类型

1、固定宽度，参看 www.alistapart.com， www.espn.go.com， www.nytimes.com

2、流式布局，参看 http://maps.google.com

3、响应式Web设计（Responsive Web Desin，RWD）

HTML5的分区元素

标签用于组成一个自包含结构的内容，例如一篇博客文章。

标签用于给网页或者网页的分区提供标题、导航目标以及其他介绍性材料

标签用于包含版权声明、网站创始人的名字、网页的发布日期等等

CSS布局方法

绝大多数网页均采用CSS的float属性进行布局

布局策略

1、从内容入手

2、Mobile First（移动设备优先）

3、先设计草图

Yahoo提供了一个免费的Stencil Kit（ http://developer.yahoo.com/ypatterns/wireframes），可在Illustrator、Visio、OmniGraffle以及其他图形处理软件中使用它来创建网页草图

4、找出方框

5、顺应页面流

6、记住背景图片的使用

7、拼图中的小部件

8、给元素设计层次

9、margin和padding的使用