CSS快速學習3 文字 背景等屬性

2021-07-16 22:00:51 字數 2896 閱讀 9525

文字類屬性:

7.水平對齊方式 text-align對塊元素進行標記。

justify對內容以兩端邊界線對齊顯示

8.垂直對齊方式

9.行高

說明:

1)當單行文字的行高等於容器高時,可實現單行文字在容器中垂直方向居中對齊;

2) 當單行文字的行高小於容器高時,可實現單行文字在容器中垂直中齊以上任意位置的定位;

3) 當單行文字的行高大於容器高時,可實現單行文字在容器中垂直中齊以下任意位置的定位。

10.文字修飾:

text-decoration:none/underline/overline/line-through/blink.(高版本瀏覽器不支援blink屬性)

說明:

none:沒有修飾

underline:新增下劃線

overline:新增上劃線

line-through:新增刪除線

blink:閃爍

11.首行縮排:text-indent:數值;

設定第一行的縮排值,負值是向前進(可以直接設定長度,或設定百分比)

說明:

1)text-indent可以取負值,可實現隱藏文字,懸掛縮排。

2)text-indent屬性只對第一行起作用,若第一行不是文字則沒變化。

12.字元間距 控制英文本母和漢字的字距

13.詞間距 控制英文單詞詞距。(通用於英文詞和詞之間的間距)

14.文字流控制(只支援ie瀏覽器)

15.控制文字大小寫

text-transform: none(預設值)/capitalize(每個單詞首字母大寫)/uppercase (都為大寫字母)/lowercase ( 都為小寫字母 )

16.文字陰影 text-shadow

例:text-shadow: 5px 5px 5px #ff0000;

分別表示:水平偏移值,垂直偏移值,模糊的半徑,陰影的顏色)

列表類屬性:

1、定義列表符號樣式:

list-style-type:disc(實心圓)/circle(空心圓)/square(實心方塊)/none(去掉列表符號);

2、使用作為列表符號:

list-style-image:url(所使用的路徑及全稱);

3、定義列表符號的位置:

list-style-position:outside(外邊)/inside(裡邊);

list-style:none;去掉列表樣式;

邊框屬性:

綜合設定: border:3px red solid;

邊框: border:粗細(數值+單位) 顏色 線型(solid/dashed/dotted/double)solid:實線,dashed:虛線,dotted:點狀線,double:雙線;

右邊框:border-right:粗細(數值+單位) 顏色 線型(solid/dashed/dotted/double);

左邊框:border-left:粗細(數值+單位) 顏色 線型(solid/dashed/dotted/double);

上邊框:border-top:粗細(數值+單位) 顏色 線型(solid/dashed/dotted/double);

下邊框:border-bottom:粗細(數值+單位) 顏色 線型(solid/dashed/dotted/double);

背景屬性:

1.背景顏色

語法:選擇符

簡寫:background:color值;

2.背景的設定

語法:background-image:url(背景的路徑及全稱);

說明:

網頁上有兩種形式:插入、背景圖;

插入:屬於網頁內容,也就是結構。

背景圖:屬於網頁的表現,背景圖上可以顯示文字、插入、**等。

3.背景平鋪屬性

語法:選擇符

no-repeat:不平鋪repeat:平鋪repeat-x:橫向平鋪repeat-y :縱向平鋪

4.背景圖的固定

語法:選擇符

說明:

fixed 固定,不隨內容一塊滾動;

scroll 隨內容一塊滾動。

5.背景的位置

語法:background-position:值1 值2;

選擇符

水平方向上的對齊方式(left/center/right)或值

垂直方向上的對齊方式(top/center/bottom)或值

說明:

兩個值 :第乙個值表示水平位置的值, 第二個值表示垂直的位置。

當兩個值都是center的時候寫乙個值就可以代表的是水平位置和垂直位置。

向左方向,向上方向都是負值。

6.background-size: 數值/百分比/auto/cover/contain

說明:

數值:設定背景影象的高度和寬度。

第乙個值設定寬度,第二個值設定高度。

如果只設定乙個值,則第二個值會被設定為 「auto」。

百分比:以父元素的百分比來設定背景影象的寬度和高度。

第乙個值設定寬度,第二個值設定高度。

如果只設定乙個值,則第二個值會被設定為 「auto」。

cover:把背景影象擴充套件至足夠大,以使背景影象完全覆蓋背景區域。

背景影象的某些部分也許無法顯示在背景定位區域中。

contain:把背景影象等比擴充套件至最大尺寸,以使其寬度和高度完全適應內容區域,不一定完全覆蓋住背景區域。

7.背景屬性的縮寫語法:

background:屬性值1 屬性值2 屬性值3;

背景縮寫:

background:#背景色 url(背景的路徑及全稱) no-repeat center top;

CSS3 文字效果屬性型別哪些

1,css3 的文字陰影 css3 中,text shadow屬性適用於文字陰影。您指定了水平陰影,垂直陰影,模糊的距離,以及陰影的顏色 2,css3 box shadow屬性 css3 中 css3 box shadow 屬性適用於盒子陰影 例項div 3,css3 text overflow屬性...

css3文字效果

text shadow 在css3中我們可以給單調的文字加上陰影效果,賦予文字美感 text shadow h shadow v shadow blur color h shadow 必須 水平陰影的位置,允許負值 v shadow 必需 垂直陰影的位置,允許負值 blur 可選 模糊的距離 銳化陰...

css3 文字陰影

text shadow 基本語法 textshadow none length none shadow shadow textshadow none color color length 表示由浮點數字和單位識別符號組成的長度值,可為負值,指定陰影的水平延伸距離 color 表示顏色。陰影位於左上角...