CSS基礎知識

2021-10-08 08:04:27 字數 1806 閱讀 3968

行內樣式 內部樣式 外部樣式

①基本選擇器:

標籤選擇器

類選擇器

id選擇器

優先順序:id>類》標籤

②高階選擇器:

層次選擇器

結構偽類選擇器

屬性選擇器

①css背景樣式

background-color:背景顏色

background-image:背景(url背景位址,預設水平垂直都鋪滿背景圖)

background-repeat:背景的平鋪方式(repeat-x、repeat-y、repeat、no-repeat)

background-positon:背景位置(x y)=>(數字[px/%] | 單詞[x:left/center/right],[y:top/center/bottom])

background-attachment:背景圖隨滾動條的移動方式(scroll預設值,背景位置是按當前元素進行偏移的;fixed背景位置是按照瀏覽器進行偏移的)

復合樣式:background:red url() repeat 0 0;(顏色 背景圖 平鋪方式 位置)

②css邊框樣式

border-style:邊框樣式(solid實線、dashed虛線、dotted點線…)

border-width:邊框大小(px)

border-color:邊框顏色

【注】可單獨對乙個邊框進行設定(border-top/right/bottom/left-)

③css文字樣式

font-family:字型型別

設定多字型方式(使其能夠適應更多的計算機和裝置)

引號的問題(有的字型中間有空格,必須用引號引起來)

font-size:字型大小(預設大小16px),字型大小一般為偶數

font-weight:字型粗細(單詞[normal正常、bold加粗]; 數字[100-500正常、600-900加粗])

font-style:字型樣式(normal正常、italic斜體[italic所有帶有傾斜字型的可以設定;oblique沒有傾斜屬性的字型也可以設定傾斜])

color:字型顏色

④css段落樣式

text-decoration:文字修飾(underline下劃線、line-through刪除線、 overline上劃線、none不新增任何修飾),可新增多個修飾,用空格隔開

text-transform:文字大小寫(針對英文段落,lowercase小寫、uppercase大寫、capitalize首字母大寫)

text-indent:文字縮排(首行縮排font-size的兩倍,或2em[em相對單位,永遠跟乙個字型設定的大小相同)

text-align:文字對齊方式(left預設、right、center、justify[兩端點對齊,中間自行調節])

line-height:定義行高(不是固定值,根據當前字型的大小變化,用數字+px或scale[相對於原來字型的比例]表示)

letter-spacing:定義字間距

word-spacing:定義詞間距(針對英文)

強制折行

word-break:break-all; 非常強烈的折行

word-wrap:break-word; 不是那麼強烈的折行

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...