C3的选择器和新增功能

一 属性选择器

标签属性分为自带属性和用户自定义属性(一般以 data- 开头)

01 li[ data-aihao ]: 选中带有自定义属性 data-aiaho 的li标签

02 li[ data-aihao *= 'j' ]: 属性值中包含 "j"字符

03 li[ data-aihao ^= 'm' ]: 属性值以 "m" 开头

04 li[ data-aihao $= 'h' ]: 属性值以 "h" 结尾

05 li[ data-aihao |= 'sy' ]: 属性值以 "sy" 开头或者等于 "sy"

属性选择器一般写在 [ ] 中用来对前面的集合进行二次过滤

二 关系选择器

C3中新增的关系选择器和 JQ 中的极其类似,只是没有父选择器

01 p+div: 选中p 元素后面的div兄弟,且这个div必须是p元素后紧挨着的。

02 p~div: 选中P 元素后的所有兄弟 div 元素

03 div>p: 选中 div 元素下方的一级子 p 元素( 儿子 )

三 伪类选择器

01 :nth-child( 编号 ): 选中某一个父元素下相应编号的子元素,编号从1 开始,且该编号位置上的元素就是想查找的元素类型,如果不是则选不中。

:nth-child() 小括号里面编号可以有多种表达形式。

1 具体数值:表示第几个,编号从1开始。

2 odd : 表示编号为奇数

3 even :表示编号为偶数

4 2n ||2n+1..... : 带有n字符的表达式,n表示从0开始自然数。

02 li:nth-of-type( 编号 ): 用法和上面类似,但区别在于上面的元素排序是某一个父元素下所有子元素的编号,而该用法在排序时只在li中进行编号。

03 :nth-last-child(): 和:nth-child() 一样,只不过从后向前数

04 :nth-last-of-type() : 同上

四 快速结构伪类

01 :first-child || :last-child 分别选中第一个和最后一个子元素,且该子元素的确存在于它父元素的第一和最后的位置上。

02 :only-child 选中的元素必须是它父元素下唯一的儿子元素

03 :only-of-type 选中的元素是它父元下该类型中唯一的该元素

04 :empty 选中父元素下为空的某子元素

05 :not( 选择器 ) 在一个集合中 过滤掉某些个元素

五 常用的结构伪类

在C3中新增了 :after 和 :before 二个伪类可以用来在一个标签的身上体现出三个"盒子"能实现的效果

Div:after{

 

    Content:' 必填项,即使为空 '

    Position: absoulte; // 一般情况下让它相对于"父"盒子定位使用

 

}

01 在元素类型上 after before 类似于 行内元素 ,直接写宽高不起作用

02 虽然可以当做元素去用,但是它们并不是真正html标签。

六 图标字体

在CSS3中新增了 @font-face 属性可以直接通过CSS引入相应的格式的字体文件。可以利用字体制作软件生成不同格式的字体文件放在网站根目录下。然后在CSS中给该字体定义名称,需要用到的时候直接使用。

01 在一般的图标字体库中都会提供相应的CSS文件,使用时给某一个元素设置二个类名

02 基础类名 + 代码具体编号的类名

七 文字阴影

text-shadow: X轴 Y轴 羽化 颜色

01 前二个参数分别表示在水平和垂直方向阴影的偏移量,水平向右为正,垂直向下为正。

02 第三个参数值越大 阴影越模糊

03 最后一个参数用来设置阴影的颜色

04 C3中允许同时给一个元素添加多层阴影,多组之间用逗号隔开。

例 text-shadow: 1px 1px 1px red;

八 盒子阴影

box-shadow: X轴 Y轴 羽化 扩展 颜色

01 前三个参数和 text-shadow用法完全一样

02 第四个参数表示的阴影向盒子周围扩展多少距离之后再开始显示

03 在颜色的后面还可以设置第六个参数 值为 inset 表示显示一个内阴影。默认就是外阴影没有 outset 属性值

04 和文字阴影一样,也可以用逗号隔开设置多组盒子阴影

例 box-shadow: 1px 1px 1px 1px red inset;

九 圆角边框

Border-radius: 半径值

01 可以接收具体的数值做为半径,这个半径在每一个角上都由两个方向决定( x/y ),但是一般在使用的时候默认采用二个方向值相等的做法

02 按着顺时针的方向分为 左上 右上 右下 左下 四个角

03 设置二个参数时分别表示 左上|右下 右上|左下

设置三个参数时分别表示 左上 右上|左下 右下

04 还可以设置百分比做为半径大小

十 线性渐变

Background: linear-gradient( 起始位置,开始颜色,结束颜色 )

01 第一个参数可以设置渐变起始点,形式上可以利用 to + 方向名词或者设置一个角度值(deg) ,0deg 表示的从下向上 270deg 表示从右向左,顺时针旋转;默认是180deg

02 开始颜色和结束色之间可以添加其它过渡色【 过渡色 结束位置 】,结束位置用百分比表示,做为一个参数与起始色之间用逗号隔开。

十一 径向渐变

Background:radial-gradient( )

01 第一个参数可以设置二类信息,设置渐变的形状和渐变的起始位置中间全用空格隔开,而且必须先写形状再写位置

02 ellipse X Y : 设置形状为椭圆,必须是二个半径。

03 circle 半径值 : 设置形状为正圆,一个半径

04 at X Y : 利用 at 关键字后面设置 水平 垂直方向的位置,可以是位关键字( left right center bottom top ) 还可以是具体的数值,0 0 的位置在元素的左上角。

05 后面的参数和线性渐变一样

十二 颜色模式

background:rgba( ) 只要能用颜色表达的地方都可以用 rgba() 代替

十三 背景尺寸

Background-size:

    01 通过这个属性可以对元素的背景图片进行大小的设置。

    02 设置具体的数值:只写一个仅表示图片的宽,写二个表示高中间用空格隔开

03 设置百分比: 此时的计算基准值是相对于容器的宽和高来说的,而不是图片的原大小。(一个参数、二个参数规则和上面一样)

    04 cover: 设置cover表示将图片缩放铺满整个容器,常用来将小图放大,所以图片有可能丢失

    05 contain: 将图片缩放显示在整个容器中,常用来将大图缩小显示

在C3中可以利用 background 给一个盒子添加多张背景图片,中间用逗号隔开。

例 background:url(img/01.jpg) 0 0 no-repeat, url(img/02.jpg) 0 0 no-repeat;

十四 内减盒模型

box-sizing:border-box; .// 具有该属性的盒子,在添加border 或者 padding的时候都会从 width 身上减值        

十五 过渡属性

transition: 属性 时间 形式 延时;

    01 属性参数一般用 all 表示所以,也可以单一的只写某一个(width....)

    02 时间参数单位是秒,表示过渡需要的时长

    03 C3中提供了几种默认的过渡形式:linear ease ease-in ease-in-out ease-out

    04 最后一个参数用来设置当前过渡需要延时多久之后才会执行,只要用到了数值就需要加单位 s

    05 在使用的时候可以将 transition 添加在元素正常状态或者 hover 状态下

十六 C3中的2D 转换

目前浏览器对于3D的展示支持力度没有那么给力,所以研究的2D转换

在C3中不论哪种转换属性名都是 transform

位移

transform: translate( X ,Y, Z )

01 translate 属性可以设置元素相对于自身当前位置的改变。只写一个参数值仅代表X 轴 ,水平向右为正,可以为负表示向左

02 设置二个值表示 X Y 轴 但是中间用逗号隔开

03 默认情况下元素位移的参考点是相对于自身中心点发生。

缩放

transform: scale( 缩放系数 )

    01 该属性改变的是元素的宽和高

    02 缩放系数为正,表示将宽高变为原来的多少倍,只写一个仅表示宽度,写二个用逗号隔开分别表示宽和高。

斜切

transform:skew( 角度 )

    01 设置一个角度仅表示 X 轴 ,单位是deg

    02 面对屏幕从右向左看顺时针向时为正,向外为负

    03 一般应用在块元素身上

旋转

transform:rotate( 角度 )

    01 接收一个角度做为值,面对屏幕顺时针为正,写入的值表示转到某个度数。

    02 默认情况下 rotate() 是沿着 Z 轴(屏幕45度角)做旋转

    03 在JQ中可以利用事件对象下的 stopPropagation() 方法阻止当前元素身上的事件冒泡到它的父元素上。

沿着X Y轴旋转

transform: rotateX() || transform: rotateY()

01 上面二个属性一般是用来在3D场景中使用的,但是也可以在平面内得到一些想要的效果。

02 transform-origin: 用来设置任意转换【位移,旋转,缩放,斜切】的中心点

语法上可以设置多个参数分别表示 X Y Z轴的坐标(一般只用二个)

03 rotateX rotateY 在平面里看起来就是将图片的高和宽度进行改变,正负角看起来效果好像是一样的。

十七 三维展示属性

01 backface-visibility: 设置为 hidden 定义某个元素背对屏幕的时候不显示。

02 tranform-style: preserve-3d 将当前元素定义为3D场景,此时它下面的子元素就可以做3D展示了。

03 perspective: 数值。景深,表示透视的近大小远小,常用的值为 800-1500px。

04 如果哪个元素的身上具有了 preserve-3d 属性那么一定不能在添加 overflow:hidden。(景深和3D场景属性不一定非要同时存在。)

十八 浏览器内核前缀

目前来说大部的浏览器都支持C3属性,但是C3本身的标准还没有完全制定。所以对于某一个属性浏览器厂商可以有自已独特的实现方式,但是厂商自已在实现的过程中不能"污染"标准的语法,此时厂商就可以添加上自已的浏览器内核前缀来实现具体的属性

01 -webk-: webkit内核浏览器可识别

02 -moz- : firefox

03-ms- : IE系浏览器

04 -o- : 欧朋浏览器

-ms-border-radius: 并不能让 IE6识别 border-radius 属性,因为 IE6本身就不支持C3,一般书写的顺序先写一堆带前缀的属性,再写一个标准的语法格式( 标准语法越来越多的浏览器都在支持 )

十九 C3动画属性

在C3中可以先定义动画然后再让某些元素去调用动画。

1 定义动画: C3中定义动画提供了两种语法格( 单组+多组 )无论是哪种都会用到关键字 @keyframes

单组动画:

@keyframes 自定义动画名{

 

    from{

        // 初始位置

    }

    to{

        // 目标位置

    }

例 @keyframes move { from { left:10px } to { left:200px } }

多组动画:

    @keyframes 自定义动画名{

 

// 02 将动画分段,从0-100% 分成 N段,每段都可以定义样式

    0%{ 开始位置 }

20%{ ………… }

    .....

    100%{ 结束位置 }

}    

2 动画调用

animation: 动画名称 动画时长 动画形式 动画延时 动画次数 动画是否反向

01 动画名称可以设置:move width……..

02 动画时长:单位是秒,表示动画需要的时间,即使是0秒也必须加单位。

03 动画形式: linear ease ease-in ease-in-out ease-out….

04 动画延时:用来设置动画需要延时多久执行

05 动画次数里有一个常用 关键字 infinite 表示无穷大

06 最后一个参数动画是否反向默认是 normal 表示动画到达目标点之后不会反向,alternater 表示会反向播放

 

yang, xiaoyun

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: