css3新增选择器
属性选择器 包括h5中新增的自定义属性
<style>
p[data-id]{color: red}
</style>
<body>
<p data-id="sasa">sasas</p>
</body>属性选择器可以指定属性值 的样式变化
E[attr='value'] 指定属性名
<style>
p[data-id='111']{color: red}
</style>
<body>
<p data-id="111">sasas1</p>
<p data-id="222">sasas2</p>
<p data-id="333">sasas3</p>
</body>只有第一行才会变为红色
E[attr~='value'] 属性对应的值是许多个值 其中包括这个value
E[attr^='value'] 属性对应的值是以value开头的 一个值
E[attr$='value'] 属性对应的值是以value结束的 一个值
E[attr*='value'] 属性对应的值中包含value字符串包含字母 一个值
E[attr|='value'] 属性值是以 value- 开始的
结构选择器
p:nth-child(1|odd（2n）|even(2n-1)) 作为第一个孩子的p会被选择到
p:nth-last-child(1|odd（2n）|even(2n-1)) 作为倒数第几个孩子的p节点
p:nth-of-type(1|odd（2n）|even(2n-1)) 找到父级下的第二个p标签
p:nth-last-of-type(1|odd（2n）|even(2n-1)) 找到父级下的倒数第二个p标签
p:first-child ==p:nth-child(1)
p:last-child ==p:nth-last-child(1)
P:first-of-type==p:nth-of-type(1)
p:empty 表示元素中没有子节点
p:only-of-type 表示p的父元素中只有一个子节点 且这个唯一的子节点的必须是p
p:only-child 表示p的父元素中只有一个子节点 且这个唯一的子节点的必须是p
css3中新增加的伪类
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
url#value
div:target 会选择到id为target的div
表单新增的伪类
input:disabled{} 会选择到不能编辑的输入框
input:enabled{} 会选择到能编辑的输入框
input:checked{} 会选择到当前选中的复选框
css3新增的兄弟选择器
E~F 选择到的是E元素后边的所有兄弟节点
E+F 选择到的是E后边的第一个兄弟节点
实现模拟单选框
<style>
label{
position: relative;
}
input{position: absolute;left: -50px;top: -50px;}
span{
float: left;width: 50px;height: 50px;border: 1px solid red;margin-left: 10px;background: none;
}
input:checked~span{
background: red;
}
</style>
<body>
<label>
<input type="radio" value="11" name="sex">
<span></span>
</label>
<label>
<input type="radio" value="11" name="sex">
<span></span>
</label>
<label>
<input type="radio" value="11" name="sex">
<span></span>
</label>
</body>文本新增选择器
p:first-line 选择到文本的第一行
p:first-letter 选择到文本的第一个文字
p::selection 文本被鼠标选中的时候的样式 注意到时双冒号
p::selection{
color: red;background: green;
}
</style>
<body>
<p>
的囧事就打死的大世界第三
</p>p:after {content:"添加的内容" 样式}
E:not(F) 选择到不是F的E
h1:not(.h2) 选择到类不是h2的h2标签
文本新增属性
1、rgba颜色模式 红绿蓝透明度(0-1) 背景透明 文字不会透明
2、文字阴影 text-shadow: 0 0 10px red; / x y 模糊程度 阴影颜色/
text-shadow: 第一组阴影,第二组阴影;
3、文字描边 webkit内核浏览器才会支持
-webkit-text-stroke:3px宽度
css3新增盒模型
父元素属性 ：
1、display: -webkit-box;
2、内部项目的布局方向 -webkit-box-orient: vertical; 默认是横向显示的
3、内部项目的元素排列 -webkit-box-direction: reverse; 实现元素颠倒
4、水平方向上对项目没有占满的富裕空间的管理 -webkit-box-pack: end 富裕空间在左侧显示
这就可以轻松的实现水平居中了：-webkit-box-pack: center
把富裕空间清军分配给每一个元素：-webkit-box-pack: justify
5、垂直方向上对项目没有占满的富裕空间的管理 -webkit-box-align:center ;
这就可以轻松的实现垂直居中了：-webkit-box-align: center
内部项目的属性：
1、希望元素显示的位置：-webkit-box-ordinal-group：2
希望他显示在第几个
.box div:nth-of-type(1){
-webkit-box-ordinal-group: 2;
}2、弹性空间管理
-webkit-box-flex:1 -webkit-box-flex:5
假设有两个元素 第一个占1/3的父元素的宽度 第二个占2/3的父元素的宽度
css3对盒模型的阴影
box-shadow: 10px 10px 30px blue; //x偏移 y偏移 模糊程度 阴影颜色
box-shadow: inset 10px 10px 30px blue; //投影方式 x偏移 y偏移 模糊程度 阴影颜色
做边框的一个新方法 利用阴影来做 同时阴影可以叠加 一个box上边可以增加多个阴影
css3盒模型的倒影
-webkit-box-reflect: below|left|right|top 倒影和元素之间的距离
<style>
.box{
display: block;margin: 20px 20px;-webkit-box-reflect: below;
}
</style>
<body>
<img src="111.jpg" class="box">
</body>css3渐变
background: -webkit-linear-gradient(red 0,blue 100%);
红色在开始 蓝色在结束 的一个渐变
css3的拖拽放大属性
<style>
.box{
width: 200px;height: 200px;background:url(111.jpg) ;border: 5px solid #000;resize: both;overflow: auto;
}
</style>
<body>
<div class="box"></div>
</body>但是这个属性必须结合overflow: auto;来实现拖拽放大
css3中盒模型的解析方式
box-sizing:content-box 标准盒模型 默认的
内容宽度=width
可视宽度=width+padding+border
box-sizing:border-box 怪异盒模型
可视宽度=原来的width 所以如果他有padding 此时再设置这个属性 就会导致子元素就会被减小
css3布局相关的东西
分栏布局 针对许多文字 一定要加上webkit前缀
-webkit-column-width: 250px; 每一栏有多宽
-webkit-column-count: 4; 告诉浏览器有多少栏 浏览器自动算每一栏有多宽
-webkit-column-gap:10px 栏目之间多少px
-webkit-column-rule:1px solid red 栏目的分割线的样式
css3实现响应式 IE6 7 8 不兼容
<link red="stylesheet" media="screen and (min-width:800px)" href=>
当设备的宽度在800px以上来引用的
<link red="stylesheet" media="screen and (min-width:400px) and (max-width:800px)" href=>
当设备的宽度在400到800之间 来引用的
<link red="stylesheet" media="screen and (max-width:400px)" href=>
当设备的宽度在400以下的时候 来引用的
<link href= media="all and (orientation:portrait)">
<style >
@media screen and(min-width:600px)
</style>
设备竖屏的情况下会加载这个css
<link href= media="all and (orientation:landscape)">
设备横屏的情况下会加载这个css
css3新增UI样式-border-radius
border-radius:10px;
两个值：左上 右上 左下 右下
三个值：左上 右上左下 右下
实现画椭圆 border-radius: 100px/150px; x轴的半径/y轴的半径
<style>
.box{
width: 200px;height: 300px;border: 1px solid red;border-radius: 100px/150px;
}
</style>
<body>
<div class="box"></div>
</body>css3新增UI样式 border-image:url
第一个参数 url 使用的图片
第二个参数 切割图片 对背景的切割 上下 左右 再分配到边框（固定的宽度）上做背景 不加px
第三个参数 图片的排列方式 round stretch
线性渐变
背景和 div的边框图片的属性值 都可以是线性渐变
-webkit-linear-gradient(起点 终点 起点的颜色 终点的颜色)
-webkit-linear-gradient(角度 起点的颜色 第二个新起点的颜色) 逆时针旋转的角度 默认是从左向右
-webkit-linear-gradient(角度 起点的颜色 起点的位置 终点的颜色 终点的位置)
改变某个位置的颜色 直接再在这个位置上写一个颜色
实现鼠标放上去 进度条滚动的效果
<style>
.box{
width: 200px;height: 40px;border: 1px solid #000;
background: -webkit-repeating-linear-gradient(10deg,green 0,green 10px,white 10px,white 20px);transition: 3s;
}
.box:hover{
background-position:200px 0 ;
}
</style>
<body>
<div class="box">sasa</div>
</body>使用 background 的时候 设置多个背景的时候 先设置的在上边 后设置的在下边
径向渐变
起点的位置 left top ,right top ,100px 100px 表示的是圆心的位置
参数2 圆的半径
参数3 形状的设置
背景尺寸 background-size: 宽 高
<style>
.box{
width: 300px;height:300px;border: 5px solid black;
background:url("111.jpg") ;background-size: 100% 100%;
}
</style>
<body>
<div class="box">sasa</div>
</body>属性值的关键字
cover 用背景图片（等比放大）铺满 可能导致图片的宽或者高消失一部分
container 将图片（等比缩小）从而放在div 里边 但是可能会会出现 背景没有覆盖到的地方
背景图的原点设置 background-origin :属性值
padding-box 默认的属性值 原点就是padding的左上角
border-box 原点就是div的边框的左上角
content 原点就是div的内容的左上角
背景图的裁切 background-clip:属性值
border-box 默认值 会从边框部分开始显示北京图片
padding-box 从padding区开始显示背景区
content-box 从内容区开始显示背景区
css-font-face
自定义字体 使用方法
@font-face //关键字
{
font-family: myFirstFont; //定义的字体的名字
src: url('Sansation_Light.ttf'), //定义字体的来源
url('Sansation_Light.eot'); /* IE9 */ //兼容IE9
} 这样就可以使用网上现在有的字体库 从而是实现新的定义的字体
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。