伪元素:
- 伪元素在DOM树中创建了一些是不存在于文档语言里的抽象元素。 (例如常用的::before,::after::before,::after只有在设置属性:content:""之后才能显示)【伪元素本质上是创建了一个有内容的虚拟容器;】
- 伪元素的由两个冒号::开头,然后是伪元素的名称
- 一个选择器只能使用一个伪元素,并且伪元素必须处于选择器语句的最后。(注:不排除未来会加入同时使用多个伪元素的机制。)
伪类:
- 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息和不能被常规CSS选择器获取到的信息。【伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息,例如 :nth-child:(even){} 对偶数的子元素设置属性。 】
- 伪类由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。
- 任何常规选择器可以在任何位置使用多个伪类。伪类语法不区别大小写。一些伪类的作用会互斥,另外一些伪类可以同时被同一个元素使用。并且,为了满足用户在操作DOM时产生的DOM结构改变,伪类也可以是动态的。【和伪元素的语法不同】
Transition(过渡的简写属性):可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换,像是 :hover ,:active 或者通过JavaScript实现的状态变化。
默认值 |
all 0 ease 0 |
transition-property |
规定设置过渡效果的 CSS 属性的名称。
扫描二维码关注公众号,回复:
4175453 查看本文章
|
transition-duration |
规定完成过渡效果需要多少秒或毫秒。 |
transition-timing-function |
规定速度效果的速度曲线。 |
transition-delay |
定义过渡效果何时开始。 |
Animation(动画的简写属性):
Transition(过渡)和animation(动画)的区别:
- Transition通常是和:hover ,:active配合使用,由动作触发。Animation则是自动执行。
- Transition只能设定从初始状态渐变到最终状态,无法像Animation一样改变中途的每一帧的样式。
- Transition搭配Javascript可以实现非常多的动画效果。目前Animation与JS的交互功能还不完善。
- Animation可以设定循环次数。
box-shadow(阴影):
【阴影效果在线编写工具:https://www.cssmatic.com/box-shadow】
常量 |
描述 |
h-shadow |
必需。水平阴影的位置。允许负值。 |
v-shadow |
必需。垂直阴影的位置。允许负值。 |
blur |
可选。模糊距离。 |
spread |
可选。阴影的尺寸。 |
color |
可选。阴影的颜色。请参阅 CSS 颜色值。 |
inset |
可选。将外部阴影 (outset) 改为内部阴影。 |
radial-gradient:用来定义径向渐变,以对图形元素进行填充或描边。
【渐变填充在线编写工具:http://www.colorzilla.com/gradient-editor/】
常量 |
描述 |
closest-side |
渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。 |
closest-corner |
渐变的边缘形状与容器距离渐变中心点最近的一个角相交。 |
farthest-side |
与closest-side相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。 |
farthest-corner |
渐变的边缘形状与容器距离渐变中心点最远的一个角相交。 |
继承
常见可继承属性:
- 字体属性
- 文本属性:text-indent,text-align,line-height,word-spacing,letter-spacing,text-transform,Direction,Color
- 声音属性:speak,speak-punctuation,speak-numeral,speak-header,speech-rate,volume,voice-family,pitch,pitch-range,stress,richness,azimuth,elevation
常见不可继承属性:
- 文本属性:vertical-align,text-decoration,text-shadow,white-space,unicode-bidi
- 盒模型属性:width,height,margin ,margin-top,margin-right,margin-bottom,margin-left,border,border-style,border-top-style,border-right-style,border-bottom-style,border-left-style,border-width,border-top-width,border-right-right,border-bottom-width,border-left-width,border-color,border-top-color,border-right-color,border-bottom-color,border-left-color,border-top,border-right,border-bottom,border-left,padding,padding-top,padding-right,padding-bottom,padding-left
- 背景属性:background,background-color,background-image,background-repeat,background-position,background-attachment
- 布局定位属性:float,clear,position,top,right,bottom,left,min-width,min-height,max-width,max-height,overflow,clip,z-index
- 页面样式属性:size,page-break-before,page-break-after
- 声音属性:pause-before,pause-after,pause,cue-before,cue-after,cue,play-during
- 生成内容属性:content,counter-reset,counter-increment