CSS3总结

新增基本选择器

子元素选择器：选择某元素的子元素；father > children
相邻兄弟元素选择器：选择紧接在另一元素后的元素，它们具有一个相同的父元素；元素 + 兄弟相邻元素
通用兄弟选择器：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素；元素～后面所有兄弟相邻元素
群组选择器：将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开；元素1，元素2，...元素n

属性选择器：对带有指定属性的html元素设置样式

element[attribute]：选择所有带有attribute属性元素
element[attribute="value"]：选择所有使用attribute="value"的元素
element[attribute~="value"]：选择attribute属性包含单词"value"的元素
element[attribute^="value"]：选择attribute属性值以"value"开头的所有元素
element[attribute*="value"]：选择attribute属性值包含"value"的所有元素
element[attribute|="value"]：选择attribute属性值为"value"或以"value-"开头的元素

伪类选择器

动态伪类：不存在于html中，只有当用户和网站交互的时候才能体现出来
- 锚点伪类：:link，:visited
- 用户行为伪类：:hover，:active，:focus
UI元素状态伪类：:enabled，:disabled，:checked
CSS3结构类：CSS3的:nth选择器
- element:first-child：选择属于其父元素的首个子元素的每个element元素
- element:last-child：选择属于其父元素的最后一个子元素的element元素
- element:nth-child(N)：:nth-child(N)选择器匹配属于其父元素的第N个子元素，不论元素类型；参数N，取值从“0“开始计算，可以用odd/even
- element:nth-last-child(N)：匹配属于其元素的第N个子元素的每个元素，不论元素类型，从最后一个子元素开始计数
- element:nth-of-type(N)：匹配属于父元素的特定类型的第N个子元素的每个元素
- element:nth-last-of-type(N)：匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数
- element:first-of-type：匹配属于其父元素的特定类型的首个子元素的每个元素
- element:last-of-type：匹配属于其父元素的特定类型的最后一个子元素的每个元素
- element:only-child：匹配属于其父元素的唯一子元素的每个元素
- element:only-of-type：匹配属于其父元素的特定类型的唯一子元素的每个元素
- element:empty：匹配没有子元素（包括文本节点）的每个元素
否定选择器：匹配非指定元素/选择器的每个元素；父元素:not(element/selector)
伪元素：用于向某些选择器设置特殊效果；element::pseudo-element
- element::first-line：对element元素的第一行文本进行格式化；只能用于块级元素
- element::first-letter：用于向文本的首字母设置特殊样式；只能用于块级元素
- element::before：在元素的内容前面插入新内容；第一个子元素、行级元素、内容通过content写入，标签中找不到对应的标签
- element::after：在元素的内容后面插入新内容；配合content使用、多用于清除浮动
- element::selection：设置在浏览器中选中文本后的背景色与前景色；firefox中需加上-moz前缀

边框圆角

border-radius:1-4length|% / 1-4length|%

-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;

四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角；三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角；两个值：第一个值为左上角和右下角，第二个值为右上角和左下角；一个值：四个圆角值相同
border-top-left-radius：左上角弧度
border-top-right-radius：右上角弧度
border-bottom-right-radius：右下角弧度
border-bottom-left-radius：左下角弧度

盒阴影：设置下拉阴影的框；box-shadow:h-shadow v-shadow blur spread color inset;

边框图片

border-image: source slice width outset repeat;
border-image-source: none|image;：指定要使用的图像
border-image-slice: number|%|fill;：指定图像的边界向内偏移
border-image-width: number|%|auto;：指定图片边界的宽度
border-image-outset: lenght|number;：指定在边框外部绘制border-image-area的量
border-image-repeat: stretched(拉伸)|repeat|round(铺满)|initial|inherit;

背景background

指定背景绘制区域，background-clip: border-box(被剪裁到边框盒)|padding-box(被剪裁到内边距框)|content-box(被剪裁到内容框);
指定background-position属性应相对的位置，background-origin:padding-box|border-box|content-box;
指定背景图片大小，background-size: length|percentage|cover|contain;
多重背景图像，background-image: url(img1.jpg), url(img2.png);
background: color position/size repeat origin clip attachement image;

渐变（gradients）：在多个指定的颜色之间显示平稳的过渡

线性渐变（linear gradients）

background: -webkit-linear-gradient(red, blue);
background:    -moz-linear-gradient(red, blue);
background:      -o-linear-gradient(red, blue);
background:         linear-gradient(red, blue);

径项渐变（radial gradients）

background: -webkit-radial-gradient(red, blue);
background:    -moz-radial-gradient(red, blue);
background:      -o-radial-gradient(red, blue);
background:         radial-gradient(red, blue);

文本阴影：text-shadow: h-shadow v-shadow blur color;

文本轮廓：text-outline: thickness blur color;

自动换行处理方法：word-break: normal|break-all|keep-all;

长单词换行：word-wrap: normal|break-word;

文本溢出包含元素：text-overflow: clip|ellipsis|string;配合overflow:hidden;使用

@font-face

@font-face {
  font-family: <WebFontName>;
  src: <source> [<format>] [,<source> [<format>]];
  [font-weight: <weight>;]
  [font-style: <style>;]
}

/* TrueType(.ttf)格式
   openType(.otf)格式
	 web open font format(.woff)格式：web字体中最佳格式
	 embedded open type(.eot)格式：IE专用字体
	 SVG(.svg)格式：基于SVG字体渲染的一种格式 */

Transform：让元素在一个坐标系统中变形，包含一系列变形函数，可以移动、旋转、缩放元素

rotate旋转：通过指定的角度参数对原元素指定一个2D rotation

.picq {
  -webkit-transform: rotate(7deg);
     -moz-transform: rotate(7deg);
      -ms-transform: rotate(7deg);
       -o-transform: rotate(7deg);
          transform: rotate(7deg);
}

/* 旋转角度为正表示顺时针旋转，负表示逆时针旋转 */

translate移动：根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动
- translateX(x)：水平方向X轴移动
- translateY(y)：垂直方向Y轴移动
- translate(x，y)：水平和垂直方向同时移动
scale缩放：指定对象的2D缩放
- scaleX(x)：水平方向缩放
- scaleY(y)：垂直方向缩放
- scale(x，y)：水平和垂直方向同时缩放
skew扭曲：指定对象斜切扭曲
- skewX(x)：水平方向扭曲变形
- skewY(y)：垂直方向扭曲变形
- skew(x，y)：水平和垂直方向同时扭曲
3D转换
- rotate3d(x,y,z,angle)：3D旋转角度
- translated3d(x,y,z)：3D位移
- scale3d(x,y,z)：3D缩放
transform-origin: x y z;更改旋转元素的位置
transform-style: flat(默认)|preserve-3d;指定嵌套元素在三维空间中的呈现

perspective属性：指定观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。

perspective:number|none;
perspective-origin: x-axis y-axis;指定透视点的位置

backface-visibility:visible|hidden;：指定元素背面面向用户时是否可见

过渡（transition）：允许css的属性值在一定的时间区间内平滑的过渡；在鼠标单机、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动画效果改变css的属性值

transition-property:none|all|property;

-webkit-transition-property: transform;
   -moz-transition-property: transform;
    -ms-transition-property: transform;
     -o-transition-property: transform;
        transition-property: transform;

transition-duration:time;规定完成过渡效果需要花费的时间，以秒/毫秒计，默认值为0
transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|steps(<integer>)|cubic-bezier(<number>,<number>,<number>,<number>);
- linear：线性过渡。贝塞尔曲线(0.0，0.0，1.0，1.0)
- ease：平滑过渡。贝塞尔曲线（0.25，0.1，0.25，1.0）
- ease-in:由慢到快。贝塞尔曲线（0.42，0，1.0，1.0）
- ease-out：由快到慢。贝塞尔曲线（0，0，0.58，1.0）
- ease-in-out：由慢到快再到慢。贝塞尔曲线（0.42，0，0.58，1.0）
- step-start：等同于steps(1,start)
- step-end：等同于steps(1,end)
- steps(<integer>[,start|end]);：接受两个参数的步进函数
transition-delay:time;设置对象延迟过渡的时间，秒/毫秒
简写：transition:property duration timing-function delay;

动画（animation）

手机设备浏览器使用动画要加上webkit前缀
animation-name:keyframename|none;设置对象所应用的动画名称
animation-duration:time;设置对象动画的持续时间
animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|steps(<integer>)|cubic-bezier(<number>,<number>,<number>,<number>);
animation-delay:time;设置对象动画的延迟时间，定义动画开始前等待的时间
animation-iteration-count:infinite|<number>默认1;设置对象动画的循环次数
animation-direction:normal|reverse|alternate|alternate-reverse|initial|inherit;
- 设置对象动画在循环中是否反向运动
- normal：正常方向
- reverse：反方向运行
- alternate：先正常运行再反方向运行，并持续交替运行，配合循环属性
- alternate-reverse：先反方向运行再正方向运行，并持续交替运行，配合循环属性
animation-fill-mode:none|forwards|backwards|both|initial|inherit;
- 规定当动画不播放时要应用到元素的样式
- none不设置对象动画之外的状态
- forwards：设置对象状态为动画结束时的状态
- backwards：设置对象状态为动画开始时的状态
- both：设置对象状态为动画结束或开始的状态
animation-paly-state:paused|running;指定动画是否正在运行或已暂停
animation:name duration timing-function delay iteration-count direction fill-mode play-state;

@keyframes关键帧：指定任何顺序排列来决定animation动画变化的关键位置

@keyframes animationname {
  keyframes-selector {
    css-styles;
  }
}

posted on 2020-09-16 22:29 DemiMiracle 阅读(74) 评论(0) 收藏举报

刷新页面返回顶部

DemiMiracle

CSS3总结

导航

公告