CSS常用属性及选择器

1、网页布局就是“这块内容显示在左边，那两块内容并排显示，那块内容漂浮在页面上”

2、Div+CSS就是将要布局的内容用<div>切成块，然后使用css描述每个块的大小、位置等。

布局小知识补充：

不要使用<table>进行布局，因为：table可能会在所有tr、td加载完成以后才显示，所以加载完成之前界面是一片空白；用table布局会将布局方式写在html中，违反了“语义性”原则；用table会影响搜索引擎的抓取，不利于SEO。因此Table用来表达真实表格状数据的东西，布局用Div(层)+Css来做,Div用来圈定元素，CSS用来定义元素的位置。

熟悉常用属性与样式

常用属性1

View Code

< head>
    <title ></ title>
    <style type="text/css">
        body
        {
               /*
              background-image:url(images/back_image.GIF);
              background-repeat:no-repeat;//是否重复平铺
              background-position:-200px -200px;//position  距离浏览器上下左右的边距  可以指定数值 也可以使用top center等
              */
               /*background-repeat:repeat-x;*/
               background-image :url(images/back_image.GIF) ;
               background-position :top right;
               background-repeat :no-repeat ;
               /*background:red URL(images/back_image.GIF) no-repeat ;简洁方式*/
        }
        /*input
        {
              background-image:url(images/fragmentbg.jpg);
              background-position-y:-30px;//指定相对y轴
              width:100px;
              height:30px;
              border:0px;
        }*/
        input
        {
               border :solid 1px red ;
               /*//上面的复合标记 省事  solid 1px red;顺序可以不固定的
              border-left-style:dotted;
              border-left-width:2px;
              border-left-color:Red;
              
              border-top-style:dotted;
              border-top-width:2px;
              border-top-color:Green;
              */
              
               /*
              border-style:dotted;
              border-color:Red;
              border-width:1px;
              */
               width :100px ;
        }
        div
        {
               width :100px ;
               height :100px ;
               background-color :Yellow ;
        }
    </style >
</ head>
< body>
    <input type="button" value="" />
    <input type="button" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
  
    <div >style="display:none"设置元素显示隐藏
    如果值为display则隐藏且不占位置  而visible则是元素的属性而不是样式属性 </ div>
    <div > abcdsdf</ div >
</ body>
</ html>

常用属性2

View Code

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head>
    <title ></ title>
    <style type="text/css">
        body
        {
               cursor :url(images/dinosau2.ani)
        }
        /*display设置为block 块级元素 inline则是内敛 内敛前后不会有断行*/
        span
        {
               display :block ;
        }
       
        li
        {
               list-style-type :none ;
        }
        ul
        {
               margin :0px ;
        }
       
        div
        {
               border :solid 1px red ;
               width :100px ;
               height :100px ;
               margin-bottom :10px ;
               padding :20px 0 0 30px ;
        }
    </style >
</ head>
< body>
    div之前 < div> div </div > div之后
   
    <br /> < br /> < br /> <br />
    span之前 < span> span
    </span > span之后
   
    <input type="button" value="pointer" style=" cursor :pointer"/><br />
    <input type="button" value="help" style=" cursor :help"/><br />
     < input type ="button" value ="move" style ="cursor :move"/>< br />
    <input type="button" value="text" style=" cursor :text"/><br />
    <input type="button" value="wait" style=" cursor :wait"/><br />
    <ul >
        < li> 123 </li >
        < li> abc </li >
        < li> 456 </li >
    </ul >
   
    <div style=" background-color :Yellow">ab < p> 放个P </p > c</ div >
    <div style=" background-color :Blue">abc </ div>
    <div style=" background-color :Green">abc </ div>
</ body>
</ html>

类样式：

View Code

< head>
    <title ></ title>
    <style type="text/css">
        *
        {
               background-color :Yellow ;
        }
       
        .highlight
        {
            color :Red ;     
        }
        .bigFont
        {
               font-size :large ;
               font-family :@幼圆 ;
               font-weight :bold ;
               background-color :Green ;
        }
        .bg
        {
               background-color :Yellow ;
        }
       
        input.name
        {
               background-color :Yellow ;
               color :Red ;
        }
        label.name
        {
               font-family :@华文宋体 ;
        }
       
       
        #wrap
        {
               width :100px ;
               height :100px ;
               background-color :Red ;
        }
       
        #d1
        {
               width :200px ;
               height :200px ;
               background-color :Yellow ;
        }
    </style >
</ head>
< body>
    <div class="highlight"> 煮豆燃豆萁 </div >
     < div class ="bigFont">豆在釜中泣 </ div>
      < div class ="bigFont highlight bg">本是同根生 class值可以有多个 使用空格隔开 </ div>
       < div> 相煎何太急 </div >
     
       < label for ="txtName" class ="name">用户名 使用label.name和input.name区别相同class名称 不同html控件具有的属性 </ label>< input class ="name" id ="txtName" type ="text" />
        < div id ="wrap"></div >
        < div id ="d1" class ="bigFont" style ="background-color :Black"> 11爱的方式</ div >
        < div id ="d2">22 </ div>
        < div></ div >
</ body>
</ html>

4、包含选择器

View Code

< head>
    <title ></ title>
    <style type="text/css">
        .span span
        {
               background-color :Yellow ;
               color :Red ;
        }
    </style >
</ head>
< body>
    <p class="span"> asdf <span > ads</ span >asdf </ p>
    <span class="span"> asdf <span > asdf</ span >asdf </ span>
    <div class="span">
        2342 < span> 34 </span >
       
        < p>< span >p中的span    .span span包含选择器 这样意味着具有class="span"的控件中的span内容都具有span样式
        甚至子孙内的span  如果限制为子标签 而孙级不具有的话  需要改为  .span > span</ span></ p >
    </div >
    <div class="span">
        2342 < span> 34 </span >
    </div >
    <div class="span">
        2342 < span> 34 </span >
    </div >
    <span > abc</ span >
    <span > abc</ span >
    <span > abc</ span >
</ body>
</ html>

5、子选择器

View Code

< head>
    <title ></ title>
    <style type="text/css">
        div > span
        {
               background-color :Yellow ;
        }
    </style >
</ head>
< body>
    <div > asdf< span >span111 </ span></ div >
    <div > asdf< span >span111 </ span></ div >
    <div > asdf< span >span111 </ span></ div >
    <div > asdf< span >span111 </ span>
        < p>< span >span2222  因为它是孙子级的 所以被 div > span排除在外 </ span></ p >
    </div >
</ body>
</ html>

6、组合选择器

View Code

< head>
    <title ></ title>
    <style type="text/css">
        h1 ,#d1 , p, span span
        {
               background-color :Yellow ;
        }
    </style >
</ head>
< body>
    <h1 > 标题1</ h1 >
   
    <div id="d1"> 12312312 </div >
    <div > div1</ div >
    <div > div2</ div >
    <p > abcdef</ p >
   
    <span > 123< span >abc  组合选择器  h1,#d1,p,span span 让不同内容显示统一样式 </ span></ span >
</ body>
</ html>

 

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>