閱讀329 返回首頁    go 京東網上商城

css 概述

CSS，cascading style sheet，級聯樣式表，用於指定網頁外觀。

外部樣式表

#mystyle.css
Selector{
property1：value1；
property2：value2；
}

HTML頁麵中的引用語句為
<head><link type="text/css" rel="stylesheet"  href="mystyle.css"></head>。

內部樣式表

當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表，就像這樣:

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

內聯樣式

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

<p >
This is a paragraph
</p>

屬性選擇器：

ID選擇器：對具有指定id的HTML元素起作用。選擇器名以’#’開頭。使用方式為<div ></div>
class選擇器：對具有指class的HTML元素起作用。選擇器名以’.’開頭。使用方式為<div ></div>

id選擇器與class選擇器的區別：

同一頁麵的不同標簽不可以使用同一個id。
一個標簽內不能使用多個id。
例如<div ></div><div ></div>非法。因為js裏獲取DOM是通過getElementById，而如果頁麵出現同一個id幾次，這樣就獲取不到了。

繼承

子元素繼承父元素的css屬性。如果把一個樣式加到<body>上，那麼頁麵所有標簽都繼承<body>的樣式。如果某個子標簽不想繼承，可以為子標簽設置它自己的樣式，在此範圍內父級樣式不再生效。

選擇器的分組

你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下麵的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
h1,h2,h3,h4,h5,h6 {
  color: green;
  }

選擇器的派生

通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。
比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：
li strong {
    font-style: italic;
    font-weight: normal;
  }
  那麼效果是
  <p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p>
<ol>
<li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li>
<li>我是正常的字體。</li>
</ol>

id、class 都可被用作派生選擇器。

選擇器的組合

在 HTML 中，一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的元素同時標記為重要（important）和警告（warning），就可以寫作：
<p >
This paragraph is a very important warning.
</p>

這兩個詞的順序無關緊要，寫成 warning important 也可以。
我們假設 class 為 important 的所有元素都是粗體，而 class 為 warning 的所有元素為斜體，class 中同時包含 important 和 warning 的所有元素還有一個銀色的背景 。就可以寫作：
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}/*注意兩個類選擇器沒有空格*/

子元素選擇器

如果您不希望選擇任意的後代元素，而是希望縮小範圍，隻選擇某個元素的子元素，請使用子元素選擇器（Child selector）。
例如，如果您希望選擇隻作為 h1 元素子元素的 strong 元素，可以這樣寫：
h1 > strong {color:red;}
這個規則會把第一個 h1 下麵的兩個 strong 元素變為紅色，但是第二個 h1 中的 strong 不受影響：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>


最後更新：2017-04-03 05:40:14

  上一篇：go js 概述
  下一篇：go 常見計算框架算子層對比