CSS3 学习笔记

伪类选择器

结构性伪类选择器

first-line 选择器

first-line 伪元素选择器用于向某个元素中的第一行文字使用样式

fist-letter 选择器

fist-letter 伪元素选择器用于向某个元素中的文字的首字母或第一个字使用样式

before 选择器

before 伪元素选择器用于在某个元素之前插入一些内容

after 选择器

after 伪元素选择器用于在某个元素之后插入一些内容

root选择器

root选择器将样式绑定到根元素也就是整个HTML中
和body的区别是：body是内容区域 而root是整个HTML

not选择器

想对某个结构元素使用样式，但是想排除这个结构下面的子结构元素让它不实用这个样式时可以使用not选择器

body *:not(h1)
{
background:red;
}

表示body里的h1将不使用背景色这个样式

empty选择器

empty选择器指定当元素中内容为空白时使用的样式

target选择器

target选择器对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接并且跳转到target元素后起作用

first-child选择器

单独指定第一个子元素的样式

last-child选择器

单独指定最后一个子元素的样式

nth-child选择器

nth-child(n)

匹配正数下来第N个元素

li:nth-child(3)
{
background:red;
}

表示我们将要对第三个li元素使用样式

nth-child(odd)

匹配正数下来第奇数个子元素

nth-child(even)

匹配正数下来第偶数个子元素

nht-last-child选择器

nht-last-child(n)

匹配倒数数下来第N个元素

nht-last-child(odd)

匹配倒数数下来第奇数个子元素

nht-last-child(even)

匹配倒数数下来第偶数个子元素

nth-of-tpe 正数

nth-last-of-type 倒数

nth-last-of-type 倒数 nth-of-tpe 正数
IE8以上才支持 其他的浏览器都支持

only-child 只对唯一的元素起作用

UI元素状态伪类选择

UI选择器的特征就是指定的样式只有当元素出于某种状态下时才起作用在默认状态下不起作用

文字阴影与自动换行

text-shadow 文字阴影

text-shadow:length length length color
第一个参数表示:阴影离开文字的横方向距离
第二个参数表示:阴影离开文字的纵方向的距离
第三个参数表示:阴影模糊班级
第四个参数表示:阴影的颜色
如果没有指定阴影颜色会默认使用文字本身的颜色

也可以给一段文字指定多个阴影并且针对每个阴影使用不同的颜色
指定多个阴影时用逗号分隔开

word-break 文字换行

3个属性值
normla 使用浏览器默认的规则
keep-all 只能在半角空格或连字符处理换行 不支持chrome Safari
break-all 允许在单词内换行

word-wrap

用于处理长单词和url地址自动换行
2个属性值
normal 浏览器保持默认处理方式只在半角空格或者连字符的地方换行
break-word 浏览器可以在长单词或url地址内部进行转换

盒类型

display: 盒的基本类型

在css中我们使用display属性来定义盒的类型,总体来说盒分为block类型和inline类型

比如我们之前所需的div元素和p元素都是block类型，span和a属于inline类型

inline-block 类型

inline-block 类型属于block盒的一种，但是在显示时具有inline类型盒的特点

例如:在div中分别将display设置为inline-block和inline后他们的显示效果是一样的
但是如果都指定宽度和高度的话inline-block会溢出

inline-block 并列显示

实例对比:
block类型
首先新建三个div元素 给前两个div使用float让前两个元素并列显示，第三个div就会显示在前两个div的下部但是因为前两个的高度不一样所以我们要使用clear属性清除浮动

inline-block类型:
使用inline-block 类型可以直接将两个div元素进行并列显示不需要使用float属性和clear属性

默认情况下使用inline-block类型时并列显示的元素的垂直对齐方式是底部对齐 为了让对齐方式改成顶部对齐还要给div元素的样式中加入vertical-align属性

list-item 类型

可以将多个元素作为列表来显示，同时在元素的开头上加上列表的标记

run-in类型和compact类型

将元素指定为run-in类型和compact类型时，
如果元素后面还有block类型的元素，run-in类型的那个元素将被包括在后面的block类型的元素内部，

而compact类型的元素将被放置在block类型的元素左边

只有ie支持

overflow属性

取值:

hidden:超出容纳范围的文字将被隐藏起来

scroll:在div元素中出现水平与垂直的滚动条，超出的内容将被滚动显示

auto:当文字超出div的容纳范围时，根据需要出现水平滚动条或垂直滚动条，滚动显示超出的范围

overflow-x和overflow-y

使用overflow-x和overflow-y属性可以单独指定在水平或垂直方向上如果内容超出盒的容纳范围时的显示方法

小试例:
将overflow-x设置为hidden将overflow-y设置为scroll，那么超出后只会在垂直方向上显示滚动条

text-overflow属性

值：ellipsis 显示省略符号来代表被修剪的文本。

通过使用text-overflow属性可以在盒的末尾显示一个代表省略的符号”…”，但是text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效

小试例:
通过将white-space属性的值设置为nowrap，使得盒的右端内容不能换行显示这样就达到了水平方向的溢出

盒阴影box-shadow属性

box-shadow属性

可以使用box-shadow属性让盒在显示的时候产生阴影效果

box-shadow:length length length color;
前三个代表文字阴影离开文字的横方向距离，阴影离开文字的纵方向距离和阴影的模糊半径 color 阴影的颜色

将参数设置为0

1、当阴影的模糊半径设置为0的时候将绘制不向外模糊的阴影
2、将阴影离开文字的横方向距离与纵方向距离都为0的时候，会在盒子的周围绘制阴影
3、将阴影离开文字的横方向距离设置为负数的时候向左绘制阴影
4、将阴影离开文字的纵方向距离设置为负数的时候向上绘制阴影

边框相关样式

圆角边框

border-radius:半径
border-radius中也可以指定两个半径
第一个半径作为边框左上角与边框右下角的圆半径来绘制
第二个半径作为边框右上角与边框左下角的圆半径来绘制

绘制4个不同半径的边框
bodder-top-left-radius:左上角半径
bodder-bottom-left-radius:左下角半径
bodder-top-right-radius:右上角半径
bodder-bottom-right-radius:右下角半径

图像边框

border-image属性最简单的使用方法

-webkit-border-image:url 上右下左边距

-moz-border-image:url 上右下左边距

-o-border-image:url 上右下左边距

border-image:url 上右下左边距

上面写法是为了兼容各大浏览器
上面的参数中图像路径上右下左边距必须指定 但上右下左边距完全都一样可以缩写
border-image:url 边距

transform 变形功能

如果想对一个元素使用多种变形方法
使用方法transform:方法1 方法2 方法3

rotate旋转，在参数中规定角度

rotate 表示顺时针旋转 deg是角度单位
-ms-transfrom:rotate(角度) //IE9
-moz-transfrom:rotate(角度) //firefox
-webkit-transfrom:rotate(角度) //Safari和chrome
-o-transfrom:rotate(角度) //Opera

scale 缩放转换

transfrom:scale(值)它的值是指定的缩放倍率比如0.5就是50% 1就是% 1.5就是放大150%
可能的值:
1、transfrom:scale(x,y)使元素X轴和y轴同时缩放
2、transfrom:scale(x)仅x轴缩放
3、transfrom:scale(y)仅y轴缩放

skew 倾斜

使用方法:transfrom:skew(值) 他的值是角度
可能的值：

1、transfrom:skew(x,y)使元素在水平和垂直方向同时扭曲(x轴和y轴同时按一定的角度值进行扭曲转换)只有一个参数时只在水平方向上倾斜

2、transfrom:skewX(x)仅使元素在水平方向扭曲变形

3、transfrom:skewY(y)仅使元素在垂直方向扭曲变形

translate 移动

使用方法:transfrom:translate(值) 他的值是移动的距离

1、transfrom:translate (x,y)水平和垂直方向同时移动(也就是x轴和y轴同时移动)只有一个参数时只在水平方向上移动

2、transfrom:translateX (x)仅水平方向移动

3、transfrom:translateY (y)仅垂直方向移动

改变元素基点

可能的值

top_left	top	right_top
left	center	right
bottom_left	bottom	bottom_right

CSS3动画功能

transition

css3中transition允许CSS的属性值在一定的时间区间内平滑的过渡，这种效果可以 在鼠标单击、或得焦点、被点击或对元素任何改变中触发 并圆滑的以动画效果改变CSS的属性值

transition属性的使用方法
-moz-transition:语法
-webkit-transition:语法
-o-transition:语法

语法:
transition:property duration timing-function delay

1、执行变换的属性transition-property 属性规定应用过渡效果的CSS属性的名称(当指定的CSS属性改变时过渡效果将开始)

值有三个类型:

1、none 没有属性会获得过渡效果
2、all 所有属性都将获得过渡效果
3、property 定义应用过渡效果的CSS属性名称列表 列表以逗号分隔

2、延续的时间 transition:duration
规定完成过渡效果需要花费的时间(以秒或毫秒计算)默认值0没有效果

3、在延续时间段变换的速率变化transition-timing-function
ease (逐渐变慢)默认值
linear(匀速)
ease-in(加速)
ease-out（减速）
ease-in-out（加速后然后减速）
cublic-bezier（n,n,n,n）定义自己的值可能的值是0至1之间的数字

4、变换延迟时间 transition-delay
transition-delay是用来指定一个动画开始执行的时间 也就是说当改变元素属性值后多长时间开始执行transition效果，其取值数字为数值 单位为s或者ms

animations

transition和animations的区别在于:
transition只能通过指定属性的开始值与结束值，然后通过两属性值之间进行平滑过渡的方式来实现动画效果，所以transition不能实现复杂的动画效果，
而animations功能是通过关键帧以及每个关键帧中的属性值来实现更为复杂的动画效果

animations的使用方法:

@-webkit-keyframes 关键帧合集名称(创建关键帧的代码)
0%~100%关键帧里的代码都是以%号编写
0%
{
background:red
}
0%也就是动画刚开始的时候 背景颜色为红色

关键帧创建好之后还要在元素的样式中使用该关键帧
方法如下:
-webkit-animations-name:指定合集名称
-webkit-animations-duration:整个动画完成所需的时间
-webkit-animations-timing-function:实现动画的方法
-webkit-animations-iteration-count:属性的属性值设定为整数值，那么这个动画播放的次数就等于这个整数值(infinite)是无限循环播放

元素
{
-webkit-animations-name:mycolor;
-webkit-animations-duration:5s;
-webkit-animations-timing-function:linear;
-webkit-animations-iteration-count:infinite;
}

实现动画的方法
ease 开始时速度很快然后沿着曲线进行加速然后在沿着曲线进行减速
linear 从开始到结束都是以同样的方法进行
ease-in开始速度很慢 然后沿着曲线进行加快
ease-out开始速度很快 然后沿着曲线进行减速
ease-in-out（加速后然后减速）
cublic-bezier（n,n,n,n）定义自己的值可能的值是0至1之间的数字