css基礎知識

2021-09-25 00:17:05 字數 1867 閱讀 5117

方法一:內部樣式表(巢狀到頁面中)

寫在頭標籤head之間

方法二:內聯樣式(行間樣式,行內樣式,嵌入式樣式)

《標籤 style="屬性:屬性值;屬性:屬性值;">

方法三:外部樣式表

步驟1:外部樣式表的建立

步驟2:外部樣式表的匯入

內聯樣式表的優先順序最高;內部樣式表與外部樣式表的優先順序和書寫順序有關(裡面的先後排列順序),後書寫的優先級別高。
css語法由兩部分組成:選擇符、宣告

選擇符說明:1)每個css樣式由兩部分組成,即選擇符和宣告,宣告又分為屬性和屬性值

2)屬性必須放在花括號中,屬性與屬性值用冒號連線

3)每條宣告用分號結束

4)當乙個屬性有多個屬性值的時候,屬性值與屬性值不分先後順序

5)在書寫樣式過程中,空格、換行等操作不影響屬性展示

選擇符表示要定義樣式的物件,可以是元素本身,也可以是一類元素或者制定名稱的元素。

元素選擇符/型別選擇符(element選擇器)

語法:元素名稱

說明:元素選擇符就是以文件語言物件型別作為選擇符,即使用結構中元素名稱作為選擇符。例如:body、div、p、img、em、strong、span.....所有的頁面元素都可以作為選擇符。

用法:改變某個元素的預設樣式,統一文件某個元素的顯示效果。

id選擇器

語法:#id名

說明:使用id選擇符時應該為每個元素定義乙個id名,id名應為英文名且不能使用關鍵字(所有的標記和屬性都是關鍵字),乙個id名稱只能對應文件中乙個具體的元素物件,因為id只能定義頁面中某乙個唯一的元素物件。最大的用處是建立網頁的外圍結構。

類選擇符(class選擇符)

語法:.class名

說明:使用類選擇符時應為每個元素定義乙個類名稱。class選擇符更適合定義一類樣式。

萬用字元選擇符

語法:*

說明:通配選擇符的含義就是所有元素,常用來重置樣式。

群組選擇符

語法:選擇符1,選擇符2,選擇符3

說明:當有多個選擇符應用相同的樣式時,可以將選擇符用「,」分隔的方式合併為一組。

包含選擇符

語法:選擇符1 選擇符2

說明:選擇符1和選擇符2用空格隔開,含義就是選擇符1中包含所有的選擇符2

偽類選擇符

說明:4個超連結偽類選擇符聯合使用時應該注意順序,正常順序為a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超連結的樣式失效。可以把相同的宣告提出來放在a選擇符中。

字型:

說明:瀏覽器會首先尋找字型1,如果存在就使用該字型來顯示內容,如果字型1不存在,則尋找字型2.......如果字型2也不存在,則按系統預設字型顯示。當字型是中文字型時,需加雙引號;當英文本型中有空格是,需加雙引號;當英文本型只有乙個單詞組成時不加雙引號。如果需要同時設定中文字型和英文本型,應該把英文本型寫在前面。

字型大小:

說明:屬性值為數值時,必須給屬性值加單位,屬性值為0時除外。16px/ppi為標準字型大小預設值1em; 預設情況下,1em=16px,0.75em=12px

字型顏色:

字型粗細:bolder(更粗的)/bold(加粗)/normal(常規)

字型傾斜:oblique的傾斜幅度大於italic

水平對齊方式: justify對內容以兩端邊界線對齊顯示

行高:文字修飾:

首行縮進取負值可實現隱藏文字,懸掛縮排。只對第一行起作用,如果不是第一行文字則沒有變化。

CSS 基礎知識

選擇器 元素選擇器 p 後代選擇器 li a id選擇器 intro some text 類選擇器 dateposted 24 3 2006 偽類選擇器 a link 通用選擇器 浮動 定位 框模型 定位的四種模型 相對定位 relative 相對定位的座標原點 該元素在普通流中的位置 特別點 元素...

CSS基礎知識

css規則有兩個主要的部分組成 選擇器,以及一條或者多條宣告h1 css內部的注釋以 開始,以 結束p id選擇器,通過 來選擇html元素 username class選擇器,通過 來選擇一組class元素.center 指定特定的html元素使用classp center 引入外部樣式表 rel...

css基礎知識

css基礎 id選擇器 用 定義 結合div class選擇器 用.定義 結合div 背景 background color 背景色 background image 背景影象 background repeat 背景重複 background position 位置 background atta...