css3基础学习笔记

原创
2017/05/20 09:15
阅读数 41

选择器基础知识:

div > p 选择父元素为div的所有子元素

div + p 选择紧接在div后的所有子元素

[target] 选择带有target属性的元素 a[target] {...}

[target=_blank] 选择target为_blank的所有子元素

[title~=flower] 选择title属性包含单词flower的元素

[lang|=en]选择lang属性以en开头的所有元素

[p:first-letter] 选择p元素开头的所有首字母

[p:first-line] 选择每个p元素的首行

[p:first-child] 选择属于其父元素的首个子元素的每个 <p> 元素 就是相对比某个父元素下的所有p元素的第一个p 必须声明 <!DOCTYPE>

[p:before] 在每个p元素之前插入内容 p:before{content:"台词:";} ::css3写法 : css2写法

[p:after] 在每个p元素后插入内容

[p:lang(it)] 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素

[p~ul] 选择前面有<p>元素的每个<ul>元素

a[src^="https"] 选择所有a 属性中src以https开头的 ^表示开头

a[src$=".pdf"] 选择所有a中属性src以pdf结尾的 $表示结尾

a[src*="abc"] 选择所有a中属性src包含abc的元素

div p:first-of-type div下首个p元素 p可以不是第一个

div p:last-of-type div下最后一个p元素

div p:only-of-type div中只有一个p元素 可以包含其他元素

div p:only-child div中只有一个p元素 不能包含其他元素 ie不支持

div p:nth-child(2) div下第二个p元素

div p:nth-last-child(2) div下倒数第二个p元素 Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词 使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

div p:nth-of-type(2) div下第二个p 2可以用奇偶数 可以用公式

div p:nth-last-of-type(2) div下倒数第二个p

div p:last-child div下最后一个p 相当于div p:nth-last-child(1)

p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)

#news:target 选择当前活动的 #news 元素。

input:enabled input:disabled input:checked(只有 Opera 支持 :checked 选择器。)

input[type="text"]:enabled 为所有 type="text" 的已启用的 input 元素设置背景色:

:not(p) 选择所有非 <p> 元素:

::selection 选择被用户选取的元素部分。鼠标选取变色

::selection ::-moz-selection

/*动画*/ CSS3 @keyframes 规则

animation 属性是一个简写属性,用于设置六个动画属性:

animation-name 为 @keyframes 动画规定一个名称:mymove

animation-duration 定义动画完成一个周期所需要的时间,以秒或毫秒计

animation-timing-function 规定动画的速度曲线 liner ease ease-in ease-out ease-in-out

animation-delay 定义动画何时开始

animation-iteration-count 规定动画被播放的次数 n|infinite;n|无限次

animation-direction 定义是否应该轮流反向播放动画 normal|alternate;正|反

animation-play-state 规定动画正在运行还是暂停 paused|running;

animation-fill-mode 规定动画在播放之前或之后,其动画效果是否可见。

none | forwards 保持最后属性 | backwards 开始属性 | both前后都应用

@-moz- 火狐 @-webkit-谷歌和苹果 @-o- 欧朋

例子:

@keyframes mymove

{

from {top:0px;}

to {top:200px;}

}

@-moz-keyframes mymove /* Firefox */

{

from {top:0px;}

to {top:200px;}

}

@-webkit-keyframes mymove /* Safari 和 Chrome */

{

from {top:0px;}

to {top:200px;}

}

@-o-keyframes mymove /* Opera */

{

from {top:0px;}

to {top:200px;}

}

div

{width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

}

//////////transform 渐变 属性//////////////

translate()素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标)

translate(x,y)定义2d转换 xy为数字 x正为右 负为左 y正为下 负为上

translate3d(x,y,z)定义3D转换

scale()方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数

scale(x,y)定义2D转换 x y 为倍数

scale(2,4)把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍

rotate()方法 素顺时针旋转给定的角度。允许负值,元素将逆时针旋转

rotate(30deg)表示旋转30度

matrix()方法

skew(x-angle,y-angle)定义 2D 倾斜转换,沿着 X 和 Y 轴。

////////////transition过渡属性///////////////

transition-property 属性规定应用过渡效果的 CSS 属性的名称 比如:width

transition-property: none|all|property;

transition-duration属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。

transition-timing-function属性规定过渡效果的速度曲线。

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-

bezier(n,n,n,n); ease:规定慢速开始,然后变快

transition-delay 属性规定过渡效果何时开始。

例子:

div

{width:100px;

height:100px;

background:blue;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

div:hover

{

width:300px;

}

***********其他重要css3知识************

box-sizing: content-box | border-box | inherit

box-sizing:content-box,按W3C的盒子模型计算,内容+内边距+边框=元素大小

这是搭积木,三块积木搭出一个房子,任何一块积木大小变化了,房子结构就不稳定了,表现为把元素撑大

box-sizing:border-box,按传统IE盒子模型计算,元素大小=内容+内边距+边框

这是盖房子,事先定好尺寸,盖好一个房子,里边放三块积木,随便你们三个怎么变化,只要不超过房子的大小,随你们折腾

flex属性

flex-direction:row | row-reverse | column | column-reverse; 横排|反向横排|竖排|反向竖排

flex-wrap: nowrap | wrap | wrap-reverse; 不换行|换行|换行,第一行在下方

flex-flow: flex-flow: <flex-direction> || <flex-wrap>;

justify-content:主轴上的对齐方式。

flex-start | flex-end | center | space-between | space-around;

左对齐 | 右对齐 | 中间 | 两端对齐 | 间隔对等

align-items : 属性定义项目在交叉轴上如何对齐。

flex-start | flex-end | center | baseline | stretch

交叉轴的起点对齐| 结尾对齐 |中点对齐|第一行文字的基线对齐|未设置高度或设为auto占满整个容器的高度

align-content : 多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

flex-start | flex-end | center | space-between | space-around | stretch;

项目的6个属性:

order : 定义项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow : 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大 1等分

flex-shrink :定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-basis : 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

flex : 属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto

align-self : self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

********媒体查询*******

@media screen and (max-width:480px){}

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />

@media (min-device-width:600px){

img[data-src-600px]{

content: attr(data-src-600px,url);

}

}

@media (min-device-width:800px){

img[data-src-800px] {

content:attr(data-src-800px,url);

}

}

径向渐变

background: radial-gradient(center, shape size, start-color, ..., last-color);

渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

#grad {

background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */

background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */

background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */

background: radial-gradient(red, green, blue); /* 标准的语法 */

}

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部