CSS的基本概念———每天一遍小知識

前言

這是我學習了這個網站整理的筆記，接下來還會持續更新。

如果寫的不對的地方請告訴我，謝謝大家。

@TOC

一.為什么要使用CSS？

CSS允許您將特定樣式應用于特定HTML元素。

CSS的主要好處是它使您可以將樣式與內容分開。

僅使用HTML，所有樣式和格式都位于同一位置，隨著頁面的增長，維護變得相當困難。

所有格式都可以（并且應該）從HTML文檔中刪除，并存儲在單獨的CSS文件中。

二.CSS的基本樣式

將==style屬性==（style attribute）添加到==相關標簽==（relevant tag）。

列：

This is an example of inline styling.

在HTML頁面head的

使用此方法，所有樣式規則都包含在單個文本文件中，該文件以.css 擴展名保存。然后使用標記在HTML中引用此CSS文件。元素位于頭部內部。

列：

HTML

CSS

p { color:white; background-color:gray; }

==相對路徑==和==絕對路徑==均可用于定義CSS文件的href。在我們的示例中，路徑是相對的，因為CSS文件與HTML文件位于同一目錄中。

三.CSS Syntax （CSS語法）

樣式規則包含三部分：==選擇器（selector），屬性（property）和值（value）==。

聲明塊包含一個或多個用分號分隔的聲明。 每個聲明都包含一個==屬性名稱==和一個==值==，并用==冒號==分隔。

列：

p { color: red; font-size:130%; }

CSS聲明始終以分號結尾，并且聲明組用花括號括起來。

id選擇器允許您設置具有id屬性的HTML元素的樣式，無論它們在文檔中的位置如何。

列：

HTML

This paragraph is not in the intro section.（此段落不在簡介部分中）

CSS

#intro { color: white; background-color: gray; }

class選擇器:和id主要區別在于，id每頁只能應用一次，而class可以根據需要在頁面上使用多次。

HTML

This is not in the intro section（這不在簡介部分）

The second paragraph is not in the intro section.（第二段不在介紹部分）

CSS

.first {font-size: 200%;}

id用#，class用.

這些選擇器用于選擇作為另一個元素的后代的元素。選擇級別時，可以根據需要選擇任意多個深度。

所得結果，僅影響選定的元素

后代選擇器匹配作為指定元素后代的所有元素。

例如，僅在“intro”部分的第一段中定位元素：

HTML

CSS

#intro .first em { color: pink; background-color:gray; }

四.其他小知識

1.Comments（注釋）

/* Comment goes here（注釋此處） */

2.Cascade(級聯)

CSS指定的樣式是級聯樣式表的縮寫。

形成級聯的樣式信息的三個主要來源是：

瀏覽器的默認樣式

用戶使用樣式

3.Inheritance（繼承）

指屬性在頁面中流動的方式。除非另有定義，否則子元素通常將具有父元素的特征。

This is a text inside the paragraph. （這是段落內的文本。）