首頁 > 開發者 > CSS

CSS學習心得

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
   
一直以來從事web開發方面的工作，做過很多項目，也做過無數的日常開發，但自己只專註於需求的理解和系統設計方面，而對web頁面的展現很少關注，在遇到頁面問題時，往往都會交給UED部門的同事去處理，長此以往，自己也產生了惰性，不論頁面的問題大小都統統交給他們解決，這樣不僅影響了自己的工作效率，還給UED的同事帶去不少麻煩，正好這幾天工作不是很緊張，在http://www.w3school.com.cn/index.html網站上瀏覽了一些關於CSS的資料，感覺CSS比我想象中的要簡單多啦，再配合firefox強大的外掛程式firebug來調試，一切都變得非常簡單。

插入樣式表的方法有三種：
外部樣式表：

  1. <link rel="stylesheet" type="text/css" href="mystyle.css" />

內部樣式表：

  1. <head>
  2.     <style type="text/css">
  3.       hr {color: sienna}
  4.       p  {margin-left: 20px}
  5.       body {background-image: url("images/back40.gif")}
  6.     </style>
  7. </head>

內聯樣式：

  1. <p style="color: sienna; margin-left: 20px">
  2.      This is a paragraph
  3. </p>

他們的優先順序分別是由低到高，當三種樣式同時存在時，內聯樣式的優先順序最高。
    CSS
文法通常有以下幾種表現形式： 選取器、屬性和值：selector {property:
value}，如果值為若干單詞，則要給值加引號,如：

  1. p { text-align: center; color: black; font-family: arial; }

我們對所有的標題元素進行了分組，如：

  1. h1,h2,h2,h3,h5,h6 { color: green; }

我們也可以通過派生選取器來限定樣式的作用範圍，如：

  1. li strong { font-style: italic; font-weight: normal; }

 
他的作用範圍就是:<strong>標籤被包含在<li>標籤中的時候，樣式才起作用
id 選取器： 用#定義樣式，如：

  1.   #red {color:red;}
  2.   #green {color:green;}

在頁面中作為ID引用

  1.   <p id="red">
  2.      這個段落是紅色。
  3.   </p>
  4.   <p id="green">
  5.      這個段落是綠色。
  6.   </p>

還有諸如一下的幾種形式：

  1.   #sidebar p {
  2.     font-style: italic;
  3.     text-align: right;
  4.     margin-top: 0.5em;
  5.   }
  6.   div#sidebar {
  7.     border: 1px dotted #000;
  8.     padding: 10px;
  9.   }

在 CSS 中，類別選取器以一個點號顯示： .center {text-align: center} 如：

  1.   <h1 class="center">
  2.      This heading will be center-aligned
  3.   </h1>

還可以結合派生器來使用：

  1.   .fancy td {
  2.      color: #f60;
  3.      background: #666;
  4.   }
  5.   td.fancy {
  6.      color: #f60;
  7.      background: #666;
  8.   }

    http://www.w3school.com.cn/index.html網站上有詳細的講解，就當作字典吧，要用到的時候可以去參考一下，哈哈
   
另外還有一個不錯的視頻網站，有時間看看還是不錯的http://www.caopeng.org/

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

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

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