W3school的CSS筆記(基礎篇）

sayWhat_sayHello發表於2019-02-12
CSS筆記

建立CSS

外部樣式表

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

內部樣式表

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

內聯樣式

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

層疊次序

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

一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。

  1. 瀏覽器預設設定
  2. 外部樣式表
  3. 內部樣式表（位於 標籤內部）
  4. 內聯樣式（在 HTML 元素內部）

基礎語法

在這裡插入圖片描述
如果值為若干單詞，則要給值加引號
習慣在每條宣告的末尾都加上分號，每個鍵值對一行

小進階

用逗號將需要分組的選擇器分開。下面所有的標題元素都是綠色的。

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

繼承

根據 CSS，子元素從父元素繼承屬性。body下的子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd都是藍色。

body{
            color : blue;
 }

擺脫繼承

建立一個針對 p 的特殊規則，這樣它就會擺脫父元素的規則。

body{
	color : blue;
}

p{
	color: green;
}

派生選擇器

派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。例如樣式為：

li strong{
	color : green;
}

只有符合li後為strong的才為綠色。html為：

<dl>
    <li><strong>1</strong></li>
    <li>2</li>
    <strong>3</strong>
</dl>

這裡1為綠色,2為普通文字，3為加粗文字。

ID選擇器

id 選擇器以 “#” 來定義。

類選擇器

在 CSS 中，類選擇器以一個點號顯示：

屬性選擇器

對帶有指定屬性的 HTML 元素設定樣式。
下面的例子為帶有 title 屬性的所有元素設定樣式：

[title]
{
	color:red;
}

屬性選擇器彙總：

選擇器 描述
[attribute] 用於選取帶有指定屬性的元素。
[attribute=value] 用於選取帶有指定屬性和值的元素。
[attribute~=value] 用於選取屬性值中包含指定詞彙的元素。
[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value] 匹配屬性值以指定值開頭的每個元素。
[attribute$=value] 匹配屬性值以指定值結尾的每個元素。
[attribute*=value] 匹配屬性值中包含指定值的每個元素。

屬性和值選擇器

下面的例子為 title=“W3School” 的所有元素設定樣式：

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

屬性和值選擇器 - 多個值

下面的例子為包含指定值的 title 屬性的所有元素設定樣式。適用於由空格分隔的屬性值：

[title~=hello] { color:red; }

相關文章