CSS3基础与进阶

一、CSS3新增的选择器

1、属性选择器

1）att^='val' :属性att的值以"val"开头的元素
2）att$='val' : ...结尾
3）att*='val' : ...包含
例  a[href='http^']{  }   --a标签且href属性以http开头

 

2、结构伪类选择器

1）:root  选择匹配文档的根元素
2）E:nth-child(n)  选择在E的父元素中的第n个子元素是E的元素及其所有子元素(n也可为odd/even/2n)
tr:nth-chilf(1)  第一个tr的所有子元素
3）E:nth-last-child(n)  ...倒数第n个..
4）E:nth-of-type(n)  选择所有在其父元素中同类型的子元素的第n个位置是E的元素
th:nth-of-type(3)  几个tr中都有th(子元素)，会重新计算第几个，即会分组被选中
5）E:nth-last-of-type(n)  ...倒数第n个
6）E:last-child  选择位于其父元素中最后一个位置，且这个子元素是E
7）E:first/last-of-type  在其父元素中,子元素是E的第一个/最后一个 同类型的元素
8）E:only-child  在其父元素中只包含一个子元素，且该子元素是E
9）E:only-of-type  选择其父元素只包含一个同类型的子元素，且该子元素是E(同种类型只有一个)
10）E:empty  选择E元素，且该元素不包含子元素
<i></i>会被选中，<i>啦啦</i> 不会被选中

 

 

3、UI伪类选择器(只有在指定的状态下才会被选中,默认状态不会)--多用于表单元素

1）E:enabled  匹配E的所有可用UI元素
2）disabled  ...不可用
3）checked(浏览器不支持)  ..可用
4）read-write   匹配所有可读且可写的元素
5）read-only  只读(readonly属性)的元素
6）::selection  元素中被用户选中或处于高亮状态的部分
::-moz-selection  火狐支持
7）out-of-range  用于标签的值在指定区间之外时显示的样式
8）in-range  ...区间之内..
9）optional  用于匹配可选的输入元素
10）required   匹配设置了required属性的元素
11）valid/invalid    匹配输入值为合法/非法的元素

 

 

4、其他选择器

1）E~F 通用兄弟元素选择器--选择匹配F的所有元素,且匹配元素位于E的元素后面
div~p
2）E:not(s) 否定伪类选择器--选择匹配E的所有元素,然后过滤掉匹配s选择符的任意元素(相当于二次过滤)
p:not(.red)
3）E:target  目标伪类选择器--选择器匹配E的所有元素,且匹配元素 被相关URL指向。该选择器是动态选择器,只有当存在URL指向该匹配的元素时，样式效果才能起效 
:target  点击链接后才会被匹配到

 

 

 

 

二、设置边框、背景

 

 

 

1、边框属性

1）border-radius :四个半径(左上角、右上角、右下角、左下角)
2）border-image:source slice width outset repeat --图片来源、如何裁切、显示大小、偏移位置(不支持)、重复性
  border-image:url(".png") 30 round/stretch;  //平铺、拉伸
  考虑兼容性(多种浏览器)  -moz-  -o-  -webkit- 
3）下拉阴影框 box-shadow:h-shadow v-shadow blur spread color --水平/垂直阴影的位置(允许为负，必需的)、模糊距离、阴影大小、颜色(可选)
  考虑兼容性(多种浏览器)  -moz-  -o-  -webkit- 

 

2、背景属性

1）定义背景图像的定位区域 background-origin：padding-box|border-box|content-box;  背景图像填充框的相对位置(默认)、背景图像边界框的相对位置、背景图像的相对位置的内容框【背景图像的起始位置为padding-box】
  考虑兼容性(多种浏览器)  -moz-  -o-  -webkit- 
2）定义背景图像的裁剪区域 background-clip: border-box|padding-box|content-box;  从边框区域向外裁剪背景、从补白区域向外裁剪背景、从内容区域向外裁剪背景
3）定义背景图像的大小 background-size：length|percentage|cover|contain;  设置背景图像的高度和宽度(先宽后高)、将计算相对于背景定位区域的百分比(宽/高)、保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小、保持图像的纵横比...最大大小

 

 

 

 

三、设置文本、字体、颜色

 

 

 

1、设置文本属性

1）文本阴影 text-shadow:h-shadow v-shadow blur color----水平/垂直阴影的位置(允许为负，必需的)、模糊距离、阴影大小、颜色(可选)
2）定义省略文本的处理方式 text-overflow:clip|ellipsis|string; 表明文本溢出时修剪、显示省略号、使用给定的字符串代表被修剪的文本(不支持)[需配合white-space:nowrap和overflow:hidden]
3）定义文本超过指定容器的边界时是否断开转行 word-wrap:normal|break-word; 只在允许的断字点换行(默认)、在长单词或URL地址内部进行换行

 

2、自定义字体类型

 

1）ttf、otf、woff...

 

2）@font-face规则： font-family--规定字体的名称  src--定义字体文件的URL [这两个必须] font-style--定义字体的样式(默认是normal)  font-weight--字体的粗细(默认是normal)
 定义：@font-face{ font-family:'myFont'; src:url('font/xx.ttf') format('truetype'); font-weight:bold; font-style:italic;}
 使用：.font-display{ font:66px myFont;}  //定义了一个字体类选择器，直接可以使用

 

3、常用颜色表示方式

1）rgba:红绿蓝透明度
2）HSL颜色值：色调0~360(0红色；120绿色；240蓝色)、饱和度(0.0%~100%,0表示灰色；100表示 颜色最艳)、亮度(0.0%~100%,0最暗，显示为黑色；100表示最亮，显示为白色)
3）HSLA：+透明度
4）transparent：透明，相当于alpha为0

 

 

 

 

四、2D变形

 

 

 

1、transform:none|transform-function; 常用的变形函数：translate() 沿着x和y轴移动、scale()改变元素的宽高、rotate()旋转，取值为弧度、skew()倾斜考虑兼容性-moz-/-webkit-/-o-/-ms-

1）rotate(angle)
transform:rotate(23deg); 旋转
2）scale(widNum,heiNum);scaleX/Y(num);  缩放的宽高(X/Y)比例
3）translate(translateX-value,Y);translateX/Y(value); 重新定位元素的X、Y坐标 
4）skew(angleX,angleY);skewX/Y(angle); 重新定义X和Y轴的倾斜角度
   skew(30deg,30deg);

 

2、transform-origin:x-axis y-axis z-axis; --改变变形的原点(默认是对象的中心点) 定义视图被置于X/Y/Z轴的何处。X/Y的值可能为left、center、right、length 、%；Z的值可能为length

transform-origin:left top; 以左上角为旋转中心点

 

 

 

 

五、动画设计

 

 

 

1、transitions 过渡动画,元素从一种样式逐渐改变为另一种效果。需要规定两项内容：1指定要添加效果的CSS属性 2指定效果的持续时间

 

过渡属性：
1）transition:time duration timing-function delay;简写,代表四个
2）transition-property:none|all|property  规定应用过渡的CSS属性的名称
transition-property:width height; 
3）transition-duration:time  过渡效果的持续时间,默认为0[必要]
transition-duration:2s;  

 

4）transition-timing-function:linear|ease|ease-in..  过渡效果的时间曲线,默认是'ease'

 

5）transition-delay:time  过渡效果何时开始(延迟时间),默认为0

 

2、animations 复杂动画,@keyframes规则创建动画,在规则内指定一个CSS样式和 新的样式(动画将逐步从之前的样式更为为新的样式);0%/from是动画的开始,100%/to 是动画的完成

@-webkit-keyframes myAnim{ 0%{background:red;} 100%{ background:green} 
动画属性 (兼容-webkit-)
1）animation-name: 动画名称
2）...-duration:   运行时间,默认0
3） -timing-function:value  动画完成的速度曲线,默认ease
4） —delay： 何时开始,默认0
5） -iteration-count:  播放的次数,默认1
infinite无限
6） -direction:normal|reverse|alternate|alternate-reverse|initial; 是否在下一周期逆向地播放,定义是否循环交替反向播放,默认是normal
正常播放/反向播放/奇数次正,偶数次反/奇反偶正/设置该属性为它的默认值
7） -play-state:paused|running; 指定动画是否正在运行或暂停,默认是running 
8）animation: 所有动画属性,除了animation-play-state 

 

 

3、渐变效果--在两个或多个指定的颜色之间显示平稳的过渡(兼容 -webkit-、-o-、-moz-

1）Linear Gradients线性渐变-向上、下、左、右、对角方向
 linear-gradient(point|angle stop,stop..);  三个参数：第一个参数是渐变的方向或角度,left表示从上到下,left top表示从左上角到右下角；第二、三个参数分别是起点、终点颜色(也可更多)
例： background:linear-gradient(left,red,green);
2）Radial Gradients径向渐变-中心往外
radial-gradient(bg-position|angle shape|size color-stop,color-stop..); 允许指定渐变的形状(圆形、椭圆)和大小(最近端,最近角..)


仿唱吧官网首页，菜单飞入效果，参考效果：唱吧首页（侵删）