四種表現形式
屬性屬性值
解釋特殊點
預定義顏色值
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...