大漠駝鈴

          置身浩瀚的沙漠,方向最為重要,希望此blog能向大漠駝鈴一樣,給我方向和指引。
          Java,Php,Shell,Python,服務器運維,大數據,SEO, 網站開發、運維,云服務技術支持,IM服務供應商, FreeSwitch搭建,技術支持等. 技術討論QQ群:428622099
          隨筆 - 238, 文章 - 3, 評論 - 117, 引用 - 0
          數據加載中……

          CSS 學習之一 選擇符

          選擇符就是一系列的模式,只要頁面上有完全匹配這個模式的元素存在,樣式就會自動應用到該元素上。比如P,h1等就是一個簡單的元素。

          Css語法:
          一個簡單的選擇符包含一個通用的選擇符或是一個類型選擇符,它的后面跟有0個或者多個id選擇符、屬性選擇符或者偽類,三者順序可以任意。

          一個選擇符可以由一個或者多個簡單的選擇符構成,中間用連接符相隔。

          連接符可以是(空白,大于號> 加號+)

          基本的選擇符:

          1 通用的選擇符
          *{
          background-color
          :red;
          }

          * .title
          {
          border
          :1px solid;
          }

          .title
          {

          border
          :1px solid;
          }
          類型選擇符:(一般為html元素的名稱)
          h1{
          font-size
          :9em;
          color
          :#999FFF;
          }

          p
          {
          margin
          :0;
          border
          :2px solid;
          }
          組選擇:

          h1{
          font-size
          :10px;
          color
          :#999;
          }

          h2
          {
          font-size
          :10px;
          color
          :#999;
          }

          p#title
          {
          font-size
          :10px;
          color
          :#999;
          }

          #hutitle
          {
          font-size
          :10px;
          color
          :#999;
          }

          上面的可以用以下組選擇符來代替(中間用(,)來區分)

          h1,h2,p#title,#hutitle
          {
          font-size
          :10px;
          color
          :#999;
          }

          id(#) 和 class(.) 選擇符

          1 id 選擇符
          id 是唯一的,可以唯一的標識一個元素。
          <h1 id="h1Title">開學通知</h1>
          <id="pContent">請同學們先到教務處來報道</p>
          <h1 id="h2Title">開課通知</h1>
          <id="p2Content">好好學習Css</h2>

          h1#h1title{
          color
          :white;
          background-color
          :silver;
          }
          p#pContent
          {
          color
          :yellor;
          background-color
          :maroon;
          }



          只改變特定的元素。

          class 選擇符

          class屬性不要求唯一而id屬性要求唯一,多個元素可以共享一個class的值,而且多個元素可以設置多個class的值.

          <h1 id="h1Title" class="h1Title">開學通知</h1>
          <id="pContent" class="pContent">請同學們先到教務處來報道</p>
          <h1 id="h2Title" class="h2Title">開課通知</h1>
          <id="p2Content" class="pContent">好好學習Css</h2>
          <p >每天學習一章節,早點把css學會</h2>

          h1.h1Title{
          color
          :white;
          background-color
          :silver;
          }
          p.pContent
          {
          color
          :yellor;
          background-color
          :maroon;
          }

          h1.h2Title
          {
          color
          :red;
          }




          多重class
          id 屬性是唯一的,class屬性是多對多的關系,同一個class也可賦給多個元素,一個html可以有多個相同的class。
          <href="class1 class2" href="/">鏈接</a>

          a.class1{
          font-size
          :12px;
          }
          a.class2
          {
          color
          :red;
          }

          上面這種css會對所有屬于class1或者class2的a元素進行作用,而如果只對同時對class1 class2的a元素有作用只能是下面的方式
          a.class1.class2{
          color
          :red;
          }
          或者

          a.class2.class1
          {
          color
          :red;
          }

          是選擇class還是選擇id?

          如果是給任意數量、任意類型的元素指定class屬性,而一個id屬性值只能賦值給唯一的元素。




          posted on 2010-03-10 17:23 草原上的駱駝 閱讀(244) 評論(0)  編輯  收藏 所屬分類: CSS

          主站蜘蛛池模板: 手机| 抚松县| 青州市| 油尖旺区| 泾川县| 汉阴县| 忻州市| 葵青区| 周口市| 固原市| 北安市| 保康县| 红桥区| 靖宇县| 连江县| 永顺县| 湘阴县| 巫溪县| 岳阳市| 灌阳县| 祁阳县| 九龙县| 米易县| 自治县| 札达县| 新津县| 胶州市| 兖州市| 西峡县| 锡林浩特市| 太原市| 页游| 溆浦县| 永泰县| 榆林市| 慈利县| 宕昌县| 涡阳县| 越西县| 天镇县| 高淳县|