新人筆記5,css基礎屬性。

2021-10-23 20:32:02 字數 2209 閱讀 4392

rgb(red greed bule)(0,10,256)

#0010ff

css中顏色的表示方法

(1) 預定義顏色:bule ,red,black。。。

(2) 十六進製制顏色:#0f0f0f

(3) rgb顏色(128,0,0)全紅

(4) rgba,在rgb的基礎上又新增了表示透明度的alpha

(5) hsl:用色調,飽和度,和透明度三個分量來表示顏色

(6) hsla:在hsl的基礎上又新增了表示透明度的alpha

**實現:

"color: blue;"

>預定義顏色

"color: rgb(0,255,0);"

>rgb顏色

"color: #ff0000;"

>16進製制顏色

background-color:背景顏色

background-image:背景

background-repeat:複製選項(repeat在水平,垂直兩個方向複製)

(repeat-x/y 在水平/垂直方向進行複製)

(no-repeat 不複製)

background-position:所在位置 上top 下bottom 左left 右right

簡寫:將所有元素放在一起

有順序要求:背景顏色->背景->重複方式->所在位置

>背景顏色

"div2"

>背景不重複

"div3"

>背景橫向(縱向重複)

"div4"

>簡寫方式

(1)固定高度與寬度(height:200px)

(2)自適應高度(高度會根據內容的增加而增加)

(3)指定最大高度max-height(內容增加到指定高度的時候就不會再增加)

(4)指定最小高度min-height(開始時高度固定,內容增加到一定地步時開始增加高度)

<

!doctype html>

"utf-8"

>

尺寸有關

"div1"

>固定高度和寬度

"div2"

>自適應高度和寬度

asdkjaksdjkasjkd

hadsjhdahsd

<

!--高度有內容撐起,內容越多高度越大-->

"div3"

>可以指定最大高度

"div4"

>可以指定最小高度

(1)visibility:hidden 僅僅隱藏內容,該元素所佔位置依然存在

(2)display:none 不僅隱藏內容,而且隱藏位置

display:inline 將塊級元素以內聯元素形式顯示,此時寬,高等屬性對其無效

display:inline-block 將塊級元素以內聯元素形式顯示並且具有塊級元素的特徵,寬,高屬性依然有效

display:block 將內聯元素以塊級元素的形式展現

"box"

>

"div1"

>web1班

"div2"

>我們最棒

"div3"

>我是盒子3

"div4"

>

"div4"

>

王牌飛行員申請出戰

2234

1234

CSS筆記5 CSS樣式

div塊級元素 作用 包圍 換行 span內聯元素 作用 包圍 不換行 font font size 字型大小 font family 字型 如果字型商用,一定要注意版權問題 font style 字型風格 italic oblique斜體 normal預設 font weight 粗細 bord粗...

5 css中的border屬性

zh child 複製 border 簡寫屬性在乙個宣告設定所有的邊框屬性。border 1px solid 000 可拆分為border width 1px 寬度border style solid 樣式 實線 border color 000 顏色 可以看到,寬度 顏色 樣式這個三個屬性的屬性值...

HTML學習筆記 5 CSS

1.css指層疊樣式表 cascading style sheet 用以定義html元素的樣式。css規則由兩個主要部分構成 選擇器和一條或多條宣告。即 selector 注1 可以對選擇器進行分組,這樣被分組的選擇器可以共享宣告。注2 子元素繼承父元素的所有宣告的屬性。但是若子元素需要特殊的宣告,...