css3总结笔记_html/css_WEB-ITnose

属性选择器

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-”开头的值（比如说zh-cn）
实例：百度文库;

 p{height:30px; line-height:30px; font-size:12px;border:1px solid #000;}p a{background:url(img/w.gif) no-repeat 3px center;padding-left:20px; display:block;}p a[href*=text]{ background-image:url(img/text.gif);}p a[href*=pdf]{ background-image:url(img/swf.gif);}p a[href*=exl]{ background-image:url(img/x.gif);}   
    测试文字
    测试文字
    测试文字
    测试文字
 

备注：IE7及以上支持;

结构性伪类

E:nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/匹配奇数行/
p:nth-child(even){background:red}/匹配偶数行/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

实例：新浪头部导航

 .list{margin:0;padding:0; list-style:none;}.list li{width:150px;border-right:1px solid #000;float:left;}.list li:last-of-type{border:none;}.list a{float:left;width:40px;margin:0 5px; font:12px/30px "宋体"; text-align:center;}.list li a:nth-of-type(3n+1){ font-weight:bold;}.list li:nth-child(3) a:nth-child(2){ color:red;}                 测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字                  测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字                  测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字                  测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字                  测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字                 测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字                  测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字        测试文字       

其它伪类

E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配
E~F表示E元素毗邻的F元素
Content 属性

css3绘制叉号

a{ display: inline-block; width: 20px;height:5px; background: red;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg) }    a:after{content:'/';display:block;width: 20px;height:5px; background: red;-webkit-transform: rotate(-90deg);} 

文字

文字阴影

text-shadow：x y blur color, …
参数
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影如果加很多层，会很卡很卡很卡

文字阴影应用

最简单用法

text-shadow:2px 2px 4px black 

阴影叠加

text-shadow:2px 2px 0px red, 2px 2px 4px green; 

先渲染后面的，再渲染前面的
几个好玩的例子

//层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;//光晕：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;//火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white; 

文字描边

webkit-text-stroke:宽度 颜色

新增文本功能

Direction 定义文字排列方式(全兼容)
Rtl 从右向左排列
Ltr 从左到右
注意要配合unicode-bidi 一块使用

p{width:300px;border:1px solid #000;font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;unicode-bidi: bidi-override} 

Text-overflow 定义省略文本的处理方式
clip 无省略号
Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)

p{width:300px;border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 

自定义文字

代码格式

@font-face {    font-family: 'miaov';    src: url('1-webfont.eot');    src: url('1-webfont.eot?#iefix') format('embedded-opentype'),         url('1-webfont.woff') format('woff'),         url('1-webfont.ttf') format('truetype'),         url('1-webfont.svg#untitledregular') format('svg');    font-weight: normal;    font-style: normal;} 

转换字体格式生成兼容代码http://HdhCmsTestfontsquirrel测试数据/fontface/generator

弹性布局

弹性盒模型

 .box{height:100px;padding:10px; display:-webkit-box; display: -moz-box;}.box div{width:100px;height:100px;background:red;border:1px solid #fff;}   
    
1

      
查看更多关于css3总结笔记_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114473