diff options
Diffstat (limited to 'files/zh-cn/web/css/tutorials/index.html')
| -rw-r--r-- | files/zh-cn/web/css/tutorials/index.html | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/tutorials/index.html b/files/zh-cn/web/css/tutorials/index.html new file mode 100644 index 0000000000..b7ccee31e6 --- /dev/null +++ b/files/zh-cn/web/css/tutorials/index.html @@ -0,0 +1,72 @@ +--- +title: CSS Tutorials +slug: Web/CSS/Tutorials +tags: + - CSS + - NeedsTranslation + - TopicStub + - Tutorials +translation_of: Web/CSS/Tutorials +--- +<p>学习CSS可能是一项令人望而生畏的事情。我们编写了很多的css教程来帮助你。有些教程完全面向新手，而其他文章展现了一些css的复杂特性，适合拥有丰富经验的开发者。</p> +<p>这个页面展现了这些文章，并且带有简短的描述。这些文章按照难度分组，因此你可以选择最适合你的。</p> +<h2 id="CSS初级教程">CSS初级教程</h2> +<dl> + <dt> + <a href="/en-US/docs/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">开始使用</a></dt> + <dd> + 这篇教程完全面向新手。假如你还没写过一行css-这篇很适合你。这篇文章介绍了css的一些基础概念，引导你书写基本的css。</dd> + <dt> + <a href="/en-US/docs/CSS/Using_CSS_multiple_backgrounds" style="line-height: inherit;" title="/en-US/docs/CSS/Using_CSS_multiple_backgrounds">使用丰富多彩的背景</a></dt> + <dd> + 背景是优美样式的基础。css允许你对每个容器设置不同的背景。这篇教程会讲述css与背景之间是如何相互影响，以及你如何得到想要的结果。</dd> + <dt> + <a href="/en-US/docs/CSS/Scaling_background_images" title="/en-US/docs/CSS/Scaling_background_images">调整背景图片</a></dt> + <dd> + CSS允许你改变元素背景图片的大小。这篇教程告诉你如何去实现。</dd> + <dt> + <a href="/en-US/docs/CSS/Media_queries" title="/en-US/docs/CSS/Media_queries">Media Queries</a>媒体查询</dt> + <dd> + 当前存在各种不同尺寸的屏幕，不同种类的设备。当你要求你的页面在各大平台都获得一个满意的渲染效果时，媒体查询将是一块基石。</dd> + <dt> + <a href="/en-US/docs/CSS/Understanding_z-index" title="/en-US/docs/CSS/Understanding_z-index">弄清楚z-index</a></dt> + <dd> + 控制容器叠加层级是web开发者的一个基本需求。了解css的一些基础知识，z-index将会变得小菜一碟.</dd> +</dl> +<h2 id="CSS中级教程">CSS中级教程</h2> +<p>CSS 2 (Level 1)标准放出后, CSS增加了很多新特性.有些特性比较独立，而且很酷，你只需要对css的基本概念有一些直观的了解就可以使用它们。</p> +<dl> + <dt> + <a href="/en-US/docs/CSS/Counters" title="/en-US/docs/CSS/Counters">CSS Counters</a></dt> + <dd> + 对元素及页面计数对于CSS来讲是一项简单的事情。学习使用{{cssxref("counter-reset")}}, {{cssxref("counter-increment")}}, {{cssxref("counters", "counters()")}}, 及{{cssxref("counter", "counter()")}}.</dd> + <dt> + <a href="https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">CSS Animations</a></dt> + <dd> + CSS3动画允许你通过 <a href="/en-US/docs/CSS/@keyframes" title="/en-US/docs/CSS/@keyframes">keyframes</a>定义样式，之后在keyframes之间变换，来形成一个动画。</dd> + <dt> + <a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">CSS Transitions</a></dt> + <dd> + CSS3 过渡可以以动画的形式来定义很多样式的过渡，也可以控制过渡的方式</dd> + <dt> + <a href="/en-US/docs/CSS/Tutorials/Using_CSS_transforms">CSS Transforms</a></dt> + <dd> + 变换可以通过坐标改变元素的位置，可以使用位移，旋转等定义元素在2D 或 3D 空间的状态.</dd> + <dt> + <a href="/en-US/docs/CSS/Using_CSS_gradients" title="/en-US/docs/CSS/Using_CSS_gradients">CSS Gradients</a></dt> + <dd> + 渐变其实是图片，可以让一个颜色柔和的过渡到另一个颜色。CSS中有很多渐变方式:线性渐变或者径向渐变等.这篇教程会讲解怎么使用渐变。</dd> +</dl> +<h2 id="CSS高级教程">CSS高级教程</h2> +<p>CSS 也拥有一些特性来帮助你创建复杂的布局。虽然这特性可以使你用最简单的方式来达到布局效果,但对于那些没有太多经验的人来说，这些特性相当复杂。</p> +<dl> + <dt> + <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">CSS Multi-column layouts</a></dt> + <dd> + CSS3引入了新的布局方式，可以让你简单的在元素中创建多列布局。尽管多列布局在很多设备上不常见，但多列布局在可打印页面或索引页中很有用。</dd> + <dt> + <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes">CSS Flexible boxes layouts</a></dt> + <dd> + 这个崭新的布局方式可以让容器变得灵活，使容器平滑的改变大小，对于复杂的界面来讲这是有力的工具。</dd> +</dl> +<p> </p> |