- 边框
-
- 圆角效果：border-radius
- 阴影效果：box-shadow:x轴偏移量 y轴偏移量 【阴影模糊半径】 【阴影扩展半径】 【阴影颜色】 【投影方式】；
- 图片边框：border-image
- 颜色相关
-
- RGBA：R,G,B正整数值在0~255之间
-
- A：（alpha）透明度参数，取值在0和1之间，不可为负数
- 代码示例 background-color:rgba(100,120,60,0.5);
- 渐变色彩
-
- 线性渐变（linear）
- 第一个参数省略时：缺省为to bottom
- 线性渐变（linear）
- 文字与字体
-
- text-overflow：只是用来说明文字溢出时用什么方式显示
- 文字溢出时产生省略号的效果：text-overflow:ellipsis;
- 溢出内容为隐藏： voerflow:hidden;
- 强制文本在一行内显示： white-space:nowrap;
- word-wrap：
- 设置文本行为，当前行超过指定容器的边界时是否断开转行。
- 嵌入字体@font-face
-
- 语法@font-face{
- font-family:字体名称；
- src：字体在服务器上的相对路径或绝对路径；
- }
- 文本阴影text-shadow：x-Offset Y-Offset blur color;
-
- x-Offset:表示阴影的水平偏移距离，值为正值时阴影向右偏移，反之向左偏移；
- Y-Offset：表示阴影的垂直方向的偏移，值为正值向下偏移，反之向上偏移。
- blur：指阴影的模糊程度，值不能是负值，值越大阴影越模糊。
- color：阴影的颜色
- text-overflow：只是用来说明文字溢出时用什么方式显示
- 与背景相关的样式
-
- background-origin:设置背景图片的原起始位置
-
- 语法：background-origin：border-box | padding-box | content-box;分别表示从边框开始显示/从内边距开始显示/内容区域开始显示
- background-clip:对背景图片做适当的剪裁以适应实际的需要
-
- 语法：background-clip：border-box | padding-box | content-box | no-clip; 分别表示从边框，内填充或者内容区域进行剪裁。no-clip表示不剪裁。默认值为:border-box
- background-size:设置背景图片的大小，以长度值或者百分比显示，还可以通过cover和contain来对图片进行伸缩。
-
- 语法：background-size: auto |<长度值> | <百分比> | cover | contain ;
- 取值说明：
-
- auto:默认值，不改变背景图片的原始高度和宽度；
- <长度值>：成对出现如200px 50px，将托iande宽高一次设置为前面的两个值；
- <百分比>：0%~100%之间的任何值；
- cover：背景图片填满整个容器i；
- contain：图片等比缩放至某一边紧贴容器的边缘为止。
- multiple backgrounds:
- css3选择器
-
- （一）
-
- 属性选择器
- a[class^=icon]{
background: green;
color:#fff;
}
a[href$=pdf]{
background: orange;
color: #fff;
}
a[title*=more]{
background: blue;
color: #fff;
}
- a[class^=icon]{
- 结构性伪类选择器-:"root" :根标签，即<html></html>之间的内容
- 结构性伪类选择器 "：not" 否定选择器--选择某个元素之外的所有元素 input：not（【type=“submit”】）
- 结构性伪类选择器： ：empty 选中没有任何内容的元素 p：empty{ display ： none}
- 结构性伪类选择器":target" 目标选择器，用来匹配文档（页面）的url的某个标识符的目标元素。
- 结构性伪类选择器：“first-child”表示的是选择父元素的第一个子元素E。简单的理解就是选择元素的第一个子元素，记住是子元素，而不是后代元素。语法：ul>li:first-child{}
- 结构性伪类选择器： “last-child”选择元素的最后一个子元素。 语法：ul>li:last-child{}
- 结构性伪类选择器: "nth-child（n）" 定位某个父元素的的一个或者多个特定的子元素。其中n是其参数，既可以是整数值，也可以是表达式和关键字，起始参数只能是1，不是0. 当“：nth-child（n）”选择器中的n是一个表达式时，其中n是从0开始计算的，当表达式的值为0或者小于0的时候，不选择任何匹配的元素。
- 结构性伪类选择器 “nth-last-child(n)”表示倒数第n个元素，语法：ul > li:nth-last-child(n){}
- first-of-type(n)选择器 指定元素的类型，主要用来定位一个父元素下的某个类型的第一个子元素
- nth-of-type(n)选择器：选定父元素的某种类型的子元素。语法参考“nth-child”.
- last-of-type选择器：选择父元素的下的最后一个子元素
- nth-last-of-type(n)选择器：选择某个元素子元素的倒数第n个元素。
- only-child选择器：选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说匹配的元素的父元素中仅有一个子元素，而且是一个唯一的的子元素。
- only-of-child选择器
- 属性选择器
- （二）
-
- ：enabled选择器：表单中有些可以用enabled和disabled表示状态
- ：disabled选择器：选择不可用的表单元素
- ：checked选择器：用来选择单选框或者复选框的选中状态
- ：：selection选择器：修改选中元素的样式。
- ：read-only选择器：伪类选择器，用来指定处于制度状态元素的样式。简单点理解就是，元素中设置了“readonly="readonly”
- ：read-write选择器：主要用来指定元素处于非只读状态时的样式。
- ：：before和：：after选择器：主要用来给元素的钱main或者后面插入元素，这啷个常和"content"配合使用，使用最多的场景就是清除浮动。
- --------------------------------------------------------------------------------------------------------第一次更新-------------------------------------------------------------------------------------------------
- css3中的变形与动画
-
- （一）
-
- 变形--旋转rotate（）：通过指定的角度参数使元素相对原点进行旋转。主要在二维空间进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；反之为逆时针。
- 变形--扭曲shew（）：让元素倾斜显示。将一个对象以其中心位置围绕着x轴和y轴按照一定的角度倾斜，不旋转，只是改变形状。
- 变形--缩放scale（）：让元素根据中心原点对对象进行缩放。有三种情况scale函数有两个参数时：水平方向和垂直方向同时缩放；第一个参数为1，垂直缩放；第二个参数为1，水平缩放。scale函数的默认取值为1，小于1时缩小元素，大于一放大元素。
- 变形--位移transllate（）函数可以将元素向指定的方向移动，类似于position中的relative。或者简单的理解为，使用translate（）函数可以把函数从原来的位置移动，而不影响在x，y轴上的任何web组件。同样的有三种情况：水平方向和垂直方向同时移动；仅x轴；仅y轴。
- 变形-- 矩阵martix( )是一个比较复杂的函数。没有更加深入的了解
- 变形--原点transform-origin 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
- 动画--过渡属性transition-property:用来指定过渡动画的css属性名称，而这个过渡属性只有具备一个中间值的属性才能具备过渡的效果。
- 对应的具有过渡的css属性主要有：
- 动画--过渡所需时间transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，即从旧属性过渡到新属性所需的时间长度，俗称持续时间
- 动画--过渡函数 transition-timing-function:指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度。主要包括以下几种函数：（1）ease 速度由快到慢；（2）linear 恒速；（3）ease-in 渐显效果；（4）ease-out 渐隐效果；（5）ease-in-out 渐显渐隐效果。
- 动画--过渡延迟时间transition-delay指定一个动画开始执行的时间，也就是说当改变元素属性值后多上时间开始执行。 有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。 例如：a{ transition:background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}
- （二）
-
- Keyframes介绍：被称为关键帧，类似于Flash中的关键帧。在CSS3中主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{....}”,括号中就是不同时段的样式规则。
- 调用动画：animation-name,主要用来调用@keyframes定义好的动画。 语法：animation-name: none|IDENT[,none|DENT]*; IDENT是由@keyframes创建的动画名；none是默认值，当值为none时，将没有任何动画效果，这可以用于覆盖任何动画。 兼容新：-webkit-和-moz-
- 设置动画播放时间 animation-duration：用来指定元素播放动画所持续的时间。 语法：animation-duration:<time>[,<time>]* 取值<time>为数值，单位为秒，默认值为0
- 设置动画播放方式 animation-timing-function :同样的包括这几种方式：ease；linear；ease-in ;ease-out;ease-in-out
- 设置动画开始播放的时间 animation-dwlay定义动画开始播放的时间，用来出发动画播放的时间点。即定义在浏览器开始执行动画之前等待的时间。 语法：animation-delay：<time>[,<time>]*
- 设置动画播放的次数 animation-iteration-count属性主要用来定义动画的播放次数。 语法：animation-iteration-count:infinite | <number> [, infinite | <number>]* number通常是整数，但也可以是小数；如果取值为infinite，动画将被无限次的播放。
- 设置动画播放的方向animation-direction:设置动画播放的方向，语法：animation-direction:nomal | alternate[, normal | alternate]* -->主要有两个值，nomal,alternate. -->nomal是默认值，如果设置为nomal时，动画的每次循环都是向前播放的。 -->alternate ,它的作用是动画在第偶数次播放时向前播放，第奇数次想反方向播放。
- 设置动画播放状态：animation-play-state属性主要用来控制元素动画的播放状态。一般来说，页、页面加载时，动画不播放：animation-play-state:paused;
- 设置动画时间外属性 animation-fill-mode 属性定义在动画开始之前和结束之后发生的操作，主要具有四个属性值：none,forwords,backwords,both.
- 布局样式相关
-
- 多列布局--Columns columns: 每列的宽度+分成几列
- 多列布局--columns-width 设置列宽
- 多列布局--> columns-count 设置分列数量
- 列间距column-gap:设置列与列之间的间距。
- 列表边框-->column-rule 主要用来定义列与列之间的边框宽度，边框样式和边框颜色。column-rule-style;column-rule-width;column-rule-color;
- 跨列设置column-span 主要用来定义一个分列元素中的子元素能跨列多少列。column-span:all;表示元素跨过所有的列。
- 盒子模型
-
- 伸缩布局（一）Flexbox布局，即伸缩布局盒模型，用来提供一个更加有效的方式指定，调整和分布一个容器里的项目分布。
- 屏幕和就拦起大小发生改变也可以灵活的调整布局；
- 可以指定伸缩项目沿着主轴或者侧轴将伸缩容器额外空间；
- 分配到伸缩项目之前，之后或之间；
- 指定如何将垂直元素布局轴的额外空间分不到钙元素的周围。
- 可以控制元素在页面上的布局方向；
- 可以按照不同文档的对象模型（DOM）所指定的排序方式对屏幕上的元素重新排序。
- 语法
-
- 创建一个flex容器：任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex，注意浏览器的兼容性和前缀的问题。.flexcontainer{display:-webkit-flex;display:flex;}
- Flex项目显示：Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认是沿着水平轴
- Flex项目列显示：
- Flex项目移动到顶部：如何将项目移动到顶部，主要取决于主轴的方向。如果他是垂直的方向通过align-items设置；如果是水平方向通过justify-content设置。
- Flex项目移到左边：Flex项目移动到左边也主要取决于主轴的方向。如果flex-direction设置为row,设置justify-content控制方向；入股哟设置为column，设置align-items控制方向
- Flex项目右移：方法与左移相似；
- 水平居中设置：在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或者column。
- 伸缩布局（一）Flexbox布局，即伸缩布局盒模型，用来提供一个更加有效的方式指定，调整和分布一个容器里的项目分布。
- Media Queries与Responsive
- Media Queries媒体类型
- 媒体类型：最常用的就是all（全部），screen（屏幕），print（页面打印）；
- 媒体类型的引用方法：常见的有：link标签、@import和css3新增的@media几种：（1）link方法 就是在<link>标签引用样式的时候，同过标签中的media属性来指定不同idea媒体类型。（2）import方法：@import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型只要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法在<head></head>标签中用<style></style>中引入，但这种方法在IE6~7中都不被支持。 （3）@media方法 媒体查询。与import的方法类似
- Media Queries使用方法
- Responsive设计：
- 流体网页
- 弹性网页
- 媒体查询
- 屏幕分辨率
- 主要断点： 设备宽度的临界点； 设置断点应把握三个要点：满足主要的断点；有可能的话添加一些别的断点；设置高于1024的桌面断点。
- Responsive布局技巧
- 尽量少用无关紧要的div；
- 不要使用内联元素（inline）；
- 尽量少用JS或flash；
- 丢弃没用的绝对定位和浮动样式；
- 摒弃任何冗余结构和不使用100%设置。
- Good News：
- 使用HTML5 Doctype和相关指南；
- 重置好你的样式（reset.css）；
- 一个简单的有语义的核心布局；
- 给重要的网页元素使用简单的技巧，比如导航菜单之类元素。
- Responsive设计：mata标签<meta name="viewport" content="width=dievice-width,initial=1.0"/>
- Media Queries媒体类型
- 用户界面与其他重要属性
- 自由缩放属性 resize
- css3外轮廓属性
- css生成内容
06-22
582
582
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
