CSS基礎教程筆記

時間 2019-11-10

標籤 css 基礎教程筆記欄目 CSS 简体版

原文原文鏈接

博客主要記錄學習的筆記，若有錯誤，歡迎指出
來源：http://www.w3school.com.cn/css

簡介

CSS概述

CSS 指層疊樣式表 (Cascading Style Sheets)
解決內容與表現分離的問題
多個樣式定義可層疊爲一

層疊次序

通常而言，全部的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。瀏覽器

瀏覽器缺省設置
外部樣式表
內部樣式表（位於 <head> 標籤內部）
內聯樣式（在 HTML 元素內部）

CSS基礎語法

CSS語法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。ide

selector {declaration1; declaration2; ... declarationN }

選擇器一般是您須要改變樣式的 HTML 元素。佈局
每條聲明由一個屬性和一個值組成。學習
屬性（property）是您但願設置的樣式屬性（style attribute）。每一個屬性有一個值。屬性和值被冒號分開。
CSS 語法字體

值的不一樣寫法和單位

除了英文單詞 red，咱們還可使用十六進制的顏色值 #ff0000：url

p { color: #ff0000; }

爲了節約字節，咱們可使用 CSS 的縮寫形式：code

p { color: #f00; }

咱們還能夠經過兩種方法使用 RGB 值：orm

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

請注意，當使用 RGB 百分比時，即便當值爲 0 時也要寫百分比符號。可是在其餘的狀況下就不須要這麼作了。好比說，當尺寸爲 0 像素時，0 以後不須要使用 px 單位，由於 0 就是 0，不管單位是什麼。繼承

引號

若是值爲若干單詞，則要給值加引號：

p {font-family: "sans serif";}

多重聲明

應當在每一個生命後邊加上;，同時每行只寫一個聲明增長可讀性

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

空格和大小寫

增長空格以便美觀
css不會區分大小寫，可是與HTML有關的id class須要大小寫

CSS高級語法

選擇器的分組

被分組的選擇器就能夠分享相同的聲明。
用逗號將須要分組的選擇器分開。
```
h1,h2,h3,h4,h5,h6 {
  color: green;
}
```

繼承及其問題

子元素從父元素繼承屬性。
可是如下屬性不能被繼承（多謝一樓提醒）：
- 邊框屬性
- 邊界屬性
- 補白屬性
- 背景屬性
- 定位屬性
- 佈局屬性
- 元素寬高屬性
子元素將繼承最高級元素（在本例中是 body）所擁有的屬性
有些瀏覽器不支持繼承：IE6，Netscape4
若是不但願子類繼承，則能夠建立一個針對 p 的特殊規則，這樣它就會擺脫父元素的規則

body {
font-family: Verdana, sans-serif;
}

CSS派生選擇器

派生選擇器：經過依據元素在其位置的上下文關係來定義樣式，你可使標記更加簡潔。
就是有兩個選擇器～

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

id選擇器

id 選擇器能夠爲標有特定 id 的 HTML 元素指定特定的樣式。
id 選擇器以 "#" 來定義。
id 屬性只能在每一個 HTML 文檔中出現一次
```
#red {color:red;}
#green {color:green;}
```

id 選擇器和派生選擇器

在現代佈局中，id 選擇器經常用於創建派生選擇器。

#sidebar p {
 font-style: italic;
 text-align: right;
 margin-top: 0.5em;
}

一個選擇器，多種用法

同派生器同樣，能夠對應id下多個選擇

#sidebar p {
 font-style: italic;
 text-align: right;
 margin-top: 0.5em;

}

#sidebar h2 {
 font-size: 1em;
 font-weight: normal;
 font-style: italic;
 margin: 0;
 line-height: 1.5;
 text-align: right;
}

CSS類選擇器

Class選擇器

.center {text-align: center}

類名的第一個字符不能使用數字！它沒法在 Mozilla 或 Firefox 中起做用。

和 id 同樣，class 也可被用做派生選擇器：

.fancy td {
 color: #f60;
 background: #666;
}

元素也能夠基於它們的類而被選擇：

td.fancy {
 color: #f60;
 background: #666;
}

CSS屬性選擇器

能夠爲擁有指定屬性的 HTML 元素設置樣式，而不只限於 class 和 id 屬性。

屬性選擇器

下面的例子爲帶有 title 屬性的全部元素設置樣式：

[title]
{
 color:red;
}

屬性和值選擇器

下面的例子爲 title="W3School" 的全部元素設置樣式：

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

屬性和值選擇器 - 多個值

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

[title~=hello] { color:red; } //全部包含helo的title屬性裏 都有效

參考手冊

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

如何建立CSS

如何插入樣式表

當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文檔。插入樣式表的方法有三種：

外部樣式表

當樣式須要應用於不少頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的狀況下，你能夠經過改變一個文件來改變整個站點的外觀。每一個頁面使用 <link> 標籤連接到樣式表。<link> 標籤在（文檔的）頭部：

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

瀏覽器會從文件 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

.css擴展名，20px中間不能留空格！

內部樣式表

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

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

內聯樣式

因爲要將表現和內容混雜在一塊兒，內聯樣式會損失掉樣式表的許多優點。請慎用這種方法，例如當樣式僅須要在一個元素上應用一次時。

要使用內聯樣式，你須要在相關的標籤內使用樣式（style）屬性。Style 屬性能夠包含任何 CSS 屬性。本例展現如何改變段落的顏色和左外邊距：

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

多重樣式

若是某些屬性在不一樣的樣式表中被一樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。

例如，外部樣式表擁有針對 h3 選擇器的三個屬性：

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
}

而內部樣式表擁有針對 h3 選擇器的兩個屬性：

h3 {
  text-align: right; 
  font-size: 20pt;
}

假如擁有內部樣式表的這個頁面同時與外部樣式表連接，那麼 h3 獲得的樣式是：

color: red; 
text-align: right; 
font-size: 20pt;

即顏色屬性將被繼承於外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內部樣式表中的規則取代。

和繼承很是類似！！

相關標籤/搜索

每日一句

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

CSS基礎教程筆記

簡介

CSS概述

層疊次序

CSS基礎語法

CSS語法

值的不一樣寫法和單位​

引號​

多重聲明

空格和大小寫

CSS高級語法

選擇器的分組

繼承及其問題

CSS派生選擇器

id選擇器

id選擇器

id 選擇器和派生選擇器

一個選擇器，多種用法

CSS類選擇器

Class選擇器

CSS屬性選擇器

屬性選擇器

屬性和值選擇器

屬性和值選擇器 - 多個值

參考手冊

如何建立CSS

如何插入樣式表

外部樣式表

內部樣式表

內聯樣式

多重樣式

值的不一樣寫法和單位

引號