CSS樣式基本操作

2021-08-20 05:14:08 字數 1295 閱讀 6109

1、純色背景

css 允許應用純色作為背景,也允許使用背景影象建立相當複雜的效果。

這是段落

這個段落設定了內邊距。

可以為所有元素設定背景色,這包括 body 一直到 em 和 a 等行內元素。

background-color 不能繼承,其預設值是 transparent。transparent 有「透明」之意。也就是說,如果乙個元素沒有指定背景色,那麼背景就是透明的,這樣其祖先元素的背景才能可見。

2、影象背景

要把影象放入背景,需要使用 background-image 屬性。background-image 屬性的預設值是 none,表示背景上沒有放置任何影象。

如果需要設定乙個背景影象,必須為這個屬性設定乙個 url 值:

如果需要在頁面上對背景影象進行平鋪,可以使用 background-repeat 屬性。

屬性值 repeat 導致影象在水平垂直方向上都平鋪,就像以往背景影象的通常做法一樣。repeat-x 和 repeat-y 分別導致影象只在水平或垂直方向上重複,no-repeat 則不允許影象在任何方向上平鋪。

可以利用 background-position 屬性改變影象在背景中的位置。

下面的例子在 body 元素中將乙個背景影象居中放置:

body

如果文件比較長,那麼當文件向下滾動時,背景影象也會隨之滾動。當文件滾動到超過影象的位置時,影象就會消失。

可以通過 background-attachment 屬性防止這種滾動。通過這個屬性,可以宣告影象相對於可視區是固定的(fixed),因此不會受到滾動的影響

屬性描述

background

簡寫屬性,作用是將背景屬性設定在乙個宣告中。

background-attachment

背景影象是否固定或者隨著頁面的其餘部分滾動。

background-color

設定元素的背景顏色。

background-image

把影象設定為背景。

background-position

設定背景影象的起始位置。

background-repeat

設定背景影象是否及如何重複。

CSS 基本樣式

css 樣式 style 顏色相關樣式 backgroud color 寫法類似於color backgroud image url 位址 backgroud repeat repeat no repeat repeat x repeat ymargin 外間距 border 邊框 padding ...

CSS基本樣式

標籤選擇器 類選擇器 id選擇器 id具有唯一性 優先順序 id 類 id 字型型別 font family 字型大小 font size 字型風格 font style italic 斜體 字型粗細 font weight 定義粗體字元,範圍是100 900 文字顏色 color 水平對齊方式 t...

css樣式設計 基本樣式

盒子陰影 box shadow 盒子陰影 水平方向上陰影偏移量 垂直方向上陰影偏移量 模糊的程度 正值 陰影的外延伸 數值正負皆可 陰影的顏色 inset box shadow 0px 0px 10px red inset 顏色 表示顏色的方式 顏色名,英文 rgb red green blue 0...