css相關設定

2021-08-29 18:21:18 字數 3402 閱讀 8837

①顏色名: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 背景的偏移量...