CSS學習筆記（1）

時間 2019-12-09

標籤 css 學習筆記欄目 CSS 简体版

原文原文鏈接

CSS 指層疊樣式表 (Cascading Style Sheets)

一、層疊次序

問：當同一個 HTML 元素被不止一個樣式定義時，會使用哪一個樣式呢？

- 內聯樣式（在 HTML 元素內部）

- 內部樣式表（位於 <head> 標籤內部）

- 外部樣式表

- 瀏覽器缺省設置

外部樣式表 使用 <link> 標籤連接到樣式表

<head>

</head>

內部樣式表 當單個文檔須要特殊的樣式時，就應該使用內部樣式表

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

內聯樣式 在相關的標籤內使用樣式（style）屬性

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

多重樣式 涉及到層疊次序

二、能夠經過兩種方法使用 RGB 值：

 
 p { color: rgb(255,0,0); }
 p { color: rgb(100%,0%,0%); }     百分比時，即便當值爲 0 時也要寫百分比符號 

三、CSS 對大小寫不敏感。不過若是涉及到與 HTML 文檔一塊兒工做的話，class 和 id 名稱對大小寫是敏感的。

四、

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

五、派生選擇器

 
  li strong { 
 
    font-style: italic; 
 
    font-weight: normal; 
 
    }          列表中的 strong 元素變爲斜體字，而不是一般的粗體字

六、id 選擇器常常和派生選擇器聯用

 
  #sidebar p { 
 
    font-style: italic; 
 
    text-align: right; 
 
    margin-top: 0.5em;    em表示一個漢字距離 
 
    }

七、類選擇器也可被用做派生選擇器

.fancy td {

color: #f60;

background: #666;

} 表示類名爲 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。

元素下的類選擇器

 
  td.fancy { 
 
    color: green; 
 
    background: #666; 
 
    } 
 
  只有表單中的td元素下使用class="fancy"，纔會出現效果。這個效果被限制於被標註爲 fancy 的表格單元。 
 
  任何其餘被標註爲 fancy 的元素不會受這條規則的影響。

 
  p.no2 { 
 
  background-color: gray; 
 
  padding: 20px; 
 
  } 
 
  <p class="no2">這個段落設置了內邊距。</p>

八、屬性選擇器

①爲帶有 title 屬性的全部元素設置樣式：

 
  [title] 
 
  { 
 
  color:red; 
 
  }

②爲 title="element" 的全部元素設置樣式：

 
  [title=element] 
 
  { 
 
  border:5px solid blue; 
 
  }

③

[title~=hello] {

color:red;

} 選擇 titile 屬性包含單詞 "hello " 的元素設置其樣式

④以 "hi" 開頭的，適用於由連字符分隔的屬性值：

 
  [title|=hi] { 
 
  color:red; 
 
  } 
 
  應用    <span title="hi-hello">連字符分隔的屬性值</span>

⑤設置表單中的屬性樣式

 
  input[type=text]{ 
 
              background-color: yellow; 
 
          }

⑥

a[target]

{

background-color:yellow;

} 爲帶有 target 屬性的 <a> 元素設置樣式：

a[target=_blank]

{

background-color:yellow;

} 爲 target="_blank" 的 <a> 元素設置樣式：

[class^="test"]

{

background:#ffff00;

} 設置 class 屬性值以 "test" 開頭的全部元素的背景色

div[class^="test"]

{

background:#ffff00;

} 設置 class 屬性值以 "test" 開頭的全部 div 元素的背景色

[class$="test"]

{

background:#ffff00;

} 設置 class 屬性值以 "test" 結尾的全部元素的背景色

div[class$="test"]

{

background:#ffff00;

} 設置 class 屬性值以 "test" 結尾的全部 div 元素的背景色

[class*="test"]

{

background:#ffff00;

} 設置 class 屬性值包含 "test" 的全部元素的背景色

 
  div[class*="test"] 
 
  { 
 
  background:#ffff00; 
 
  }          設置 class 屬性值包含 "test" 的全部 div 元素的背景色

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。