在我們的程式設計過程中,經常不光會使用到設定字型樣式,還會用到設定背景顏色,背景等樣式,今天我們就來學習一下關於背景的樣式設定
1.背景顏色:background-color: 顏色這個屬性我們為我們的標籤設定背景顏色,其中我們有三種屬性值的書寫方式:1. 預定義的顏色表示(red,blue,green,black…) 2.十六進製制表示(#ff0000) 3.rgb**表示：rgb(0,0,0)而在我們實際開發中最常用用的還是十六進製制表示的顏色表示
>
div.div1
.div2
.div3
style
>
background:rgba(0,0,0,3)a表示alpha透明度,取值0-1之間,習慣把0.3的0省略掉
>
.div3
style
>
background-image:可以為我們的標籤設定背景 屬性值有:none( 沒有背景)/url(的路徑)
>
divstyle
>
background-repet:引數值:1.repeat背景影象在縱向和橫向上平鋪的,預設的 2.no-repeat 不平鋪 3.repeat-x 橫向平鋪 4.repeat-y 縱向平鋪
5.背景的位置:background-position: x,y可以改變在背景中的位置 引數的表示1.x,y座標表示 2.方位名詞:top,center,bottom,left,right
>
divstyle
>
background-attachment:屬性設定背景影象是否固定或者隨著頁面的其餘部分滾動 1.background-attachment 後期製作視覺滾動效果 2.scroll 背景隨著物件內容滾動 3.fixed 背景影象固定的
接下來,我們將要學習css樣式中的重中之重----盒子模型
每個元素我們都可以想象成乙個盒子,這個盒子有著外邊距(margin),邊框(border),內邊距(padding)和內容(conter),我們可以通過對盒子的內外邊距的控制來實現對元素或者元素內內容的位置的改變
外邊距–margin
外邊距margin可以賦負值,但是外邊距padding不行,我們還可以通過margin: 0px auto來實現元素的居中顯示,還可以單獨的為盒子的一邊進行賦值例如margin-left: 100px,margin-top: 100px,還有另外一種方法,在我們沒有宣告為哪一邊進行賦值的時候,margin會根據值來分別按照順時針順序來為盒子的四個邊賦值margin : 100px;margin : 100px 200px這個的意思為給盒子的上下邊賦值100px,左右邊賦值200px
邊框–border:
我們還可以給邊框一些樣式:
border : 1px(邊框的粗細程度) solid(邊框樣式) red(邊框顏色)
內邊距–padding
盒子內邊距的定義規則和外邊距的定義大致相同,特別一定要注意padding不能夠給負值
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
練習title
>
>
divstyle
>
head
>
>
>
這是盒子的內容div
>
body
>
css背景樣式 列表樣式 盒子模型 浮動
1.對於背景的樣式來說，背景的樣式是重點，background repeat控制背景是否重複 background size控制大小，contain不會失幀但是可能會不完全覆蓋 cover會導致的缺失 百分之百可能會讓失幀 背景定位用background position 2.使用列表樣式注意刪除列...
css 背景 盒子模型 背景大小
背景 background color 背景顏色 十六進製制 rgbrgba a的取值0 1 background image 背景 url 位置 加 會有提示,不加沒有提示 background repeat 背景是否平鋪滿 no repeat 不平鋪滿 repeat x 在x軸平鋪滿 repea...
CSS之盒子模型與背景屬性
盒子模型與背景屬性 一.盒子模型 1.介紹 2.元素的總寬度和總高度 二.自定義邊框 border 1.基本設定 2.邊框寬度 border width 3.邊框顏色 border color 4.邊框樣式 border style 5.css的邊寬和高度 width height 三.背景 bac...