CSS3 是最新的 CSS 标准

CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。 一些最重要CSS3模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 http:/ /www.iis7.com/b/wzjk/ 用户界面 ： css3边框： border-radius：属性被用于创建圆角 box-shadow：属性被用来添加阴影(1.位置左右 2.位置上下 3.模糊程度 4.颜色) border-image:url("图片")：属性用于设置图片的边框(用图片做边框) 选择器:not(:last-child) { border-方向: none}，禁止边框出现双边线。 ： css3圆角：(顺序：上右下左) 使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角" 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。 三个值：第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角 两个值：第一个值为左上角与右下角，第二个值为右上角与左下角 一个值：四个圆角值相同 border-top-left-radius：定义了左上角的弧度 border-top-right-radius：定义了右上角的弧度 border-bottom-right-radius：定义了右下角的弧度 border-bottom-left-radius：定义了左下角的弧度 ： css3背景： background-image：(url),属性添加背景图片 background-size：指定背景图像的大小 background-Origin：属性定位了背景图像的位置区域 background-clip：背景剪裁属性是从指定位置开始绘制， border-box：默认值。背景绘制在边框方框内（剪切成边框方框）。 padding-box：背景绘制在衬距方框内（剪切成衬距方框）。 content-box：背景绘制在内容方框内（剪切成内容方框）。 content-box，padding-box，和 border-box，区域内可以放置背景图像。 ： css3渐变： CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 用几种颜色就写几种 CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients），默认情况下-从上到下 径向渐变（Radial Gradients） Linear Gradients线性渐变- 向下/向上/向左/向右/对角方向(+to) 从哪个方向就在前面定义哪个方向，在最后的颜色上加+"to" 线性渐变 - 对角 你可以通过指定水平和垂直的起始位置来制作一个对角渐变。 定义一个角度(background: linear-gradient(角度 如从：left top到to bottom right) 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。不均匀分布用百分比如:red 10% 线性渐变 - 透明度 渐变也支持透明度（transparent），可用于创建减弱变淡的效果 我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明 repeating-linear-gradient(颜色，颜色) 用于重复渐变 Radial Gradients径向渐变 由它们的中心定义 默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落） shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse closest-side farthest-side closest-corner farthest-corner repeating-radial-gradient(颜色，颜色) 函数用于重复径向渐变： ： css3文本效果： text-shadow：属性适用于文本阴影(值。1.左右，2.上下，3.模糊程度，4.颜色) 你也可以在 ::before 和 ::after 两个伪元素中添加阴影效果 box-shadow ：属性适用于盒子阴影 Text-Overflow：属性文本溢出 text-overflow:ellipsis：(省略号) text-overflow:clip： white-space: nowrap：强制不换行 word-wrap：强制换行 break-word：换行 word-break: keep-all：单词拆分换行 word-break: break-all：长文本换行 ： css3字体： @font-face font-family字体 font-weight:bold粗体文本 ： CSS3 2D 转换 可以对元素进行移动、缩放、转动、拉长或拉伸。 转换的效果是让某个元素改变形状，大小和位置。 您可以使用 2D 或 3D 转换来转换您的元素 transform ：适用于2D或3D转换的元素 transform-origin ：允许您更改转化元素位置 您将了解到以下5种2D变换方法： 语法：transform:以下的几种变换方法() transform：translate(左右值，上下值)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 transform：rotate(旋转的值#deg)方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。 transform：scale((宽度)左右放大和缩小的值，(高度)上下放大和缩小的值))方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。 transform：skew(x轴的倾斜角度deg，y轴的倾斜角度deg)包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜 transform：matrix(1.2.3.4.5.6.)方法和2D变换方法合并成一个，有六个参数，包含旋转，缩放，移动（平移）和倾斜功能 : CSS3 3D 转换 使用 3D 转换来对元素进行格式化。 您将了解到以下的 3D 转换方法： rotateX())方法，围绕其在一个给定度数X轴旋转的元素。 rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。 transform-style: preserve-3d ：规定被嵌套元素如何在 3D 空间中显示。 perspective ：规定 3D 元素的透视效果。 perspective-origin ：规定 3D 元素的底部位置。 backface-visibility ：定义元素在不面对屏幕时是否可见。 ： CSS3 过渡(transition)。(元素转换效果的速度的快慢) CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容： 1.指定要添加效果的CSS属性 2.指定效果的持续时间。 如果未指定的期限，transition将没有任何效果，因为默认值是0。 transition-property，规定应用过渡的 CSS 属性的名称。 transition-duration，定义过渡效果花费的时间。默认是 0。 transition-delay，指定多少时间后切换效果开始。 transition-timing-function ，规定过渡效果的时间曲线。默认是 "ease"。 transition-timing-function : linear，规定以相同速度开始至结束的过渡效果 transition-timing-function : ease，规定慢速开始，然后变快，然后慢速结束的过渡效果 transition-timing-function : ease-in，规定以慢速开始的过渡效果 transition-timing-function : ease-out，规定以慢速结束的过渡效果 transition-timing-function : ease-in-out，规定以慢速开始和结束的过渡效果 ： CSS3 动画 我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。 @keyframes 规则，要创建CSS3动画，你将不得不了解@keyframes规则。 @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。 指定至少这两个CSS3的动画属性绑定向一个选择器： 1.规定动画的名称 2.规定动画的时长 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0 动画效果是什么？？？： 动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 改变元素的位置时要精确的定位 animation: "#"：绑定选择器。"#"(选择器) @keyframes ：规定动画。 animation ：所有动画属性的简写属性，除了 animation-play-state 属性。 animation-name ：规定 @keyframes 动画的名称。 animation-duration ：规定动画完成一个周期所花费的秒或毫秒。默认是 0。 animation-timing-function ：规定动画的速度曲线。默认是 "ease"。 animation-delay ：规定动画何时开始。默认是 0。 animation-iteration-count ：规定动画被播放的次数。默认是 1，infinite：指定动画应该播放无限次（永远） animation-play-state：规定动画是否正在运行或暂停。默认是 "running"。 animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。 reverse：动画反向播放 alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 initial：设置该属性为它的默认值。 inherit：从父元素继承该属性。 infinite：无限旋转。 linear：旋转动画加它，更加流畅。 ： CSS3 多列 我们将学习以下8个 CSS3 的多列属性: column-count ：属性指定了需要分割的列数。 column-gap：属性指定了列与列间的间隙。 column-rule-style：属性指定了列与列间的边框样式。 column-rule-width：属性指定了两列的边框厚度。 column-rule-color： 属性指定了两列的边框颜色。 column-rule：属性是 column-rule-* 所有属性的简写。 column-span：属性跨越所有列。 column-width： 属性指定了列的宽度。 column-fill：指定如何填充列。 columns 设置 column-width 和 column-count 的简写。 ： CSS3 用户界面 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。 您将了解以下的用户界面属性： resize：属性指定一个元素是否应该由用户去调整大小。 box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。 outline-offset：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 轮廓与边框有两点不同：1.轮廓不占用空间。2.轮廓可能是非矩形 appearance：允许您使一个元素的外观像一个标准的用户界面元素。 icon：为创作者提供了将元素设置为图标等价物的能力。 nav-down：指定在何处使用箭头向下导航键时进行导航 nav-index：指定一个元素的Tab的顺序 nav-left：指定在何处使用左侧的箭头导航键进行导航 nav-right：指定在何处使用右侧的箭头导航键进行导航 nav-up :指定在何处使用箭头向上导航键时进行导航 ： CSS 图片 border-radius：属性来创建圆角图片，可用百分比，椭圆。 border：属性来创建缩略图。先创建边框，在写内边距。 响应式图片，响应式图片会自动适配各种尺寸的屏幕。例如：{max-width: 100% ; height: auto;} 图片文本，如何定位图片文本: 就是在图片上写字。 图片滤镜，filter：属性用为元素添加可视效果 (例如：模糊与饱和度) 。 filter : grayscale(100%)，把图片变黑白色 filter : blur()，把图片变模糊 filter : brightness()，图片的亮度 filter : contrast()，图片的对比度 filter : drop-shadow()，图片阴影 filter : hue-rotate()，改变图片的色相 filter : invert()，反相 filter : opacity()，图片的透明度 filter : saturate()，图片的饱和度 filter : sepia()，图片深褐色 filter : url()，图片地址 图片 Modal(模态) CSS 和 JavaScript 来一起渲染图片。 首先，我们使用 CSS 来创建窗口 (对话框), 默认是隐藏的。 然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示 ： CSS 按钮 background-color：属性来设置按钮颜色: font-size：属性来设置按钮大小: border-radius：属性来设置圆角按钮: border：属性设置按钮边框颜色: 我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。 提示: 我们可以使用 transition-duration 属性来设置 "hover" 效果的速度： box-shadow：属性来为按钮添加阴影: 我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。 提示: 我们可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片： 移除外边距并添加 float:left 来设置按钮组： 按钮动画 ： CSS 分页 可以使用 .active 来设置当期页样式，鼠标悬停可以使用 :hover 选择器来修改样式： 可以使用 border-radius 属性为选中的页码来添加圆角样式: 可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果: 我们可以使用 border 属性来添加带边框分页: 可以使用 margin 属性来为每个页码直接添加空格： 可以使用 font-size 属性来设置分页的字体大小: ： CSS3 框大小 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。 默认情况下，元素的宽度与高度计算方式如下： width(宽) + padding(内边距) + border(边框) = 元素实际宽度 height(高) + padding(内边距) + border(边框) = 元素实际高度 这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。 CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。 如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中: ： CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 CSS3 弹性盒子内容 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变: flex-direction 属性指定了弹性子元素在父容器中的位置。 语法 : flex-direction: row | row-reverse | column | column-reverse flex-direction的值有: row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 column：纵向排列。 column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。 justify-content 属性: 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 语法：justify-content: flex-start | flex-end | center | space-between | space-around 各个值解析: flex-start： 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。 flex-end： 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。 center： 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。 space-between： 弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。 space-around： 弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。 align-items 属性： align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 语法：align-items: flex-start | flex-end | center | baseline | stretch 各个值解析: flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 flex-wrap 属性： flex-wrap 属性用于指定弹性盒子的子元素换行方式。 语法：flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; 各个值解析: nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。 wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行 wrap-reverse -反转 wrap 排列。 align-content 属性： align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items,但它不是设置弹性子元素的对齐，而是设置各个行的对齐。 语法：align-content: flex-start | flex-end | center | space-between | space-around | stretch 各个值解析: stretch - 默认。各行将会伸展以占用剩余的空间。 flex-start - 各行向弹性盒容器的起始位置堆叠。 flex-end - 各行向弹性盒容器的结束位置堆叠。 center -各行向弹性盒容器的中间位置堆叠。 space-between -各行在弹性盒容器中平均分布。 space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。 align-self align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。 语法：align-self: auto | flex-start | flex-end | center | baseline | stretch 各个值解析: auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。 flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 flex flex 属性用于指定弹性子元素如何分配空间。 语法：flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] 各个值解析: auto: 计算值为 1 1 auto initial: 计算值为 0 1 auto none：计算值为 0 0 auto inherit：从父元素继承 [ flex-grow ]：定义弹性盒子元素的扩展比率。 [ flex-shrink ]：定义弹性盒子元素的收缩比率。 [ flex-basis ]：定义弹性盒子元素的默认基准值。 display：指定 HTML 元素盒子类型。 flex-direction：指定了弹性容器中子元素的排列方式 justify-content：设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 align-items：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 flex-wrap：设置弹性盒子的子元素超出父容器时是否换行。 align-content：修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 flex-flow：flex-direction 和 flex-wrap 的简写 order：设置弹性盒子的子元素排列顺序。 align-self：在弹性子元素上使用。覆盖容器的 align-items 属性。 flex：设置弹性盒子的子元素如何分配空间。 ： CSS3 多媒体查询 @media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。 例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。 媒体查询可用于检测很多事情，例如： viewport(视窗) 的宽度与高度 设备的宽度与高度 朝向 (智能手机横屏，竖屏) 。 分辨率 目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。 多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。 如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。 除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。 not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。 only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。 all: 所有设备，这个应该经常看到。 CSS3 多媒体类型： all 用于所有多媒体类型设备 print：用于打印机 screen：用于电脑屏幕，平板，智能手机等。 speech ：用于屏幕阅读器 使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式 。。。。。。 浏览器兼容 -ms-代表IE内核识别码 -moz-代表火狐内核识别码 -webkit-代表谷歌内核识别码 -o-代表欧朋opera内核识别码 由于浏览器内核不同，为了兼容多个浏览器而使用-webkit- 等 。 改变表单里面的字的样式可以用这个方法：input::-webkit-input-placeholder