CSS3美化網頁文字

2021-08-20 19:05:35 字數 3109 閱讀 1847

概述:

1,字型樣式

網頁字型樣式包括字型型別,大小,顏色等基本效果,另外還包括一些特殊的樣式,如字型粗細,下劃線,斜體,大小等

1.1 定義字型型別

css使用font-family屬性來定義字型型別,另外使用font屬性也可以定義字型型別。font-family是字型專用型別專用屬性,用法如下:

font-family:name

font-famile:ncursive|fantasy|monospace|serif|sans-serif

font是乙個復合屬性,可以設定的字型屬性如下:

font:font-style || font-variant||font-weight||font-size||line-height||font=family

font:caption|icon|menu|message-box|small-caption|status-bar

css提供了5類通用字型。所謂通用字型就是一種備用機制,即指定的所有字型都不可用時,能夠在使用者系統中找到乙個類似字型進行替代顯示。這五類通用字型說明如下。

1.2 定義字型大小

1.3 定義字型顏色

1.4 定義字型粗細

font-weight

1.5 定義斜體

1.6 定義下劃線

2,文字樣式

字型樣式只要涉及字元本身的顯示效果,而文字樣式主要涉及多個字元的排版效果。css在命名屬性時,使用font字首和text字首來區分字型和文字屬性。

2.1 定義文字對齊

css使用text-align屬性來定義文字的對齊方式,該屬性的用法如下。

text-align:left:right:center:justify
小白菜向左偏移

小白菜向右偏移

小白菜居中顯示

2.2 定義垂直對齊

vertical-align:auto | baseline | sub | super | top | text-top | middle | bottom |text-bottom | length

取值簡單說明如下:

2.3 定義字距和詞距

字距:letter-spacing    詞距:word-spacing

2.4 定義行高

line-height : normal | length

2.5 定義縮排

text-indent:length

3,css3新增文字樣式

3.1 定義文字陰影

text-shadow中引數的屬性:第乙個 水平位移,第二個 垂直位移,第三個 模糊半徑  第4個 陰影顏色

3.2 設計陰影特效

1,通過陰影增加前景色與背景色的對比度

2,定義多色陰影

3,定義火焰文字

3.3 定義溢位文字

css新增了text-overflow屬性,該屬性可用設定超長文字省略顯示。text-overflow屬性的基本語法如下:

text-overflow:clip | ellipsis | ellipsis-word;
3.4 文字換行

word-break

3.5 新增動態內容

content

3.6 恢復預設樣式

initial ,可以取消對某個元素的樣式繫結

hahahahaha

haihdiha

CSS3美化網頁元素

一.span標籤 能讓某幾個文字或者某個詞語凸顯出來 今天是11月份的第一天,地鐵卡不打折了 二.字型風格 font family 字型型別 font size 字型大小 font style 字型風格 font weight 字型粗細 font 風格 粗細 大小 型別 三.文字樣式 color 設...

CSS3邊框美化

1.邊框圓角border radius 單個寫法 border top left radius 水平半徑 垂直半徑 border top left radius 60px 120px border top right radius 60px 120px border bottom right rad...

CSS3美化背景與邊框

background color屬性用於設定網頁背景顏色,background color屬性接受任何任何有效的顏色值,預設背景顏色為透明 transparent 語法格式如下 background image none url url 屬性值 描述repeat 背景水平和垂直方向都重複平鋪 rep...