css中的段落樣式及背景

2022-08-28 22:30:25 字數 4101 閱讀 5964

一、段落樣式

css中關於段落的樣式主要有行高,縮排,段落對

齊,文字間距,文字溢位,段落換行等。它們的具體語法如下:

line-height : normal | length

text-indent : length

text-align : left | right | center | justify

letter-spacing : normal | length

text-overflow:clip | ellipsis

word-wrap:normal | break-word

其中行高指的是段落中每一行文字所佔據的高度,其與文字大小有著本質的區別。設定了行高之後,行內的文字會在行內

垂直居中對齊(

父容器不小於行高

),這是網頁布局中常用的一種對齊方式。

例:

p
用該種方式設定文字之後,文字標籤內的第一行內容會與文字的上邊框產生5畫素的間距。

縮排是網文排版中經常用到的一中種樣式,它控制段落的首行縮排。

例:

p
p標籤中的文字首行縮排2個字元長度。

其屬性值也可以是px,pt,

cm等表示長度的單位。

段落對齊

可以將標籤內的文字採用特有的方式對其,其屬性值分別表示的是向左對齊,向右對齊,居中對齊以及兩端對齊。其中居中對齊

在網頁中

布局中經常用到,而兩端對齊(justify )則大多用於外文**中

對文章進行排版。例:

p
p中的文字將處於中間部位。

letter-spacing和

word-wrap

分別表示文字間距和文字換行,不經常使用。

letter-spacing

所設的值通常指的是文字的水平間距,至於垂直間距,我們可以使用

line-height

來設定調整。

word-wrap

的兩個屬性值表示的是在邊界處是否斷行,

normal

不斷行,即可以溢位。而

break-word

則使內容將在邊界內換行。如果需要,單詞內部允許斷行。

text-overflow只是用來說明文字溢位時用什麼方式顯示,要實現溢位時產生省略號的效果(

ellipsis

),還須定義強制文字在一行內顯示(

white-space:nowrap

)及溢位內容為隱藏(

overflow:hidden

),只有這樣才能實現溢位文字顯示省略號的效果。

例:

div,input
二、背景

確定背景的樣式有顏色,,平鋪方式,定位等。

1背景顏色

設定標籤的背景顏色通常使用到background-color : transparent | color

其中第乙個值表示的是背景透明,第二個值則是一種顏色的表現方式。顏色的三種表現方式依次為英文本母,#後接6位十六進製制數,rgb()或rgba()。

例:

div

divdiv

div

這四種表現方式都產生同樣的紅色背景。

2.背景

background-image : none | url ( url )

使用背景可以將文字外的作為特定標籤的背景,其值為背景相對於網頁檔案的路徑或絕對路徑(網上的)。

例:

body
同時背景也可以是自定義的物件,css3中新增了線性漸變和徑向漸變,這裡我們了解一下線性漸變。

例:

background-image:linear-gradient(to left, red 30%,blue);
上面的例子為元素設定了乙個右邊0~30%的寬度為紅色,之後為從紅色到藍色的漸變。從子中可以看出線性漸變有三個值依次用逗號隔開,它們分別指的是漸變方向,起始點顏色和終點顏色。其中在顏色後可接空格加上百分比,表示該顏色在整個物件中所佔的比例,隨後才開始發生漸變。

對於第乙個屬性值,除了使用英文表示其漸變的方向外也可以用數字加deg(角度)來表示,其是以正上方為0deg,角度值按順時針方向依次增大。該值所描述的點為漸變的終點,其起點位置則處於該點按順時針旋轉的180deg方向元素的邊框上。

例:

background-image:linear-gradient(270deg, red 30%,blue);
它的顯現效果與上面的一致。

3.平鋪方式

background-repeat : repeat | no-repeat | repeat-x | repeat-y;
背景的平鋪方式一般用於背景是以的方式呈現的情況下,其值分別表示的是鋪滿、不平鋪、沿x軸方向平鋪和沿y軸方向平鋪。

例:

body /*背景或其他物件水平方向平鋪*/
4.背景定位

background-position : 左對齊方式  上對齊方式

背景定位表示的是所設定的背景物件相對於目標元素的位置,其兩個值分別表示水平方向和垂直方向上座標,可以用英文表示,也可以用百分比,畫素表示。

例:

body 

body

5.背景原點

background-origin :

border-box | padding-box | content-box;

該屬性設定元素背景的原始起始位置,在設定該屬性時,必須保證背景的background-repeat為

no-repeat

,此屬性才會生效。所謂的原始起始位置其實也可以理解為背景的定位,只是它規定的三個屬性值使得這個定位只能規定在元素的邊框,內邊距,內容區上。如下圖所示:

6.背景顯示區

background-clip : border-box | padding-box | content-box | text
設定了背景影象向外裁剪的區域。即在元素內部所能看到的背景,其顯示結果如下:

7.背景尺寸

很多情況下,我們所設定的背景並不與元素的尺寸所匹配,這時,我們要麼只能看到背景的一部分,要麼會在元素內看到大量的空白背景,這與我們的預期不相符。未達到效果,我們便要對背景的尺寸進行設定,其語法如下:

background-size:寬度值 高度值

對於其屬性值的取值,我們有以下五種取值方式:

auto      預設值,不改變背景的原始高度和寬度。

長度值    成對出現如200px 50px,將背景寬高依次設定為前面兩個值,當設定乙個值時,將其作為寬度值來等比縮放。

百分比    0%~100%之間的任何值,將背景寬高依次設定為所在元素寬高乘以前面百分比得出的數值,當設定乙個值時同上。

cover     可選。陰影的尺顧名思義為覆蓋,即將背景等比縮放以填滿整個容器寸。

contain  可選。陰影的顏色。請參閱 css 顏容納,即將背景等比縮放至某一邊緊貼容器邊緣為止色值。

通過對上面取值方式的了解,我們可以很方便將背景設定成我們想要的樣子。

例:

div
通過上面的設定,我們便將背景的尺寸設定成了完全填充元素的樣式。

了解了以上七種背景樣式的設定之後,我們可以在實際**操作中進行簡寫,其格式如下:

background: 背景色  背景  背景平鋪方式  背景定位

使用這種方式我們可以大大減少**量的書寫。

例:

body
進行縮寫後則只有一行**

body
background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

我們只需要用逗號隔開每組 background 的縮寫值,其中要注意的是:

1.如果有 size 值,需要緊跟 position 並且用 "/" 隔開;

2.如果有多個背景,而其他屬性只有乙個(例如 background-repeat 只有乙個),表明所有背景應用該屬性值。

3.background-color 只能設定乙個。

css背景樣式css背景樣式

css背景樣式 css背景樣式 序號中文說明 標記語法 1背景顏色2背景 3背景重複 4背景固定 5背景定位 6背影樣式 1 背景顏色 background color 語法 說明 引數取值和顏色屬性一樣 注意 在 html當中,要為某個物件加上背景色只有一種辦法,那就是先做乙個 在 中設定完背景色...

CSS 背景樣式

目錄 背景色 background color 背景影象 background image 背景重複 平鋪 background repeat 背景定位 background position 關鍵字百分數值 長度值 背景關聯 background attachment div注 定義沒有先後之分。...

css 背景樣式

樣式屬性 樣式名描述 background color 設定背景顏色 background image 設定背景 background repeat 設定背景重複 background position 設定背景影象定位 background attachment 設定背景影象滾動 backgrou...