CSS筆記之樣式

2022-09-11 14:15:34 字數 3573 閱讀 7550

總結一下css樣式,做如下的筆記。

css樣式

1.背景

background-color 背景色

可以接受任何合法的顏色值,其預設值是 transparent(透明)

background-image 背景影象

如body ,預設值是 none

background-repeat 背景重複

repeat-x(x軸方向)、repeat-y(y軸方向)、no-repeat(不平鋪)

background-position 背景定位

可以接受關鍵字(top、bottom、left、right 和 center),接受長度(100px 或 5cm),可以接受百分比(50%)

background-attachment 背景關聯

可以接受值:fixed 估計背景,使得不隨頁面進行滾動,預設值為 scroll,是指隨著頁面進行滾動

2.文字

text-indent 縮排文字

可以接受長度,百分比 且可以被繼承,子標籤可以繼承父標籤的該屬性。

text-align 水平對齊

可以接受關鍵字 left、right、center、justify、nherit 其中left是預設屬性

text-align:center與center標籤的區別,其中center標籤不僅影響文字,還會把整個元素全部居中,而text-align:center只會影響文字。

word-spacing 字間隔

改變字(單詞)之間的標準間隔,其預設值normal 與設定值為 0 是一樣的。

可以接受乙個正長度值(間隔增加)或乙個負長度值(拉近距離)。

letter-spacing 字母間隔

可以接受任何長度值,與word-spacing的區別在於,字母間隔修改的是字元或字母之間的間隔,同樣預設值normal與設定為0是一樣的

text-transform 字元轉換

接受的關鍵字為 none、uppercase、lowercase、capitalize,其中none是不做改動,capitalize只對每個單詞的首字母大寫

text-decoration 文字裝飾

接受的關鍵字為none、underline、overline、line-through、blink(會讓文字閃爍,不常用)

white-space 處理空白符

可以接受下面的關鍵字

3.字型

font-family 定義文字的字型系列

有兩種不同型別的字型系列 1.通用字型(擁有相似外觀的字型系列) 2.特定字型(具體的字型),其中通用字型定義了5中型別(serif 字型、sans-serif 字型、monospace 字型、cursive 字型、fantasy 字型)

font-style 字型風格

可以接受3個值(normal - 文字正常顯示、italic - 文字斜體顯示、oblique - 文字傾斜顯示)

font-variant 設定小型大寫字母(採用不同大小的大寫字母)

可以接受3個值 1.normal(預設值)、2.small-caps(顯示小型大寫字母)3.inherit(使用父元素的font-variant)

font-weight 字型加粗

可以接受1.normal(預設值,相當於400)2.bold(相當於700)3.bolder(定義更粗的字元。)4.lighter(定義更細的字元)5.100~900(定義由粗到細的字元)6.inherit(繼承父元素的屬性)

font-size 字型大小

font-size值可以是絕對或相對值

可以通過畫素來設定字型的大小

通過畫素設定文字大小,可以對文字大小進行完全控制(在ie中,使用該方法會有問題)

使用 em 來設定字型大小

1em 等於當前的字型尺寸。如果乙個元素的 font-size 為 16 畫素,那麼對於該元素,1em 就等於 16 畫素。在設定字型大小時,em 的值會相對于父元素的字型大小改變。

4.鏈結

鏈結有如下4種狀態,其中需要注意的是a:hover 必須位於 a:link 和 a:visited 之後;a:active 必須位於 a:hover 之後

a:link - 普通的、未被訪問的鏈結

a:visited - 使用者已訪問的鏈結

a:hover - 滑鼠指標位於鏈結的上方

a:active - 鏈結被點選的時刻

鏈結,主要從text-decoration(文字修飾)、background-color(背景色)、color(顏色)、font(字型)等方面進行樣式設定

5.**

border-collapse 為**設定合併邊框模型 接受如下的值

border-spacing 屬性設定相鄰單元格的邊框間的距離(僅用於「邊框分離」模式),接受如下的值

caption-side 設定**標題的位置 可以接受如下的值

empty-cells 設定是否顯示**中的空單元格 可以接受如下的值

table-layout 顯示**單元格、行、列的演算法規則 可以接受如下的值

6.列表

list-style 簡寫屬性,把所有的列表屬性都放在一起。

list-style-image 將圖象設定為列表項標誌

可以接受值 url(影象的路徑)、none(預設值)、inherit(從父元素繼承)

list-style-position 設定列表中列表項標誌的位置

可以接受值 inside、outside(預設值)、inherit(繼承父元素) 其中inside表示為列表專案標記放置在文字以內,且環繞文字根據標記對齊

list-style-type 設定列表項標誌的型別 可以接受disc(預設 實心圓)、circle(空心圓)、none(無標識)等。

7.輪廓

outline 在乙個宣告中設定所有的輪廓屬性

可以接受如下的值 outline-color(邊框的顏色)、outline-style(邊框的樣式)、outline-width(邊框的寬度)、inherit(繼承父元素)

outline-color 輪廓的顏色

可以接受各種顏色屬性

outline-style 輪廓的樣式 可以接受如下的值

outline-width 輪廓的寬度

可以接受的值 thin(細輪廓)、medium(預設,中等的輪廓)、thick(粗的輪廓)、length(規定輪廓粗細的值)、inherit(繼承父類)

css樣式筆記

css 部分 使用border屬性可以在css中設定 邊框。border 1px solid black 1px指的是 邊框線粗細程度,solid指的是邊框樣式,solid是固體實線,black指的是邊框線的顏色。例子 firstname lastname bill gates steven job...

css筆記之引入css樣式表

css cascading style sheets css通常稱為css樣式表或層疊樣式表 級聯樣式表 主要用於設定html頁面中的文字內容 字型 大小 對齊方式等 的外形 寬高 邊框樣式 邊距等 以及版面的布局等外觀顯示樣式。css以html為基礎,提供了豐富的功能,如字型 顏色 背景的控制及整...

CSS樣式小筆記

樣式 偏斜體 italic 斜體 normal 正常 行高 正常 單位 px pd em 粗細 粗體 lighter 細體 normal 正常 變體 小型大寫字母 normal 正常 大小寫 首字母大寫 uppercase 大寫 lowercase 小寫 none 無 修飾 下劃線 overline...