資源簡(jiǎn)介

(共16張PPT)
10
CSS的屬性
CSS的屬性
字體樣式
控制圖文布局
背景顏色與圖像
超鏈接
字體屬性
Font-family
語(yǔ)法格式如下:
font- family:<字體1>,<字體2>…,<字體n>
字體風(fēng)格
Font-style
語(yǔ)法格式如下:
font- style:normal|italic|oblique
分別表示正常、斜體、傾斜顯示
字體變形
Font-variant
語(yǔ)法格式如下:
font- variant：normal|small-caps
字體加粗
Font-weight
語(yǔ)法格式如下:
font- weight：normal/bold/bolder/lighter/100~900
字體樣式
CSS的屬性
字體顏色
color
語(yǔ)法格式如下:
color：#******或者color
字體大小
Font-size
語(yǔ)法格式如下:
font- size：絕對(duì)尺寸、關(guān)鍵字、相對(duì)尺寸、比列尺寸
絕對(duì)尺寸單位有：ex/in/cm/mm/pt/px
字符大小寫(xiě)
Font-transform
語(yǔ)法格式如下:
Font-transform：uppercase/lowercase/capitalize/none
文本修飾
text-decoration
語(yǔ)法格式如下:
text-decoration：underline/overline/line-through/blink/none
字體樣式
控制圖文布局
背景顏色與圖像
超鏈接
字體樣式
D
04
字體屬性font
語(yǔ)法：font:font-style |font-weight |font-variant|font-size| font-family
屬性與屬性之間用空格分隔，
使用font屬性必須有字體和字號(hào)兩個(gè)屬性，順序最好不變，可以有缺省屬性，不然font屬性不能使用。
CSS的屬性
功能:font屬性可以同時(shí)設(shè)置與文字有關(guān)的屬性，比如字體、字號(hào)等
CSS的屬性
字體樣式
控制圖文布局
背景顏色與圖像
超鏈接
字符間距
Word-spacing
Letter-spacing
語(yǔ)法格式如下:
Word-spacing:normal|長(zhǎng)度單位
Letter-spacing ：normal|長(zhǎng)度單位
分別表示單詞間距和字母間距
設(shè)置行距
Line-height
語(yǔ)法格式如下:
line-height：normal|數(shù)字|長(zhǎng)度單位|比列
文本對(duì)齊
Text-align
vertical-align
語(yǔ)法格式如下:
Text-align：left|center|right
Text-valign:
首行縮進(jìn)
text-indent
語(yǔ)法格式如下:
text-indent：數(shù)字|百分比
圖文布局
CSS的屬性
字體樣式
控制圖文布局
背景顏色與圖像
超鏈接
鏈接文字
A:link
語(yǔ)法格式如下:
a:link{ }
已鏈接文字
語(yǔ)法格式如下:
a:visited{ }
表示已單擊超鏈接后文字的樣式
單擊超鏈接
語(yǔ)法格式如下:
a:active{ } 表示鼠標(biāo)單擊超鏈接時(shí)文字樣式
鼠標(biāo)移動(dòng)到超鏈接文字上
語(yǔ)法格式如下:
a:hover{ }表示鼠標(biāo)移動(dòng)到超鏈接文字上是文字的樣式
超鏈接
A{ }表示超鏈接的樣式
注意：設(shè)置超鏈接樣式時(shí)。這四個(gè)屬性的前后位置不能發(fā)生變化。否則有些樣式無(wú)法正常顯示
01
03
02
背景顏色屬性
保留文字的格式和動(dòng)畫(huà)效果不變，請(qǐng)不要?jiǎng)h除文本框，直接把文本框中的文字替換即可。
字體樣式
控制圖文布局
背景顏色與圖像
超鏈接
02
背景圖像屬性
語(yǔ)法格式如下:
background-color:顏色
語(yǔ)法格式如下:
background-image:url(url路徑）|none
03
02
語(yǔ)法格式如下:
list-style-img:url(url路徑）|none
項(xiàng)目符號(hào)屬性
03
CSS的屬性
01
03
04
背景重復(fù)屬性
Background-repeat:no-repeat|repeat-x|repeat-y|repeat
背景圖像的位置
Background-position:top(center/bottom)|left(center/right)
固定背景圖像
Background-attachment:scroll|fixed
字體樣式
控制圖文布局
背景顏色與圖像
超鏈接
CSS的屬性
CSS的屬性
4
Html標(biāo)簽中的盒子原理
元素內(nèi)容（可以是文本，圖片，表格，div塊等元素）
寬度為300像素，高度自適應(yīng)
元素內(nèi)容（可以是文本，圖片，表格，div塊等元素）
寬度為200像素，高度自適應(yīng)
15px
15px
5px
15px
15px
15px
2px
15px
5px
Id=box
Id=right
Id=left
border
padding
margin
CSS的屬性
4
Css中的盒子原理
元素內(nèi)容（可以是文本，圖片，表格，div塊等元素）
寬度為300像素，高度自適應(yīng)
元素內(nèi)容（可以是文本，圖片，表格，div塊等元素）
寬度為200像素，高度自適應(yīng)
15px
15px
5px
15px
15px
15px
2px
15px
5px
Id=box
Id=right
Id=left
語(yǔ)法規(guī)則：border-width:thin|medium|thick|長(zhǎng)度單位
Border-（top,right,bottom,left）-width
語(yǔ)法規(guī)則：margin-（上，右，下，左）：長(zhǎng)度|百分比|auto
邊框?qū)挾?br/>語(yǔ)法：border-color
邊框邊界的設(shè)置
邊框顏色
CSS的屬性
4
邊框的設(shè)置
語(yǔ)法規(guī)則：padding-(top,right,bottom,left):長(zhǎng)度或者百分比
語(yǔ)法規(guī)則：border:邊框?qū)挾?邊框樣式 邊框顏色(順序保持一致）
其中邊框樣式必須設(shè)置，其他兩項(xiàng)可任選
Border-top/border-right/border-bittom/border-left
內(nèi)邊界：padding
語(yǔ)法：border-style：none|solid|double|dotted|dashed|groove|ridge|inset|outset
邊框?qū)傩詁order
邊框樣式
CSS的屬性
CSS的屬性
背景圖像+文字
圖像780*200
左側(cè)內(nèi)容總寬度大概為200px
左側(cè)內(nèi)容總寬度剩余寬度
Foot部分
導(dǎo)航條4-5個(gè)高度50px
CSS的屬性
謝謝您的聆聽(tīng)

展開(kāi)更多......

收起↑