ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3 Secrets の第 3 版は、HTML5 学習ノート_html/css_WEB-ITnose の第 9 章から第 12 章までをカバーしています。
第 9 章、Web サイトのナビゲーションの装飾
アクセスの制限 プライバシー上の理由から、ブラウザは疑似クラス:visited に適用できる CSS 属性を制限し始めています。これには、訪問したリンクの色、背景色、境界線の色、およびその他のスタイルの定義が含まれます (これらのリンクの通常の状態に対して色、背景色、境界線の色が定義されていない限り)
3499910bf9dac5ae3c52d5ede7383485 タグの場合、すべてさまざまな訪問状態がスタイル設定されますが、スタイルを有効にするには、リンクを特定の順序で指定する必要があります: リンク、訪問済み、ホバー、アクティブ
CSS3 ボタン ジェネレーター: http://css3button.net
CSS3 ボタンの優れた例: http://hellohappy.org/css3-buttons/ および http://webdesignerwall.com/tutorials/css3-gradient-buttons
1. リンクをブロックとして表示する
2. ボタンの幅を制限する
方法 1. display:inline-block 属性を使用しますが、ボタンの間に小さな隙間が残ります。
スペースを削除する方法 1: 前の bed06894275b65c1ab86501b08a632eb と次の c4c81587ecd60caf150132e482363b86 タグ スタイルに 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 スタイルのプリロード置換方法
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值
.testClass{ transform:skew(45deg,0); /* 第一个指沿X轴倾斜(正数向左倾斜<从元素上方沿逆时针进行>,负数向右),*/ /*第二个指沿Y轴倾斜(正数往右边向下<沿顺时针从元素右侧进行>,负数往左边向下),这个理解不够,表达不明白 */}
多个函数共用:
.testClass{ transform:skew(45deg,0deg) scale(.5) translate(400px,500px) rotate(90deg);}
这些函数的应用顺序就是浏览器应用这些效果的顺序
一般来说,都是相对于元素的中心作变换点,但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)
实际上是在一定时间内,一组CSS属性变换到另一组属性的动画展示过程。
为了使transition生效,需要做以下几件事:
1、两个样式,一个开始,一个结束
2、transition属性。CSS3新增,使动画成为可能的秘诀所在。一般应用到最初开始的样式中
3、触发器
浏览器无法以动画形式模拟所有CSS属性,但还是有很多可选择。具体请看: www.w3.org/TR/css3-transitions/#animatable-properties
.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-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-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属性。只需要列出属性、延时时间、定时函数,并用空格分开即可。
.testClass{ transition:all 1s ease-in .4s;}
还可以分开定义多个,只需要逗号分隔:
.testClass{ transition:color 1s,background-color .5s 1s;}
需要提供供应商前缀
创建动画
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支持无供应商前缀版本
可以给元素的任何样式添加动画,也可以给伪类应用动画,js改动也会启动动画
1、用@keyframes规则创建淡入动画:
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; }}
2、将动画应用给dc6dce4a544fdca2df29d5ac0ea9906b标签的样式:
.announcement{ animation-name: fadeIn; /*设置动画名称,前面创建的*/ animation-duration: 1s; /* 设置动画从开始到结束所花时间 */}
可以将非动画属性也一起放入样式中
animation-name,animation-duration也需要使用供应商前缀
使用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-iteration-count可以设置动画运行的次数。使用infinite可以不限次数的运行下去
为了使一个动画在奇数次时超前运行,在偶数次时反向运行,可以使用animation-direction属性和关键字alternate。
为了让一个动画在运行后回归最初的状态,可以使用偶数迭代次数,并将animation-direction设为alternate
可以使用animation-fill-mode:forwards;将动画固定在最后的样子,以免使得web浏览器在动画结束时,将元素突兀的变回初始状态
.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-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有啥作用。
在f5d188ed2c074f8b944552db028f98a1标签中设置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,2b5469ab79cf842344327415c3b3bb95标签用来集中相关表单问题
2、legend,e911751791aa3ba95dc724e2fb905976标签就在2b5469ab79cf842344327415c3b3bb95标签的HTML代码之后,它给一组域提供一个标签
3、text fields(文本域)
4、buttons(按钮),表单按钮:提交,重置或其他动作
5、drop-down menus(下拉菜单),221f08282418e2996498697df914ce4e
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)
23c3de37f2f9ebcb477c4a90aac6fffd标签用于组成一个自包含结构的内容,例如一篇博客文章。
1aa9e5d373740b65a0cc8f0a02150c53标签用于给网页或者网页的分区提供标题、导航目标以及其他介绍性材料
c37f8231a37e88427e62669260f0074d标签用于包含版权声明、网站创始人的名字、网页的发布日期等等
绝大多数网页均采用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的使用