CSS基礎知識及使用方法是什么

這篇文章主要介紹“CSS基礎知識及使用方法是什么”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS基礎知識及使用方法是什么”文章能幫助大家解決問題。

　　CSS介紹

　　CSS（Cascading Style Sheet，層疊樣式表）定義如何顯示HTML元素。

　　當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。

　　每個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之后用分號結束。

　　注釋是代碼之母。--摘自哪吒語錄

　　行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。

　　嵌入式是將CSS樣式集中寫在網頁的標簽對的標簽對中。格式如下：

　　外部樣式就是將css寫在一個單獨的文件中，然后在頁面進行引入即可。推薦使用此方式。

　　注意：

　　樣式類名不要用數字開頭（有的瀏覽器不認）。

　　標簽中的class屬性如果有多個，要用空格分隔。

　　通用即代表所有

　　解析：第一個div 后面的div包括嵌套的標簽都會被渲染

　　div div {color: deeppink}

　　不怎么常用的屬性選擇器

　　當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。

　　例如：

　　上面的代碼為div標簽和p標簽統一設置字體為紅色。

　　通常，我們會分兩行來寫，更清晰：

　　多種選擇器可以混合起來使用，比如：。c1類內部所有p標簽設置字體顏色為紅色。

　　--關于標簽嵌套：通常塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。

　　常用的給首字母設置特殊樣式：

　　before和after多用于清除浮動。

　　繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的后代。例如一個body定義了的字體顏色值也會應用到段落的文本中。

　　此時頁面上所有標簽都會繼承body的字體顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。

　　我們只要給對應的標簽設置字體顏色就可覆蓋掉它繼承的樣式。

　　此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

　　我們上面學了很多的選擇器，也就是說在一個HTML頁面中有很多種方式找到一個元素并且為其設置樣式，那瀏覽器根據什么來決定應該應用哪個樣式呢？

　　其實是按照不同選擇器的權重來決定的，具體的選擇器權重計算方式如下圖：

　　除此之外還可以通過添加 !important方式來強制讓樣式生效，但并不推薦使用。因為如果過多的使用！important會使樣式文件混亂不易維護。

　　萬不得已可以使用！important

　　width屬性可以為元素設置寬度。

　　height屬性可以為元素設置高度。

　　塊級標簽才能設置寬度，內聯標簽的寬度由內容來決定。

　　font-family可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。

　　簡單實例：

　　如果設置成inherit表示繼承父元素的字體大小值。

　　font-weight用來設置字體的字重（粗細）。

　　值

　　描述

　　normal

　　默認值，標準粗細

　　bold

　　粗體

　　bolder

　　更粗

　　lighter

　　更細

　　100——900

　　設置具體粗細，400等同于normal，而700等同于bold

　　inherit

　　繼承父元素字體的粗細值

　　顏色屬性被用來設置文字的顏色。

　　顏色是通過CSS最經常的指定：

　　十六進制值 - 如： ＃FF0000

　　一個RGB值 - 如： RGB（255,0,0）

　　顏色的名稱 - 如：  red

　　還有rgba（255,0,0,0.3），第四個值為alpha, 指定了色彩的透明度/不透明度，它的范圍為0.0到1.0之間。

關于“CSS基礎知識及使用方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。