CSS学习

1.CSS禅意花园

http://www.csszengarden.com/tr/chinese/

PDF下载
http://pan.baidu.com/share/link?shareid=97728&uk=2198011810

经典作品

http://www.mezzoblue.com/zengarden/book/links/

全部作品
http://www.mezzoblue.com/zengarden/alldesigns/

继承
#id >p + p{
color:red;
}
#id >p + p +p{
color:inherit;
}
=================
<div id="menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">博客</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">设计</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">相册</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">论坛</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">关于</a></li>
  </ul>
</div>
        
#menu {padding:20px 20px 0 0}
#menu ul {float:right;list-style:none;margin:0px;}
#menu ul li {float:left;display:block;line-height:30px;margin:0 10px}
#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}
.menuDiv {width:1px;height:28px;background:#999}
=================
链接无下划线
.a
{
text-decoration:none;
}

#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}
=================
遮挡图片
<span class="selected">aaa</span>
<div id="contain">
<div class="picture">
<ul>
<li>aaaaa</li>
<li>bbbbb</li>
</ul>
</div>
<input contentEditable="false" value="uneditable"/>
<div contentEditable>pppppppp</div>
<p>Can't see it!</p>
</div>

#contain{
height:600px;
width:600px;
}

#contain:hover p{
vertical-align: middle;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,0.75);
transition: background .2s linear, color .2s linear;
position: absolute;
width: 600px;
height: 600px;
top: 0;
margin: 0;
padding: 0;
line-height: 600px;
}
=================
box-shadow
<input class="shadow" value="boxshadow"/>

.shadow:hover{
box-shadow: 0px 0px 3px rgb(255, 153, 51);
border-color: rgb(255, 153, 51);
}
=================
上传文件
其中的multiple属性在IE中无效
<div class="upload">
<input id="files" type="file" style="200px;height:18px;" multiple="multiple"/>
<span>Select Files</span>
</div>
得到值: $('#files').val()
不能给其赋值
$('#files').click() 

.upload{
border-width: 1px 1px 1px 1px;
border-style:solid; 
border-radius:4px;
cursor:pointer;
border-color: rgb(166, 175, 190);
background-color: rgb(243, 243, 244);
position: relative;
text-align: center;
text-decoration: none;
vertical-align: middle;
visibility: visible;
width:200px;
}

.upload input{
top: 0px;
right: 0px;
position: absolute;
font: 200px monospace !important;
z-index: 1;
opacity: 0;
cursor: pointer;
}
=================
抠图颜色变化

<div id="contain">
<div class="picture"></div>
</div>


#contain{
height:600px;
width:600px;
}

.picture{
background-color:transparent;
background-image:url("1.png") ;
height:100%;
width: 100%;
overflow:hidden;
line-height: 15px;
overflow: hidden;
visibility: visible;
-moz-font-feature-settings: normal;
-moz-font-language-override: normal;
background-color:rgb(10, 122, 194);
}
=================
首行缩进
border-collapse:collapse
=================
按钮选中变色
.selected
{
padding:1px 3px 1px 2px;
border-width: 1px 1px 1px 1px;
border-style:solid; 
border-radius:4px;
cursor:pointer;
border-color: rgb(166, 175, 190);
background-color: rgb(166, 175, 190);
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px rgba(0,0,0,0.05);
}

.selected:hover {
color: rgb(38, 50, 72);
background-color:rgb(10, 122, 194);
  border-color:#0a7ac2;
}

=================
border-radius

<span class="selected">aaa</span>

.selected
{
padding:1px 3px 1px 2px;
border-width: 1px 1px 1px 1px;
border-style:solid; 
border-radius:4px;
cursor:pointer;
background-color:rgb(10, 122, 194);
border-color:#0a7ac2;
}
=================
 text-decoration
 
.configuration a:hover {
                    text-decoration: none;
                }

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}

=================
contentEditable
Html中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素设置为可写。
我们最常用的输入文本内容便是input与textarea 　使用contentEditable属性后，可以在div,table,p,span,body,等等很多元素中输入内容．
如果想要整个网页可编辑，请在body标签内设置contentEditable

 <div contentEditable id="topEditor">
                    <h2>
                        Comprehensive <br />HTML5/JavaScript framework <br />
                        for modern web and mobile app development
                    </h2>
</div>

IE中都有效，但chrome,firefox中input的contentEditable无效
=================
#cap {
                float: left;
                width: 242px;
                height: 225px;
                margin: 20px 30px 30px 0;
                background-image: url('../../content/web/dropdownlist/cap.png');
                background-repeat: no-repeat;
                background-color: transparent;
            }
            .black-cap {
                background-position: 0 0;
            }
            .grey-cap {
                background-position: 0 -225px;
            }
            .orange-cap {
                background-position: 0 -450px;
            }
            

function onChange() {
     var value = $("#color").val();
     $("#cap")
         .toggleClass("black-cap", value == 1)
         .toggleClass("orange-cap", value == 2)
         .toggleClass("grey-cap", value == 3);
 };

=================
Text-Transform

 <div class="demo-section">
                <h2>Products</h2>
                <input id="products" style=" 250px" />
            </div>


.demo-section h2 {
                    Text-Transform: Uppercase;
                    font-size: 1.2em;
                    margin-bottom: 10px;
                }
=================