十天精通CSS3

课程地址：http://www.imooc.com/learn/33

  • 第1章 初识CSS3

    CSS3课程列出第一站，先带领大家进入CSS3的世界，探索CSS3的魅力！你做好准备了吗？

  • 第2章 边框

    本课程主要讲解border-color 、border-image 、border-radius 及box-shadow 相关知识

  • 第3章 颜色相关

    学习CSS3中与颜色有关的属性，包括RGBA colors和Gradient，来实现在此之前只能通过其它手段如背景图片才能得到的绚丽效果。

  • 第4章 文字与字体

    本章学习CSS3中文字相关的属性，包括text-shadow、text-overflow和嵌入字体等，通过CSS来实现多变的网页字体效果。

  • 第5章 与背景相关的样式

    讲解与背景相关的新增属性。background-origin background-clip background-size multiple backgrounds

  • 第6章 征服CSS3选择器（上）

    灵活运用强大的CSS3选择器，学会选择器的使用，可以直接将样式与元素绑定起来，之前我们需要使用JavaScrip实现的功能，现在只需要用CSS3就能轻松搞定。

  • 第7章 征服CSS3选择器（下）

    UI元素状态伪类选择器也是CSS3选择器模块组中的一部分，此类选择器主要运用于form表单元素上，用来提高网页的人机交互、操作逻辑以及页面的整体美观。

  • 第8章 CSS3中的变形与动画（上）

    彻底分清 Transform 、Transition、 Animations 三兄弟

  • 第9章 CSS3中的变形与动画（下）

    animation实现动画效果主要由两个部分组成：首先通过类似Flash动画中的关键帧来声明一个动画，然后在animation属性中调用关键帧声明的动画，从而实现一个更为复杂的动画效果。

  • 第10章 布局样式相关

    多栏布局、盒布局、盒模型

  • 第11章 Media Queries 与Responsive 设计

    传说中的响应式设计，根据浏览器的窗口大小选择使用不同的样式。

  • 第12章 用户界面与其它重要属性

    轮廓相关样式、resize属性、initial属性

十天精通CSS3

时间： 2024-11-10 10:22:57

十天精通CSS3的相关文章

十天精通CSS3(11)

Media Queries——媒体类型(一) 随着科学技术不断的向前发展,网页的浏览终端越来越多样化,用户可以通过:宽屏电视.台式电脑.笔记本电脑.平板电脑和智能手机来访问你的网站.尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样,但至少要让你的Web页面能适配用户的终端,让他更好的呈现在你的用户面前.在本节中,将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺寸),从而让你的页面让用户有一个更好的体验. Media Queries

十天精通CSS3(3)

颜色之RGBA RGB是一种色彩标准,是由红(R).绿(G).蓝(B)的变化以及相互叠加来得到各式各样的颜色.RGBA是在RGB的基础上增加了控制alpha透明度的参数. 语法: color:rgba(R,G,B,A) 以上R.G.B三个参数,正整数值的取值范围为:0 - 255.百分数值的取值范围为:0.0% - 100.0%.超出范围的数值将被截至其最接近的取值极限.并非所有浏览器都支持使用百分数值.A为透明度参数,取值在0~1之间,不可为负值. 代码示例: background-color

十天精通CSS3(7)

:enabled选择器 在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等.在默认情况之下,这些表单元素都处在可用状态.那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式. 示例演示 通过“:enabled”选择器,修改文本输入框的边框为2像素的红色边框,并设置它的背景为灰色. HTML代码: <form action="#">   <div>     <labe

十天精通CSS3(8)

变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时针旋转:如果这个值为负值,元素相对原点中心逆时针旋转.如下图所示: HTML代码: <div class="wrapper"> <div></div> </div> CSS代码: .wrapper { width: 200px; height

十天精通CSS3(10)

多列布局——Columns 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现.接下来咱们一起学习多列布局相关的知识. 语法: columns:<column-width> || <column-count&

十天精通CSS3学习笔记 part4

CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号"{-}",括号中就是一些不同时间段样式规则. @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个"@keyframes"中的样式

十天精通CSS3(5)

background-origin 设置元素背景图片的原始起始位置. 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示. 效果如下: 需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示. background-clip 用来将背景图片做适当的裁剪以适应实际需要. 语法: background-clip : borde

十天精通CSS3学习笔记

http://www.imooc.com/learn/33 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了. 在编写CSS3样式时,不同的浏览器可能需要不同的前缀.它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了

十天精通CSS3(4)

text-overflow 与 word-wrap text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出. 语法: 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下: text-overflow:ellipsis;  overflow:hidden