①顏色名:red,green,blue。
②十六進製制顏色碼:通過乙個以「#」開頭的6位十六進製制數值表示一種顏色。6位數字分為3組,每組兩位,依次表示紅、綠、藍三種顏色的強度。
③rgb顏色函式:rgb或rgb(redas integer ,greenas integer ,blueas integer ),其中red是必要引數;integer型別。數值範圍從 0 到 255,表示顏色的紅色成份,另外兩個引數同理。rgb函式執行成功時返回由指定分量確定的顏色。
④rgba:在rgb函式的基礎上新增引數a(alpha),它的取值範圍是0、1以及0和1之間的所有實數,用來表示不透明度。
選擇器內的屬性
含義舉例
color
文字的顏色
color:red;
font-size
文字的大小
font-size:12px;
font-family
文字的字型
font-family:「微軟雅黑」;
font-style
文字是否傾斜
font-style:nomal;(不傾斜)
font-style:italic;(傾斜)
font-weight
文字是否加粗
font-weight:normal;(設定不加粗)
font-weight:bold;(設定加粗)
line-height
文字的行高
line-height:24px;
(如果要保證文字不重疊,那麼文字行高》=文字大小)
text-decoration
文字的下劃線
text-decoration:none;(將文字的下劃線去掉)
text-indent
文字首行縮排
text-indent:24px;(設定文字首行縮排24px)
text-align
文字水平對其方式
text-align:center;(設定文字水平居中)
text-align:right;(設定文字右對齊)
預設情況左對齊
選擇器內的屬性和值
含義border:#00f 3px solid;
邊框線寬3畫素,藍色,實線
border-top:1px red dotted;
上邊框線寬1畫素,紅色,點線
border-bottom:dashed 2px rgb(0,255,0) ;
下邊框線寬2畫素,綠色,虛線
border-radius: 100px;
乙個角所包含的兩條邊分別有100px的長度彎曲
border-radius:10px 20px 30px 40px;
四個值分別對應左上、右上、右下、左下
border-radius: 10px 50px;
這相當於border-radius: 10px 50px 10px 50px;
box-shadow:-10px -10px 20px 10px red;
陰影在盒模型(div,p,h1,h2,h3,h4,h5,h6等)的外面
分布在在元素的左10px,上10px範圍內
值的含義:x軸偏移、y軸偏移、模糊度、擴散程度、顏色
box-shadow:-10px -10px 20px 10px red insert;
陰影分布在元素的內部
滑鼠懸停在div元素上時,元素顯示出陰影:
執行上述**,頁面顯示為:
當滑鼠懸停在該元素上時,它變成了:
屬性含義
示例background-color/background
背景顏色
background:red;
background-image
背景background-image: url("./comic.jpg");
background-size
背景大小
background-size:50% 100%;
background-position
背景位置
background-position:-52px -29px;
background-repeat
是否重複
background-repeat:no-repeat;
background
屬性組合寫法
示例1(background-size):
comic.jpg的原圖是這樣的:
執行上述**,頁面顯示是:
示例2(background-position):
下面在頁面中僅僅顯示畫中人物的頭像
用畫圖工具開啟comic.jpg
**如下:
執行上述**,頁面顯示為:
示例3(background-repeat):
執行上述**,頁面顯示為;
預設情況下,是重複的,下面設定background-repeat屬性為no-repeat
執行該**,頁面顯示為:
css 背景設定相關
1.背景基準點 預設背景以padding的起始點開始平鋪,在css3裡面可以設定其基準點 background origin 值 取值 padding box 預設值 從padding的初始位置開始 border box 從邊框的初始位置點開始 content box 從內容區域開始 2.背景縮放 ...
css字型設定相關屬性
css字型相關屬性 font family 字型名稱 font size 字型的大小 font style 字形 如斜體 fong variant 字型變化 如大寫 font weight字型粗細 字型演示qw 可以簡寫 font style font variant font weight fon...
HTML和CSS 10 背景設定相關
可以同時設定背景和背景顏色,這樣背景顏色將會成為的背景色 如果背景的小於元素,則背景會自動在元素中平鋪將元素鋪滿 如果背景的大於元素,將會乙個部分背景無法完全顯示 如果背景和元素一樣大,則會直接正常顯示 5.1 background clip 5.2 background origin 背景的偏移量...