首頁 > 開發者 > 網站開發

#2 CSS入門

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   color   使用   os   strong   檔案   問題   html   

CSS: cascading style sheets(層疊樣式表)

css2.0是現在我們教的版本（2013.11月教的）css3.0是最新的版本 推薦一個學習CSS的網站：禪意花園（PS：頂級優秀的網站）   .dtd 文件類型定義:    這個是用來讓一些低級版本的瀏覽器識別最新技術的命令.eg:  IE4.0版本的,如果識別最新的ＨＴＭＬ的代碼，有加上這個（ＨＴＭＬ代碼上面自動產生的這個東西)瀏覽器就會自動到網站下載這個東西.然後就可以識別最新的命令  charset=UTF-8：   寫這個是為了讓國外的人們可以看到中文.和顯示中文,國外的瀏覽器是英文版本的.所以如果沒加這個的話,識別的是英文版本的.就會出現亂碼....  CSS的作用:（面試的時候還可以掰幾句，所以幾下幾個作用還是很用必要的。）1,將內容和格式分離2,極強的控制頁面配置能力3,做體積更小的,下載更快的,更安全網頁4,可以將許多網頁同時更新,更快更容易5,讓不同的瀏覽器顯示相同的介面  說了這麼多CSS的好處，那到底 怎麼用呢？ <head>     <style type="text/css">          選取器,選取器{規則:值;..............}     </style></head>      CSS分類（左邊的內容，右邊是例子）
一,內部樣式表(針對本頁面有效)
1、HTML選取器:
    特點 ,選取器就是HTML元素,好處:簡單..
    不足:用了這個以後的那個HTML元素的效果就回不到原來那樣.
2、class(類)選取器:
    規則:  .xd{.......}    使用:  <元素 class="xd">xxxx</元素>
    優點:想用就用....
3、id選取器
    #xxx{}          <元素 id="xxx">----------------</元素>

和class的區別:  這個只能使用一次,但是不使用一次也沒錯,只是不規範而已
    因為這個是潛規則.就像我們看到別人亂丟垃圾.我們鄙視他.（又不能打他一頓）

 1,HTML選取器
<head>
  <style type="text/css">
      b {color:"red"; font-size:50px}
   </style>
</head>

2,class選取器
<b class="xd">xxxx</b>

3,id選取器
<b id="xxx">  sssssss</b>
<p id="xxx">ssssss</b>
這樣就不好了.因為只能使用一次
二,行內樣式表(針對單獨元素有效)
<p style="規則:值;......">xxxxxxxxxxx</p>


  
三,外部樣式表(針對所有頁面有效)
把那個代碼寫在一個*.css的檔案中
寫進檔案的東西    只有 
b {color:"red"; font-size:50px}
其他的style type="text/css"和其他都不要加,也不能加
使用方法:
<link rel="stylesheet" href="xx.css"/>
 <link rel="stylesheet" href="xx.css"/>
  樣式表的有優先順序別的問題（ 就近原則） 
 類型 size color
外部樣式表 50 green
內部樣式表 60 red
行內樣式表 20 pink
元素     最終   size: 20 , color: pink 優先順序     行內>內部>外部(就近原則)  =--------============================================================  情景選取器:  p  b{ size:12px; }               這個選取器只有在這樣的情況下才有用....               <p><b>xxxxxxxxxxxxxxx</b></p>　　　　<p><a><b>xxxxx</b></a></p>   ( <p>裡面有包含就會起作用)  如果只想<p>下面一級的可以用，但是下面兩級或多級的不能用怎麼辦？其實只要加上一個   >  這個符號就可以了 p>b{ size:12px; } 同理:     p  .xd{}          <p> <b class="xd"></b></p>------------------------------------------------------------     .xd  .xxd{}          <p class="xd"><b class="xxd"></b></p>------------------------------------------------------------     #xd  .xdx{}          <p id="xd"><b class="xdx"></b></p>        

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More