有关CSS的学习实践

有关CSS的学习实践

1、页面布局里有以下几种重要标签:

     div            ------------  使用 class , id 进行CSS名称定义；   
     span          -----------   使用 class , id  进行CSS名称定义；
    label           -----------   使用 class , for 进行CSS名称定义，如：<label for="abc">test<input name="abc"  id="abc" type="radio" value="" /></label>；
   
    如：      <div> 此处通用的div标签 </div>
                <div class="classa"> 此处是div的类标签div class="classa"></div>
                <div class="classb"> 此处是div的类标签 </div>
                <div  id="testid"> 此处是ID的标签 id="testid"</div>
                <div  class="classa">此处是ID的标签class="classa" id="testid1"<div  id="testid">此处是ID的标签 id="testid"</div></div>
                <label class="classb"> 此处是div的类标签 </label><br>
                <span class="classa"> 此处是div的类标签 classa </span><br>
                <label class="classb" for="abc"> 此处是div的类标签<input id="abc" type=radio value=1></label>

2、 空格表示下一级控件的引用，类似于类里变量和方法的引用；逗号表示并列的控件引用；

            如：

                 <style type="text/css">
                     <!--
                          #NewbieGuide ul li a span{
                           color:#FF0000;
                              }

                     -->
                  </style>

                  ----------------------------------------------------

                  <div><strong>
                       #NewbieGuide ul li a span  {<br />
                            display:none;<br />
                       }</strong>

                  </div>
                  <div id="NewbieGuide">
                         <ul>
                            <li></li>
                            <li>

                                  <a><span>test</span></a>

                            </li>
                         </ul>
                         <a  href="http://test.topzj.com">test a</a>
                         <span>test</span>
                  </div>

3、逗号表示并列控件的定义，如：

           <style type="text/css">
                       div #MoreSideInfo #ForumContent .GuideHeadLine, div #MoreSideInfo #ActivitiesHeadLine{
                            background:#FF0000;
                        }
            </style>

  -------------------------------------------------------------

            <div>
                     <div id="MoreSideInfo">
                          <div id="ForumContent">
                               <div class="GuideHeadLine">
                                     3-1此处显示新 Div 标签的内容
                               </div>
                               <div id="ActivitiesHeadLine">
                                     3-2此处显示新 Div 标签的内容
                               </div>
                              2此处显示新 Div 标签的内容
                          </div>
                          1此处显示新 Div 标签的内容
                      </div>
                0此处显示新 Div 标签的内容
             </div>
             <br><br>
             <div id="MoreSideInfo">
                  <div id="ForumContent">
                      <div class="GuideHeadLine">
                              此处显示新 Div 标签的内容
                      </div>
                       此处显示新 Div 标签的内容
                  </div>
                       此处显示新 Div 标签的内容
              </div>

 

4、部分引用：

   

          div { background:#0000FF;}// 所有的div

          .classa{ background: #990000;}// class为classa的

          .classb{ background: #99FF00;}// class为classa的

          #testid{ background: #FF0000;}// id为#testid的

          div.classa{ background-color:#FFF000}// div下的classa

          div.classa #testid{ background-color:#00FF00;}// div下的classa中的#testid

      *  <label for="abc">test<input name="abc"  id="abc" type="radio" value="" /></label>// 可以在点击内容就可以直接选择