The way to the font end : css3入门

Now：我开始学习css3了。

transition:动画的过渡

html:
<div class="box"></div>
css: 
.box{
    width: 200px;
    height: 200px;
    background: red;
    transition: 1s;
}
.box:hover{
    width:400px;
    height: 400px;
    background: green;
}

tag-attribute-select：标签属性选择

E[attr] 只使用属性名，但是没有任何属性值
E[attr ="value"] 指定属性名，并且指定了该属性的属性值
E[attr~="value"]指定一个属性名，并且具有属性值；此属性值有一个词列表，列表之前以空格隔开，词列表包含了一个value的词，等号前面的~不能不写！
E[attr^="value"]指定属性名，并且有属性值，属性值是以value为开头的
E[attr$="value"]指定属性名，并且有属性值，属性值是以value为结束的
E[attr*="value"]指定属性名，并且有属性值，属性值中含有value值的

E[attr|="value"]指定属性名，并且有属性值，属性值是以value为开头或者以value-为开头的

css：
p[class]{background: green;}
p[class="jack"]{background:pink;}
p[class~="first"]{background: black;}
p[class^="g"]{background: blue;}
p[class$="m"]{background: yellow;}
p[class*="q"]{font-size: 30px;}
p[class|="a"]{color: red;}
html：
 <p class="jack">你好，你真的好吗？</p>
 <p class="alex">你好，你真的好吗？</p>
 <p class="pony first">你好，你真的好吗？</p> 
 <p class="grose">你好，你真的好吗？</p>        
 <p class="gtony">你好，你真的好吗？</p>        
 <p class="tom">你好，你真的好吗？</p> 
 <p class="tom">你好，你真的好吗？</p>
 <p class="a-q">这是一个测试</p>
 <p class="a-q">这是一个测试</p>                       
 <p class="a">这是一个测试</p>

Structure selector：结构选择器 xx:first-child{} //xx下面的第一个元素 xx:last-child{} //xx下面的最后一个元素 xx:nth-child(n) //xx下面的第n个元素 xx:nth-child(2n) //xx下面的第2n个元素 xx:first-of-type{} //xx下面第一个子节点且节点类型为E

css:
p:first-child{background: pink;}
p:last-child{background: red;}
p:nth-child(2){background: green;}
p:nth-child(2n){background: blue;}
html:
<p>你好，这是一个测试的例子</p>
<p>你好，这是一个测试的例子</p>
<p>你好，这是一个测试的例子</p>
<p>你好，这是一个测试的例子</p>
<p>你好，这是一个测试的例子</p>

文本新增属性： rgba(0,0,0,0.x)：通过最后一个a的属性取值（0-1）来判断颜色的透明度。与opticty区别不同的是，rgba只改变背景颜色的透明度，而opticty也改变字体颜色透明度地址：opticty与rgba的区别

文字阴影：text-shadow:x,y,shadow_degree,color 属性：水平方向的偏移距离，水平方向的偏移距离，偏移的程度(px)，阴影的颜色(color);当然也是可以实现多层阴影的，只需要在后面一直持续写下去就可以了。查看效果：字体阴影

文字描边：-webkit-text-stroke：px color；属性：相当于文字的身上有了一个边框的效果。查看效果：文字描边注意：文字描边属性只在webkit的浏览器上支持

文字的排列方式：direction 从右向左：rtl，从左到右：ltr 注意这里的排列方式相当于浮动中向左或者向右浮动，如果想倒序排列要配合unicode-bidi: bidi-override一起使用查看效果：文字排列方式

超出文本的省略方式：text-overflow: clip/ellipsis 无省略号/ 有省略号这里需要注意的是，如果要使用text-overflow必须配合white-space: nowrap , overflow:hidden 才能正常显示查看演示效果：(文本超出省略方式)[http://js.jirengu.com/sunutewuxu/1/edit]

JackWong992 / article

The way to the font end : css3入门 #6

Now：我开始学习css3了。