css3
css3选择器
关系选择器：
<ul class="one">
<li>
<h2>五虎上将</h2>
<ul>
<li>张飞</li>
<li>关羽</li>
<li>赵云</li>
<li>马超</li>
<li>黄忠</li>
</ul>
</li>
</ul>
选择器1 选择器2 (E F) 包含选择器(嵌套-下多层)
.one li{border:1px solid green}
选择器1>选择器2 父子选择器（嵌套-下一层）
.one>li{border:1px solid green
.one>li>ul>li{border:1px solid red}
选择器1+选择器2 相邻选择器（同级-下一个）
h2:hover+ul{background:red}
选择器1~选择器2 兄弟选择器（同级-下所有）
.one>li>ul>li:hover~li{font-weight:800}
属性选择器：
1.[属性名]
li[class]{color:red}
2.[属性名=属性值]
li[class='xxj']{font-weight:800}
3.[属性名$=字符]-以指定字符结束
.two li[class$='m']{background:red}
4. [属性名^=字符]-以指定字符开始
.two li[class^='s']{border:5px solid green}
5.[属性名*=字符]-包含指定字符
.two li[class*='m']{font-style:italic}
6.[属性名|=字符]- 指定字符之后带-
.two li[title|='水']{font-size:26px}
7.[属性名~=字符]- <li class="xxj cyy">西厢记</li>
.two li[class~='cyy']{font-size:26px}
伪对象选择器:
选择器::first-line-选中元素内第一行内容
p::first-line{color:#f90}
选择器::first-letter-选中元素内第一个字符，英文是第一个字
母，中文是第一个字.
p::first-letter{font-size:50px}
选择器::before-元素content：“”前加内容或者图片
p::before{content:'☆☆☆☆☆'}
选择器::after-元素content：“”后加内容或者图片
p::after{content:'★★★★★'}
选择器::selection-选中内容时的状态
p::selection{background:red;COLOR:blue}
伪类选择器：
a相关的伪类选择器
元素:link
元素:hover
元素:active
元素:visited
child系列的结构性伪类选择器-强调位置
child系-步骤：
1.选中指定元素
2.查找其父元素
3.查找父元素下指定位置的元素
4.验证
选择器:First-child-父元素下第一个符合或者不符合类型的元素，若第一个元素不符合类型-则不存在-第一个类型可不符合
p:first-child{COLOR:RED}
选择器:Last-child-父元素下最后一个符合或者不符合类型的元素，若最后第一个元素不符合类型-则不存在-最后一个类型可不符合
p:last-child{color:green}
选择器:Nth-child(n)-父元素下指定位置符合或不符合类型的元素
位置格式:
选择器:nth-child(数字)
选择器:nth-child(单词) even/odd
选择器:nth-child(表达式) 需要配合n来使用
/*P:nth-child(2n){background:pink}*/
/*P:nth-child(3n+1){background:green}*/
/*p:nth-child(even){background:purple}*/
/*p:nth-child(odd){background:pink}*/
选择器:Only-child父元素下唯一一个符合类型的元素，有且只有一个元素
p:only-child{background:red}
Of-type系列-强调符合类型
1.选中指定元素
2.查找其父元素
3.查找父元素下符合类型的元素
4.验证
选择器:First-of-type-父元素下第一个符合类型的元素，若第一个
元素不符合类型-则查找第二个，此处的第二个即为符合类型的第一个元素-重新定义的第一个元素类型必符合
p:first-of-type{COLOR:RED}
选择器:Last-of-type父元素下最后一个符合类型的元素，若最后一个元素不符合类型-则查找上一个，此处的上一个即为符合类型的最后一个元素-重新定义的最后一个元素类型必符合
p:last-of-type{color:green}
选择器:Nth-of-type()-父元素下指定位置且符合类型的元素
选择器:nth-of-type() (数字)
选择器:nth-of-type() (单词) even/odd
选择器:nth-of-type() (表达式) 需要配合n来使用
/*P:nth-of-type() (2n){background:pink}*/
/*P:nth-of-type() (3n+1){background:green}*/
/*p:nth-of-type() (even){background:purple}*/
/*p:nth-of-type() (odd){background:pink}*/
选择器：Only-of-type-父元素下唯一一个符合类型的元素，有且只有一个符合指定类型的元素
p:only-of-type{color:red}
其他类型的选择器
选择器:empty-选中所有空的元素-空格和回车不为空
p:empty {width:300px;height:100px;border:1px solid red}
p:empty::before {content:'暂无数据'}
选择器:root-选中页面中的根元素，
html:root {border:2px solid red}
选择器:target-选中锚点连接的元素，设定其样式
锚点连接:
<a href="#seven">seven</a>
<p id="seven">11111111111111111111111111</p>
p{height:200px;background:#CCC;margin:10px 0}
p:target{background:pink}-设定其连接到锚点位置时的背景颜色
选择器:checked-选中指定元素器对应元素的选中状态.
input:checked{width:100PX;height:100px}
input:checked+span{color:red}-设定checked相邻的<span>性别</span>中<span>标签内的字体颜色在选中后的颜色
选择器:disabled- 选中选择器指定的元素的不可见状态
1. 为表单添加disabled属性
<input type="text" name="id" disabled value="12138" >
2.input:disabled{background:#ff0}
选择器:enabled-选中选择器指定的元素的可见状态（默认）
input[type='password']:enabled{background:green}
选择器:focus-获取焦点时状态.
input[name='user']:focus{background:red}
选择器:not(选择器)-选中元素之外的所有元素样式设定（属性选择器无效，推荐使用class/id）
P:not(.love){background:pink;margin:10px}
私有前缀:
IE -ms-
Opera -o-
FF -moz-
chrome -webkit-
safari -webkit-
文本属性:
（目前仅webkit内核可用）
Text-stroke: 设置文本描边的 宽度 颜色
-webkit-text-stroke:2px red;
Text-stroke-width：宽度
Text-stroke-color：颜色
Text-fill-color:文本填充色
-webkit-text-fill-color:transparent
color:transparent;
新的颜色表示方式：
CSS2表示颜色的方式: 英文单词、rgb、HEX
RGBA-颜色透明度（Alpha）值在0-1之间小数
HSL-（色轮模式）
H 色相-范围 0-360
S 饱和度-鲜艳程度 0%-100%
L 亮度-明亮程度 0%-100%
HSLA
HSL上添加了透明度（Alpha）值在0-1之间小数
Transparent 透明颜色(颜色值)
还可使用rgba或者hsla在A中设置为0即可.
文本属性:
Tab-size 设置tab键的缩进大小---一定要在内容外加上<pre>
值为整数：表示多少个空格的长度
试验性质，仅Opera FF
Text-decoration: 文本修饰的样式
新属性: text-decoration: 颜色 风格 线的方式 （未实现）
但其派生字属性实现
Text-decoration-line：线位置（实验性质 仅FF支持）
overline 上划线 underline 下划线 line-through中横线
Text-decoration-style: 线风格（实验性质 仅FF支持）
solid 实线 dashed 虚线 double 双横线 wavy波浪线 dotted 点条线
Text-decoration-color：线颜色（实验性质 仅FF支持）
text-shadow: 设置本文的阴影属性
格式1: text-shadow: 2px 2px red
格式2: text-shadow: 2px 2px 模糊程度(px) red;
格式3: text-shadow: 2px 2px red , 4px 4px blue…
direction 文本流方向
ltr从左->右 -（默认值) rtl 从右->左
Unicode-bidi:bidi-override文字的方向和direction同
Writing-mode 设置文本的书写方式
lr-tb 从左到右，从上到下 tb-rl 从上到下，从右到左
Text-overflow:文本溢出时处理方式
注意:需要配合overflow和white-space来使用
ellipsis 超出显示省略号
定位属性：
clip:rect(头px 右px 尾px 左px)
自上而下（顶部->字头高度-自尾高度）
自左至右（左侧->字左宽度-字右宽度）
边框属性:
Border-radius: 设定元素的圆角属性
完整格式:
格式:border-radius :
左上角水平半径 右上角水平半径 右下角的水平半径 左下角水平半径
/ 左上角垂直半径 右上角垂直半径 右下角的垂直半径 左下角垂直半径
缩写方式:
没斜线的---同时设定宽高
1个参数 border-radius：100px；---四个点设定相同宽高
2个参数 border-radius：100px 200px；---对角
3个参数 border-radius：100px 200px 300px；---第二个对角
4个参数 border-radius：100px 200px 300px 200px;--四点分别同时定自身的相同宽高
有斜线 参数 / 参数
2个参数border-radius:100px/200px;---四点分别同时设定宽高
4个参数border-radius:100px 100px/200px 200px;---宽对角，高对角
6个参数border-radius:12px 12px 12px/20px 20px 20px;---第二个对角
8个参数border-radius:1234/1234---四个点分别设定自身的宽高
Border-top-left-radius: 设置左上角的圆角
Border-top-right-radius:设置右上角的圆角
Border-bottom-left-radius:设置左下角的圆角
Border-bottom-right-radius：设置右下角的圆角
圆角的原理:
1.指定角顶点向内部走设定宽度和设定高度（半径）
2.水平和垂直交于一点(圆心)
3.以设定的宽高作为半径画一个椭圆，其和边框相交的部分就是圆角部分
边框图片：----注意此边框的宽度+元素内宽=设定的盒子宽-高同宽！
没有单独设定单个边框的方法—如果边框背景图片旋转，元素内部的边框各个图片也随之旋转
位置属性中的Clip切割只可设定绝对位置absolute进行切割，不管绝对位置定在页面内部任何一个地方，切割方法都一样
Border-image-source： 图片地址
border-image-source:url(border.png);
Border-image-slice: 按照多少宽度切割 元素中间内容是否填充fill
border-image-slice:27 fill; (单位px 不要写)*/
Border-image-width: 元素边框图片的宽度
border-image-width:27px;
Border-image-outset: 设置元素边框图片向外扩展的距离
border-image-outset:0px;
Border-image-repeat： 设置边框图片的填充方式
border-image-repeat:round ;
stretch 拉伸（默认） repeat 重复 round舍去不完整的图片
一行解决
border-image:url(border.png) 27 fill/27px/27px repeat;
三等分(九宫格)
将边框的图片分为9等分，元素也是9分方式,每个位置一一对应
分隔方式：
以实例分析: 如果图片81像素
slice 设置为27 表示将图片9等分 然后放到对应的边框区域
slice 设置为54 从4个角的方向分别向内眼延伸54px距离 对应到边框区域-------注意2 4 6 8 的位置为空白 不会显示图片
slice 设置为81 4个角每个角都存放完整的一个背景图片
fill 值: 正常情况下 图片9分后的5的位置无法在元素中显示，因为5的位置是元素内容的位置，如果设置为fill 即可显示
盒子倒影
Box-reflect: 用于设置盒子的倒影，同时适用于文字(页面主体内部写入文字)和图片(页面主题内部插入图片)等
格式: box-reflect: 位置 距离 遮罩图片
位置: below 下面 above 上面 left 左边 right 右边
距离： 设置倒影和盒子之间的距离,可以不设定
遮罩图片: 可以使用图片，可以使用渐变效果的图片
/*具有渐变效果的倒影*/实验性属性
box-reflect:位置 距离 渐变图片
.gradient{-webkit-box-reflect:below 10px -webkit-linear-gradient(top,transparent 20%,#fff);}
/*文字倒影*/
P{
font-size:40px;
-webkit-box-reflect:below 0 -webkit-linear-gradient(top,transparent 20%,#fff)
}
渐变效果:
Linear-gradient: 线性渐变
格式: linear-gradient(渐变起始位置, 颜色（长度）,颜色（长度）,颜色 长度。。。)
a. linear-gradient(位置, 色,色,色。。。)
background:-webkit-linear-gradient(top,red,blue);
background:-webkit-linear-gradient(top,red,orange,yellow,green,cyan,blue,purple)
位置可以使用角度设置渐变方向 角度单位deg 范围0-360 负数也可以
background:-webkit-linear-gradient(-45deg,orange,purple);
b.linear-gradient(位置, 色 长,色 长,色 长……)
渐变的颜色位置 都是从起始位置开始计算长度，不是按比例计算
background:-webkit-linear-gradient(top,red 50%,green 75%,blue 100% )
重复线性渐变：最后一个颜色的长度决定渐变的次数
background:-webkit-repeating-linear-gradient(top,red,green,red 20%);
Radial-gradient: 径向渐变
格式: radial-gradient(圆心,形状,渐变大小，形状大小,颜色 长度,颜色 长度....)
a. radial -gradient(位置(可以用像素代替位置), 色,色,色。。。)
左、右等位置
background:-webkit-radial-gradient(center center,red,green);
像素代替位置：
background:-webkit-radial-gradient(20PX 70Px,#000,#fff);
b. radial -gradient(位置, 色 长,色 长,色 长……)
background:-webkit-radial-gradient(center center,cyan 25%,red 75%,yellow 100%);
c. radial -gradient(位置(可以用像素代替位置), 形状，色,色,色。。。)
默认的渐变方式是椭圆(如果元素是正方形，将显示圆形渐变)，可以设定为圆形
background:-webkit-radial-gradient(center center,circle,red,green);
d. radial -gradient(位置(可以用像素代替位置), 形状大小，色,色,色。。。)
设定形状-大小时不能同时使用形状设置和大小设置
background:-webkit-radial-gradient(center center,60px 60px,pink,#000);
重复径向渐变：最后一个颜色的长度决定渐变的次数
background:-webkit-repeating-radial-gradient(center center,circle,red,green,red 10%);
一个立体棋子实例
.white{
width:200px;
height:200px;
border-radius:100px;
box-shadow:-5px 5px 15px #000 ;
background:-webkit-radial-gradient(140px 60px,circle,#FFF,#666);
}
盒子阴影
1.简单的盒子阴影---box-shadow: 10px 10px ;
2.有颜色的阴影---box-shadow:10px 10px #abcdef;
3.有颜色的模糊的阴影---box-shadow:10px 10px 10px #ABCDEF；
4.简单的盒子内置阴影---box-shadow:10px 10px inset;
5.有颜色的垂直阴影---box-shadow:0px 0px 10px 10px red;
6. 6的样式等于1的样式
<script>
var six=document.getElementsByClassName('six')[0];
six.onmousedown=function(){-----------------点击鼠标的事件
this.className='4';
}
six.onmouseup=function(){--------------------离开鼠标的样式
this.className='6';
}
</script>
鼠标样式设定
<!DOCTYPE html>
<style>
.cursor{
width:200px;
height:200px;
border:2px solid red;
cursor:help ;
}
</style>
<div class="cursor"></div
盒子模型的设置：
Box-sizing: border-box；（边框盒子）
border-box;边框宽度+padding宽度=设置的整体元素的宽度
.four{width:300px;height:300px;background:#ccc;box-sizing:border-box;border:10px solid red;padding:20px;}
Box-sizing:content-box；（内容盒子）
content-box;默认值---边框宽度、padding宽度不包含在设定整体元素的宽度内
背景属性:
Background: url(./images…) no-rapeat top center，url()……
Background-origin：放置背景图片的起点位置
Background-origin：Border-box；----左上角的边框开始点放
Background-origin：Padding-box；----内补白左上角开始点放
Background-origin：Content-box；----内容左上角开始点放
Backgroun-clip: 设置背景图片的切割方式
Backgroun-clip: Border-box；----从边框开始向元素外部剪切
Backgroun-clip: Padding-box；----从内补白开始向元素外部剪切
Backgroun-clip: Content-box；----从内容开始向元素外部剪切
Backgroun-clip: Text；----使用文字剪切背景图片(实验性质+前缀+透明颜色)
a. 正常添加一张背景图片 background:url(./img/ymd.jpg);
b. 添加背景剪切的属性-webkit-Backgroun-clip: Text；
c. 设置字体为透明色color:transparent;
Background-size： 设置背景图片的大小
background-size:auto 使用原图的实际大小
background-size:cover 使用背景图无缝隙完全遮盖元素
background-size:contain 将背景图片完全缩放到元素可以装下（有可能空白）的大小
分列布局属性:-webkit-
Column-count: 设定指定的列数 值为整数
-webkit-column-count:3;
如果指定列数，那么列宽将根据元素的宽度 自动变化
Column-width： 设定单列的宽度 100px
-webkit-column-width:100px;
如果设定指定的列宽，列的数量根据元素的宽度自动变换
Column-gap: 设定列之间的间距
-webkit-column-gap:3em;
单位3em 需要先设定几列
Column-rule : 设定列之间的分割线（一行解决）
-webkit-column-rule:1px dashed #ccc;
Column-rule-color: 设定列分割线的颜色
Column-rule-style :设定列分割线的风格
Column-rule-width:设定列分割线的宽度
Column-span: 设定元素是否跨列处理
.span h1{
-webkit-column-span:all;
text-align:center;
none 不跨列 all 横跨所有列
Column-break-before: 设定元素是否与前面其他列共存
-webkit-column-break-before:always;
auto 自动处理 always 另起一列书写（新列开始）
column-break-after ：设定元素是否与后面其他列共存
-webkit-column-break-after:always ;
auto 自动处理 always 另起一列书写（新列开始）
媒体查询:
检测设备的属性就是媒体查询，例如设备的宽高，页面的宽高，或者宽高比例甚至颜色显示方式等.
语法格式： @media 媒体查询列表
@media screen and (device-width:800px) and (device-height:600px){
.count{
-webkit-column-count:2;
}
}
/*媒体查询 800*600*/
@media screen and (device-width:800px) and (device-height:600px){
p:nth-child(1){background:red}
}
/*媒体查询 1024*768*/
@media screen and (device-width:1024px) and (device-height:768px){
p:nth-child(2){background:orange}
}
<style>
p{width:500px;height:150px;background:#CCC}
/*范围性的媒体查询*/
@media screen and (max-device-width:1399px){
p:nth-child(1){
background:red
}
}
@media screen and (min-device-width:1400px){
p:nth-child(2){
background:green;
}
}
</style>
<!--电脑屏幕分辨率的范围值判断-->
<div>
<P>width小于1400px 显示红色</P>
<P>width大于等于1400显示绿色</P>
</div>
<!doctype html>
<style>
p:only-child{width:500px;height:150px;background:#CCC}
/*设定元素的指定列数 (元素大小改变时)此时宽度会发生变化*/
.count{
border:3px solid red;
-webkit-column-count:3;
}
@media screen and (max-width:512px){
p:only-child{background:red}
.count{-webkit-column-count:2;}
}
</style>
<div>
<P>随着页面大小的变化 显示不同的颜色</P>
</div>
<hr>
<div class="count">
<style>
p:only-child{width:500px;height:150px;background:#CCC}
/*设定元素的指定列数 (元素大小改变时)此时宽度会发生变化*/
.count{
border:3px solid red;
-webkit-column-count:3;
}
/*水平＞垂直*/
@media screen and (orientation:landscape){
p:only-child{background:green}
}
/*水平＜垂直*/
@media screen and (orientation:portrait){
p:only-child{background:red}
.count{-webkit-column-count:2}
}
</style>
<div>
<P>水平＞垂直 显示绿色 / 水平＜垂直 显示红色</P>
</div
