前端學習記錄6 CSS 外觀屬性

2021-10-07 18:15:05 字數 2055 閱讀 5636

四種表現形式

屬性屬性值

解釋特殊點

預定義顏色值

red,green,blue,skyblue,gray等等等

最基本的英語表述顏色

十六進製制色彩

#ffffff,#000000

使用取色工具獲取,總共六位取值範圍為十六進製制中0-f的任意值組合排列

當出現重複字元是 例如#cccccc 可表示為#ccc 要注意十六進製制色彩 實質為#(rrggbb) 所以要注意縮寫專案必須是 相同的r 相同的g 相同的b 其他情況 例如#f1f1ff 不可縮寫

rgb色彩

rgb(0,0,0),rgb(255,255,255)

使用取色工具可獲取,三個屬性取值範圍為0-255 也同樣表述為 rgb(r,g,b) 每一位就代表對應的r 對應的g 對應的b

在rgb()中可使用百分比屬性,例如:rgb(100%,95%,5%)此表示方法效果呈現如同使用字元表示 百分比對應的就是此數值*255的結果

rgba色彩(rgba)

rgb(0,0,0,0.0),rgb(255,255,255,1.0)

基本含義與rgb相同 但不同的是在rgb中加入了alpha(透明度)

alpha縮寫為a,取值範圍為0.0-1.0之間的任意值 注意此樣式為css3中的樣式 在ie9版本以下的瀏覽器不相容 會無法呼叫 alpha中的屬性

屬性值說明

left

左對齊(預設值)

center

居中對齊

right

右對齊屬性值

說明px

絕對長度單位 畫素

em相對長度單位

%相對長度單位 百分比

文字的行高在樣式中可具體理解為下面的內容

html標籤

>

我愛你div

>

css樣式

div

此時div標籤中的文字顯示效果為水平垂直居中顯示;

-容器邊界

■line-height的邊距

文字內容

■ line-height的邊距

-容器邊界

line-height樣式中的數值如果大於容器寬度則會向下顯示

-容器邊界

■line-height的邊距

文字內容

-容器邊界 ■ line-height的邊距

小於容器寬度則會向上顯示

-容器邊界	■line-height的邊距

文字內容

■ line-height的邊距

-容器邊界

等於容器寬度則會垂直居中顯示

-容器邊界	

■line-height的邊距

文字內容

■ line-height的邊距

-容器邊界

屬性值

說明數值

具體的數 或者畫素 例如4px

em字元寬度

1em 為兩個字元 也就是乙個漢字

相對瀏覽器視窗寬度百分比 %

可為負數

屬性值說明

none

無裝飾blink

閃爍underline

下劃線line-through

刪除線overline

上劃線

a

通常使用此方法清除鏈結標籤中預設存在的下劃線

對於想要強調的詞語,

例如公司的名稱,或者需要在搜尋引擎中著重強調的詞語

可以使用(斜體標籤)來做

em

同樣使用此方法清除em標籤中預設的斜體樣式

6 CSS 屬性選擇器

對帶有指定屬性的 html 元素設定樣式。可以為擁有指定屬性的 html 元素設定樣式,而不僅限於 class 和 id 屬性。注釋 只有在規定了 doctype 時,ie7 和 ie8 才支援屬性選擇器。在 ie6 及更低的版本中,不支援屬性選擇。屬性選擇器 下面的例子為帶有 title 屬性的所...

6 CSS屬性選擇器

屬性選擇器 利用標籤的屬性對樣式的生效物件進行選擇。我們在基本選擇器中學過class選擇器和id選擇器,它們也是標籤中的屬性,只是因為這兩個使用頻率很高,因此把它們抽離出來作為兩種獨立的選擇器。我們如果想利用其他系統自帶的屬性去選擇樣式的生效物件,那麼就使用屬性選擇器。格式一 基本選擇器 屬性 意義...

前端學習 Css 字型的幾個屬性學習

可選值 normal,預設值,文字正常顯示 italic 文字會以斜體顯示 oblique 文字會以傾斜的效果顯示 大部分瀏覽器都不會對傾斜和斜體做區分,也就是說我們設定italic和oblique它們的效果往往是一樣的 一般我們只會使用italic 可選值 normal,預設值,文字正常顯示 bo...