> 웹 프론트엔드 > HTML 튜토리얼 > CSS3重点总结_html/css_WEB-ITnose

CSS3重点总结_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:29:26
원래의
897명이 탐색했습니다.

CSS3重点总结
(1)兄弟选择器:2种:+、 ~
1.相邻兄弟选择器(+):选择器1+选择器2
选择"选择器1"相邻的后一个兄弟"选择器2"
强调:选中的是自己相邻的下一个元素,不是自己

2.通用兄弟选择器(~):选择器1~选择器2
选择"选择器1"之后的所有兄弟"选择器2"
+ 和~的区别:
(1)+只选相邻一个,~选之后所有
(2)+要求必须相邻,如果相邻元素不满足+后选择器要求则不选
(3)~跳过之后所有不满足选择器条件的元素。

何时使用兄弟选择器:只要选兄弟元素,就用兄弟选择器

(2)属性选择器:根据元素现有的属性和属性值特征,选择元素
何时使用属性选择器:如果现有属性已经可以区分元素
语法:只要使用属性选择器,必须用[]
1.元素[属性] : 匹配具备 属性的 指定元素
例如: p[id] : 匹配具备id属性的p元素

2.元素[属性1][属性2] :
p[id][class] : 匹配出所有即具备id属性,又具备class属性的p元素

3.元素[属性=值] :
input[type="text"] : 匹配type的值为text的input元素

4.元素[属性~=值] :选择属性名中包含指定单词的元素
input[class ~= second] :
选中

~= : 包含指定的数据(独立)
= : 只有指定的数据

5.[属性名^="关键字"]:选择以"关键字"开头的属性值

6.[属性名*="关键字"]:选择包含"关键字"的属性值

7.[属性名$="关键字"]:选择以"关键字"结尾的属性值


(3)伪类选择器:
(1)元素状态伪类(多数应用在表单元素上):主要匹配元素的禁用、启用、选中状态
:disabled 匹配每个被禁用的元素
:enabled 匹配每个已启用的元素
:checked 匹配每个被选中的元素(只用于单选按钮和复选框)

(2)目标伪类:突出显示活动的HTML锚,用于选取当前活动的目标元素
:target
何时使用:需要跳转到的锚点位置元素发生样式变化

(3)结构伪类:主要从元素的结构(层级结构)上来进行划分的
:first-child 匹配属于其父元素的首个子元素
:last-child 匹配属于其父元素的最后一个子元素
:empty 匹配没有子元素(包含文本、换行、空格)的元素

这是一个段落

非empty
empty
:only-child 匹配属于其父元素的唯一子元素
:nth-child(n) 选择器匹配属于其父元素的第 n个子元素

(4)否定伪类:选择所有不满足条件的元素
:not(selecotr)

(5)伪元素选择器:主要针对元素中的文本内容进行匹配的(一般用于 排版、首字符突出等操作)
:first-letter:选取指定选择器的首字母
:first-line:选取指定选择器的首行
::selection:匹配用户选取的部分

(4)内容生成:通过css 向元素的前面或后面增加一部分内容
:before :当前元素内容的开始位置之前
:after :当前元素内容的结束位置之后

如何使用(2步):
1.先使用:before或:after 选择要生成内容的位置
2. 使用content属性在选中位置生成内容
content属性后,可跟3种内容:文字,图片,计数器
普通文字: content:"提示"
图片: content:url(路径)
计数器: content:counter(计数器名)
例如:
选择器:before{content:内容}——在原内容开头生成
选择器:after{content:内容}——在原内容结尾生成
选择器:before/after{content:counter(计数器名)}

(5)计数器:能按规律生成序号的属性
如何使用(3步):
1. 创建计数器属性:在使用计数器范围的父元素上
父元素{counter-reset:计数器名}
2. 设置计数器步进:在使用计数器的元素上
当前元素{counter-increment:计数器名 步进数}
3. 使用计数器生成序号:
选择器:before/after{content:counter(计数器名)}

计数器的执行:默认从0开始,先加一次步进,再取号

厂商前缀:特定浏览器厂商对特定属性增加的与本厂商对应的前缀。
-moz- Firefox
-webkit- Chrome Safari
-ms- IE

(6)多列
1.分隔列:把一段文本拆分成几列
column-count:规定元素被分隔的列数
2.列间隔:设置列与列之间的距离
column-gap:间隔
3.列规则:可以在列与列之间设置一条间隔线,列规则可以设置间隔线的样式、颜色、粗细
column-rule:大小 样式 颜色;
column-rule-width:
column-rule-style:
column-rule-color:
4.浏览器兼容
1、IE10 以及 Opera 浏览器支持多列属性
2、FireFox 需使用前缀 -moz-
-moz-column-count:
-moz-column-gap:
-moz-column-rule:
3、Chrome 和 Safari
-webkit-column-count:
-webkit-column-gap:
-webkit-column-rule:

(7)CSS Hack:针对不同浏览器书写的css代码 (浏览器兼容性所引发的问题)
浏览器都有两种解析网页的模式:
1.标准模式:严格按照XHTML或HTML4.0标准,解析网页
只要符合标准的网页,在不同浏览器显示效果应该是一致的。
2.混杂模式:按照浏览器自带的规则,解析网页
没有标准可循,同一网页在不同浏览器的加载效果可能不一致

如何规定浏览器使用标准模式解析:DOCTYPE

浏览器兼容问题
1、margin和padding
ie6中 默认的 maring 偏大
解决方案:body{margin:0px;}
2、居中布局
ie6以及低版本浏览器:通过父元素的text-align:center;完成居中
高版本浏览器(ie6,ie7+,chrome,firefox,opera,safari):通过当前元素的margin实现即 margin:0 auto;
3、元素高度与内容
ie6 : 元素的高度至少包括内容
其他:元素高度会超出容器
解决方案:overflow属性
4、子元素设置上外边距时
ie6:正常显示
其他版本:子元素的上外边距会认为是父元素的上外边距
解决方案:
1、给父元素设置边框
2、设置父元素的 padding-top

5、HTML头部引用Hack
通过HTML条件注释完成

IE6:

大于IE6的版本:

 

 

1.变形(transform):迅速变化
2d
(1)旋转:围绕一个参照原点(transform-origin),旋转指定角度,默认为顺时针
语法:transform:rotate(ndeg)
n为正 则按顺时针旋转
n为负 则按逆时针旋转

参照原点:默认在元素的中心点,坐标(width/2,height/2)
坐标原点:在元素的左上角,坐标为(0,0)

修改参照原点(3种方法):
1.transform-origin:x坐标 y坐标 (x向右为正;y向下为正)
2.transform-origin: right bottom
3.transform-origin:100% 100%

注意:rotate不但旋转元素,而且同时旋转绘图坐标系的方向。如果配合着其他的变形一起来做的话,rotate在前的话,会影响之后延坐标轴的其他变形。
解决方案:如果配合变形一起来做,最好将rotate放在最后一个函数上
比如:transform:translate(50px,0px) rotate(30deg);
translate不受影响,水平移动
transform:rotate(30deg) translate(50px,0px);
translate受影响,延旋转后的x轴向右下移动50px


(2)位移:延 坐标方向 移动指定的距离
语法:translate(x轴移动距离,y轴的移动距离);
x : 正为右,负为左
y : 正为下,负为上

transform:translate(50px,50px);
注意:位移不会影响其他元素位置,但可能会盖住周围元素
其他两个单方向位移:
translateX(距离);
translateY(距离);


(3)缩放:将指定 坐标轴 上的坐标缩放指定 倍数
语法:transform:scale(倍数)——等比例缩放
倍数:0-1之间,缩小;>1,放大。
transform:scale(x轴缩放倍数,y轴缩放倍数)
强调:缩放同样受参照原点影响!
其他两个单向缩放:scaleX(倍数);
scaleY(倍数);


(4)倾斜:延 坐标轴方向 ,倾斜指定 角度
语法:transform:skew(ndeg);——仅延x轴倾斜
transform:skew(ndeg,ndeg);——延x轴,y轴同时倾斜

x轴方向:正角度向左倒,负角度向右倒
y轴方向:正角度左侧向上斜,负角度左侧向下斜

强调:倾斜受参照原点影响。默认参照原点在元素中心点。
其它两个单向倾斜:skewX(ndeg)
skewY(ndeg)

 

 

3d
perspective属性:设置假定的人眼位置到投影平面的距离
如何使用:设置在父元素上
浏览器兼容性:
Chrom,Safari : -webkit-perspective
Firefox : -moz-perspective

坐标轴:3个x轴,y轴,z轴
x轴向右为正,y轴向下为正,z轴靠近观察者的方向为正
(1)3d旋转:以指定*坐标轴*为圆心旋转指定角度
语法:transform:rotateX(ndeg)
transform:rotateY(ndeg)
transform:rotateZ(ndeg)
n为正,顺时针;n为负,则逆时针

(2)3d位移:特指延z轴移动
语法:transform:translate3d(x,y,z)——三个方向的位移
translateZ(z)——仅延z位移

(3)3d缩放:特指延任意坐标轴缩放
语法:transform:scaleZ(倍数)——将z坐标x指定倍数
强调:如果scale与其他变形函数连用,应放前边。

x y z
正 向右 向下 向前
负 向左 向上 向后

 

2.过渡(transition):从*开始样式*,经过指定*时间*后,缓慢过渡到*结束样式*
过渡四要素
(1) 专门用于设置要过渡的属性名
语法: transition-property:属性名1,属性名2 ...;

(2)专门用于设置持续时间
语法:transition-duration:n1s,n2s ...;

(3)专门用于设置速度变化类型
语法:transition-timing-function:
备选值:ease: 先加速后减速(默认值)
linear: 匀速变化
ease-in: 加速
ease-out: 减速
ease-in-out: 先加速后减速

(4)专门用于设置延迟开始时间
语法:transition-delay:n1s,n2s ...;

简版transition也可以同时设置多个属性的过渡
transition: 属性名1 持续时间 速度类型 [延迟],
属性名2 持续时间 速度类型 [延迟],
...

3.动画(animation) - 关键帧动画
关键帧:动画执行过程中,物体在某一位置上的特殊状态
关键帧动画:使用连续的关键帧,控制物体连续的状态变化
何时使用关键帧动画:
连续,有规律的过渡——过渡transition
无规律的连续变化——动画animation

如何实现:2步:
1. 定义关键帧:
@keyframes 动画名{
from{开始样式}
n%{当动画进度播放到n%时的样式}
...
to{结束样式}
}
2. 触发动画:
animation:动画名 持续时间 速度类型

如何使用:写在非伪类的选择器,页面加载后自动触发
写在伪类中,伪类触发时才播放

浏览器兼容性:@keyframes animation Firefox IE
@-webkit-keyframes -webkit-animation Chrome Safari
@-o-keyframes -o-animation Opera


动画子属性:
1、animation-name : @keyframes(动画)名称
2、animation-duration : 动画时长
3、animation-timing-function:动画速度函数
4、animation-delay:动画的延迟时间
5、animation-iteration-count : 播放次数
取值:
1、具体数值
2、infinite(无限次播放)
6、animation-direction : 动画播放方向
取值:
1、normal 正常播放
2、alternate 轮流播放
奇数次数:正向播放
偶数次数:反向播放
7、animation-fill-mode:动画播放前后的效果
备选值:
1、none:不改变默认行为
2、forwards:动画完成后保证最后一个属性状态
3、backwards:动画播放前,显示开始属性值
4、both
8、animation-play-state:控制动画播放与暂停
备选值:
1、paused : 暂停动画
2、running : 播放动画
使用场合:
1、配合伪类选择器
2、结合Javascript使用

animation:动画名称 持续时间 动画方式 延迟时间 重复次数 是否交替执行 结束状态
交替执行:alternate:单次正向执行,偶数次反向返回
结束状态:forwards:当动画完成时保持最后一帧状态

 

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿